local-operator-ui 0.12.6 → 0.12.7

package/out/renderer/assets/{index-Bq43-Afm.js → index-MaDq9HTX.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-BOEHLAOZ.js","./fonts-DqkQ6BY5.js","./fonts-CM-VN_uu.css","./index-CIm5Gpeu.js","./pug-By0kVCfm.js","./javascript-C3MnDRiU.js","./dagre-OKDRZEBW-uJDV0tEB.js","./graph-_Hab34Nn.js","./_baseUniq-CT1VRxf8.js","./layout-BlsQazV2.js","./_basePickBy-CV2bZNyc.js","./clone-tf2h75F9.js","./c4Diagram-VJAJSXHY-DnUBXdyl.js","./chunk-D6G4REZN-xxtdtOvH.js","./flowDiagram-4HSFHLVR-CjBlaiPH.js","./chunk-RZ5BOZE2-DZzd7XF-.js","./channel-D5pw1lrZ.js","./erDiagram-Q7BY3M3F-D66PtkGh.js","./gitGraphDiagram-7IBYFJ6S-BC17Lxhk.js","./chunk-4BMEZGHF-C1IeWpO1.js","./chunk-XZIHB7SX-D47Ag_yH.js","./radar-MK3ICKWK-hFlyH6N6.js","./ganttDiagram-APWFNJXF-CifvAN8h.js","./infoDiagram-PH2N3AL5-Dsj1auFt.js","./pieDiagram-IB7DONF6-CZvzTYvc.js","./arc-BRfzIVaB.js","./quadrantDiagram-7GDLP6J5-CJSNfyeY.js","./xychartDiagram-VJFVF3MP-Jn_L_tBu.js","./requirementDiagram-KVF5MWMF-BzJ8TKJn.js","./sequenceDiagram-X6HHIX6F-QlZcg6un.js","./classDiagram-GIVACNV2-BTb1dsm_.js","./chunk-A2AXSNBT-DItzEHfB.js","./classDiagram-v2-COTLJTTW-BTb1dsm_.js","./stateDiagram-DGXRK772-lkNrTERo.js","./chunk-AEK57VVT-CPn79hs1.js","./stateDiagram-v2-YXO3MK2T-Cnlxf-OJ.js","./journeyDiagram-U35MCT3I-CBWci7yb.js","./timeline-definition-BDJGKUSR-ClHwwcwA.js","./mindmap-definition-ALO5MXBD-e-VrUTAA.js","./cytoscape.esm-C0AOj4uS.js","./kanban-definition-NDS4AKOZ-BrBwgyJQ.js","./sankeyDiagram-QLVOVGJD-C1MZHoLs.js","./diagram-VNBRO52H-CCeijHj7.js","./diagram-SSKATNLV-BxlaHBtJ.js","./blockDiagram-JOT3LUYC-CKjlYfeC.js","./architectureDiagram-IEHRJDOE-BE1k5yn0.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-BDLsFoJv.js","./fonts-DqkQ6BY5.js","./fonts-CM-VN_uu.css","./index-vAasWWpO.js","./pug-By0kVCfm.js","./javascript-C3MnDRiU.js","./dagre-OKDRZEBW-BMuSMCUF.js","./graph-DL-34vhw.js","./_baseUniq-JxZZknyU.js","./layout-BrQGvDtH.js","./_basePickBy-Xni00Dlk.js","./clone-3XFGex6Y.js","./c4Diagram-VJAJSXHY-cTGz3ymz.js","./chunk-D6G4REZN-C7msyVje.js","./flowDiagram-4HSFHLVR-_Arrrk_3.js","./chunk-RZ5BOZE2-CWvJQJJl.js","./channel-CsQk5gsI.js","./erDiagram-Q7BY3M3F-BFd2rLsa.js","./gitGraphDiagram-7IBYFJ6S-BlkO8Bzg.js","./chunk-4BMEZGHF-DjpLWrPj.js","./chunk-XZIHB7SX-C-gdVJBt.js","./radar-MK3ICKWK-DwsnroMG.js","./ganttDiagram-APWFNJXF-Dzw68AV_.js","./infoDiagram-PH2N3AL5-DO4pqvW_.js","./pieDiagram-IB7DONF6-DKT0Bk2S.js","./arc-BPRFPuHz.js","./quadrantDiagram-7GDLP6J5-CFMDiFFE.js","./xychartDiagram-VJFVF3MP-Bbr5uqsp.js","./requirementDiagram-KVF5MWMF-DPTaldQZ.js","./sequenceDiagram-X6HHIX6F-Chi1Y6mU.js","./classDiagram-GIVACNV2-BcRnaMRd.js","./chunk-A2AXSNBT-Blza621e.js","./classDiagram-v2-COTLJTTW-BcRnaMRd.js","./stateDiagram-DGXRK772-DcmhTUVK.js","./chunk-AEK57VVT-ZmlsDCZe.js","./stateDiagram-v2-YXO3MK2T-Dy-oRm-T.js","./journeyDiagram-U35MCT3I-BJQ-FRal.js","./timeline-definition-BDJGKUSR-0y2wZWef.js","./mindmap-definition-ALO5MXBD-B5SNv6RZ.js","./cytoscape.esm-C0AOj4uS.js","./kanban-definition-NDS4AKOZ-B1zGbozL.js","./sankeyDiagram-QLVOVGJD-DIFNjSQ_.js","./diagram-VNBRO52H-q41sVUvc.js","./diagram-SSKATNLV-BCxxN7T6.js","./blockDiagram-JOT3LUYC-BW-Yo0Fe.js","./architectureDiagram-IEHRJDOE-iKnn0iSS.js"])))=>i.map(i=>d[i]);
 import { i as createStyled, l as resolveProps, m as useTheme, n as useTheme$1, r as reactExports, o as React, p as useEnhancedEffect$1, q as clsx, t as useForkRef$1, v as extendSxProp, j as jsxRuntimeExports, w as handleBreakpoints, x as resolveBreakpointValues, y as createUnarySpacing, z as deepmerge, A as mergeBreakpointsInOrder, F as composeClasses$1, G as generateUtilityClass$1, I as createTheme$1, J as getValue$1, h as React$1, K as requireReactDom, g as getDefaultExportFromCjs, L as defaultTheme$2, M as THEME_ID, N as generateUtilityClasses$1, O as useDefaultProps, s as styled$1, P as capitalize$1, Q as memoTheme, _ as _inheritsLoose, S as _objectWithoutPropertiesLoose$k, U as TransitionGroupContext, V as _extends$w, W as duration, u as useTheme$2, X as useTimeout$1, Y as useId$1, Z as ButtonBase, b as alpha$1, $ as createSimplePaletteValueFilter, a0 as CircularProgress, a1 as Paper, a2 as darken$1, a3 as lighten$1, a4 as useEventCallback$1, a5 as useRtl, a6 as globalCss, a7 as formatMuiErrorMessage$1, a8 as rootShouldForwardProp, T as Typography, a9 as css$1, k as keyframes, aa as getPath$2, ab as isFocusVisible, ac as typographyClasses, ad as slotShouldForwardProp, ae as clamp$1, af as emphasize, ag as Timeout$1, c as createLucideIcon, a as Button, B as Box, ah as FontAwesomeIcon, ai as faExclamationTriangle, D as DEFAULT_THEME, aj as faChevronLeft, ak as faChevronRight, al as faRobot, am as faCheck, an as faTimes, ao as faEraser, ap as faPen, aq as faFileImport, ar as faUpload, as as GlobalStyles, at as requireReact, au as faComment, av as faSave, aw as faEdit, ax as faTrashAlt, ay as faInfoCircle, az as faGear, aA as faPlus, aB as faServer, aC as faStar, aD as faTag, aE as faIdCard, aF as faCalendarAlt, aG as faCodeBranch, aH as faShieldAlt, aI as faArrowLeft, aJ as faClock, C as Code, aK as faHome, aL as faDownload, aM as faFileAlt, aN as faDesktop, aO as faImage, aP as faMusic, aQ as faVideo, aR as faLaptop, aS as faUsers, aT as faDatabase, aU as faBoxOpen, aV as faBook, aW as faHdd, aX as faBox, aY as faArchive, aZ as faNetworkWired, a_ as faFolder, a$ as faFolderOpen, b0 as faFolderTree, b1 as faFile, b2 as faCode, b3 as faSliders, b4 as faTrash, b5 as faArrowDown, b6 as faPaperclip, b7 as faPaperPlane, b8 as faExclamationCircle, b9 as faChevronDown, ba as isDevelopmentMode, bb as faCommentSlash, bc as faArrowRight, bd as faBrain, be as faWandMagicSparkles, bf as faExternalLinkAlt, bg as faKey, bh as radientTheme, bi as faGlobe, bj as faSearch, bk as PropTypes, bl as shouldForwardProp, bm as TransitionGroup, bn as commonjsGlobal, bo as faLock, bp as faPuzzlePiece, H as HardDrive, bq as faSignOut, br as themes$1, bs as faMoon, bt as faSun, bu as faHexagonNodes, bv as faSkull, bw as faLeaf, bx as faMountain, by as faFire, bz as faIcicles, bA as faBolt, bB as faAdjust, bC as faWaveSquare, bD as faUser, bE as faEnvelope, bF as faHistory, bG as faListAlt, bH as faCreditCard, bI as faPlusCircle, bJ as faChartLine, bK as faShield, bL as library$1, bM as icons$1, f as CssBaseline, e as ThemeProvider$1, d as getTheme, R as ReactDOM$1, E as ErrorBoundary } from "./fonts-DqkQ6BY5.js";
 const styled = createStyled();
 function getThemeProps(params) {
@@ -35738,12 +35738,13 @@ const useAgents = (page = 1, perPage = 50, refetchInterval = 0, name2, sort, dir
         throw error;
       }
     },
-    // Prevent automatic refetches on window focus
-    refetchOnWindowFocus: true,
+    // Avoid eager focus-based refetches to reduce sidebar churn.
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
     // Set refetch interval if provided
     refetchInterval,
-    // Prevent stale time to avoid unnecessary refetches
-    staleTime: 5e3
+    placeholderData: (previousData) => previousData,
+    staleTime: 30 * 1e3
   });
 };
 const useAgent = (agentId) => {
@@ -35777,7 +35778,10 @@ const useAgent = (agentId) => {
         }
         throw error;
       }
-    }
+    },
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    staleTime: 30 * 1e3
   });
 };
 const useCreateAgent = () => {
@@ -39220,6 +39224,28 @@ const useCheckFirstTimeUser = () => {
     resetOnboarding
   };
 };
+const areStringArraysEqual = (a2, b2) => {
+  if (a2 === b2) return true;
+  if (!a2 || !b2) return !a2 && !b2;
+  if (a2.length !== b2.length) return false;
+  return a2.every((value, index2) => value === b2[index2]);
+};
+const areMessagesEqual = (current, next2) => {
+  const currentTimestamp = current.timestamp instanceof Date ? current.timestamp.getTime() : new Date(current.timestamp).getTime();
+  const nextTimestamp = next2.timestamp instanceof Date ? next2.timestamp.getTime() : new Date(next2.timestamp).getTime();
+  return current.id === next2.id && current.role === next2.role && currentTimestamp === nextTimestamp && current.message === next2.message && current.code === next2.code && current.stdout === next2.stdout && current.stderr === next2.stderr && current.logging === next2.logging && current.formatted_print === next2.formatted_print && current.status === next2.status && current.task_classification === next2.task_classification && current.action === next2.action && current.execution_type === next2.execution_type && current.is_streamable === next2.is_streamable && current.is_complete === next2.is_complete && current.conversation_id === next2.conversation_id && current.content === next2.content && current.file_path === next2.file_path && current.replacements === next2.replacements && current.agent === next2.agent && current.learnings === next2.learnings && current.thinking === next2.thinking && areStringArraysEqual(current.files, next2.files);
+};
+const getMessageTimestamp = (message2) => {
+  return message2.timestamp instanceof Date ? message2.timestamp.getTime() : new Date(message2.timestamp).getTime();
+};
+const isSortedByTimestamp = (messages) => {
+  for (let index2 = 1; index2 < messages.length; index2 += 1) {
+    if (getMessageTimestamp(messages[index2 - 1]) > getMessageTimestamp(messages[index2])) {
+      return false;
+    }
+  }
+  return true;
+};
 const useChatStore = create$6((set2, get2) => ({
   messagesByConversation: {},
   paginationByConversation: {},
@@ -39234,16 +39260,22 @@ const useChatStore = create$6((set2, get2) => ({
       if (uniqueNewMessages.length === 0) {
         return state2;
       }
-      const allMessages = prepend ? [...uniqueNewMessages, ...existingMessages] : [...existingMessages, ...uniqueNewMessages];
-      const sortedMessages = [...allMessages].sort((a2, b2) => {
-        const timeA = a2.timestamp instanceof Date ? a2.timestamp.getTime() : new Date(a2.timestamp).getTime();
-        const timeB = b2.timestamp instanceof Date ? b2.timestamp.getTime() : new Date(b2.timestamp).getTime();
-        return timeA - timeB;
-      });
+      const sortedNewMessages = isSortedByTimestamp(uniqueNewMessages) ? uniqueNewMessages : [...uniqueNewMessages].sort(
+        (a2, b2) => getMessageTimestamp(a2) - getMessageTimestamp(b2)
+      );
+      let mergedMessages = prepend ? [...sortedNewMessages, ...existingMessages] : [...existingMessages, ...sortedNewMessages];
+      const canSkipGlobalSort = existingMessages.length === 0 || (prepend ? getMessageTimestamp(
+        sortedNewMessages[sortedNewMessages.length - 1]
+      ) <= getMessageTimestamp(existingMessages[0]) : getMessageTimestamp(sortedNewMessages[0]) >= getMessageTimestamp(existingMessages[existingMessages.length - 1]));
+      if (!canSkipGlobalSort) {
+        mergedMessages = [...mergedMessages].sort(
+          (a2, b2) => getMessageTimestamp(a2) - getMessageTimestamp(b2)
+        );
+      }
       return {
         messagesByConversation: {
           ...state2.messagesByConversation,
-          [conversationId]: sortedMessages
+          [conversationId]: mergedMessages
         },
         lastUpdated: Date.now()
       };
@@ -39251,11 +39283,25 @@ const useChatStore = create$6((set2, get2) => ({
   },
   setMessages: (conversationId, messages) => {
     set2((state2) => {
-      const sortedMessages = [...messages].sort((a2, b2) => {
-        const timeA = a2.timestamp instanceof Date ? a2.timestamp.getTime() : new Date(a2.timestamp).getTime();
-        const timeB = b2.timestamp instanceof Date ? b2.timestamp.getTime() : new Date(b2.timestamp).getTime();
-        return timeA - timeB;
-      });
+      const sortedMessages = isSortedByTimestamp(messages) ? messages : [...messages].sort(
+        (a2, b2) => getMessageTimestamp(a2) - getMessageTimestamp(b2)
+      );
+      const existingMessages = state2.messagesByConversation[conversationId] || [];
+      if (existingMessages.length === sortedMessages.length) {
+        let hasChanges = false;
+        for (let messageIndex = 0; messageIndex < existingMessages.length; messageIndex += 1) {
+          if (!areMessagesEqual(
+            existingMessages[messageIndex],
+            sortedMessages[messageIndex]
+          )) {
+            hasChanges = true;
+            break;
+          }
+        }
+        if (!hasChanges) {
+          return state2;
+        }
+      }
       return {
         messagesByConversation: {
           ...state2.messagesByConversation,
@@ -39286,6 +39332,9 @@ const useChatStore = create$6((set2, get2) => ({
       const existingMessages = state2.messagesByConversation[conversationId] || [];
       const updatedMessages = existingMessages.map((msg) => {
         if (msg.id === message2.id) {
+          if (areMessagesEqual(msg, message2)) {
+            return msg;
+          }
           updated = true;
           return message2;
         }
@@ -39325,6 +39374,9 @@ const useChatStore = create$6((set2, get2) => ({
         totalPages: 1,
         hasMore: false
       };
+      if (existingPagination.currentPage === page && existingPagination.totalPages === totalPages && existingPagination.hasMore === hasMore) {
+        return state2;
+      }
       return {
         paginationByConversation: {
           ...state2.paginationByConversation,
@@ -39353,6 +39405,9 @@ const useChatStore = create$6((set2, get2) => ({
         totalPages: 1,
         hasMore: false
       };
+      if (existingPagination.scrollPosition === scrollPosition) {
+        return state2;
+      }
       return {
         paginationByConversation: {
           ...state2.paginationByConversation,
@@ -39467,6 +39522,12 @@ const useClearAgentConversation = () => {
   });
 };
 const conversationMessagesQueryKey = ["conversation-messages"];
+const EMPTY_MESSAGES = [];
+const DEFAULT_PAGINATION = {
+  currentPage: 1,
+  totalPages: 1,
+  hasMore: false
+};
 const convertToMessage = (record, conversationId) => {
   const role = record.role === "user" || record.role === "human" ? "user" : "assistant";
   return {
@@ -39502,17 +39563,28 @@ const useConversationMessages = (conversationId, pageSize2 = 20) => {
   const scrollPositionBeforeLoadRef = reactExports.useRef(0);
   const scrollTimeoutRef = reactExports.useRef(null);
   const lastScrollPositionRef = reactExports.useRef(0);
-  const {
-    getMessages,
-    addMessages,
-    setMessages,
-    lastUpdated,
-    updatePagination,
-    getPagination,
-    updateScrollPosition,
-    getScrollPosition
-  } = useChatStore();
+  const processedPagesRef = reactExports.useRef(/* @__PURE__ */ new Map());
+  const processedConversationIdRef = reactExports.useRef(conversationId);
+  const addMessages = useChatStore((state2) => state2.addMessages);
+  const setMessages = useChatStore((state2) => state2.setMessages);
+  const updatePagination = useChatStore((state2) => state2.updatePagination);
+  const getPagination = useChatStore((state2) => state2.getPagination);
+  const updateScrollPosition = useChatStore(
+    (state2) => state2.updateScrollPosition
+  );
+  const getScrollPosition = useChatStore((state2) => state2.getScrollPosition);
+  const getMessages = useChatStore((state2) => state2.getMessages);
+  const messages = useChatStore(
+    (state2) => conversationId ? state2.messagesByConversation[conversationId] || EMPTY_MESSAGES : EMPTY_MESSAGES
+  );
+  const pagination = useChatStore(
+    (state2) => conversationId ? state2.paginationByConversation[conversationId] || DEFAULT_PAGINATION : DEFAULT_PAGINATION
+  );
   const { shouldEnableQuery, getConnectivityError } = useConnectivityGate();
+  const client2 = reactExports.useMemo(
+    () => createLocalOperatorClient(apiConfig.baseUrl),
+    []
+  );
   const connectivityError = getConnectivityError();
   reactExports.useEffect(() => {
     if (connectivityError) {
@@ -39535,8 +39607,9 @@ const useConversationMessages = (conversationId, pageSize2 = 20) => {
     // Only enable the query if server is online (bypass internet check)
     enabled: shouldEnableQuery({ bypassInternetCheck: true }) && !!conversationId,
     queryKey: [...conversationMessagesQueryKey, conversationId],
-    // Set stale time to 0 to ensure refetch always gets fresh data
-    staleTime: 0,
+    staleTime: 15 * 1e3,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
     queryFn: async ({ pageParam }) => {
       try {
         if (!conversationId) {
@@ -39548,7 +39621,6 @@ const useConversationMessages = (conversationId, pageSize2 = 20) => {
           };
         }
         const page = pageParam;
-        const client2 = createLocalOperatorClient(apiConfig.baseUrl);
         const response = await client2.agents.getAgentExecutionHistory(
           conversationId,
           page,
@@ -39682,7 +39754,21 @@ const useConversationMessages = (conversationId, pageSize2 = 20) => {
   }, [conversationId]);
   reactExports.useEffect(() => {
     if (!conversationId || !data2?.pages) return;
+    if (processedConversationIdRef.current !== conversationId) {
+      processedPagesRef.current.clear();
+      processedConversationIdRef.current = conversationId;
+    }
+    const processedPages = processedPagesRef.current;
     for (const page of data2.pages) {
+      const firstMessageId = page.messages[0]?.id ?? "";
+      const lastMessage = page.messages[page.messages.length - 1];
+      const lastMessageId = lastMessage?.id ?? "";
+      const lastMessageCompletionState = lastMessage?.is_complete ?? false;
+      const signature = `${page.messages.length}:${firstMessageId}:${lastMessageId}:${lastMessageCompletionState}:${lastMessage?.message?.length ?? 0}:${lastMessage?.code?.length ?? 0}:${lastMessage?.stdout?.length ?? 0}:${lastMessage?.stderr?.length ?? 0}`;
+      if (processedPages.get(page.page) === signature) {
+        continue;
+      }
+      processedPages.set(page.page, signature);
       if (page.page > 1) {
         addMessages(conversationId, page.messages, true);
       } else {
@@ -39695,12 +39781,6 @@ const useConversationMessages = (conversationId, pageSize2 = 20) => {
       }
     }
   }, [data2, conversationId, addMessages, setMessages, getMessages]);
-  const messages = reactExports.useMemo(() => {
-    return conversationId ? getMessages(conversationId) : [];
-  }, [conversationId, getMessages, lastUpdated]);
-  const pagination = reactExports.useMemo(() => {
-    return conversationId ? getPagination(conversationId) : { currentPage: 1, totalPages: 1, hasMore: false };
-  }, [conversationId, getPagination]);
   return {
     messages,
     isLoading,
@@ -39908,6 +39988,13 @@ const useInitializeModels = () => {
     refreshModels
   };
 };
+const HISTORY_SYNC_INTERVAL_MS = 3e3;
+const hasMeaningfulMessageChanges = (existing, next2) => {
+  if (!existing) return true;
+  const existingTimestamp = existing.timestamp instanceof Date ? existing.timestamp.getTime() : new Date(existing.timestamp).getTime();
+  const nextTimestamp = next2.timestamp instanceof Date ? next2.timestamp.getTime() : new Date(next2.timestamp).getTime();
+  return existingTimestamp !== nextTimestamp || existing.message !== next2.message || existing.code !== next2.code || existing.stdout !== next2.stdout || existing.stderr !== next2.stderr || existing.logging !== next2.logging || existing.status !== next2.status || existing.action !== next2.action || existing.execution_type !== next2.execution_type || existing.task_classification !== next2.task_classification || existing.is_complete !== next2.is_complete || existing.is_streamable !== next2.is_streamable || existing.content !== next2.content || existing.file_path !== next2.file_path || existing.replacements !== next2.replacements || existing.agent !== next2.agent || existing.learnings !== next2.learnings || existing.thinking !== next2.thinking;
+};
 const useJobPolling = ({
   conversationId,
   addMessage
@@ -39922,10 +40009,15 @@ const useJobPolling = ({
     }
   }, []);
   const queryClient2 = useQueryClient();
-  const { getMessages, setMessages } = useChatStore();
+  const getMessages = useChatStore((state2) => state2.getMessages);
+  const setMessages = useChatStore((state2) => state2.setMessages);
   const lastProcessedJobDataRef = reactExports.useRef(null);
-  const client2 = createLocalOperatorClient(apiConfig.baseUrl);
-  const previousConversationIdRef = reactExports.useRef(conversationId);
+  const client2 = reactExports.useMemo(
+    () => createLocalOperatorClient(apiConfig.baseUrl),
+    []
+  );
+  const previousConversationIdRef = reactExports.useRef(void 0);
+  const lastHistorySyncAtRef = reactExports.useRef(0);
   const { shouldEnableQuery, getConnectivityError } = useConnectivityGate();
   const checkForActiveJobs = reactExports.useCallback(
     async (agentId) => {
@@ -39941,11 +40033,10 @@ const useJobPolling = ({
         return false;
       }
       try {
-        const pendingResponse = await client2.jobs.listJobs(agentId, "pending");
-        const processingResponse = await client2.jobs.listJobs(
-          agentId,
-          "processing"
-        );
+        const [pendingResponse, processingResponse] = await Promise.all([
+          client2.jobs.listJobs(agentId, "pending"),
+          client2.jobs.listJobs(agentId, "processing")
+        ]);
         const pendingJobs = pendingResponse.result?.jobs || [];
         const processingJobs = processingResponse.result?.jobs || [];
         const activeJobs = [...pendingJobs, ...processingJobs];
@@ -39957,10 +40048,11 @@ const useJobPolling = ({
           })[0];
           if (mostRecentJob.id !== currentJobId) {
             setCurrentJobId(mostRecentJob.id);
-            setIsLoading(true);
           }
+          setIsLoading(true);
           return true;
         }
+        setIsLoading(false);
         return false;
       } catch (error2) {
         console.error("Error checking for active jobs:", error2);
@@ -39976,57 +40068,18 @@ const useJobPolling = ({
     ]
   );
   reactExports.useEffect(() => {
-    if (conversationId !== previousConversationIdRef.current) {
-      setIsLoading(false);
-      setCurrentJobId(null);
-      if (conversationId) {
-        const checkNewAgentJobs = async () => {
-          if (!shouldEnableQuery({ bypassInternetCheck: true })) {
-            const error2 = getConnectivityError();
-            if (error2) {
-              console.error(
-                "Cannot check for active jobs due to connectivity issue:",
-                error2.message
-              );
-            }
-            return;
-          }
-          try {
-            const pendingResponse = await client2.jobs.listJobs(
-              conversationId,
-              "pending"
-            );
-            const processingResponse = await client2.jobs.listJobs(
-              conversationId,
-              "processing"
-            );
-            const pendingJobs = pendingResponse.result?.jobs || [];
-            const processingJobs = processingResponse.result?.jobs || [];
-            const activeJobs = [...pendingJobs, ...processingJobs];
-            if (activeJobs.length > 0) {
-              const mostRecentJob = activeJobs.sort((a2, b2) => {
-                const dateA = new Date(a2.created_at || 0);
-                const dateB = new Date(b2.created_at || 0);
-                return dateB.getTime() - dateA.getTime();
-              })[0];
-              setCurrentJobId(mostRecentJob.id);
-              setIsLoading(true);
-            }
-          } catch (error2) {
-            console.error("Error checking for active jobs:", error2);
-          }
-        };
-        checkNewAgentJobs();
-      }
+    if (conversationId === previousConversationIdRef.current) {
+      return;
     }
     previousConversationIdRef.current = conversationId;
-  }, [
-    conversationId,
-    client2.jobs,
-    shouldEnableQuery,
-    getConnectivityError,
-    setCurrentJobId
-  ]);
+    lastProcessedJobDataRef.current = null;
+    lastHistorySyncAtRef.current = 0;
+    setIsLoading(false);
+    setCurrentJobId(null);
+    if (conversationId) {
+      void checkForActiveJobs(conversationId);
+    }
+  }, [conversationId, checkForActiveJobs, setCurrentJobId]);
   const updateConversationMessages = reactExports.useCallback(
     async (agentId) => {
       if (!agentId) return;
@@ -40041,8 +40094,7 @@ const useJobPolling = ({
         return false;
       }
       try {
-        const client22 = createLocalOperatorClient(apiConfig.baseUrl);
-        const response = await client22.agents.getAgentExecutionHistory(
+        const response = await client2.agents.getAgentExecutionHistory(
           agentId,
           1,
           // First page
@@ -40056,20 +40108,20 @@ const useJobPolling = ({
         }
         const executionRecords = response.result.history || [];
         const existingMessages = getMessages(agentId);
-        const apiMessages = executionRecords.map((record) => {
-          return convertToMessage(record, agentId);
-        });
-        const existingIds = new Set(existingMessages.map((m2) => m2.id));
-        const newMessages = apiMessages.filter((m2) => !existingIds.has(m2.id));
-        if (newMessages.length > 0) {
-          const updatedMessages = [...existingMessages, ...newMessages];
-          setMessages(agentId, updatedMessages);
-          queryClient2.invalidateQueries({
-            queryKey: [...conversationMessagesQueryKey, agentId]
-          });
-          queryClient2.invalidateQueries({
-            queryKey: agentsQueryKey
-          });
+        const apiMessages = executionRecords.map(
+          (record) => convertToMessage(record, agentId)
+        );
+        const existingById = new Map(existingMessages.map((m2) => [m2.id, m2]));
+        let hasChanges = false;
+        for (const apiMessage of apiMessages) {
+          const existingMessage = existingById.get(apiMessage.id);
+          if (hasMeaningfulMessageChanges(existingMessage, apiMessage)) {
+            existingById.set(apiMessage.id, apiMessage);
+            hasChanges = true;
+          }
+        }
+        if (hasChanges) {
+          setMessages(agentId, Array.from(existingById.values()));
         }
         return true;
       } catch (error2) {
@@ -40077,13 +40129,7 @@ const useJobPolling = ({
         return false;
       }
     },
-    [
-      getMessages,
-      setMessages,
-      queryClient2,
-      shouldEnableQuery,
-      getConnectivityError
-    ]
+    [getMessages, setMessages, shouldEnableQuery, getConnectivityError, client2]
   );
   const handleJobCompletion = reactExports.useCallback(
     async (job) => {
@@ -40117,7 +40163,13 @@ const useJobPolling = ({
       setCurrentJobId(null);
       setIsLoading(false);
     },
-    [conversationId, addMessage, updateConversationMessages, setCurrentJobId]
+    [
+      conversationId,
+      addMessage,
+      updateConversationMessages,
+      setCurrentJobId,
+      queryClient2
+    ]
   );
   const {
     data: jobData,
@@ -40142,10 +40194,10 @@ const useJobPolling = ({
     enabled: shouldEnableQuery({ bypassInternetCheck: true }) && !!currentJobId,
     refetchInterval: currentJobId ? 1e3 : false,
     refetchIntervalInBackground: false,
-    refetchOnWindowFocus: true,
-    gcTime: 0,
-    staleTime: 0,
-    retry: true,
+    refetchOnWindowFocus: false,
+    gcTime: 60 * 1e3,
+    staleTime: 500,
+    retry: 1,
     retryDelay: 1e3
   });
   function isJobDetails(data2) {
@@ -40171,13 +40223,15 @@ const useJobPolling = ({
           setCurrentExecution(jobData.current_execution);
         }
         if (jobData.status === "processing") {
-          const debounceTimeout = setTimeout(() => {
-            updateConversationMessages(conversationId);
-          }, 500);
-          return () => clearTimeout(debounceTimeout);
+          const now2 = Date.now();
+          if (now2 - lastHistorySyncAtRef.current >= HISTORY_SYNC_INTERVAL_MS) {
+            lastHistorySyncAtRef.current = now2;
+            void updateConversationMessages(conversationId);
+          }
         }
         if (jobData.status === "completed" || jobData.status === "failed") {
-          handleJobCompletion(jobData);
+          lastHistorySyncAtRef.current = 0;
+          void handleJobCompletion(jobData);
           setCurrentExecution(null);
         }
       }
@@ -40194,11 +40248,8 @@ const useJobPolling = ({
   reactExports.useEffect(() => {
     if (error) {
       console.error("Error polling job status:", error);
-      if (currentJobId) {
-        queryClient2.invalidateQueries({ queryKey: ["job", currentJobId] });
-      }
     }
-  }, [error, currentJobId, queryClient2]);
+  }, [error]);
   const validJobStatuses = [
     "pending",
     "processing",
@@ -42279,40 +42330,94 @@ const useScrollToBottom = (buttonThreshold = 50, externalContainerRef, contentKe
     scrollToBottom
   };
 };
+const STREAMING_MESSAGE_MAX_AGE_MS = 15 * 60 * 1e3;
+const STREAMING_MESSAGE_MAX_ENTRIES = 250;
+const hasMeaningfulStreamingChange = (previous2, next2) => {
+  if (!previous2) return true;
+  return previous2.is_complete !== next2.is_complete || previous2.is_streamable !== next2.is_streamable || previous2.message !== next2.message || previous2.code !== next2.code || previous2.stdout !== next2.stdout || previous2.stderr !== next2.stderr || previous2.logging !== next2.logging || previous2.content !== next2.content || previous2.replacements !== next2.replacements || previous2.action !== next2.action || previous2.execution_type !== next2.execution_type;
+};
+const pruneMessages = (streamingMessages, now2) => {
+  const entries2 = Object.entries(streamingMessages);
+  const activeEntries = entries2.filter(
+    ([_2, value]) => !value.isComplete || now2 - value.lastUpdated < STREAMING_MESSAGE_MAX_AGE_MS
+  );
+  if (activeEntries.length <= STREAMING_MESSAGE_MAX_ENTRIES) {
+    return Object.fromEntries(activeEntries);
+  }
+  const sorted = [...activeEntries].sort(
+    (a2, b2) => b2[1].lastUpdated - a2[1].lastUpdated
+  );
+  return Object.fromEntries(sorted.slice(0, STREAMING_MESSAGE_MAX_ENTRIES));
+};
 const useStreamingMessagesStore = create$6(
   (set2, get2) => ({
     streamingMessages: {},
     updateStreamingMessage: (messageId, content2) => {
       set2((state2) => {
+        const now2 = Date.now();
         const existingState = state2.streamingMessages[messageId] || {
           content: null,
           isComplete: false,
-          lastUpdated: Date.now()
+          lastUpdated: now2
         };
-        return {
-          streamingMessages: {
-            ...state2.streamingMessages,
-            [messageId]: {
-              ...existingState,
-              content: content2,
-              lastUpdated: Date.now()
-            }
+        if (!existingState.isComplete && !hasMeaningfulStreamingChange(existingState.content, content2)) {
+          return state2;
+        }
+        const nextMessages = {
+          ...state2.streamingMessages,
+          [messageId]: {
+            ...existingState,
+            content: content2,
+            lastUpdated: now2
           }
         };
+        return {
+          streamingMessages: pruneMessages(nextMessages, now2)
+        };
       });
     },
     completeStreamingMessage: (messageId, content2) => {
       set2((state2) => {
-        return {
-          streamingMessages: {
-            ...state2.streamingMessages,
-            [messageId]: {
-              content: content2,
-              isComplete: true,
-              lastUpdated: Date.now()
-            }
+        const now2 = Date.now();
+        const existingState = state2.streamingMessages[messageId];
+        if (existingState?.isComplete && !hasMeaningfulStreamingChange(existingState.content, content2)) {
+          return state2;
+        }
+        const nextMessages = {
+          ...state2.streamingMessages,
+          [messageId]: {
+            content: content2,
+            isComplete: true,
+            lastUpdated: now2
           }
         };
+        return {
+          streamingMessages: pruneMessages(nextMessages, now2)
+        };
+      });
+    },
+    removeStreamingMessage: (messageId) => {
+      set2((state2) => {
+        if (!state2.streamingMessages[messageId]) {
+          return state2;
+        }
+        const remainingMessages = { ...state2.streamingMessages };
+        delete remainingMessages[messageId];
+        return {
+          streamingMessages: remainingMessages
+        };
+      });
+    },
+    pruneStreamingMessages: () => {
+      set2((state2) => {
+        const now2 = Date.now();
+        const prunedMessages = pruneMessages(state2.streamingMessages, now2);
+        if (Object.keys(prunedMessages).length === Object.keys(state2.streamingMessages).length) {
+          return state2;
+        }
+        return {
+          streamingMessages: prunedMessages
+        };
       });
     },
     getStreamingMessage: (messageId) => {
@@ -42328,6 +42433,7 @@ const useStreamingMessagesStore = create$6(
     }
   })
 );
+const autoConnectLocks = /* @__PURE__ */ new Set();
 const useWebSocketMessage = (options) => {
   const {
     baseUrl,
@@ -42348,147 +42454,134 @@ const useWebSocketMessage = (options) => {
   const [error, setError] = reactExports.useState(null);
   const [isLoading, setIsLoading] = reactExports.useState(false);
   const clientRef = reactExports.useRef(null);
-  const cleanupRef = reactExports.useRef(null);
-  const connectRef = reactExports.useRef(null);
-  const messageRef = reactExports.useRef(null);
+  const callbackRefs = reactExports.useRef({
+    onUpdate,
+    onStatusChange,
+    onError
+  });
   reactExports.useEffect(() => {
-    messageRef.current = message2;
-  }, [message2]);
-  const connect = reactExports.useCallback(async () => {
-    if (!messageId || !baseUrl) {
-      return Promise.reject(new Error("Missing messageId or baseUrl"));
+    callbackRefs.current = {
+      onUpdate,
+      onStatusChange,
+      onError
+    };
+  }, [onUpdate, onStatusChange, onError]);
+  const detachClient = reactExports.useCallback(() => {
+    if (!clientRef.current) {
+      return;
     }
-    try {
-      setIsLoading(true);
-      setError(null);
-      if (!clientRef.current) {
-        clientRef.current = new WebSocketClient(
-          baseUrl,
-          messageId,
-          {
-            autoReconnect,
-            reconnectInterval,
-            maxReconnectAttempts,
-            pingInterval,
-            messageDelay: 350
-          },
-          WebsocketConnectionType.MESSAGE
-        );
-        clientRef.current.on("status", (newStatus) => {
-          const typedStatus = newStatus;
-          setStatus(typedStatus);
-          onStatusChange?.(typedStatus);
-        });
-        clientRef.current.on(`update:${messageId}`, (update) => {
-          const typedUpdate = update;
-          setMessage((prevMessage) => {
-            const updatedMessage = !prevMessage ? typedUpdate : {
-              ...prevMessage,
-              ...typedUpdate
-            };
-            return updatedMessage;
-          });
-          const isMessageComplete = typedUpdate.is_complete || false;
-          const isMessageStreamable = typedUpdate.is_streamable || false;
-          if (isMessageComplete) {
-            setIsComplete(true);
-          }
-          if (isMessageStreamable) {
-            setIsStreamable(true);
-          }
-          onUpdate?.(typedUpdate);
-        });
-        clientRef.current.on("error", (wsError) => {
-          let typedError;
-          if (wsError instanceof Error) {
-            typedError = wsError;
-          } else if (typeof wsError === "string") {
-            typedError = new Error(wsError);
-          } else {
-            typedError = new Error(`WebSocket error for ${messageId}`);
-          }
-          console.error(`WebSocket error for ${messageId}:`, typedError);
-          setError(typedError);
-          onError?.(typedError);
-        });
-        cleanupRef.current = () => {
-          if (clientRef.current) {
-            clientRef.current.disconnect();
-            clientRef.current = null;
-          }
+    clientRef.current.removeAllListeners();
+    clientRef.current.disconnect();
+    clientRef.current = null;
+  }, []);
+  const createClient = reactExports.useCallback(() => {
+    if (clientRef.current) {
+      return clientRef.current;
+    }
+    const client2 = new WebSocketClient(
+      baseUrl,
+      messageId,
+      {
+        autoReconnect,
+        reconnectInterval,
+        maxReconnectAttempts,
+        pingInterval,
+        messageDelay: 250
+      },
+      WebsocketConnectionType.MESSAGE
+    );
+    client2.on("status", (newStatus) => {
+      const typedStatus = newStatus;
+      setStatus(typedStatus);
+      callbackRefs.current.onStatusChange?.(typedStatus);
+    });
+    client2.on(`update:${messageId}`, (update) => {
+      const typedUpdate = update;
+      setMessage((previous2) => {
+        if (!previous2) {
+          return typedUpdate;
+        }
+        return {
+          ...previous2,
+          ...typedUpdate
         };
+      });
+      if (typeof typedUpdate.is_complete === "boolean") {
+        setIsComplete(typedUpdate.is_complete);
       }
-      await clientRef.current.connect();
-      setIsLoading(false);
-      return Promise.resolve();
-    } catch (err) {
-      const formattedError = err instanceof Error ? err : new Error(String(err));
-      console.error(
-        `Error connecting to WebSocket for ${messageId}:`,
-        formattedError
+      if (typeof typedUpdate.is_streamable === "boolean") {
+        setIsStreamable(typedUpdate.is_streamable);
+      }
+      callbackRefs.current.onUpdate?.(typedUpdate);
+    });
+    client2.on("error", (wsError) => {
+      const typedError = wsError instanceof Error ? wsError : new Error(
+        typeof wsError === "string" ? wsError : `WebSocket error for ${messageId}`
       );
-      setError(formattedError);
-      setIsLoading(false);
-      onError?.(formattedError);
-      return Promise.reject(formattedError);
-    }
+      setError(typedError);
+      callbackRefs.current.onError?.(typedError);
+    });
+    clientRef.current = client2;
+    return client2;
   }, [
-    messageId,
     baseUrl,
+    messageId,
     autoReconnect,
     reconnectInterval,
     maxReconnectAttempts,
-    pingInterval,
-    onUpdate,
-    onStatusChange,
-    onError
+    pingInterval
   ]);
-  reactExports.useEffect(() => {
-    connectRef.current = connect;
-  }, [connect]);
-  const globalClientsRef = reactExports.useRef({});
-  reactExports.useEffect(() => {
-    if (autoConnect && messageId && baseUrl && connectRef.current && !clientRef.current && !globalClientsRef.current[messageId]) {
-      const timestamp2 = (/* @__PURE__ */ new Date()).toISOString().substring(11, 23);
-      globalClientsRef.current[messageId] = true;
-      setTimeout(() => {
-        if (connectRef.current) {
-          connectRef.current().catch((err) => {
-            console.warn(
-              `[${timestamp2}] Error auto-connecting WebSocket for ${messageId}:`,
-              err
-            );
-            globalClientsRef.current[messageId] = false;
-          });
-        }
-      }, 500);
+  const connect = reactExports.useCallback(async () => {
+    if (!messageId || !baseUrl) {
+      throw new Error("Missing messageId or baseUrl");
     }
-  }, [autoConnect, messageId, baseUrl]);
-  const disconnect = reactExports.useCallback(() => {
-    if (clientRef.current) {
-      clientRef.current.disconnect();
-      clientRef.current = null;
+    setError(null);
+    setIsLoading(true);
+    const client2 = createClient();
+    const currentStatus = client2.getStatus();
+    if (currentStatus === "connected" || currentStatus === "connecting" || currentStatus === "reconnecting") {
+      setIsLoading(false);
+      return;
     }
+    try {
+      await client2.connect();
+    } catch (connectError) {
+      const formattedError = connectError instanceof Error ? connectError : new Error(String(connectError));
+      setError(formattedError);
+      callbackRefs.current.onError?.(formattedError);
+      throw formattedError;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [messageId, baseUrl, createClient]);
+  const disconnect = reactExports.useCallback(() => {
+    detachClient();
     setStatus("disconnected");
-  }, []);
+    setIsLoading(false);
+  }, [detachClient]);
+  reactExports.useEffect(() => {
+    if (!autoConnect || !messageId || !baseUrl) {
+      return;
+    }
+    if (autoConnectLocks.has(messageId)) {
+      return;
+    }
+    autoConnectLocks.add(messageId);
+    void connect().catch((connectError) => {
+      console.warn(
+        `Error auto-connecting WebSocket for ${messageId}:`,
+        connectError
+      );
+    }).finally(() => {
+      autoConnectLocks.delete(messageId);
+    });
+  }, [autoConnect, messageId, baseUrl, connect]);
   reactExports.useEffect(() => {
-    const currentCleanup = cleanupRef.current;
-    const currentMessageId = messageId;
     return () => {
-      setTimeout(() => {
-        if (currentCleanup) {
-          const timestamp2 = (/* @__PURE__ */ new Date()).toISOString().substring(11, 23);
-          console.log(
-            `[${timestamp2}] Running delayed cleanup for WebSocket ${currentMessageId}`
-          );
-          if (globalClientsRef.current[currentMessageId]) {
-            globalClientsRef.current[currentMessageId] = false;
-          }
-          currentCleanup();
-        }
-      }, 200);
+      autoConnectLocks.delete(messageId);
+      disconnect();
     };
-  }, [messageId]);
+  }, [messageId, disconnect]);
   reactExports.useEffect(() => {
     setIsLoading(status === "connecting" || status === "reconnecting");
   }, [status]);
@@ -42503,7 +42596,33 @@ const useWebSocketMessage = (options) => {
     error
   };
 };
+const CONNECTION_THROTTLE_MS = 1500;
+const CHAT_STORE_FLUSH_MS = 80;
+const COMPLETE_REFETCH_DELAY_MS = 180;
 const globalConnectionRegistry = /* @__PURE__ */ new Map();
+const ensureRegistryEntry = (messageId, keepAlive, conversationId) => {
+  const existing = globalConnectionRegistry.get(messageId);
+  if (existing) {
+    existing.keepAlive = keepAlive;
+    if (conversationId) {
+      existing.conversationId = conversationId;
+    }
+    return existing;
+  }
+  const created = {
+    connected: false,
+    connecting: false,
+    connectionPromise: null,
+    keepAlive,
+    instanceCount: 0,
+    messageData: null,
+    isComplete: false,
+    isStreamable: false,
+    conversationId
+  };
+  globalConnectionRegistry.set(messageId, created);
+  return created;
+};
 const useStreamingMessage = ({
   messageId,
   autoConnect = true,
@@ -42515,16 +42634,61 @@ const useStreamingMessage = ({
   refetchOnComplete = true
 }) => {
   const mountedRef = reactExports.useRef(false);
+  const isRegisteredInstanceRef = reactExports.useRef(false);
   const lastConnectionAttemptRef = reactExports.useRef(0);
-  const CONNECTION_THROTTLE_MS = 2e3;
+  const completionNotifiedRef = reactExports.useRef(null);
+  const wsCompletionHandledRef = reactExports.useRef(false);
+  const refetchTimeoutRef = reactExports.useRef(null);
+  const chatStoreFlushTimeoutRef = reactExports.useRef(null);
+  const pendingChatUpdateRef = reactExports.useRef(null);
   const [isRefetching, setIsRefetching] = reactExports.useState(false);
-  const {
-    updateStreamingMessage,
-    completeStreamingMessage,
-    isMessageStreamingComplete
-  } = useStreamingMessagesStore();
-  const isStoreMessageComplete = isMessageStreamingComplete(messageId);
-  const { addMessage, updateMessage } = useChatStore();
+  const updateStreamingMessage = useStreamingMessagesStore(
+    (state2) => state2.updateStreamingMessage
+  );
+  const completeStreamingMessage = useStreamingMessagesStore(
+    (state2) => state2.completeStreamingMessage
+  );
+  const pruneStreamingMessages = useStreamingMessagesStore(
+    (state2) => state2.pruneStreamingMessages
+  );
+  const isStoreMessageComplete = useStreamingMessagesStore(
+    (state2) => state2.streamingMessages[messageId]?.isComplete ?? false
+  );
+  const addMessage = useChatStore((state2) => state2.addMessage);
+  const updateMessage = useChatStore((state2) => state2.updateMessage);
+  const pushMessageToChatStore = reactExports.useCallback(
+    (messageData) => {
+      if (!conversationId || !messageData.id) {
+        return;
+      }
+      const messageForStore = convertToMessage(messageData, conversationId);
+      const updated = updateMessage(conversationId, messageForStore);
+      if (!updated) {
+        addMessage(conversationId, messageForStore);
+      }
+    },
+    [conversationId, updateMessage, addMessage]
+  );
+  const flushPendingChatUpdate = reactExports.useCallback(() => {
+    if (!pendingChatUpdateRef.current) {
+      return;
+    }
+    pushMessageToChatStore(pendingChatUpdateRef.current);
+    pendingChatUpdateRef.current = null;
+  }, [pushMessageToChatStore]);
+  const notifyCompleteOnce = reactExports.useCallback(
+    (messageData) => {
+      if (!onComplete || !mountedRef.current) {
+        return;
+      }
+      if (completionNotifiedRef.current === messageId) {
+        return;
+      }
+      completionNotifiedRef.current = messageId;
+      onComplete(messageData);
+    },
+    [onComplete, messageId]
+  );
   const refetchMessage = reactExports.useCallback(async () => {
     if (!messageId) {
       return;
@@ -42540,7 +42704,7 @@ const useStreamingMessage = ({
       const response = await client2.agents.getAgentExecutionHistory(
         agentId,
         1,
-        20
+        30
       );
       if (response.status >= 400 || !response.result) {
         throw new Error(response.message || "Failed to fetch message data");
@@ -42548,40 +42712,20 @@ const useStreamingMessage = ({
       const messageData = response.result.history.find(
         (record) => record.id === messageId
       );
-      if (!messageData) {
-        if (registryEntry?.messageData && registryEntry.isComplete) {
-          completeStreamingMessage(messageId, registryEntry.messageData);
-          if (conversationId) {
-            const messageForStore = convertToMessage(
-              registryEntry.messageData,
-              conversationId
-            );
-            const updated = updateMessage(conversationId, messageForStore);
-            if (!updated) {
-              addMessage(conversationId, messageForStore);
-            }
-          }
-          if (onComplete && mountedRef.current) {
-            onComplete(registryEntry.messageData);
-          }
-        }
+      if (messageData) {
+        completeStreamingMessage(messageId, messageData);
+        const entry = ensureRegistryEntry(messageId, keepAlive, conversationId);
+        entry.messageData = messageData;
+        entry.isComplete = true;
+        entry.isStreamable = !!messageData.is_streamable;
+        pushMessageToChatStore(messageData);
+        notifyCompleteOnce(messageData);
         return;
       }
-      completeStreamingMessage(messageId, messageData);
-      if (registryEntry) {
-        registryEntry.messageData = messageData;
-        registryEntry.isComplete = true;
-        registryEntry.isStreamable = !!messageData.is_streamable;
-      }
-      if (conversationId) {
-        const messageForStore = convertToMessage(messageData, conversationId);
-        const updated = updateMessage(conversationId, messageForStore);
-        if (!updated) {
-          addMessage(conversationId, messageForStore);
-        }
-      }
-      if (onComplete && mountedRef.current) {
-        onComplete(messageData);
+      if (registryEntry?.messageData && registryEntry.isComplete) {
+        completeStreamingMessage(messageId, registryEntry.messageData);
+        pushMessageToChatStore(registryEntry.messageData);
+        notifyCompleteOnce(registryEntry.messageData);
       }
     } catch (error2) {
       const errorMessage = error2 instanceof Error ? error2.message : String(error2);
@@ -42592,95 +42736,23 @@ const useStreamingMessage = ({
   }, [
     messageId,
     baseUrl,
-    completeStreamingMessage,
     conversationId,
-    addMessage,
-    updateMessage,
-    onComplete
+    completeStreamingMessage,
+    pushMessageToChatStore,
+    keepAlive,
+    notifyCompleteOnce
   ]);
-  const handleUpdate = reactExports.useCallback(
-    (update) => {
-      if (onUpdate && mountedRef.current) {
-        onUpdate(update);
-      }
-      const registryEntry = globalConnectionRegistry.get(messageId);
-      if (registryEntry) {
-        registryEntry.messageData = {
-          ...registryEntry.messageData,
-          ...update
-        };
-        if (update.is_complete) {
-          registryEntry.isComplete = true;
-        }
-        if (update.is_streamable) {
-          registryEntry.isStreamable = true;
-        }
-      }
-      const messageData = {
-        ...registryEntry?.messageData,
-        ...update
-      };
-      const currentRegistryEntry = globalConnectionRegistry.get(messageId);
-      const alreadyCompleted = currentRegistryEntry?.isComplete;
-      if (update.is_complete && !alreadyCompleted) {
-        completeStreamingMessage(messageId, messageData);
-        if (currentRegistryEntry) {
-          currentRegistryEntry.isComplete = true;
-        }
-        if (conversationId && messageData.id) {
-          const messageForStore = convertToMessage(messageData, conversationId);
-          const updated = updateMessage(conversationId, messageForStore);
-          if (!updated) {
-            addMessage(conversationId, messageForStore);
-          }
-        }
-        if (refetchOnComplete && !isRefetching) {
-          setTimeout(() => {
-            if (mountedRef.current) {
-              refetchMessage().catch((error2) => {
-                console.error("Error during refetch after completion:", error2);
-              });
-            }
-          }, 150);
-        }
-      } else if (!update.is_complete) {
-        updateStreamingMessage(messageId, messageData);
-        if (conversationId && messageData.id) {
-          const messageForStore = convertToMessage(messageData, conversationId);
-          if (!updateChatStoreTimeoutRef.current) {
-            updateChatStoreTimeoutRef.current = setTimeout(() => {
-              const updated = updateMessage(conversationId, messageForStore);
-              if (!updated) {
-                addMessage(conversationId, messageForStore);
-              }
-              updateChatStoreTimeoutRef.current = null;
-            }, 50);
-          }
-        }
-      }
-    },
-    [
-      messageId,
-      conversationId,
-      onUpdate,
-      refetchOnComplete,
-      updateStreamingMessage,
-      completeStreamingMessage,
-      updateMessage,
-      addMessage,
-      isRefetching,
-      refetchMessage
-    ]
-  );
-  const updateChatStoreTimeoutRef = reactExports.useRef(null);
-  reactExports.useEffect(() => {
-    return () => {
-      if (updateChatStoreTimeoutRef.current) {
-        clearTimeout(updateChatStoreTimeoutRef.current);
-        updateChatStoreTimeoutRef.current = null;
+  const scheduleCompletionRefetch = reactExports.useCallback(() => {
+    if (!refetchOnComplete || refetchTimeoutRef.current) {
+      return;
+    }
+    refetchTimeoutRef.current = setTimeout(() => {
+      refetchTimeoutRef.current = null;
+      if (mountedRef.current) {
+        void refetchMessage();
       }
-    };
-  }, []);
+    }, COMPLETE_REFETCH_DELAY_MS);
+  }, [refetchOnComplete, refetchMessage]);
   const {
     message: message2,
     isComplete,
@@ -42694,8 +42766,37 @@ const useStreamingMessage = ({
     baseUrl,
     messageId,
     autoConnect: false,
-    // We'll handle connection manually
-    onUpdate: handleUpdate
+    onUpdate: (update) => {
+      if (onUpdate && mountedRef.current) {
+        onUpdate(update);
+      }
+      const entry = ensureRegistryEntry(messageId, keepAlive, conversationId);
+      const messageData = {
+        ...entry.messageData,
+        ...update
+      };
+      entry.messageData = messageData;
+      entry.isStreamable = Boolean(update.is_streamable || entry.isStreamable);
+      if (update.is_complete) {
+        entry.isComplete = true;
+        completeStreamingMessage(messageId, messageData);
+        pendingChatUpdateRef.current = messageData;
+        flushPendingChatUpdate();
+        notifyCompleteOnce(messageData);
+        scheduleCompletionRefetch();
+        return;
+      }
+      updateStreamingMessage(messageId, messageData);
+      if (conversationId && messageData.id) {
+        pendingChatUpdateRef.current = messageData;
+        if (!chatStoreFlushTimeoutRef.current) {
+          chatStoreFlushTimeoutRef.current = setTimeout(() => {
+            chatStoreFlushTimeoutRef.current = null;
+            flushPendingChatUpdate();
+          }, CHAT_STORE_FLUSH_MS);
+        }
+      }
+    }
   });
   const attemptConnection = reactExports.useCallback(async () => {
     if (isComplete || isStoreMessageComplete) {
@@ -42706,139 +42807,113 @@ const useStreamingMessage = ({
       return;
     }
     lastConnectionAttemptRef.current = now2;
-    if (!globalConnectionRegistry.has(messageId)) {
-      globalConnectionRegistry.set(messageId, {
-        connected: false,
-        connecting: false,
-        timestamp: Date.now(),
-        instanceCount: 0,
-        connectionPromise: null,
-        keepAlive,
-        // Set the keepAlive flag
-        wsClient: null,
-        messageData: null,
-        isComplete: false,
-        isStreamable: false,
-        conversationId
-        // Store the conversation ID
-      });
-    } else {
-      const entry = globalConnectionRegistry.get(messageId);
-      if (entry) {
-        entry.keepAlive = keepAlive;
-        if (conversationId) {
-          entry.conversationId = conversationId;
-        }
-      }
-    }
-    const registryEntry = globalConnectionRegistry.get(messageId);
-    if (!registryEntry) {
-      console.error(
-        "Failed to get registry entry, aborting connection attempt"
-      );
-      return;
-    }
-    registryEntry.instanceCount++;
-    if (registryEntry.connected) {
+    const entry = ensureRegistryEntry(messageId, keepAlive, conversationId);
+    if (entry.connected) {
       return;
     }
-    if (registryEntry.connecting && registryEntry.connectionPromise) {
+    if (entry.connectionPromise) {
       try {
-        await registryEntry.connectionPromise;
-      } catch (_error2) {
-        console.warn(
-          "Existing connection failed, will attempt a new connection"
-        );
+        await entry.connectionPromise;
+      } catch {
       }
       return;
     }
-    registryEntry.connecting = true;
-    const connectionPromise = (async () => {
-      try {
-        await wsConnect();
-        if (globalConnectionRegistry.has(messageId)) {
-          const entry = globalConnectionRegistry.get(messageId);
-          if (entry) {
-            entry.connected = true;
-            entry.connecting = false;
-            entry.timestamp = Date.now();
-            entry.wsClient = { connect: wsConnect, disconnect: wsDisconnect };
-          }
-        }
-        return Promise.resolve();
-      } catch (error2) {
-        const errorMessage = error2 instanceof Error ? error2.message : "Unknown error connecting to WebSocket";
-        console.error(`WebSocket connection failed: ${errorMessage}`);
-        if (globalConnectionRegistry.has(messageId)) {
-          const entry = globalConnectionRegistry.get(messageId);
-          if (entry) {
-            entry.connected = false;
-            entry.connecting = false;
-            entry.timestamp = Date.now();
-          }
-        }
-        return Promise.reject(error2);
+    entry.connecting = true;
+    entry.connectionPromise = wsConnect().then(() => {
+      const current = globalConnectionRegistry.get(messageId);
+      if (current) {
+        current.connected = true;
+        current.connecting = false;
       }
-    })();
-    registryEntry.connectionPromise = connectionPromise;
-    try {
-      await connectionPromise;
-    } catch (_error2) {
-    } finally {
-      if (globalConnectionRegistry.has(messageId)) {
-        const entry = globalConnectionRegistry.get(messageId);
-        if (entry) {
-          entry.connectionPromise = null;
-        }
+    }).catch((connectionError) => {
+      const current = globalConnectionRegistry.get(messageId);
+      if (current) {
+        current.connected = false;
+        current.connecting = false;
+      }
+      throw connectionError;
+    }).finally(() => {
+      const current = globalConnectionRegistry.get(messageId);
+      if (current) {
+        current.connectionPromise = null;
       }
+    });
+    try {
+      await entry.connectionPromise;
+    } catch (connectionError) {
+      console.error("WebSocket connection failed:", connectionError);
     }
   }, [
-    wsConnect,
-    wsDisconnect,
     isComplete,
     isStoreMessageComplete,
     messageId,
     keepAlive,
-    conversationId
+    conversationId,
+    wsConnect
   ]);
   const safeDisconnect = reactExports.useCallback(() => {
-    if (!globalConnectionRegistry.has(messageId)) {
-      return;
-    }
-    const registryEntry = globalConnectionRegistry.get(messageId);
-    if (!registryEntry) {
-      return;
-    }
-    registryEntry.instanceCount = Math.max(0, registryEntry.instanceCount - 1);
-    if (registryEntry.instanceCount === 0 && !registryEntry.keepAlive) {
-      try {
-        wsDisconnect();
-        registryEntry.connected = false;
-        registryEntry.connecting = false;
-        registryEntry.connectionPromise = null;
-        registryEntry.wsClient = null;
-      } catch (error2) {
-        const errorMessage = error2 instanceof Error ? error2.message : String(error2);
-        console.error(`Error disconnecting WebSocket: ${errorMessage}`);
+    const entry = globalConnectionRegistry.get(messageId);
+    if (entry) {
+      entry.keepAlive = false;
+      entry.connected = false;
+      entry.connecting = false;
+      entry.connectionPromise = null;
+      if (entry.instanceCount <= 1) {
+        globalConnectionRegistry.delete(messageId);
       }
     }
-  }, [wsDisconnect, messageId]);
+    wsDisconnect();
+  }, [messageId, wsDisconnect]);
   reactExports.useEffect(() => {
     mountedRef.current = true;
+    wsCompletionHandledRef.current = false;
+    completionNotifiedRef.current = null;
+    const entry = ensureRegistryEntry(messageId, keepAlive, conversationId);
+    if (!isRegisteredInstanceRef.current) {
+      entry.instanceCount += 1;
+      isRegisteredInstanceRef.current = true;
+    }
+    let connectTimer = null;
     if (autoConnect && !isComplete && !isStoreMessageComplete) {
-      const timer2 = setTimeout(() => {
+      connectTimer = setTimeout(() => {
         if (mountedRef.current) {
-          attemptConnection().catch((error2) => {
-            console.error(`Initial connection attempt failed: ${error2}`);
-          });
+          void attemptConnection();
         }
-      }, 100);
-      return () => clearTimeout(timer2);
+      }, 120);
     }
     return () => {
       mountedRef.current = false;
-      if (!keepAlive) {
-        safeDisconnect();
+      if (connectTimer) {
+        clearTimeout(connectTimer);
+      }
+      if (refetchTimeoutRef.current) {
+        clearTimeout(refetchTimeoutRef.current);
+        refetchTimeoutRef.current = null;
+      }
+      if (chatStoreFlushTimeoutRef.current) {
+        clearTimeout(chatStoreFlushTimeoutRef.current);
+        chatStoreFlushTimeoutRef.current = null;
+      }
+      flushPendingChatUpdate();
+      pruneStreamingMessages();
+      if (isRegisteredInstanceRef.current) {
+        const currentEntry = globalConnectionRegistry.get(messageId);
+        if (currentEntry) {
+          currentEntry.instanceCount = Math.max(
+            0,
+            currentEntry.instanceCount - 1
+          );
+          if (currentEntry.instanceCount === 0) {
+            currentEntry.connected = false;
+            currentEntry.connecting = false;
+            currentEntry.connectionPromise = null;
+            if (!currentEntry.keepAlive) {
+              globalConnectionRegistry.delete(messageId);
+              wsDisconnect();
+            }
+          }
+        }
+        isRegisteredInstanceRef.current = false;
       }
     };
   }, [
@@ -42846,70 +42921,75 @@ const useStreamingMessage = ({
     isComplete,
     isStoreMessageComplete,
     attemptConnection,
-    safeDisconnect,
-    keepAlive
+    messageId,
+    keepAlive,
+    conversationId,
+    flushPendingChatUpdate,
+    pruneStreamingMessages,
+    wsDisconnect
   ]);
   reactExports.useEffect(() => {
-    if (status === "disconnected" && !isComplete && !isStoreMessageComplete && mountedRef.current) {
-      const reconnectTimer = setTimeout(() => {
-        if (mountedRef.current) {
-          attemptConnection().catch((error2) => {
-            console.error(`Auto-reconnection attempt failed: ${error2}`);
-          });
-        }
-      }, 2e3);
-      return () => clearTimeout(reconnectTimer);
+    const entry = ensureRegistryEntry(messageId, keepAlive, conversationId);
+    entry.keepAlive = keepAlive;
+    if (conversationId) {
+      entry.conversationId = conversationId;
     }
-    return void 0;
-  }, [status, isComplete, isStoreMessageComplete, attemptConnection]);
-  const isCompletePrevRef = reactExports.useRef(false);
+  }, [messageId, keepAlive, conversationId]);
   reactExports.useEffect(() => {
-    if (isComplete && !isCompletePrevRef.current && message2 && mountedRef.current) {
-      isCompletePrevRef.current = true;
-      completeStreamingMessage(messageId, message2);
-      if (onComplete) {
-        setTimeout(() => {
-          if (mountedRef.current) {
-            onComplete(message2);
-          }
-        }, 50);
-      }
-      if (!keepAlive) {
-        safeDisconnect();
+    const entry = globalConnectionRegistry.get(messageId);
+    if (!entry) {
+      return;
+    }
+    entry.connected = status === "connected";
+    entry.connecting = status === "connecting" || status === "reconnecting";
+    if (!entry.connecting) {
+      entry.connectionPromise = null;
+    }
+  }, [messageId, status]);
+  reactExports.useEffect(() => {
+    if (status !== "disconnected" || isComplete || isStoreMessageComplete || !mountedRef.current) {
+      return;
+    }
+    const reconnectTimer = setTimeout(() => {
+      if (mountedRef.current) {
+        void attemptConnection();
       }
-    } else if (!isComplete) {
-      isCompletePrevRef.current = false;
+    }, 1600);
+    return () => clearTimeout(reconnectTimer);
+  }, [status, isComplete, isStoreMessageComplete, attemptConnection]);
+  reactExports.useEffect(() => {
+    if (!isComplete || !message2) {
+      wsCompletionHandledRef.current = false;
+      return;
+    }
+    if (wsCompletionHandledRef.current) {
+      return;
+    }
+    wsCompletionHandledRef.current = true;
+    const entry = ensureRegistryEntry(messageId, keepAlive, conversationId);
+    entry.isComplete = true;
+    entry.messageData = message2;
+    entry.isStreamable = !!message2.is_streamable;
+    completeStreamingMessage(messageId, message2);
+    pendingChatUpdateRef.current = message2;
+    flushPendingChatUpdate();
+    notifyCompleteOnce(message2);
+    scheduleCompletionRefetch();
+    if (!keepAlive && entry.instanceCount <= 1) {
+      safeDisconnect();
     }
   }, [
     isComplete,
     message2,
-    onComplete,
-    keepAlive,
-    safeDisconnect,
     messageId,
-    completeStreamingMessage
+    keepAlive,
+    conversationId,
+    completeStreamingMessage,
+    flushPendingChatUpdate,
+    notifyCompleteOnce,
+    scheduleCompletionRefetch,
+    safeDisconnect
   ]);
-  reactExports.useEffect(() => {
-    return () => {
-      if (globalConnectionRegistry.has(messageId)) {
-        const entry = globalConnectionRegistry.get(messageId);
-        if (entry && entry.instanceCount > 0) {
-          entry.instanceCount = Math.max(0, entry.instanceCount - 1);
-          if (entry.instanceCount === 0 && !entry.keepAlive) {
-            try {
-              wsDisconnect();
-              entry.connected = false;
-              entry.connecting = false;
-              entry.connectionPromise = null;
-              entry.wsClient = null;
-            } catch (error2) {
-              console.warn("Error during cleanup:", error2);
-            }
-          }
-        }
-      }
-    };
-  }, [messageId, wsDisconnect]);
   return {
     message: message2,
     isComplete,
@@ -68138,6 +68218,18 @@ const AgentSettings = ({
     ] })
   ] }) });
 };
+function useDebouncedValue(value, delay) {
+  const [debouncedValue, setDebouncedValue] = reactExports.useState(value);
+  reactExports.useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
 const SignInButton = styled$1(Button)(({ theme: theme2 }) => ({
   display: "flex",
   alignItems: "center",
@@ -68603,7 +68695,13 @@ const AgentsSidebarItem = ({
     }
   ) }, agent.id);
 };
-const MemoizedAgentsSidebarItem = reactExports.memo(AgentsSidebarItem);
+const areAgentsSidebarItemsEqual = (prev2, next2) => {
+  return prev2.isSelected === next2.isSelected && prev2.agent.id === next2.agent.id && prev2.agent.name === next2.agent.name && prev2.agent.description === next2.agent.description && prev2.agent.created_date === next2.agent.created_date && prev2.onSelectAgent === next2.onSelectAgent && prev2.formatDate === next2.formatDate && prev2.onChatWithAgent === next2.onChatWithAgent && prev2.onExportAgent === next2.onExportAgent && prev2.onAgentDeleted === next2.onAgentDeleted && prev2.onUploadAgentToHub === next2.onUploadAgentToHub;
+};
+const MemoizedAgentsSidebarItem = reactExports.memo(
+  AgentsSidebarItem,
+  areAgentsSidebarItemsEqual
+);
 const formatDate$1 = (dateString) => {
   if (!dateString) return "Unknown date";
   const date2 = new Date(dateString);
@@ -68613,19 +68711,26 @@ const formatDate$1 = (dateString) => {
     day: "numeric"
   });
 };
-const AgentsSidebar = ({
+const AgentsSidebarComponent = ({
   selectedAgentId,
   onSelectAgent
 }) => {
   const navigate = useNavigate();
   const [searchQuery, setSearchQuery2] = reactExports.useState("");
-  const { openCreateAgentDialog } = useUiPreferencesStore();
+  const openCreateAgentDialog = useUiPreferencesStore(
+    (state2) => state2.openCreateAgentDialog
+  );
+  const debouncedSearchQuery = useDebouncedValue(searchQuery.trim(), 250);
   const [isImportDialogOpen, setIsImportDialogOpen] = reactExports.useState(false);
   const perPage = 50;
   const [isUploadDialogOpen, setIsUploadDialogOpen] = reactExports.useState(false);
   const [uploadAgent, setUploadAgent] = reactExports.useState(null);
   const [uploadValidationIssues, setUploadValidationIssues] = reactExports.useState([]);
   const { isAuthenticated } = useRadientAuth();
+  const agentClient = reactExports.useMemo(
+    () => createLocalOperatorClient(apiConfig.baseUrl),
+    []
+  );
   const exportAgentMutation = useExportAgent();
   const { page, setPage } = usePaginationParams();
   const {
@@ -68633,7 +68738,14 @@ const AgentsSidebar = ({
     isLoading,
     isError,
     refetch
-  } = useAgents(page, perPage, 0, searchQuery, "created_date", "desc");
+  } = useAgents(
+    page,
+    perPage,
+    0,
+    debouncedSearchQuery || void 0,
+    "created_date",
+    "desc"
+  );
   const agents = agentListResult?.agents || [];
   const totalAgents = agentListResult?.total || 0;
   const { data: selectedAgentDetails } = useAgent(
@@ -68711,53 +68823,34 @@ const AgentsSidebar = ({
     },
     [getAgentUploadValidationIssues]
   );
-  const handleCloseUploadDialog = () => {
+  const handleCloseUploadDialog = reactExports.useCallback(() => {
     setIsUploadDialogOpen(false);
     setUploadAgent(null);
     setUploadValidationIssues([]);
-  };
-  const handleConfirmUpload = () => {
+  }, []);
+  const handleConfirmUpload = reactExports.useCallback(() => {
     handleCloseUploadDialog();
-  };
+  }, [handleCloseUploadDialog]);
   const handleAgentCreated = reactExports.useCallback(
-    (agentId) => {
-      const fetchAndSelectAgent = async () => {
-        try {
-          const result = await refetch();
-          const updatedAgentList = result.data?.agents || [];
-          const createdAgent = updatedAgentList.find(
-            (agent) => agent.id === agentId
-          );
-          if (createdAgent) {
-            onSelectAgent(createdAgent);
-          } else {
-            try {
-              const { data: newAgentDetails } = await refetch();
-              const foundAgent = (newAgentDetails?.agents || []).find(
-                (a2) => a2.id === agentId
-              );
-              if (foundAgent) {
-                onSelectAgent(foundAgent);
-              } else {
-                console.warn(
-                  "Newly created agent not found immediately after refetch."
-                );
-              }
-            } catch (fetchError) {
-              console.error(
-                "Error fetching newly created agent details:",
-                fetchError
-              );
-            }
-          }
-        } catch (error) {
-          console.error("Error refetching agents list:", error);
+    async (agentId) => {
+      try {
+        const result = await refetch();
+        const createdAgent = (result.data?.agents || []).find(
+          (agent) => agent.id === agentId
+        );
+        if (createdAgent) {
+          onSelectAgent(createdAgent);
+          return;
         }
-      };
-      fetchAndSelectAgent();
+        const detailsResponse = await agentClient.agents.getAgent(agentId);
+        if (detailsResponse.status < 400 && detailsResponse.result) {
+          onSelectAgent(detailsResponse.result);
+        }
+      } catch (error) {
+        console.error("Error selecting newly created agent:", error);
+      }
     },
-    [onSelectAgent, refetch]
-    // Keep dependencies
+    [onSelectAgent, refetch, agentClient]
   );
   const handleChatWithAgent = reactExports.useCallback(
     (agentId) => {
@@ -68852,6 +68945,7 @@ const AgentsSidebar = ({
     )
   ] });
 };
+const AgentsSidebar = reactExports.memo(AgentsSidebarComponent);
 const Container = styled$1(Box)({
   display: "flex",
   height: "100%",
@@ -89895,7 +89989,7 @@ const languages = [
     name: "Go",
     extensions: ["go"],
     load() {
-      return __vitePreload(() => import("./index-BOEHLAOZ.js"), true ? __vite__mapDeps([0,1,2]) : void 0, import.meta.url).then((m2) => m2.go());
+      return __vitePreload(() => import("./index-BDLsFoJv.js"), true ? __vite__mapDeps([0,1,2]) : void 0, import.meta.url).then((m2) => m2.go());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -90072,7 +90166,7 @@ const languages = [
     alias: ["yml"],
     extensions: ["yaml", "yml"],
     load() {
-      return __vitePreload(() => import("./index-CIm5Gpeu.js"), true ? __vite__mapDeps([3,1,2]) : void 0, import.meta.url).then((m2) => m2.yaml());
+      return __vitePreload(() => import("./index-vAasWWpO.js"), true ? __vite__mapDeps([3,1,2]) : void 0, import.meta.url).then((m2) => m2.yaml());
     }
   }),
   // Legacy modes ported from CodeMirror 5
@@ -127954,18 +128048,6 @@ var ReactCodeMirror = /* @__PURE__ */ reactExports.forwardRef((props2, ref) => {
   }, other2));
 });
 ReactCodeMirror.displayName = "CodeMirror";
-function useDebouncedValue(value, delay) {
-  const [debouncedValue, setDebouncedValue] = reactExports.useState(value);
-  reactExports.useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
 const getCodeMirrorTheme = (theme2) => {
   const colors = {
     background: theme2.palette.background.paper,
@@ -233200,6 +233282,8 @@ const ScrollToBottomButton = ({
     }
   ) }) });
 };
+const EMPTY_REPLIES = [];
+const EMPTY_ATTACHMENTS = [];
 const InputOuterContainer = styled$1(Box, {
   shouldForwardProp: (prop) => prop !== "isSmallView"
 })(({ theme: theme2, isSmallView }) => ({
@@ -233426,21 +233510,30 @@ const MessageInput = reactExports.forwardRef(
     agentData,
     isSmallView = false
   }, ref) => {
-    const {
-      inputByConversation,
-      removeReply,
-      clearReplies,
-      addAttachment,
-      removeAttachment,
-      clearAttachments
-    } = useConversationInputStore();
-    const replies = reactExports.useMemo(
-      () => conversationId && inputByConversation[conversationId]?.replies || [],
-      [inputByConversation, conversationId]
+    const removeReply = useConversationInputStore((state2) => state2.removeReply);
+    const clearReplies = useConversationInputStore(
+      (state2) => state2.clearReplies
+    );
+    const addAttachment = useConversationInputStore(
+      (state2) => state2.addAttachment
+    );
+    const removeAttachment = useConversationInputStore(
+      (state2) => state2.removeAttachment
+    );
+    const clearAttachments = useConversationInputStore(
+      (state2) => state2.clearAttachments
+    );
+    const replies = useConversationInputStore(
+      reactExports.useCallback(
+        (state2) => conversationId ? state2.inputByConversation[conversationId]?.replies ?? EMPTY_REPLIES : EMPTY_REPLIES,
+        [conversationId]
+      )
     );
-    const attachments = reactExports.useMemo(
-      () => conversationId && inputByConversation[conversationId]?.attachments || [],
-      [inputByConversation, conversationId]
+    const attachments = useConversationInputStore(
+      reactExports.useCallback(
+        (state2) => conversationId ? state2.inputByConversation[conversationId]?.attachments ?? EMPTY_ATTACHMENTS : EMPTY_ATTACHMENTS,
+        [conversationId]
+      )
     );
     const [isRecording, setIsRecording] = reactExports.useState(false);
     const [audioBlob, setAudioBlob] = reactExports.useState(null);
@@ -234146,8 +234239,10 @@ const getDetailedStatusText = (status, execution) => {
   return status ? getStatusText(status) : "thinking";
 };
 const LoadingIndicator = reactExports.memo(({ status, currentExecution, isSmallView }) => {
-  const { getStreamingMessage } = useStreamingMessagesStore();
-  const streamingMessage = getStreamingMessage(currentExecution?.id || "");
+  const currentExecutionId = currentExecution?.id ?? "";
+  const streamingMessage = useStreamingMessagesStore(
+    (state2) => state2.streamingMessages[currentExecutionId] ?? null
+  );
   const isStreaming = !!streamingMessage && !streamingMessage.isComplete;
   if (isStreaming) {
     return null;
@@ -273867,7 +273962,7 @@ var registerDefaultLayoutLoaders = /* @__PURE__ */ __name(() => {
   registerLayoutLoaders([
     {
       name: "dagre",
-      loader: /* @__PURE__ */ __name(async () => await __vitePreload(() => import("./dagre-OKDRZEBW-uJDV0tEB.js"), true ? __vite__mapDeps([6,7,8,9,10,11,1,2]) : void 0, import.meta.url), "loader")
+      loader: /* @__PURE__ */ __name(async () => await __vitePreload(() => import("./dagre-OKDRZEBW-BMuSMCUF.js"), true ? __vite__mapDeps([6,7,8,9,10,11,1,2]) : void 0, import.meta.url), "loader")
     }
   ]);
 }, "registerDefaultLayoutLoaders");
@@ -274457,7 +274552,7 @@ var detector = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./c4Diagram-VJAJSXHY-DnUBXdyl.js");
+    const { diagram: diagram22 } = await import("./c4Diagram-VJAJSXHY-cTGz3ymz.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([12,13,1,2]) : void 0, import.meta.url);
   return { id, diagram: diagram2 };
@@ -274477,7 +274572,7 @@ var detector2 = /* @__PURE__ */ __name((txt, config2) => {
 }, "detector");
 var loader2 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./flowDiagram-4HSFHLVR-CjBlaiPH.js");
+    const { diagram: diagram22 } = await import("./flowDiagram-4HSFHLVR-_Arrrk_3.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([14,15,16,1,2]) : void 0, import.meta.url);
   return { id: id2, diagram: diagram2 };
@@ -274503,7 +274598,7 @@ var detector3 = /* @__PURE__ */ __name((txt, config2) => {
 }, "detector");
 var loader3 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./flowDiagram-4HSFHLVR-CjBlaiPH.js");
+    const { diagram: diagram22 } = await import("./flowDiagram-4HSFHLVR-_Arrrk_3.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([14,15,16,1,2]) : void 0, import.meta.url);
   return { id: id3, diagram: diagram2 };
@@ -274520,7 +274615,7 @@ var detector4 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader4 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./erDiagram-Q7BY3M3F-D66PtkGh.js");
+    const { diagram: diagram22 } = await import("./erDiagram-Q7BY3M3F-BFd2rLsa.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([17,15,16,1,2]) : void 0, import.meta.url);
   return { id: id4, diagram: diagram2 };
@@ -274537,7 +274632,7 @@ var detector5 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader5 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./gitGraphDiagram-7IBYFJ6S-BC17Lxhk.js");
+    const { diagram: diagram22 } = await import("./gitGraphDiagram-7IBYFJ6S-BlkO8Bzg.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([18,19,20,21,8,10,11,1,2]) : void 0, import.meta.url);
   return { id: id5, diagram: diagram2 };
@@ -274554,7 +274649,7 @@ var detector6 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader6 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./ganttDiagram-APWFNJXF-CifvAN8h.js");
+    const { diagram: diagram22 } = await import("./ganttDiagram-APWFNJXF-Dzw68AV_.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([22,1,2]) : void 0, import.meta.url);
   return { id: id6, diagram: diagram2 };
@@ -274571,7 +274666,7 @@ var detector7 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader7 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./infoDiagram-PH2N3AL5-Dsj1auFt.js");
+    const { diagram: diagram22 } = await import("./infoDiagram-PH2N3AL5-DO4pqvW_.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([23,21,8,10,11,1,2]) : void 0, import.meta.url);
   return { id: id7, diagram: diagram2 };
@@ -274587,7 +274682,7 @@ var detector8 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader8 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./pieDiagram-IB7DONF6-CZvzTYvc.js");
+    const { diagram: diagram22 } = await import("./pieDiagram-IB7DONF6-DKT0Bk2S.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([24,19,21,8,10,11,25,1,2]) : void 0, import.meta.url);
   return { id: id8, diagram: diagram2 };
@@ -274603,7 +274698,7 @@ var detector9 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader9 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./quadrantDiagram-7GDLP6J5-CJSNfyeY.js");
+    const { diagram: diagram22 } = await import("./quadrantDiagram-7GDLP6J5-CFMDiFFE.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([26,1,2]) : void 0, import.meta.url);
   return { id: id9, diagram: diagram2 };
@@ -274620,7 +274715,7 @@ var detector10 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader10 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./xychartDiagram-VJFVF3MP-Jn_L_tBu.js");
+    const { diagram: diagram22 } = await import("./xychartDiagram-VJFVF3MP-Bbr5uqsp.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([27,1,2]) : void 0, import.meta.url);
   return { id: id10, diagram: diagram2 };
@@ -274637,7 +274732,7 @@ var detector11 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader11 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./requirementDiagram-KVF5MWMF-BzJ8TKJn.js");
+    const { diagram: diagram22 } = await import("./requirementDiagram-KVF5MWMF-DPTaldQZ.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([28,15,1,2]) : void 0, import.meta.url);
   return { id: id11, diagram: diagram2 };
@@ -274654,7 +274749,7 @@ var detector12 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader12 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./sequenceDiagram-X6HHIX6F-QlZcg6un.js");
+    const { diagram: diagram22 } = await import("./sequenceDiagram-X6HHIX6F-Chi1Y6mU.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([29,13,20,1,2]) : void 0, import.meta.url);
   return { id: id12, diagram: diagram2 };
@@ -274674,7 +274769,7 @@ var detector13 = /* @__PURE__ */ __name((txt, config2) => {
 }, "detector");
 var loader13 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./classDiagram-GIVACNV2-BTb1dsm_.js");
+    const { diagram: diagram22 } = await import("./classDiagram-GIVACNV2-BcRnaMRd.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([30,31,15,1,2]) : void 0, import.meta.url);
   return { id: id13, diagram: diagram2 };
@@ -274694,7 +274789,7 @@ var detector14 = /* @__PURE__ */ __name((txt, config2) => {
 }, "detector");
 var loader14 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./classDiagram-v2-COTLJTTW-BTb1dsm_.js");
+    const { diagram: diagram22 } = await import("./classDiagram-v2-COTLJTTW-BcRnaMRd.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([32,31,15,1,2]) : void 0, import.meta.url);
   return { id: id14, diagram: diagram2 };
@@ -274714,7 +274809,7 @@ var detector15 = /* @__PURE__ */ __name((txt, config2) => {
 }, "detector");
 var loader15 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./stateDiagram-DGXRK772-lkNrTERo.js");
+    const { diagram: diagram22 } = await import("./stateDiagram-DGXRK772-DcmhTUVK.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([33,34,15,7,8,9,10,1,2]) : void 0, import.meta.url);
   return { id: id15, diagram: diagram2 };
@@ -274737,7 +274832,7 @@ var detector16 = /* @__PURE__ */ __name((txt, config2) => {
 }, "detector");
 var loader16 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./stateDiagram-v2-YXO3MK2T-Cnlxf-OJ.js");
+    const { diagram: diagram22 } = await import("./stateDiagram-v2-YXO3MK2T-Dy-oRm-T.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([35,34,15,1,2]) : void 0, import.meta.url);
   return { id: id16, diagram: diagram2 };
@@ -274754,7 +274849,7 @@ var detector17 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader17 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./journeyDiagram-U35MCT3I-CBWci7yb.js");
+    const { diagram: diagram22 } = await import("./journeyDiagram-U35MCT3I-BJQ-FRal.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([36,13,25,1,2]) : void 0, import.meta.url);
   return { id: id17, diagram: diagram2 };
@@ -274824,7 +274919,7 @@ var detector18 = /* @__PURE__ */ __name((txt, config2 = {}) => {
 }, "detector");
 var loader18 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./flowDiagram-4HSFHLVR-CjBlaiPH.js");
+    const { diagram: diagram22 } = await import("./flowDiagram-4HSFHLVR-_Arrrk_3.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([14,15,16,1,2]) : void 0, import.meta.url);
   return { id: id18, diagram: diagram2 };
@@ -274841,7 +274936,7 @@ var detector19 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader19 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./timeline-definition-BDJGKUSR-ClHwwcwA.js");
+    const { diagram: diagram22 } = await import("./timeline-definition-BDJGKUSR-0y2wZWef.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([37,25,1,2]) : void 0, import.meta.url);
   return { id: id19, diagram: diagram2 };
@@ -274858,7 +274953,7 @@ var detector20 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader20 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./mindmap-definition-ALO5MXBD-e-VrUTAA.js");
+    const { diagram: diagram22 } = await import("./mindmap-definition-ALO5MXBD-B5SNv6RZ.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([38,39,1,2]) : void 0, import.meta.url);
   return { id: id20, diagram: diagram2 };
@@ -274875,7 +274970,7 @@ var detector21 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader21 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./kanban-definition-NDS4AKOZ-BrBwgyJQ.js");
+    const { diagram: diagram22 } = await import("./kanban-definition-NDS4AKOZ-B1zGbozL.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([40,1,2]) : void 0, import.meta.url);
   return { id: id21, diagram: diagram2 };
@@ -274892,7 +274987,7 @@ var detector22 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader22 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./sankeyDiagram-QLVOVGJD-C1MZHoLs.js");
+    const { diagram: diagram22 } = await import("./sankeyDiagram-QLVOVGJD-DIFNjSQ_.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([41,1,2]) : void 0, import.meta.url);
   return { id: id22, diagram: diagram2 };
@@ -274909,7 +275004,7 @@ var detector23 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader23 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./diagram-VNBRO52H-CCeijHj7.js");
+    const { diagram: diagram22 } = await import("./diagram-VNBRO52H-q41sVUvc.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([42,19,21,8,10,11,1,2]) : void 0, import.meta.url);
   return { id: id23, diagram: diagram2 };
@@ -274925,7 +275020,7 @@ var detector24 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader24 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./diagram-SSKATNLV-BxlaHBtJ.js");
+    const { diagram: diagram22 } = await import("./diagram-SSKATNLV-BCxxN7T6.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([43,19,21,8,10,11,1,2]) : void 0, import.meta.url);
   return { id: id24, diagram: diagram2 };
@@ -274941,7 +275036,7 @@ var detector25 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader25 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./blockDiagram-JOT3LUYC-CKjlYfeC.js");
+    const { diagram: diagram22 } = await import("./blockDiagram-JOT3LUYC-BW-Yo0Fe.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([44,11,8,7,16,1,2]) : void 0, import.meta.url);
   return { id: id25, diagram: diagram2 };
@@ -274958,7 +275053,7 @@ var detector26 = /* @__PURE__ */ __name((txt) => {
 }, "detector");
 var loader26 = /* @__PURE__ */ __name(async () => {
   const { diagram: diagram2 } = await __vitePreload(async () => {
-    const { diagram: diagram22 } = await import("./architectureDiagram-IEHRJDOE-BE1k5yn0.js");
+    const { diagram: diagram22 } = await import("./architectureDiagram-IEHRJDOE-iKnn0iSS.js");
     return { diagram: diagram22 };
   }, true ? __vite__mapDeps([45,19,20,21,8,10,11,39,1,2]) : void 0, import.meta.url);
   return { id: id26, diagram: diagram2 };
@@ -314762,6 +314857,193 @@ const LogBlock = ({ log: log3, isUser }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(LogContainer, { isUser, children: log3 })
   ] });
 };
+const ControlsContainer = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "isUser" && prop !== "inline"
+})(({ isUser, inline: inline2 }) => ({
+  position: inline2 ? "static" : "absolute",
+  bottom: inline2 ? "auto" : isUser ? 8 : -12,
+  // Position below the message
+  display: "flex",
+  alignItems: "center",
+  justifyContent: isUser ? "flex-end" : "flex-start",
+  width: inline2 ? "auto" : "100%",
+  opacity: inline2 ? 1 : 0,
+  transition: "opacity 0.2s ease-in-out",
+  zIndex: 1
+}));
+const ControlsWrapper = styled$1(Box)(() => ({
+  display: "flex",
+  alignItems: "flex-start"
+}));
+const StyledIconButton = styled$1(IconButton)(({ theme: theme2 }) => ({
+  color: theme2.palette.text.secondary,
+  width: "34px",
+  height: "34px",
+  "&:hover": {
+    color: theme2.palette.primary.main,
+    backgroundColor: alpha$1(theme2.palette.primary.main, 0.1)
+  }
+}));
+const MessageControls = ({
+  isUser,
+  content: content2,
+  sx,
+  messageId,
+  agentId,
+  inline: inline2 = false
+}) => {
+  const [copied, setCopied] = reactExports.useState(false);
+  const { data: credentialsData, isLoading: isLoadingCredentials } = useCredentials();
+  const {
+    playSpeech,
+    stopSpeech,
+    replaySpeech,
+    loadingMessageId,
+    playingMessageId,
+    audioCache
+  } = useSpeechStore();
+  const isPlaying = playingMessageId === messageId;
+  const isLoading = loadingMessageId === messageId;
+  const hasAudio = audioCache.has(messageId);
+  const isRadientApiKeyConfigured = reactExports.useMemo(
+    () => credentialsData?.keys?.includes("RADIENT_API_KEY"),
+    [credentialsData?.keys]
+  );
+  const canEnableSpeechFeature = reactExports.useMemo(
+    () => isRadientApiKeyConfigured && !isLoadingCredentials,
+    [isRadientApiKeyConfigured, isLoadingCredentials]
+  );
+  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);
+    }
+  };
+  const handlePlay = () => {
+    if (agentId && content2) {
+      playSpeech(messageId, agentId, content2);
+    }
+  };
+  const handleReplay = () => {
+    replaySpeech(messageId);
+  };
+  const handleStop = () => {
+    stopSpeech();
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ControlsContainer,
+    {
+      isUser,
+      inline: inline2,
+      className: inline2 ? void 0 : "message-controls",
+      sx,
+      children: showCopyButton && /* @__PURE__ */ jsxRuntimeExports.jsxs(ControlsWrapper, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: copied ? "Copied!" : "Copy message", placement: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledIconButton, { size: "small", onClick: handleCopy, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { size: 16 }) }) }),
+        !isUser && (isPlaying ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Stop", placement: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledIconButton, { size: "small", onClick: handleStop, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Square, { size: 16 }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Tooltip$1,
+          {
+            title: !canEnableSpeechFeature ? "Sign in to Radient in the settings page to enable text to speech" : isLoading ? "Loading" : hasAudio ? "Replay Speech" : "Speak Aloud",
+            placement: "top",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              StyledIconButton,
+              {
+                size: "small",
+                onClick: hasAudio ? handleReplay : handlePlay,
+                disabled: isLoading || !canEnableSpeechFeature,
+                children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 16 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Volume2, { size: 16 })
+              }
+            ) })
+          }
+        ))
+      ] })
+    }
+  );
+};
+const formatMessageDateTime = (dateTimeString) => {
+  if (!dateTimeString) return "";
+  try {
+    const messageDate = dateTimeString instanceof Date ? dateTimeString : new Date(dateTimeString);
+    const now2 = /* @__PURE__ */ new Date();
+    const yesterday = new Date(now2);
+    yesterday.setDate(now2.getDate() - 1);
+    if (messageDate.toDateString() === now2.toDateString()) {
+      return format$3(messageDate, "h:mm a");
+    }
+    if (messageDate.toDateString() === yesterday.toDateString()) {
+      return "Yesterday";
+    }
+    const oneWeekAgo = new Date(now2);
+    oneWeekAgo.setDate(now2.getDate() - 7);
+    if (messageDate > oneWeekAgo) {
+      return format$3(messageDate, "EEEE");
+    }
+    return format$3(messageDate, "yyyy-MM-dd");
+  } catch (error) {
+    console.error("Error formatting date:", error);
+    return "";
+  }
+};
+const getFullDateTime = (dateTimeString) => {
+  if (!dateTimeString) return "";
+  try {
+    const date2 = dateTimeString instanceof Date ? dateTimeString : new Date(dateTimeString);
+    return date2.toLocaleString();
+  } catch (error) {
+    console.error("Error getting full date time:", error);
+    return "";
+  }
+};
+const StyledTimestamp = styled$1(Typography, {
+  shouldForwardProp: (prop) => prop !== "isUser" && prop !== "inline"
+})(
+  ({ isUser, theme: theme2, isSmallView, inline: inline2 }) => ({
+    display: "block",
+    marginTop: inline2 ? 0 : 8,
+    textAlign: isUser ? "left" : "right",
+    color: theme2.palette.text.secondary,
+    fontSize: "0.7rem",
+    width: inline2 ? "auto" : isUser ? "auto" : isSmallView ? "100%" : "calc(100% - 52px)",
+    cursor: "help"
+    // Indicate that hovering will show more information
+  })
+);
+const MessageTimestamp = ({
+  timestamp: timestamp2,
+  isUser,
+  sx,
+  isSmallView,
+  inline: inline2 = false
+}) => {
+  const formattedTime = formatMessageDateTime(timestamp2);
+  const fullDateTime = getFullDateTime(timestamp2);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Tooltip$1,
+    {
+      title: fullDateTime,
+      arrow: true,
+      placement: "bottom",
+      enterDelay: 1200,
+      enterNextDelay: 1200,
+      sx,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        StyledTimestamp,
+        {
+          variant: "caption",
+          isUser,
+          isSmallView,
+          inline: inline2,
+          children: formattedTime
+        }
+      )
+    }
+  );
+};
 const CodeContainer = styled$1(Box)({
   marginBottom: 16,
   width: "100%"
@@ -314967,6 +315249,7 @@ const VideoAttachment = reactExports.memo(
   }
 );
 VideoAttachment.displayName = "VideoAttachment";
+const localOperatorClient$1 = createLocalOperatorClient(apiConfig.baseUrl);
 const isWebUrl$2 = (path2) => {
   return path2.startsWith("http://") || path2.startsWith("https://");
 };
@@ -315038,6 +315321,26 @@ const getAttachmentUrl$2 = (client2, path2) => {
   }
   return path2;
 };
+const getCompactIcon = (action, executionType) => {
+  switch (action) {
+    case "DONE":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { size: 14 });
+    case "ASK":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(CircleHelp, { size: 14 });
+    case "CODE":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(CodeXml, { size: 14 });
+    case "WRITE":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Pencil, { size: 12 });
+    case "EDIT":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(PencilLine, { size: 14 });
+    case "READ":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Book, { size: 14 });
+    case "DELEGATE":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Share2, { size: 14 });
+    default:
+      return executionType === "plan" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Lightbulb, { size: 14 }) : executionType === "action" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CodeXml, { size: 14 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { size: 14 });
+  }
+};
 const ActionBlock = ({
   message: message2,
   replacements,
@@ -315053,16 +315356,14 @@ const ActionBlock = ({
   filePath,
   conversationId,
   isLoading,
-  isSmallView
+  isSmallView,
+  compact = false,
+  messageId,
+  timestamp: timestamp2,
+  agentId
 }) => {
-  const [isExpanded, setIsExpanded] = reactExports.useState(false);
-  const handleExpand = () => {
-    setIsExpanded(true);
-  };
-  const handleCollapse = (e3) => {
-    e3.stopPropagation();
-    setIsExpanded(false);
-  };
+  const [isRowExpanded, setIsRowExpanded] = reactExports.useState(!compact);
+  const [isDetailsExpanded, setIsDetailsExpanded] = reactExports.useState(false);
   const markdownStyleProps = reactExports.useMemo(
     () => ({
       fontSize: isSmallView ? "0.95rem" : "1.05rem",
@@ -315070,12 +315371,9 @@ const ActionBlock = ({
     }),
     [isSmallView]
   );
-  const client2 = reactExports.useMemo(() => {
-    return createLocalOperatorClient(apiConfig.baseUrl);
-  }, []);
   const getUrl2 = reactExports.useCallback(
-    (path2) => getAttachmentUrl$2(client2, path2),
-    [client2]
+    (path2) => getAttachmentUrl$2(localOperatorClient$1, path2),
+    []
   );
   const handleFileClick = reactExports.useCallback((filePath2) => {
     try {
@@ -315092,104 +315390,266 @@ const ActionBlock = ({
   const hasCollapsibleContent = Boolean(executionType === "action" && !!action);
   const fileLanguage = getLanguageFromExtension(filePath || "");
   const trimmedMessage = message2 ? message2.replace(/(```\w+\s*)+$/g, "").trimEnd() : message2;
+  const compactPreviewText = trimmedMessage ? trimmedMessage.replace(/\s+/g, " ").trim() : action === "CODE" ? "Executing code" : "Working on your request";
+  const compactIcon = reactExports.useMemo(
+    () => getCompactIcon(action, executionType),
+    [action, executionType]
+  );
+  const handleExpand = () => {
+    setIsRowExpanded(true);
+    setIsDetailsExpanded(true);
+  };
+  const handleCollapse = (e3) => {
+    e3.stopPropagation();
+    setIsDetailsExpanded(false);
+    if (compact) {
+      setIsRowExpanded(false);
+    }
+  };
+  const handleCompactToggle = () => {
+    if (!compact) return;
+    setIsRowExpanded((previous2) => {
+      const next2 = !previous2;
+      setIsDetailsExpanded(next2);
+      return next2;
+    });
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { position: "relative", width: "100%" }, children: [
-    message2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    compact && !isRowExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(
       Box,
       {
+        component: "button",
+        type: "button",
+        "aria-expanded": false,
+        onClick: handleCompactToggle,
         sx: {
-          borderRadius: 2,
-          color: (theme2) => theme2.palette.text.primary,
+          display: "flex",
+          justifyContent: "flex-start",
+          alignItems: "center",
           width: "100%",
-          wordBreak: "break-word",
-          overflowWrap: "break-word",
-          position: "relative",
-          mb: 2
+          border: "none",
+          background: "transparent",
+          padding: "2px 0",
+          cursor: "pointer",
+          textAlign: "left",
+          minHeight: 28
         },
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          MarkdownRenderer,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Box,
           {
-            content: trimmedMessage,
-            styleProps: markdownStyleProps
+            sx: (theme2) => ({
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 1,
+              maxWidth: "100%",
+              padding: "5px 10px",
+              borderRadius: "999px",
+              color: theme2.palette.text.secondary,
+              backgroundColor: alpha$1(
+                theme2.palette.common.black,
+                theme2.palette.mode === "dark" ? 0.14 : 0.04
+              )
+            }),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Box,
+                {
+                  component: "span",
+                  sx: {
+                    width: 20,
+                    height: 20,
+                    borderRadius: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0
+                  },
+                  children: compactIcon
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Typography,
+                {
+                  variant: "body2",
+                  noWrap: true,
+                  component: "span",
+                  sx: {
+                    maxWidth: "100%",
+                    color: "inherit",
+                    fontSize: "0.82rem",
+                    lineHeight: 1.35,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: compactPreviewText
+                }
+              )
+            ]
           }
         )
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      ExpandableActionElement,
-      {
-        executionType,
-        action,
-        isUser,
-        isExpanded,
-        onExpand: handleExpand,
-        onCollapse: handleCollapse,
-        hasCollapsibleContent,
-        isLoading: isLoading ?? false,
-        children: [
-          code2 && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeBlock, { code: code2, isUser }),
-          fileContent && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CodeBlock,
-            {
-              header: "Content",
-              code: fileContent,
-              isUser,
-              language: fileLanguage
-            }
-          ),
-          replacements && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CodeBlock,
+    (!compact || isRowExpanded) && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      message2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Box,
+        {
+          sx: {
+            borderRadius: 2,
+            color: (theme2) => theme2.palette.text.primary,
+            width: "100%",
+            wordBreak: "break-word",
+            overflowWrap: "break-word",
+            position: "relative",
+            mb: 2
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            MarkdownRenderer,
             {
-              header: "Replacements",
-              code: replacements,
-              isUser,
-              language: "diff"
+              content: trimmedMessage,
+              styleProps: markdownStyleProps
             }
-          ),
-          stdout && /* @__PURE__ */ jsxRuntimeExports.jsx(OutputBlock, { output: stdout, isUser }),
-          stderr && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBlock, { error: stderr, isUser }),
-          logging && /* @__PURE__ */ jsxRuntimeExports.jsx(LogBlock, { log: logging, isUser })
-        ]
-      }
-    ),
-    files && files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2, mt: 2 }, children: files.filter((file) => isImage$2(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ImageAttachment,
-      {
-        file,
-        src: getUrl2(file),
-        onClick: handleFileClick,
-        conversationId
-      },
-      `${file}`
-    )) }),
-    files && files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: files.filter((file) => isVideo$2(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      VideoAttachment,
-      {
-        file,
-        src: getUrl2(file),
-        onClick: handleFileClick,
-        conversationId
-      },
-      `${file}`
-    )) }),
-    files && files.length > 0 && files.some((file) => isAudio$2(file)) && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: files.filter((file) => isAudio$2(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      AudioAttachment,
-      {
-        content: getUrl2(file),
-        isUser
-      },
-      `${file}`
-    )) }),
-    files && files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: files.filter(
-      (file) => !isImage$2(file) && !isVideo$2(file) && !isAudio$2(file)
-    ).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      FileAttachment,
-      {
-        file,
-        onClick: handleFileClick,
-        conversationId
-      },
-      `${file}`
-    )) })
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        ExpandableActionElement,
+        {
+          executionType,
+          action,
+          isUser,
+          isExpanded: isDetailsExpanded,
+          onExpand: handleExpand,
+          onCollapse: handleCollapse,
+          hasCollapsibleContent,
+          isLoading: isLoading ?? false,
+          children: [
+            code2 && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeBlock, { code: code2, isUser }),
+            fileContent && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              CodeBlock,
+              {
+                header: "Content",
+                code: fileContent,
+                isUser,
+                language: fileLanguage
+              }
+            ),
+            replacements && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              CodeBlock,
+              {
+                header: "Replacements",
+                code: replacements,
+                isUser,
+                language: "diff"
+              }
+            ),
+            stdout && /* @__PURE__ */ jsxRuntimeExports.jsx(OutputBlock, { output: stdout, isUser }),
+            stderr && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBlock, { error: stderr, isUser }),
+            logging && /* @__PURE__ */ jsxRuntimeExports.jsx(LogBlock, { log: logging, isUser })
+          ]
+        }
+      ),
+      files && files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2, mt: 2 }, children: files.filter((file) => isImage$2(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ImageAttachment,
+        {
+          file,
+          src: getUrl2(file),
+          onClick: handleFileClick,
+          conversationId
+        },
+        `${file}`
+      )) }),
+      files && files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: files.filter((file) => isVideo$2(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        VideoAttachment,
+        {
+          file,
+          src: getUrl2(file),
+          onClick: handleFileClick,
+          conversationId
+        },
+        `${file}`
+      )) }),
+      files && files.length > 0 && files.some((file) => isAudio$2(file)) && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: files.filter((file) => isAudio$2(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        AudioAttachment,
+        {
+          content: getUrl2(file),
+          isUser
+        },
+        `${file}`
+      )) }),
+      files && files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: files.filter(
+        (file) => !isImage$2(file) && !isVideo$2(file) && !isAudio$2(file)
+      ).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        FileAttachment,
+        {
+          file,
+          onClick: handleFileClick,
+          conversationId
+        },
+        `${file}`
+      )) }),
+      isRowExpanded && messageId && timestamp2 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Box,
+        {
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 1,
+            mt: 1.25
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MessageControls,
+              {
+                inline: true,
+                isUser,
+                content: trimmedMessage,
+                messageId,
+                agentId: agentId || conversationId
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MessageTimestamp,
+              {
+                inline: true,
+                timestamp: timestamp2,
+                isUser,
+                isSmallView
+              }
+            )
+          ]
+        }
+      ),
+      compact && isRowExpanded && !hasCollapsibleContent && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Box,
+        {
+          component: "button",
+          type: "button",
+          onClick: handleCompactToggle,
+          "aria-expanded": false,
+          sx: (theme2) => ({
+            marginTop: 1.25,
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 0.5,
+            padding: "4px 8px",
+            borderRadius: 1,
+            border: "none",
+            cursor: "pointer",
+            backgroundColor: alpha$1(
+              theme2.palette.common.black,
+              theme2.palette.mode === "dark" ? 0.12 : 0.04
+            ),
+            color: theme2.palette.text.secondary
+          }),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronUp, { size: 14 }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "caption", children: "Condense" })
+          ]
+        }
+      )
+    ] })
   ] });
 };
 const SectionHeader = styled$1(Box)(({ theme: theme2 }) => ({
@@ -315242,31 +315702,45 @@ const CollapsibleMessage = ({ children: children2, defaultCollapsed = true, hasC
   ] });
 };
 const StyledAvatar = styled$1(Avatar, {
-  shouldForwardProp: (prop) => prop !== "isUser"
-})(({ isUser, theme: theme2 }) => ({
+  shouldForwardProp: (prop) => prop !== "isUser" && prop !== "compact"
+})(({ isUser, compact, theme: theme2 }) => ({
   backgroundColor: isUser ? theme2.palette.userMessage.background : theme2.palette.icon.background,
   color: isUser ? "white" : theme2.palette.icon.text,
   boxShadow: isUser ? theme2.palette.userMessage.shadow : "none",
-  border: isUser ? `1px solid ${theme2.palette.userMessage.border}` : "none"
+  border: isUser ? `1px solid ${theme2.palette.userMessage.border}` : "none",
+  width: compact ? 34 : 40,
+  height: compact ? 34 : 40
 }));
-const MessageAvatar = ({ isUser }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledAvatar, { isUser, children: isUser ? /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: 22, "aria-label": "User" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { size: 22, "aria-label": "Assistant" }) });
+const MessageAvatar = ({ isUser, compact }) => {
+  const iconSize = compact ? 18 : 22;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledAvatar, { isUser, compact, children: isUser ? /* @__PURE__ */ jsxRuntimeExports.jsx(User, { size: iconSize, "aria-label": "User" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { size: iconSize, "aria-label": "Assistant" }) });
 };
 const StyledContainer = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "isUser" && prop !== "isSmallView"
-})(({ isUser, isSmallView }) => ({
-  display: "flex",
-  flexDirection: isUser ? "row-reverse" : "row",
-  alignItems: "flex-start",
-  gap: isSmallView ? 8 : 16,
-  marginBottom: isSmallView ? 8 : 12
-}));
+  shouldForwardProp: (prop) => prop !== "isUser" && prop !== "isSmallView" && prop !== "compact"
+})(
+  ({ isUser, isSmallView, compact }) => ({
+    display: "flex",
+    flexDirection: isUser ? "row-reverse" : "row",
+    alignItems: "flex-start",
+    gap: compact ? isSmallView ? 6 : 10 : isSmallView ? 8 : 16,
+    marginBottom: compact ? isSmallView ? 6 : 8 : isSmallView ? 8 : 12
+  })
+);
 const MessageContainer = ({
   isUser,
   children: children2,
-  isSmallView
+  isSmallView,
+  compact
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledContainer, { isUser, isSmallView, children: children2 });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    StyledContainer,
+    {
+      isUser,
+      isSmallView,
+      compact,
+      children: children2
+    }
+  );
 };
 const ContentContainer$2 = styled$1(Box)(() => ({
   marginBottom: 0
@@ -315335,181 +315809,6 @@ const ExpandableThinkingContent = ({
   ] });
 };
 ExpandableThinkingContent.displayName = "ExpandableThinkingContent";
-const ControlsContainer = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "isUser"
-})(({ isUser }) => ({
-  position: "absolute",
-  bottom: isUser ? 8 : -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 StyledIconButton = styled$1(IconButton)(({ theme: theme2 }) => ({
-  color: theme2.palette.text.secondary,
-  width: "34px",
-  height: "34px",
-  "&:hover": {
-    color: theme2.palette.primary.main,
-    backgroundColor: alpha$1(theme2.palette.primary.main, 0.1)
-  }
-}));
-const MessageControls = ({
-  isUser,
-  content: content2,
-  sx,
-  messageId,
-  agentId
-}) => {
-  const [copied, setCopied] = reactExports.useState(false);
-  const { data: credentialsData, isLoading: isLoadingCredentials } = useCredentials();
-  const {
-    playSpeech,
-    stopSpeech,
-    replaySpeech,
-    loadingMessageId,
-    playingMessageId,
-    audioCache
-  } = useSpeechStore();
-  const isPlaying = playingMessageId === messageId;
-  const isLoading = loadingMessageId === messageId;
-  const hasAudio = audioCache.has(messageId);
-  const isRadientApiKeyConfigured = reactExports.useMemo(
-    () => credentialsData?.keys?.includes("RADIENT_API_KEY"),
-    [credentialsData?.keys]
-  );
-  const canEnableSpeechFeature = reactExports.useMemo(
-    () => isRadientApiKeyConfigured && !isLoadingCredentials,
-    [isRadientApiKeyConfigured, isLoadingCredentials]
-  );
-  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);
-    }
-  };
-  const handlePlay = () => {
-    if (agentId && content2) {
-      playSpeech(messageId, agentId, content2);
-    }
-  };
-  const handleReplay = () => {
-    replaySpeech(messageId);
-  };
-  const handleStop = () => {
-    stopSpeech();
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ControlsContainer, { isUser, className: "message-controls", sx, children: showCopyButton && /* @__PURE__ */ jsxRuntimeExports.jsxs(ControlsWrapper, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: copied ? "Copied!" : "Copy message", placement: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledIconButton, { size: "small", onClick: handleCopy, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { size: 16 }) }) }),
-    !isUser && (isPlaying ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Stop", placement: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledIconButton, { size: "small", onClick: handleStop, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Square, { size: 16 }) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Tooltip$1,
-      {
-        title: !canEnableSpeechFeature ? "Sign in to Radient in the settings page to enable text to speech" : isLoading ? "Loading" : hasAudio ? "Replay Speech" : "Speak Aloud",
-        placement: "top",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          StyledIconButton,
-          {
-            size: "small",
-            onClick: hasAudio ? handleReplay : handlePlay,
-            disabled: isLoading || !canEnableSpeechFeature,
-            children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 16 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Volume2, { size: 16 })
-          }
-        ) })
-      }
-    ))
-  ] }) });
-};
-const formatMessageDateTime = (dateTimeString) => {
-  if (!dateTimeString) return "";
-  try {
-    const messageDate = dateTimeString instanceof Date ? dateTimeString : new Date(dateTimeString);
-    const now2 = /* @__PURE__ */ new Date();
-    const yesterday = new Date(now2);
-    yesterday.setDate(now2.getDate() - 1);
-    if (messageDate.toDateString() === now2.toDateString()) {
-      return format$3(messageDate, "h:mm a");
-    }
-    if (messageDate.toDateString() === yesterday.toDateString()) {
-      return "Yesterday";
-    }
-    const oneWeekAgo = new Date(now2);
-    oneWeekAgo.setDate(now2.getDate() - 7);
-    if (messageDate > oneWeekAgo) {
-      return format$3(messageDate, "EEEE");
-    }
-    return format$3(messageDate, "yyyy-MM-dd");
-  } catch (error) {
-    console.error("Error formatting date:", error);
-    return "";
-  }
-};
-const getFullDateTime = (dateTimeString) => {
-  if (!dateTimeString) return "";
-  try {
-    const date2 = dateTimeString instanceof Date ? dateTimeString : new Date(dateTimeString);
-    return date2.toLocaleString();
-  } catch (error) {
-    console.error("Error getting full date time:", error);
-    return "";
-  }
-};
-const StyledTimestamp = styled$1(Typography, {
-  shouldForwardProp: (prop) => prop !== "isUser"
-})(
-  ({ isUser, theme: theme2, isSmallView }) => ({
-    display: "block",
-    marginTop: 8,
-    textAlign: isUser ? "left" : "right",
-    color: theme2.palette.text.secondary,
-    fontSize: "0.7rem",
-    width: isUser ? "auto" : isSmallView ? "100%" : "calc(100% - 52px)",
-    cursor: "help"
-    // Indicate that hovering will show more information
-  })
-);
-const MessageTimestamp = ({
-  timestamp: timestamp2,
-  isUser,
-  sx,
-  isSmallView
-}) => {
-  const formattedTime = formatMessageDateTime(timestamp2);
-  const fullDateTime = getFullDateTime(timestamp2);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    Tooltip$1,
-    {
-      title: fullDateTime,
-      arrow: true,
-      placement: "bottom",
-      enterDelay: 1200,
-      enterNextDelay: 1200,
-      sx,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        StyledTimestamp,
-        {
-          variant: "caption",
-          isUser,
-          isSmallView,
-          children: formattedTime
-        }
-      )
-    }
-  );
-};
 const isWebUrl$1 = (path2) => path2.startsWith("http://") || path2.startsWith("https://");
 const isImage$1 = (path2) => {
   const imageExtensions = [
@@ -315571,6 +315870,46 @@ const getAttachmentUrl$1 = (client2, path2) => {
   if (isAudio$1(path2)) return client2.static.getAudioUrl(normalizedPath);
   return path2;
 };
+const getStreamingPreviewText = (message2) => {
+  const cleanedMessage = message2?.message?.replace(/\s+/g, " ").replace(/(```\w+\s*)+$/g, "").trim();
+  if (cleanedMessage) {
+    return cleanedMessage;
+  }
+  switch (message2?.action) {
+    case "CODE":
+      return "Executing code";
+    case "READ":
+      return "Reading content";
+    case "WRITE":
+      return "Writing content";
+    case "EDIT":
+      return "Editing content";
+    case "ASK":
+      return "Formulating a question";
+    default:
+      return "Working on your request";
+  }
+};
+const getStreamingCompactIcon = (message2) => {
+  switch (message2?.action) {
+    case "DONE":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { size: 14 });
+    case "ASK":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(CircleHelp, { size: 14 });
+    case "CODE":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(CodeXml, { size: 14 });
+    case "WRITE":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Pencil, { size: 12 });
+    case "EDIT":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(PencilLine, { size: 14 });
+    case "READ":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Book, { size: 14 });
+    case "DELEGATE":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Share2, { size: 14 });
+    default:
+      return message2?.execution_type === "plan" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Lightbulb, { size: 14 }) : message2?.execution_type === "action" ? /* @__PURE__ */ jsxRuntimeExports.jsx(CodeXml, { size: 14 }) : /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { size: 14 });
+  }
+};
 const StreamingContainer = styled$1(Box)(() => ({
   position: "relative",
   overflow: "hidden",
@@ -315603,30 +315942,13 @@ const StreamingMessage = ({
   className,
   conversationId,
   refetchOnComplete = true,
-  styleProps
+  styleProps,
+  compactInProgress = false
 }) => {
-  const { getStreamingMessage, isMessageStreamingComplete } = useStreamingMessagesStore();
-  const storeMessage = getStreamingMessage(messageId);
-  const isStoreMessageComplete = isMessageStreamingComplete(messageId);
-  const handleComplete = reactExports.useCallback(
-    (completedMessage) => {
-      setTimeout(() => {
-        if (onComplete) {
-          onComplete(completedMessage);
-        }
-      }, 50);
-    },
-    [onComplete]
+  const storeMessage = useStreamingMessagesStore(
+    (state2) => state2.streamingMessages[messageId] ?? null
   );
-  reactExports.useEffect(() => {
-    if (isStoreMessageComplete && storeMessage?.content && onComplete) {
-      const timer2 = setTimeout(() => {
-        onComplete(storeMessage.content);
-      }, 50);
-      return () => clearTimeout(timer2);
-    }
-    return void 0;
-  }, [isStoreMessageComplete, storeMessage, onComplete]);
+  const isStoreMessageComplete = storeMessage?.isComplete ?? false;
   const {
     message: wsMessage,
     isStreamable,
@@ -315640,7 +315962,7 @@ const StreamingMessage = ({
   } = useStreamingMessage({
     messageId,
     autoConnect,
-    onComplete: handleComplete,
+    onComplete,
     onUpdate,
     keepAlive,
     conversationId,
@@ -315699,30 +316021,6 @@ const StreamingMessage = ({
     () => status === "connected" && !isStoreMessageComplete,
     [status, isStoreMessageComplete]
   );
-  const shouldShowStreaming = reactExports.useMemo(() => {
-    return status === "connected" && !isStoreMessageComplete;
-  }, [status, isStoreMessageComplete]);
-  const hasCalledOnCompleteRef = reactExports.useRef(false);
-  reactExports.useEffect(() => {
-    if (!shouldShowStreaming && storeMessage?.content && onComplete && !hasCalledOnCompleteRef.current) {
-      hasCalledOnCompleteRef.current = true;
-      const timer2 = setTimeout(() => {
-        onComplete(storeMessage.content);
-      }, 50);
-      return () => clearTimeout(timer2);
-    }
-    return void 0;
-  }, [shouldShowStreaming, storeMessage, onComplete]);
-  reactExports.useEffect(() => {
-    hasCalledOnCompleteRef.current = false;
-  }, []);
-  reactExports.useEffect(() => {
-    return () => {
-      if (hasCalledOnCompleteRef.current) {
-        hasCalledOnCompleteRef.current = false;
-      }
-    };
-  }, []);
   const lastValidMessageRef = reactExports.useRef(null);
   const message2 = reactExports.useMemo(() => {
     if (wsMessage) {
@@ -315752,8 +316050,128 @@ const StreamingMessage = ({
       onConnectionControls(connectionControls);
     }
   }, [onConnectionControls, connectionControls]);
+  const [isActionExpanded, setIsActionExpanded] = reactExports.useState(!compactInProgress);
+  const [isThinkingExpanded, setIsThinkingExpanded] = reactExports.useState(false);
+  const [isInProgressDetailsExpanded, setIsInProgressDetailsExpanded] = reactExports.useState(!compactInProgress);
+  reactExports.useEffect(() => {
+    if (!messageId) {
+      return;
+    }
+    setIsActionExpanded(!compactInProgress);
+    setIsThinkingExpanded(false);
+    setIsInProgressDetailsExpanded(!compactInProgress);
+  }, [messageId, compactInProgress]);
+  const useCompactInProgressMode = compactInProgress && !isStoreMessageComplete;
+  const showExpandedStreamingDetails = !useCompactInProgressMode || isInProgressDetailsExpanded;
+  reactExports.useEffect(() => {
+    if (useCompactInProgressMode && isInProgressDetailsExpanded) {
+      setIsActionExpanded(true);
+    }
+  }, [useCompactInProgressMode, isInProgressDetailsExpanded]);
+  const compactPreviewText = reactExports.useMemo(
+    () => getStreamingPreviewText(message2),
+    [message2]
+  );
+  const compactSummaryIcon = reactExports.useMemo(
+    () => getStreamingCompactIcon(message2),
+    [message2]
+  );
+  const toggleInProgressDetails = reactExports.useCallback(() => {
+    if (!useCompactInProgressMode) return;
+    setIsInProgressDetailsExpanded((prev2) => !prev2);
+  }, [useCompactInProgressMode]);
+  const compactSummaryLine = reactExports.useMemo(() => {
+    if (!useCompactInProgressMode) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Box,
+      {
+        component: "button",
+        type: "button",
+        "aria-expanded": isInProgressDetailsExpanded,
+        onClick: toggleInProgressDetails,
+        sx: {
+          display: "flex",
+          justifyContent: "flex-start",
+          alignItems: "center",
+          cursor: "pointer",
+          minHeight: 28,
+          opacity: 0.9,
+          mb: showExpandedStreamingDetails ? 1 : 0,
+          padding: 0,
+          width: "100%",
+          border: "none",
+          background: "transparent",
+          textAlign: "left"
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Box,
+          {
+            sx: (theme2) => ({
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 1,
+              maxWidth: "100%",
+              padding: "5px 10px",
+              borderRadius: "999px",
+              color: theme2.palette.text.secondary,
+              backgroundColor: alpha$1(
+                theme2.palette.common.black,
+                theme2.palette.mode === "dark" ? 0.14 : 0.04
+              )
+            }),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Box,
+                {
+                  component: "span",
+                  sx: {
+                    width: 20,
+                    height: 20,
+                    borderRadius: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0
+                  },
+                  children: compactSummaryIcon
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Typography,
+                {
+                  variant: "body2",
+                  noWrap: true,
+                  sx: {
+                    maxWidth: "100%",
+                    fontSize: "0.82rem",
+                    lineHeight: 1.35,
+                    color: "inherit",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap"
+                  },
+                  children: compactPreviewText
+                }
+              ),
+              isActivelyStreaming && /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 12, thickness: 4 })
+            ]
+          }
+        )
+      }
+    );
+  }, [
+    useCompactInProgressMode,
+    isInProgressDetailsExpanded,
+    showExpandedStreamingDetails,
+    compactSummaryIcon,
+    compactPreviewText,
+    isActivelyStreaming,
+    toggleInProgressDetails
+  ]);
   const statusIndicator = reactExports.useMemo(() => {
-    if (!showStatus) return null;
+    if (!showStatus || useCompactInProgressMode) return null;
     switch (status) {
       case "connecting":
       case "reconnecting":
@@ -315809,7 +316227,7 @@ const StreamingMessage = ({
       default:
         return null;
     }
-  }, [status, showStatus]);
+  }, [status, showStatus, useCompactInProgressMode]);
   const loadingIndicator = reactExports.useMemo(() => {
     if (!isLoading && !isRefetching) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center", mt: 1 }, children: [
@@ -315866,8 +316284,6 @@ const StreamingMessage = ({
       }
     );
   }, [error]);
-  const [isActionExpanded, setIsActionExpanded] = reactExports.useState(false);
-  const [isThinkingExpanded, setIsThinkingExpanded] = reactExports.useState(false);
   const handleActionExpand = () => setIsActionExpanded(true);
   const handleActionCollapse = (e3) => {
     e3.stopPropagation();
@@ -315913,105 +316329,108 @@ const StreamingMessage = ({
       "data-streaming": isActivelyStreaming ? "true" : "false",
       children: [
         statusIndicator,
-        children2,
-        loadingIndicator,
-        message2?.thinking && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ExpandableThinkingContent,
-          {
-            thinking: message2.thinking,
-            isExpanded: isThinkingExpanded,
-            onExpand: handleThinkingExpand,
-            onCollapse: handleThinkingCollapse
-          }
-        ),
-        messageContent,
-        streamingLoader,
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          ExpandableActionElement,
-          {
-            executionType: message2?.execution_type || "action",
-            action: message2?.action,
-            isUser: false,
-            isExpanded: isActionExpanded,
-            onExpand: handleActionExpand,
-            onCollapse: handleActionCollapse,
-            hasCollapsibleContent,
-            isLoading: isActivelyStreaming,
-            children: [
-              message2?.code && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                CodeBlock,
-                {
-                  code: message2.code,
-                  isUser: false,
-                  flexDirection: "column-reverse"
-                }
-              ),
-              message2?.content && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                CodeBlock,
-                {
-                  header: "Content",
-                  code: message2.content,
-                  isUser: false,
-                  language: fileLanguage,
-                  flexDirection: "column-reverse"
-                }
-              ),
-              message2?.replacements && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                CodeBlock,
-                {
-                  header: "Replacements",
-                  code: message2.replacements,
-                  isUser: false,
-                  language: "diff",
-                  flexDirection: "column-reverse"
-                }
-              ),
-              message2?.stdout && /* @__PURE__ */ jsxRuntimeExports.jsx(OutputBlock, { output: message2.stdout, isUser: false }),
-              message2?.stderr && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBlock, { error: message2.stderr, isUser: false }),
-              message2?.logging && /* @__PURE__ */ jsxRuntimeExports.jsx(LogBlock, { log: message2.logging, isUser: false })
-            ]
-          }
-        ),
-        message2?.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2, mt: 2 }, children: message2.files.filter((file) => isImage$1(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ImageAttachment,
-          {
-            file,
-            src: getUrl2(file),
-            onClick: handleFileClick,
-            conversationId: conversationId ?? ""
-          },
-          `${messageId}-${file}`
-        )) }),
-        message2?.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isVideo$1(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          VideoAttachment,
-          {
-            file,
-            src: getUrl2(file),
-            onClick: handleFileClick,
-            conversationId: conversationId ?? ""
-          },
-          `${messageId}-${file}`
-        )) }),
-        message2?.files && message2.files.length > 0 && message2.files.some((file) => isAudio$1(file)) && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isAudio$1(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          AudioAttachment,
-          {
-            content: getUrl2(file),
-            isUser: false
-          },
-          `${messageId}-${file}`
-        )) }),
-        message2?.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter(
-          (file) => !isImage$1(file) && !isVideo$1(file) && !isAudio$1(file)
-        ).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-          FileAttachment,
-          {
-            file,
-            onClick: handleFileClick,
-            conversationId: conversationId ?? ""
-          },
-          `${messageId}-${file}`
-        )) }),
-        errorDisplay,
+        compactSummaryLine,
+        showExpandedStreamingDetails && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          children2,
+          loadingIndicator,
+          message2?.thinking && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ExpandableThinkingContent,
+            {
+              thinking: message2.thinking,
+              isExpanded: isThinkingExpanded,
+              onExpand: handleThinkingExpand,
+              onCollapse: handleThinkingCollapse
+            }
+          ),
+          messageContent,
+          streamingLoader,
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            ExpandableActionElement,
+            {
+              executionType: message2?.execution_type || "action",
+              action: message2?.action,
+              isUser: false,
+              isExpanded: isActionExpanded,
+              onExpand: handleActionExpand,
+              onCollapse: handleActionCollapse,
+              hasCollapsibleContent,
+              isLoading: isActivelyStreaming,
+              children: [
+                message2?.code && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  CodeBlock,
+                  {
+                    code: message2.code,
+                    isUser: false,
+                    flexDirection: "column-reverse"
+                  }
+                ),
+                message2?.content && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  CodeBlock,
+                  {
+                    header: "Content",
+                    code: message2.content,
+                    isUser: false,
+                    language: fileLanguage,
+                    flexDirection: "column-reverse"
+                  }
+                ),
+                message2?.replacements && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  CodeBlock,
+                  {
+                    header: "Replacements",
+                    code: message2.replacements,
+                    isUser: false,
+                    language: "diff",
+                    flexDirection: "column-reverse"
+                  }
+                ),
+                message2?.stdout && /* @__PURE__ */ jsxRuntimeExports.jsx(OutputBlock, { output: message2.stdout, isUser: false }),
+                message2?.stderr && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBlock, { error: message2.stderr, isUser: false }),
+                message2?.logging && /* @__PURE__ */ jsxRuntimeExports.jsx(LogBlock, { log: message2.logging, isUser: false })
+              ]
+            }
+          ),
+          message2?.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2, mt: 2 }, children: message2.files.filter((file) => isImage$1(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ImageAttachment,
+            {
+              file,
+              src: getUrl2(file),
+              onClick: handleFileClick,
+              conversationId: conversationId ?? ""
+            },
+            `${messageId}-${file}`
+          )) }),
+          message2?.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isVideo$1(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            VideoAttachment,
+            {
+              file,
+              src: getUrl2(file),
+              onClick: handleFileClick,
+              conversationId: conversationId ?? ""
+            },
+            `${messageId}-${file}`
+          )) }),
+          message2?.files && message2.files.length > 0 && message2.files.some((file) => isAudio$1(file)) && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isAudio$1(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            AudioAttachment,
+            {
+              content: getUrl2(file),
+              isUser: false
+            },
+            `${messageId}-${file}`
+          )) }),
+          message2?.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter(
+            (file) => !isImage$1(file) && !isVideo$1(file) && !isAudio$1(file)
+          ).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FileAttachment,
+            {
+              file,
+              onClick: handleFileClick,
+              conversationId: conversationId ?? ""
+            },
+            `${messageId}-${file}`
+          )) }),
+          errorDisplay
+        ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: scrollRef, style: { height: 1, width: 1, opacity: 0 } })
       ]
     }
@@ -316046,13 +316465,13 @@ const MessagePaper = React$1.memo(
     content: content2,
     message: message2,
     onMessageComplete,
-    isLastMessage,
-    isJobRunning,
     agentId,
-    isSmallView
+    isSmallView,
+    metadataMode = "default"
   }) => {
     const theme2 = useTheme$2();
     const messageContentRef = reactExports.useRef(null);
+    const shouldRenderDefaultMetadata = metadataMode === "default";
     const { replies, remainingContent } = reactExports.useMemo(
       () => parseReplies(content2 || ""),
       [content2]
@@ -316064,6 +316483,7 @@ const MessagePaper = React$1.memo(
       }),
       [isSmallView]
     );
+    const resolvedConversationId = message2?.conversation_id ?? agentId;
     if (isUser) {
       const childrenWithRemainingContent = React$1.Children.map(
         children2,
@@ -316107,7 +316527,7 @@ const MessagePaper = React$1.memo(
                 ] })
               }
             ),
-            message2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            message2 && shouldRenderDefaultMetadata && /* @__PURE__ */ jsxRuntimeExports.jsx(
               MessageControls,
               {
                 isUser,
@@ -316124,39 +316544,26 @@ const MessagePaper = React$1.memo(
       () => message2?.is_streamable === true && message2?.is_complete === false && !isUser,
       [message2?.is_streamable, message2?.is_complete, isUser]
     );
-    const { isMessageStreamingComplete } = useStreamingMessagesStore();
-    const isStreamingActuallyComplete = reactExports.useMemo(() => {
-      if (!message2?.id) return true;
-      return isMessageStreamingComplete(message2.id);
-    }, [message2?.id, isMessageStreamingComplete]);
+    const isStreamingActuallyComplete = useStreamingMessagesStore(
+      (state2) => message2?.id ? state2.streamingMessages[message2.id]?.isComplete ?? false : true
+    );
     const shouldShowStreaming = reactExports.useMemo(() => {
       if (!isStreamable) return false;
       if (isStreamingActuallyComplete) return false;
-      return isJobRunning;
-    }, [isStreamable, isStreamingActuallyComplete, isJobRunning]);
-    const hasHandledCompletionRef = reactExports.useRef(false);
+      return true;
+    }, [isStreamable, isStreamingActuallyComplete]);
+    const completionNotifiedRef = reactExports.useRef(null);
     reactExports.useEffect(() => {
-      if (!shouldShowStreaming && message2 && !hasHandledCompletionRef.current) {
-        hasHandledCompletionRef.current = true;
-        const timer2 = setTimeout(() => {
-          if (onMessageComplete) {
-            onMessageComplete();
-          }
-        }, 50);
-        return () => clearTimeout(timer2);
+      if (!message2?.id) return;
+      if (shouldShowStreaming) {
+        completionNotifiedRef.current = null;
+        return;
       }
-      return void 0;
-    }, [shouldShowStreaming, message2, onMessageComplete]);
-    reactExports.useEffect(() => {
-      hasHandledCompletionRef.current = false;
-    }, []);
-    reactExports.useEffect(() => {
-      return () => {
-        if (hasHandledCompletionRef.current) {
-          hasHandledCompletionRef.current = false;
-        }
-      };
-    }, []);
+      if (onMessageComplete && completionNotifiedRef.current !== message2.id) {
+        completionNotifiedRef.current = message2.id;
+        onMessageComplete();
+      }
+    }, [message2?.id, onMessageComplete, shouldShowStreaming]);
     const messageStyles = reactExports.useMemo(
       () => ({
         borderRadius: 2,
@@ -316170,34 +316577,6 @@ const MessagePaper = React$1.memo(
       }),
       [theme2.palette.text.primary, isSmallView]
     );
-    const {
-      containerRef: scrollRef,
-      scrollToBottom,
-      isFarFromBottom
-    } = useScrollToBottom();
-    const isNearBottom = !isFarFromBottom;
-    const shouldAutoScrollRef = reactExports.useRef(true);
-    reactExports.useEffect(() => {
-      if (!isLastMessage || !shouldShowStreaming || !message2) return;
-      shouldAutoScrollRef.current = isNearBottom;
-      const scrollInterval = setInterval(() => {
-        if (shouldAutoScrollRef.current) {
-          scrollToBottom();
-        }
-      }, 350);
-      return () => {
-        clearInterval(scrollInterval);
-      };
-    }, [
-      shouldShowStreaming,
-      message2,
-      scrollToBottom,
-      isNearBottom,
-      isLastMessage
-    ]);
-    reactExports.useEffect(() => {
-      shouldAutoScrollRef.current = isNearBottom;
-    }, [isNearBottom]);
     const streamingMessageComponent = reactExports.useMemo(() => {
       if (!shouldShowStreaming || !message2) return null;
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -316208,19 +316587,21 @@ const MessagePaper = React$1.memo(
           showStatus: false,
           keepAlive: true,
           sx: messageStyles,
-          conversationId: message2.conversation_id,
+          conversationId: resolvedConversationId,
           refetchOnComplete: true,
           onComplete: () => {
             if (onMessageComplete) {
               onMessageComplete();
             }
           },
-          styleProps: markdownStyleProps
+          styleProps: markdownStyleProps,
+          compactInProgress: true
         }
       );
     }, [
       shouldShowStreaming,
       message2,
+      resolvedConversationId,
       messageStyles,
       onMessageComplete,
       markdownStyleProps
@@ -316260,13 +316641,13 @@ const MessagePaper = React$1.memo(
           }
         ),
         childrenWithRemainingContent,
-        message2?.conversation_id && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        resolvedConversationId && /* @__PURE__ */ jsxRuntimeExports.jsx(
           TextSelectionControls,
           {
             agentId,
             targetRef: messageContentRef,
             isUser,
-            conversationId: message2.conversation_id,
+            conversationId: resolvedConversationId,
             showSpeech: true,
             showCopy: true,
             showReply: true
@@ -316283,6 +316664,7 @@ const MessagePaper = React$1.memo(
       handleThinkingExpand,
       handleThinkingCollapse,
       agentId,
+      resolvedConversationId,
       replies,
       remainingContent,
       markdownStyleProps
@@ -316301,7 +316683,7 @@ const MessagePaper = React$1.memo(
         children: [
           streamingMessageComponent,
           regularMessageComponents,
-          message2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          message2 && shouldRenderDefaultMetadata && /* @__PURE__ */ jsxRuntimeExports.jsx(
             MessageTimestamp,
             {
               timestamp: message2.timestamp,
@@ -316316,7 +316698,7 @@ const MessagePaper = React$1.memo(
               }
             }
           ),
-          message2 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          message2 && shouldRenderDefaultMetadata && /* @__PURE__ */ jsxRuntimeExports.jsx(
             MessageControls,
             {
               isUser,
@@ -316334,8 +316716,7 @@ const MessagePaper = React$1.memo(
                 // If not, a transition could be added here for when isStreamable changes.
               }
             }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: scrollRef, style: { height: 1, width: 1, opacity: 0 } })
+          )
         ]
       }
     );
@@ -316387,6 +316768,7 @@ const SecurityCheckHighlight = ({
     children2
   ] });
 };
+const localOperatorClient = createLocalOperatorClient(apiConfig.baseUrl);
 const isWebUrl = (path2) => {
   return path2.startsWith("http://") || path2.startsWith("https://");
 };
@@ -316495,12 +316877,9 @@ const MessageItem = reactExports.memo(
         }
       }
     }, [message2.files, conversationId, addMentionedFilesBatch]);
-    const client2 = reactExports.useMemo(() => {
-      return createLocalOperatorClient(apiConfig.baseUrl);
-    }, []);
     const getUrl2 = reactExports.useCallback(
-      (path2) => getAttachmentUrl(client2, path2),
-      [client2]
+      (path2) => getAttachmentUrl(localOperatorClient, path2),
+      []
     );
     const handleFileClick = reactExports.useCallback(async (filePath) => {
       try {
@@ -316524,205 +316903,233 @@ const MessageItem = reactExports.memo(
       return null;
     }
     const isUser = message2.role === "user";
+    const isCompactAssistantMessage = !isUser && Boolean(message2.action);
     const isAction2 = message2.execution_type === "action";
     const isSecurityCheck = message2.execution_type === "security_check";
     const shouldUseActionBlock = message2.execution_type === "reflection" || message2.execution_type === "action";
     if (shouldUseActionBlock) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsxs(MessageContainer, { isUser, isSmallView, children: [
-        !isSmallView && /* @__PURE__ */ jsxRuntimeExports.jsx(MessageAvatar, { isUser }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          MessagePaper,
-          {
-            isUser,
-            content: message2.message,
-            isSmallView,
-            message: message2,
-            onMessageComplete,
-            isLastMessage: isLastMessage ?? false,
-            isJobRunning: !!currentExecution,
-            agentId: conversationId,
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              ActionBlock,
-              {
-                message: message2.message ?? "",
-                fileContent: message2.content,
-                replacements: message2.replacements,
-                action: message2.action,
-                executionType: message2.execution_type || "action",
-                isUser,
-                code: message2.code,
-                stdout: currentExecution?.stdout ?? message2.stdout,
-                stderr: currentExecution?.stderr ?? message2.stderr,
-                logging: currentExecution?.logging ?? message2.logging,
-                files: message2.files,
-                conversationId,
-                filePath: message2.file_path,
-                isLoading: isLastMessage && !!currentExecution,
-                isSmallView
-              }
-            )
-          }
-        )
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(MessageContainer, { isUser, isSmallView, children: [
-      !isSmallView && /* @__PURE__ */ jsxRuntimeExports.jsx(MessageAvatar, { isUser }),
-      isSecurityCheck ? /* @__PURE__ */ jsxRuntimeExports.jsx(SecurityCheckHighlight, { isUser, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        MessagePaper,
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        MessageContainer,
         {
           isUser,
-          content: message2.message,
           isSmallView,
-          message: message2,
-          onMessageComplete,
-          isLastMessage: isLastMessage ?? false,
-          isJobRunning: !!currentExecution,
-          agentId: conversationId,
+          compact: isCompactAssistantMessage,
           children: [
-            message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              ImageAttachment,
-              {
-                file,
-                src: getUrl2(file),
-                onClick: handleFileClick,
-                conversationId
-              },
-              `${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,
+            !isSmallView && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MessageAvatar,
               {
-                file,
-                src: getUrl2(file),
-                onClick: handleFileClick,
-                conversationId
-              },
-              `${message2.id}-${file}`
-            )) }),
-            message2.message && !(message2.is_streamable && !message2.is_complete) && /* @__PURE__ */ jsxRuntimeExports.jsx(MessageContent, { content: message2.message, isUser }),
-            (() => {
-              const hasCollapsibleContent = isSecurityCheck && (message2.code || message2.stdout || message2.stderr || message2.logging);
-              const contentBlocks = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                message2.code && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeBlock, { code: message2.code, isUser }),
-                message2.stdout && /* @__PURE__ */ jsxRuntimeExports.jsx(OutputBlock, { output: message2.stdout, isUser }),
-                message2.stderr && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBlock, { error: message2.stderr, isUser }),
-                message2.logging && /* @__PURE__ */ jsxRuntimeExports.jsx(LogBlock, { log: message2.logging, isUser })
-              ] });
-              if (hasCollapsibleContent) {
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  CollapsibleMessage,
-                  {
-                    defaultCollapsed: true,
-                    hasContent: hasCollapsibleContent,
-                    children: contentBlocks
-                  }
-                );
+                isUser,
+                compact: isCompactAssistantMessage
               }
-              return contentBlocks;
-            })(),
-            message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter((file) => !isImage(file) && !isVideo(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              FileAttachment,
-              {
-                file,
-                onClick: handleFileClick,
-                conversationId
-              },
-              `${message2.id}-${file}`
-            )) }),
+            ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              MessageTimestamp,
+              MessagePaper,
               {
-                timestamp: message2.timestamp,
                 isUser,
-                isSmallView
-              }
-            )
-          ]
-        }
-      ) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        MessagePaper,
-        {
-          isUser,
-          content: message2.message,
-          message: message2,
-          isSmallView,
-          onMessageComplete,
-          isLastMessage: isLastMessage ?? false,
-          isJobRunning: !!currentExecution,
-          agentId: conversationId,
-          children: [
-            message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              ImageAttachment,
-              {
-                file,
-                src: getUrl2(file),
-                onClick: handleFileClick,
-                conversationId
-              },
-              `${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: getUrl2(file),
-                onClick: handleFileClick,
-                conversationId
-              },
-              `${message2.id}-${file}`
-            )) }),
-            message2.files && message2.files.length > 0 && message2.files.some((file) => isAudio(file)) && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isAudio(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              AudioAttachment,
-              {
-                content: getUrl2(file),
-                isUser
-              },
-              `${message2.id}-${file}`
-            )) }),
-            message2.message && !(message2.is_streamable && !message2.is_complete) && /* @__PURE__ */ jsxRuntimeExports.jsx(MessageContent, { content: message2.message, isUser }),
-            (() => {
-              const hasCollapsibleContent = isAction2 && (message2.code || message2.stdout || message2.stderr || message2.logging);
-              const contentBlocks = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-                message2.code && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeBlock, { code: message2.code, isUser }),
-                message2.stdout && /* @__PURE__ */ jsxRuntimeExports.jsx(OutputBlock, { output: message2.stdout, isUser }),
-                message2.stderr && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBlock, { error: message2.stderr, isUser }),
-                message2.logging && /* @__PURE__ */ jsxRuntimeExports.jsx(LogBlock, { log: message2.logging, isUser })
-              ] });
-              if (hasCollapsibleContent) {
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  CollapsibleMessage,
+                content: message2.message,
+                isSmallView,
+                message: message2,
+                onMessageComplete,
+                isLastMessage: isLastMessage ?? false,
+                isJobRunning: !!currentExecution,
+                agentId: conversationId,
+                metadataMode: "custom",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ActionBlock,
                   {
-                    defaultCollapsed: true,
-                    hasContent: hasCollapsibleContent,
-                    children: contentBlocks
+                    message: message2.message ?? "",
+                    fileContent: message2.content,
+                    replacements: message2.replacements,
+                    action: message2.action,
+                    executionType: message2.execution_type || "action",
+                    isUser,
+                    code: message2.code,
+                    stdout: currentExecution?.stdout ?? message2.stdout,
+                    stderr: currentExecution?.stderr ?? message2.stderr,
+                    logging: currentExecution?.logging ?? message2.logging,
+                    files: message2.files,
+                    conversationId,
+                    filePath: message2.file_path,
+                    isLoading: isLastMessage && !!currentExecution,
+                    isSmallView,
+                    compact: isCompactAssistantMessage,
+                    messageId: message2.id,
+                    timestamp: message2.timestamp,
+                    agentId: conversationId
                   }
-                );
-              }
-              return contentBlocks;
-            })(),
-            message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter(
-              (file) => !isImage(file) && !isVideo(file) && !isAudio(file)
-            ).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-              FileAttachment,
-              {
-                file,
-                onClick: handleFileClick,
-                conversationId
-              },
-              `${message2.id}-${file}`
-            )) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              MessageTimestamp,
-              {
-                timestamp: message2.timestamp,
-                isUser,
-                isSmallView
+                )
               }
             )
           ]
         }
-      )
-    ] });
+      );
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      MessageContainer,
+      {
+        isUser,
+        isSmallView,
+        compact: isCompactAssistantMessage,
+        children: [
+          !isSmallView && /* @__PURE__ */ jsxRuntimeExports.jsx(MessageAvatar, { isUser, compact: isCompactAssistantMessage }),
+          isSecurityCheck ? /* @__PURE__ */ jsxRuntimeExports.jsx(SecurityCheckHighlight, { isUser, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            MessagePaper,
+            {
+              isUser,
+              content: message2.message,
+              isSmallView,
+              message: message2,
+              onMessageComplete,
+              isLastMessage: isLastMessage ?? false,
+              isJobRunning: !!currentExecution,
+              agentId: conversationId,
+              children: [
+                message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ImageAttachment,
+                  {
+                    file,
+                    src: getUrl2(file),
+                    onClick: handleFileClick,
+                    conversationId
+                  },
+                  `${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: getUrl2(file),
+                    onClick: handleFileClick,
+                    conversationId
+                  },
+                  `${message2.id}-${file}`
+                )) }),
+                message2.message && !(message2.is_streamable && !message2.is_complete) && /* @__PURE__ */ jsxRuntimeExports.jsx(MessageContent, { content: message2.message, isUser }),
+                (() => {
+                  const hasCollapsibleContent = isSecurityCheck && (message2.code || message2.stdout || message2.stderr || message2.logging);
+                  const contentBlocks = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                    message2.code && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeBlock, { code: message2.code, isUser }),
+                    message2.stdout && /* @__PURE__ */ jsxRuntimeExports.jsx(OutputBlock, { output: message2.stdout, isUser }),
+                    message2.stderr && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBlock, { error: message2.stderr, isUser }),
+                    message2.logging && /* @__PURE__ */ jsxRuntimeExports.jsx(LogBlock, { log: message2.logging, isUser })
+                  ] });
+                  if (hasCollapsibleContent) {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      CollapsibleMessage,
+                      {
+                        defaultCollapsed: true,
+                        hasContent: hasCollapsibleContent,
+                        children: contentBlocks
+                      }
+                    );
+                  }
+                  return contentBlocks;
+                })(),
+                message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter((file) => !isImage(file) && !isVideo(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  FileAttachment,
+                  {
+                    file,
+                    onClick: handleFileClick,
+                    conversationId
+                  },
+                  `${message2.id}-${file}`
+                )) }),
+                isUser && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  MessageTimestamp,
+                  {
+                    timestamp: message2.timestamp,
+                    isUser,
+                    isSmallView
+                  }
+                )
+              ]
+            }
+          ) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            MessagePaper,
+            {
+              isUser,
+              content: message2.message,
+              message: message2,
+              isSmallView,
+              onMessageComplete,
+              isLastMessage: isLastMessage ?? false,
+              isJobRunning: !!currentExecution,
+              agentId: conversationId,
+              children: [
+                message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ImageAttachment,
+                  {
+                    file,
+                    src: getUrl2(file),
+                    onClick: handleFileClick,
+                    conversationId
+                  },
+                  `${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: getUrl2(file),
+                    onClick: handleFileClick,
+                    conversationId
+                  },
+                  `${message2.id}-${file}`
+                )) }),
+                message2.files && message2.files.length > 0 && message2.files.some((file) => isAudio(file)) && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isAudio(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  AudioAttachment,
+                  {
+                    content: getUrl2(file),
+                    isUser
+                  },
+                  `${message2.id}-${file}`
+                )) }),
+                message2.message && !(message2.is_streamable && !message2.is_complete) && /* @__PURE__ */ jsxRuntimeExports.jsx(MessageContent, { content: message2.message, isUser }),
+                (() => {
+                  const hasCollapsibleContent = isAction2 && (message2.code || message2.stdout || message2.stderr || message2.logging);
+                  const contentBlocks = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+                    message2.code && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeBlock, { code: message2.code, isUser }),
+                    message2.stdout && /* @__PURE__ */ jsxRuntimeExports.jsx(OutputBlock, { output: message2.stdout, isUser }),
+                    message2.stderr && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBlock, { error: message2.stderr, isUser }),
+                    message2.logging && /* @__PURE__ */ jsxRuntimeExports.jsx(LogBlock, { log: message2.logging, isUser })
+                  ] });
+                  if (hasCollapsibleContent) {
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      CollapsibleMessage,
+                      {
+                        defaultCollapsed: true,
+                        hasContent: hasCollapsibleContent,
+                        children: contentBlocks
+                      }
+                    );
+                  }
+                  return contentBlocks;
+                })(),
+                message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter(
+                  (file) => !isImage(file) && !isVideo(file) && !isAudio(file)
+                ).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  FileAttachment,
+                  {
+                    file,
+                    onClick: handleFileClick,
+                    conversationId
+                  },
+                  `${message2.id}-${file}`
+                )) }),
+                isUser && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  MessageTimestamp,
+                  {
+                    timestamp: message2.timestamp,
+                    isUser,
+                    isSmallView
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
   }
 );
 const MessagesViewWrapper = styled$1(Box, {
@@ -316826,6 +317233,11 @@ const FullScreenCenteredContainer = styled$1(Box)({
   height: "100%",
   width: "100%"
 });
+const INITIAL_RENDERED_MESSAGES = 40;
+const BACKGROUND_HYDRATION_BATCH_SIZE = 25;
+const BACKGROUND_HYDRATION_INTERVAL_MS = 40;
+const FAST_SCROLL_HYDRATION_BATCH_SIZE = 120;
+const getInitialRenderedCount = (totalMessages) => totalMessages > INITIAL_RENDERED_MESSAGES ? INITIAL_RENDERED_MESSAGES : totalMessages;
 const MessagesView = React$1.memo(
   ({
     messages,
@@ -316841,33 +317253,106 @@ const MessagesView = React$1.memo(
     conversationId,
     isSmallView
   }) => {
+    const [renderedMessageCount, setRenderedMessageCount] = reactExports.useState(
+      () => getInitialRenderedCount(messages.length)
+    );
+    const previousConversationIdRef = reactExports.useRef(conversationId);
+    const previousMessageCountRef = reactExports.useRef(messages.length);
     const collapsed = messages.length === 0 && !isLoadingMessages && !isFetchingMore;
+    reactExports.useEffect(() => {
+      const previousMessageCount = previousMessageCountRef.current;
+      const hasConversationChanged = previousConversationIdRef.current !== conversationId;
+      if (hasConversationChanged) {
+        previousConversationIdRef.current = conversationId;
+        setRenderedMessageCount(getInitialRenderedCount(messages.length));
+        previousMessageCountRef.current = messages.length;
+        return;
+      }
+      if (messages.length < previousMessageCount) {
+        setRenderedMessageCount(
+          (current) => Math.min(current, messages.length)
+        );
+      } else if (messages.length > previousMessageCount) {
+        const delta = messages.length - previousMessageCount;
+        setRenderedMessageCount((current) => {
+          if (current >= previousMessageCount) {
+            return messages.length;
+          }
+          return Math.min(messages.length, current + Math.min(delta, 1));
+        });
+      }
+      previousMessageCountRef.current = messages.length;
+    }, [conversationId, messages.length]);
+    reactExports.useEffect(() => {
+      if (renderedMessageCount >= messages.length) {
+        return;
+      }
+      const timeoutId = window.setTimeout(() => {
+        setRenderedMessageCount(
+          (current) => Math.min(messages.length, current + BACKGROUND_HYDRATION_BATCH_SIZE)
+        );
+      }, BACKGROUND_HYDRATION_INTERVAL_MS);
+      return () => {
+        window.clearTimeout(timeoutId);
+      };
+    }, [messages.length, renderedMessageCount]);
+    reactExports.useEffect(() => {
+      const container = messagesContainerRef.current;
+      if (!container || renderedMessageCount >= messages.length) {
+        return;
+      }
+      const handlePrioritizeHistoryHydration = () => {
+        const { scrollTop, scrollHeight, clientHeight } = container;
+        const maxScrollValue = Math.abs(scrollHeight - clientHeight);
+        const absScrollTop = Math.abs(scrollTop);
+        const distanceFromTop = scrollTop < 0 ? maxScrollValue - absScrollTop : maxScrollValue - scrollTop;
+        if (distanceFromTop < 260) {
+          setRenderedMessageCount(
+            (current) => Math.min(
+              messages.length,
+              current + FAST_SCROLL_HYDRATION_BATCH_SIZE
+            )
+          );
+        }
+      };
+      container.addEventListener("scroll", handlePrioritizeHistoryHydration, {
+        passive: true
+      });
+      return () => {
+        container.removeEventListener(
+          "scroll",
+          handlePrioritizeHistoryHydration
+        );
+      };
+    }, [messages.length, renderedMessageCount, messagesContainerRef]);
+    const renderedMessages = reactExports.useMemo(() => {
+      if (renderedMessageCount >= messages.length) {
+        return messages;
+      }
+      return messages.slice(messages.length - renderedMessageCount);
+    }, [messages, renderedMessageCount]);
+    const hiddenMessageCount = messages.length - renderedMessages.length;
     const lastMessage = messages[messages.length - 1];
-    const { isMessageStreamingComplete } = useStreamingMessagesStore();
-    const lastStreamComplete = lastMessage?.id ? isMessageStreamingComplete(lastMessage.id) : false;
+    const lastMessageId = lastMessage?.id ?? "";
+    const lastStreamComplete = useStreamingMessagesStore(
+      (state2) => state2.streamingMessages[lastMessageId]?.isComplete ?? false
+    );
     const lastMessageIsStreaming = Boolean(
       lastMessage?.is_streamable && !(lastMessage?.is_complete || lastStreamComplete)
     );
     const handleMessageComplete = reactExports.useCallback(() => {
-      setTimeout(() => {
-        if (refetch) {
-          refetch();
-        }
-      }, 200);
+      refetch?.();
     }, [refetch]);
-    reactExports.useEffect(() => {
-      if (messages.length > 0) {
-        const lastMessage2 = messages[messages.length - 1];
-        if (lastMessage2?.is_complete && lastMessage2?.is_streamable) {
-          console.debug("Last message completed:", lastMessage2.id);
-        }
-      }
-    }, [messages]);
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagesViewWrapper, { collapsed, children: [
       isFetchingMore && /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingMoreIndicator, { isSmallView, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 16, sx: { mr: 1 } }),
         "Loading older messages..."
       ] }),
+      !isFetchingMore && hiddenMessageCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingMoreIndicator, { isSmallView, children: [
+        "Rendering ",
+        hiddenMessageCount,
+        " earlier messages..."
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         MessagesContainer,
         {
@@ -316889,8 +317374,8 @@ const MessagesView = React$1.memo(
                 id: "messages-end-anchor"
               }
             ),
-            messages.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(CenteredMessagesContainer, { isSmallView, children: [
-              messages.map(
+            renderedMessages.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs(CenteredMessagesContainer, { isSmallView, children: [
+              renderedMessages.map(
                 (message2, index2) => message2.execution_type === "info" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                   InfoMessageDivider,
                   {
@@ -316901,14 +317386,10 @@ const MessagesView = React$1.memo(
                 ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
                   MessageItem,
                   {
-                    message: {
-                      ...message2,
-                      conversation_id: conversationId
-                      // Add conversation ID to message
-                    },
+                    message: message2,
                     conversationId,
-                    currentExecution: index2 === messages.length - 1 && currentExecution ? currentExecution : void 0,
-                    isLastMessage: index2 === messages.length - 1,
+                    currentExecution: index2 === renderedMessages.length - 1 && currentExecution ? currentExecution : void 0,
+                    isLastMessage: index2 === renderedMessages.length - 1,
                     onMessageComplete: handleMessageComplete,
                     isSmallView
                   },
@@ -317450,14 +317931,20 @@ const ChatSidebarItem = ({
     agent.id
   );
 };
-const MemoizedChatSidebarItem = reactExports.memo(ChatSidebarItem);
-const ChatSidebar = ({
+const areChatSidebarItemsEqual = (prev2, next2) => {
+  return prev2.isSelected === next2.isSelected && prev2.index === next2.index && prev2.agent.id === next2.agent.id && prev2.agent.name === next2.agent.name && prev2.agent.last_message === next2.agent.last_message && prev2.agent.last_message_datetime === next2.agent.last_message_datetime && prev2.onSelectConversation === next2.onSelectConversation && prev2.onNavigateToAgentSettings === next2.onNavigateToAgentSettings && prev2.onExportAgent === next2.onExportAgent && prev2.onClearAgentConversation === next2.onClearAgentConversation && prev2.onAgentDeleted === next2.onAgentDeleted && prev2.onUploadAgentToHub === next2.onUploadAgentToHub && prev2.getFullDateTime === next2.getFullDateTime && prev2.formatMessageDateTime === next2.formatMessageDateTime && prev2.truncateMessage === next2.truncateMessage;
+};
+const MemoizedChatSidebarItem = reactExports.memo(ChatSidebarItem, areChatSidebarItemsEqual);
+const ChatSidebarComponent = ({
   selectedConversation,
   onSelectConversation,
   onNavigateToAgentSettings
 }) => {
   const [searchQuery, setSearchQuery2] = reactExports.useState("");
-  const { openCreateAgentDialog } = useUiPreferencesStore();
+  const openCreateAgentDialog = useUiPreferencesStore(
+    (state2) => state2.openCreateAgentDialog
+  );
+  const debouncedSearchQuery = useDebouncedValue(searchQuery.trim(), 250);
   const [isImportDialogOpen, setIsImportDialogOpen] = reactExports.useState(false);
   const perPage = 50;
   const [isUploadDialogOpen, setIsUploadDialogOpen] = reactExports.useState(false);
@@ -317476,8 +317963,8 @@ const ChatSidebar = ({
   } = useAgents(
     page,
     perPage,
-    5e3,
-    searchQuery,
+    0,
+    debouncedSearchQuery || void 0,
     "last_message_datetime",
     "desc"
   );
@@ -317555,14 +318042,14 @@ const ChatSidebar = ({
     },
     [getAgentUploadValidationIssues]
   );
-  const handleCloseUploadDialog = () => {
+  const handleCloseUploadDialog = reactExports.useCallback(() => {
     setIsUploadDialogOpen(false);
     setUploadAgent(null);
     setUploadValidationIssues([]);
-  };
-  const handleConfirmUpload = () => {
+  }, []);
+  const handleConfirmUpload = reactExports.useCallback(() => {
     handleCloseUploadDialog();
-  };
+  }, [handleCloseUploadDialog]);
   const handleAgentCreated = reactExports.useCallback(
     (agentId) => {
       const fetchAndSelectAgent = async () => {
@@ -317609,10 +318096,10 @@ const ChatSidebar = ({
     [handleOpenUploadDialog]
     // handleOpenUploadDialog is stable as it's not in deps array of its own useCallback
   );
-  const truncateMessage = (message2, maxLength = 60) => {
+  const truncateMessage = reactExports.useCallback((message2, maxLength = 60) => {
     if (!message2) return "";
     return message2.length > maxLength ? `${message2.substring(0, maxLength)}...` : message2;
-  };
+  }, []);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SidebarContainer$2, { elevation: 0, "data-tour-tag": "agent-list-panel", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       SidebarHeader$2,
@@ -317691,6 +318178,7 @@ const ChatSidebar = ({
     )
   ] });
 };
+const ChatSidebar = reactExports.memo(ChatSidebarComponent);
 const ErrorContainer$1 = styled$1(Paper)({
   display: "flex",
   flexDirection: "column",
@@ -317762,8 +318250,8 @@ const ChatPage = () => {
   const messageInputRef = reactExports.useRef(null);
   const { agentId, navigateToAgent } = useAgentRouteParam();
   const navigate = useNavigate();
-  const queryClient2 = useQueryClient();
-  const { isCanvasOpen, setCanvasOpen } = useUiPreferencesStore();
+  const isCanvasOpen = useUiPreferencesStore((state2) => state2.isCanvasOpen);
+  const setCanvasOpen = useUiPreferencesStore((state2) => state2.setCanvasOpen);
   reactExports.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === "c" && (event.metaKey || event.ctrlKey) && event.shiftKey) {
@@ -317776,7 +318264,12 @@ const ChatPage = () => {
       document.removeEventListener("keydown", handleKeyDown);
     };
   }, [isCanvasOpen, setCanvasOpen]);
-  const { setLastChatAgentId, getLastAgentId } = useAgentSelectionStore();
+  const setLastChatAgentId = useAgentSelectionStore(
+    (state2) => state2.setLastChatAgentId
+  );
+  const getLastAgentId = useAgentSelectionStore(
+    (state2) => state2.getLastAgentId
+  );
   const effectiveAgentId = agentId || getLastAgentId("chat");
   const conversationId = effectiveAgentId || void 0;
   const selectedConversation = effectiveAgentId || void 0;
@@ -317791,7 +318284,7 @@ const ChatPage = () => {
     () => createLocalOperatorClient(apiConfig.baseUrl),
     []
   );
-  const { getMessages } = useChatStore();
+  const getMessages = useChatStore((state2) => state2.getMessages);
   const { data: agentData } = useAgent(conversationId);
   const {
     messages,
@@ -317804,14 +318297,13 @@ const ChatPage = () => {
     // Get the ref from the hook
     refetch
   } = useConversationMessages(conversationId);
-  const { addMessage } = useChatStore();
+  const addMessage = useChatStore((state2) => state2.addMessage);
   const {
     currentJobId,
     setCurrentJobId,
     jobStatus,
     isLoading,
     setIsLoading,
-    checkForActiveJobs,
     currentExecution
   } = useJobPolling({
     conversationId,
@@ -317866,18 +318358,6 @@ const ChatPage = () => {
     }
   }, [agentId, isLoadingMessages, messages.length, scrollToBottom]);
   const previousConversationIdRef = reactExports.useRef(void 0);
-  reactExports.useEffect(() => {
-    if (conversationId) {
-      checkForActiveJobs(conversationId);
-    }
-  }, [conversationId, checkForActiveJobs]);
-  reactExports.useEffect(() => {
-    if (conversationId) {
-      queryClient2.invalidateQueries({
-        queryKey: [...conversationMessagesQueryKey, conversationId]
-      });
-    }
-  }, [conversationId, queryClient2]);
   const handleOpenOptions = reactExports.useCallback(() => {
     setIsOptionsSidebarOpen(true);
   }, []);