local-operator-ui 0.7.2 → 0.7.4

package/out/renderer/assets/{index-BWiyMPr1.js → index-CXyUnv28.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-CkAsfYTs.js","./fonts-BAmz1ETd.js","./fonts-B9KBGB-g.css","./index-BkZEKoZT.js","./pug-By0kVCfm.js","./javascript-C3MnDRiU.js"])))=>i.map(i=>d[i]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-BpktHwp9.js","./fonts-BAmz1ETd.js","./fonts-B9KBGB-g.css","./index-D4xePR3Q.js","./pug-By0kVCfm.js","./javascript-C3MnDRiU.js"])))=>i.map(i=>d[i]);
 import { c as createStyled, r as resolveProps, u as useTheme, a as reactExports, b as clsx, d as useForkRef, e as extendSxProp, j as jsxRuntimeExports, h as handleBreakpoints, f as resolveBreakpointValues, g as createUnarySpacing, i as deepmerge, m as mergeBreakpointsInOrder, k as composeClasses, l as generateUtilityClass, n as createTheme$1, o as getValue, R as React, p as getDefaultExportFromCjs, q as requireReactDom, s as React$1, t as generateUtilityClasses, v as useDefaultProps, w as styled$1, x as capitalize, y as memoTheme, _ as _inheritsLoose, z as _objectWithoutPropertiesLoose$i, T as TransitionGroupContext, A as duration, B as useTheme$1, C as useTimeout, D as useId, E as ButtonBase, F as alpha$1, G as createSimplePaletteValueFilter, H as CircularProgress, P as Paper, I as darken, J as lighten, K as useEventCallback, L as useEnhancedEffect, M as useRtl, N as globalCss, O as formatMuiErrorMessage, Q as rootShouldForwardProp, S as Typography, U as getPath$2, V as isFocusVisible, W as typographyClasses, X as slotShouldForwardProp, Y as css$1, Z as keyframes, $ as clamp, a0 as emphasize, a1 as Timeout, a2 as Button, a3 as Box, a4 as FontAwesomeIcon, a5 as faExclamationTriangle, a6 as DEFAULT_THEME, a7 as faChevronLeft, a8 as faChevronRight, a9 as faRobot, aa as faCheck, ab as faTimes, ac as faEraser, ad as faPen, ae as faFileImport, af as faUpload, ag as requireReact, ah as LinearProgress, ai as faComment, aj as faSave, ak as faEdit, al as faTrashAlt, am as faComments, an as faInfoCircle, ao as faGear, ap as faPlus, aq as faServer, ar as faStar, as as faTag, at as faIdCard, au as faCalendarAlt, av as faCodeBranch, aw as faShieldAlt, ax as faArrowLeft, ay as faClock, az as faHome, aA as faDownload, aB as faFileAlt, aC as faDesktop, aD as faImage, aE as faMusic, aF as faVideo, aG as faLaptop, aH as faUsers, aI as faDatabase, aJ as faBoxOpen, aK as faBook, aL as faHdd, aM as faBox, aN as faArchive, aO as faNetworkWired, aP as faFolder, aQ as faFolderOpen, aR as faFolderTree, aS as faChevronDown, aT as faTools, aU as _extends$u, aV as faSliders, aW as faTrash, aX as faArrowDown, aY as faPaperclip, aZ as faStop, a_ as faPaperPlane, a$ as faChevronUp, b0 as faQuestion, b1 as faFile, b2 as faExclamationCircle, b3 as faLightbulb, b4 as faCode, b5 as faCommentDots, b6 as faShare, b7 as faPencilAlt, b8 as faUser, b9 as faCopy, 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 commonjsGlobal, bl as PropTypes, bm as faLock, bn as faSignOut, bo as themes, bp as faMoon, bq as faSun, br as faHexagonNodes, bs as faSkull, bt as faLeaf, bu as faMountain, bv as faFire, bw as faIcicles, bx as faEnvelope, by as faHistory, bz as faListAlt, bA as faAdjust, bB as faCreditCard, bC as faPlusCircle, bD as faChartLine, bE as faShield, bF as library$1, bG as icons$1, bH as CssBaseline, bI as ThemeProvider$1, bJ as getTheme, bK as ReactDOM$1, bL as ErrorBoundary } from "./fonts-BAmz1ETd.js";
 const styled = createStyled();
 function getThemeProps(params) {
@@ -22596,7 +22596,7 @@ const styledRootConfig = {
   slot: "Root"
 };
 const StyledInput$1 = styled$1(Input, styledRootConfig)("");
-const StyledOutlinedInput = styled$1(OutlinedInput, styledRootConfig)("");
+const StyledOutlinedInput$1 = styled$1(OutlinedInput, styledRootConfig)("");
 const StyledFilledInput = styled$1(FilledInput, styledRootConfig)("");
 const Select = /* @__PURE__ */ reactExports.forwardRef(function Select2(inProps, ref) {
   const props2 = useDefaultProps({
@@ -22649,7 +22649,7 @@ const Select = /* @__PURE__ */ reactExports.forwardRef(function Select2(inProps,
     standard: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledInput$1, {
       ownerState
     }),
-    outlined: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledOutlinedInput, {
+    outlined: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledOutlinedInput$1, {
       label,
       ownerState
     }),
@@ -35513,19 +35513,48 @@ const ChatLayout = ({ sidebar, content: content2 }) => {
   ] });
 };
 const DEFAULT_DEFER_TIMELINE_MS = 48 * 60 * 60 * 1e3;
+var UpdateType = /* @__PURE__ */ ((UpdateType2) => {
+  UpdateType2["UI"] = "ui";
+  UpdateType2["BACKEND"] = "backend";
+  return UpdateType2;
+})(UpdateType || {});
 const useDeferredUpdatesStore = create$1()(
   persist(
     (set, get2) => ({
-      deferredVersion: null,
-      deferredAt: null,
-      deferUpdate: (version2) => {
-        set({
-          deferredVersion: version2,
-          deferredAt: Date.now()
-        });
+      uiDeferredVersion: null,
+      uiDeferredAt: null,
+      backendDeferredVersion: null,
+      backendDeferredAt: null,
+      hydrated: false,
+      deferUpdate: (type2, version2) => {
+        if (type2 === "ui") {
+          set({
+            uiDeferredVersion: version2,
+            uiDeferredAt: Date.now()
+          });
+        } else {
+          set({
+            backendDeferredVersion: version2,
+            backendDeferredAt: Date.now()
+          });
+        }
       },
-      shouldShowUpdate: (version2) => {
-        const { deferredVersion, deferredAt } = get2();
+      shouldShowUpdate: (type2, version2) => {
+        const {
+          uiDeferredVersion,
+          uiDeferredAt,
+          backendDeferredVersion,
+          backendDeferredAt
+        } = get2();
+        let deferredVersion;
+        let deferredAt;
+        if (type2 === "ui") {
+          deferredVersion = uiDeferredVersion;
+          deferredAt = uiDeferredAt;
+        } else {
+          deferredVersion = backendDeferredVersion;
+          deferredAt = backendDeferredAt;
+        }
         if (!deferredVersion || !deferredAt) {
           return true;
         }
@@ -35536,15 +35565,31 @@ const useDeferredUpdatesStore = create$1()(
         const timeElapsed = now - deferredAt;
         return timeElapsed > DEFAULT_DEFER_TIMELINE_MS;
       },
-      clearDeferredUpdate: () => {
-        set({
-          deferredVersion: null,
-          deferredAt: null
-        });
+      clearDeferredUpdate: (type2) => {
+        if (type2 === "ui") {
+          set({
+            uiDeferredVersion: null,
+            uiDeferredAt: null
+          });
+        } else if (type2 === "backend") {
+          set({
+            backendDeferredVersion: null,
+            backendDeferredAt: null
+          });
+        } else {
+          throw new Error(`Invalid update type: ${type2}`);
+        }
       }
     }),
     {
-      name: "deferred-updates-storage"
+      name: "deferred-updates-storage",
+      onRehydrateStorage: () => (store) => {
+        if (store && typeof store === "object" && "setState" in store && typeof store.setState === "function") {
+          store.setState({
+            hydrated: true
+          });
+        }
+      }
     }
   )
 );
@@ -35607,7 +35652,8 @@ const CheckForUpdatesButton = () => {
     try {
       setChecking(true);
       manualCheckRef.current = true;
-      clearDeferredUpdate();
+      clearDeferredUpdate(UpdateType.UI);
+      clearDeferredUpdate(UpdateType.BACKEND);
       await window.api.updater.checkForAllUpdates();
     } catch (error) {
       setSnackbarMessage(
@@ -36946,39 +36992,58 @@ const useJobPolling = ({
     queryFn: async () => {
       if (!currentJobId) return null;
       const client2 = createLocalOperatorClient(apiConfig.baseUrl);
-      const response = await client2.jobs.getJobStatus(currentJobId);
-      return response.result;
+      try {
+        const response = await client2.jobs.getJobStatus(currentJobId);
+        return response.result;
+      } catch (err) {
+        const errorObj = err;
+        if (errorObj?.response?.status === 404 || errorObj?.status === 404 || errorObj?.message?.toString().includes("404")) {
+          return { status: "not_found" };
+        }
+        throw err;
+      }
     },
-    // Only run the query if we have a job ID and server is online (bypass internet check)
     enabled: shouldEnableQuery({ bypassInternetCheck: true }) && !!currentJobId,
-    // Poll every 1 second while job is active
     refetchInterval: currentJobId ? 1e3 : false,
     refetchIntervalInBackground: false,
     refetchOnWindowFocus: true,
-    // Don't cache the result
     gcTime: 0,
     staleTime: 0,
-    // Retry failed requests to ensure polling continues
     retry: true,
     retryDelay: 1e3
   });
+  function isJobDetails(data2) {
+    return typeof data2 === "object" && data2 !== null && "id" in data2 && typeof data2.id === "string";
+  }
   reactExports.useEffect(() => {
-    if (!jobData || !conversationId) return void 0;
-    const jobDataSignature = `${jobData.id}-${jobData.status}-${dataUpdatedAt}`;
-    if (jobDataSignature !== lastProcessedJobDataRef.current) {
-      lastProcessedJobDataRef.current = jobDataSignature;
-      if (jobData.current_execution) {
-        setCurrentExecution(jobData.current_execution);
-      }
-      if (jobData.status === "processing") {
-        const debounceTimeout = setTimeout(() => {
-          updateConversationMessages(conversationId);
-        }, 500);
-        return () => clearTimeout(debounceTimeout);
-      }
-      if (jobData.status === "completed" || jobData.status === "failed") {
-        handleJobCompletion(jobData);
+    if (!conversationId) return void 0;
+    if (jobData && jobData.status === "not_found") {
+      (async () => {
+        await updateConversationMessages(conversationId);
+        setCurrentJobId(null);
+        setIsLoading(false);
         setCurrentExecution(null);
+      })();
+      return;
+    }
+    if (!jobData) return void 0;
+    if (isJobDetails(jobData)) {
+      const jobDataSignature = `${jobData.id}-${jobData.status}-${dataUpdatedAt}`;
+      if (jobDataSignature !== lastProcessedJobDataRef.current) {
+        lastProcessedJobDataRef.current = jobDataSignature;
+        if (jobData.current_execution) {
+          setCurrentExecution(jobData.current_execution);
+        }
+        if (jobData.status === "processing") {
+          const debounceTimeout = setTimeout(() => {
+            updateConversationMessages(conversationId);
+          }, 500);
+          return () => clearTimeout(debounceTimeout);
+        }
+        if (jobData.status === "completed" || jobData.status === "failed") {
+          handleJobCompletion(jobData);
+          setCurrentExecution(null);
+        }
       }
     }
     return void 0;
@@ -36988,7 +37053,6 @@ const useJobPolling = ({
     handleJobCompletion,
     conversationId,
     updateConversationMessages,
-    setCurrentExecution,
     setCurrentJobId
   ]);
   reactExports.useEffect(() => {
@@ -36999,43 +37063,254 @@ const useJobPolling = ({
       }
     }
   }, [error, currentJobId, queryClient2]);
+  const validJobStatuses = [
+    "pending",
+    "processing",
+    "completed",
+    "failed",
+    "cancelled"
+  ];
+  let jobStatus = null;
+  if (jobData && typeof jobData.status === "string" && validJobStatuses.includes(jobData.status)) {
+    jobStatus = jobData.status;
+  }
   return {
     currentJobId,
     setCurrentJobId,
-    jobStatus: jobData?.status || null,
+    jobStatus,
     isLoading,
     setIsLoading,
     checkForActiveJobs,
     currentExecution
   };
 };
+const useConversationInputStore = create$1()(
+  persist(
+    (set, get2) => ({
+      inputByConversation: {},
+      setCurrentInput: (conversationId, value) => {
+        const existing = get2().inputByConversation[conversationId] || {
+          currentInput: "",
+          submittedMessages: [],
+          currentHistoryIndex: null
+        };
+        set({
+          inputByConversation: {
+            ...get2().inputByConversation,
+            [conversationId]: {
+              ...existing,
+              currentInput: value
+            }
+          }
+        });
+      },
+      getCurrentInput: (conversationId) => {
+        return get2().inputByConversation[conversationId]?.currentInput || "";
+      },
+      addSubmittedMessage: (conversationId, message2) => {
+        const existing = get2().inputByConversation[conversationId] || {
+          currentInput: "",
+          submittedMessages: [],
+          currentHistoryIndex: null
+        };
+        const last2 = existing.submittedMessages[existing.submittedMessages.length - 1];
+        const newMessages = message2 && message2 !== last2 ? [
+          ...existing.submittedMessages.slice(
+            -20 + 1
+          ),
+          message2
+        ] : existing.submittedMessages;
+        set({
+          inputByConversation: {
+            ...get2().inputByConversation,
+            [conversationId]: {
+              ...existing,
+              submittedMessages: newMessages
+            }
+          }
+        });
+      },
+      getSubmittedMessages: (conversationId) => {
+        return get2().inputByConversation[conversationId]?.submittedMessages || [];
+      },
+      clearSubmittedMessages: (conversationId) => {
+        const existing = get2().inputByConversation[conversationId];
+        if (!existing) return;
+        set({
+          inputByConversation: {
+            ...get2().inputByConversation,
+            [conversationId]: {
+              ...existing,
+              submittedMessages: []
+            }
+          }
+        });
+      },
+      getCurrentHistoryIndex: (conversationId) => {
+        return get2().inputByConversation[conversationId]?.currentHistoryIndex ?? null;
+      },
+      /**
+       * Set the current history navigation index for a conversation, clamped to valid range.
+       * @param conversationId - The ID of the conversation
+       * @param index - The index to set (null = not navigating)
+       */
+      setCurrentHistoryIndex: (conversationId, index2) => {
+        const existing = get2().inputByConversation[conversationId] || {
+          currentInput: "",
+          submittedMessages: [],
+          currentHistoryIndex: null
+        };
+        const messages = existing.submittedMessages;
+        let clampedIndex = null;
+        if (typeof index2 === "number" && messages.length > 0) {
+          clampedIndex = Math.max(0, Math.min(index2, messages.length - 1));
+        }
+        set({
+          inputByConversation: {
+            ...get2().inputByConversation,
+            [conversationId]: {
+              ...existing,
+              currentHistoryIndex: clampedIndex
+            }
+          }
+        });
+      },
+      resetCurrentHistoryIndex: (conversationId) => {
+        const existing = get2().inputByConversation[conversationId];
+        if (!existing) return;
+        set({
+          inputByConversation: {
+            ...get2().inputByConversation,
+            [conversationId]: {
+              ...existing,
+              currentHistoryIndex: null
+            }
+          }
+        });
+      },
+      clearAll: (conversationId) => {
+        const { [conversationId]: _2, ...rest } = get2().inputByConversation;
+        set({
+          inputByConversation: rest
+        });
+      }
+    }),
+    {
+      name: "conversation-input-store",
+      partialize: (state) => ({
+        inputByConversation: state.inputByConversation
+      })
+    }
+  )
+);
 const useMessageInput = ({
   conversationId,
-  messages,
   onSubmit,
   scrollToBottom
 }) => {
+  const getCurrentInput = useConversationInputStore((s2) => s2.getCurrentInput);
+  const setCurrentInput = useConversationInputStore((s2) => s2.setCurrentInput);
+  const addSubmittedMessage = useConversationInputStore(
+    (s2) => s2.addSubmittedMessage
+  );
+  const getSubmittedMessages = useConversationInputStore(
+    (s2) => s2.getSubmittedMessages
+  );
+  const getCurrentHistoryIndex = useConversationInputStore(
+    (s2) => s2.getCurrentHistoryIndex
+  );
+  const setCurrentHistoryIndex = useConversationInputStore(
+    (s2) => s2.setCurrentHistoryIndex
+  );
+  const resetCurrentHistoryIndex = useConversationInputStore(
+    (s2) => s2.resetCurrentHistoryIndex
+  );
+  const [hydrated, setHydrated] = reactExports.useState(
+    useConversationInputStore.persist.hasHydrated?.() ?? false
+  );
+  const initializedRef = reactExports.useRef(void 0);
   const [inputValue, setInputValue] = reactExports.useState("");
+  reactExports.useEffect(() => {
+    const persist2 = useConversationInputStore.persist;
+    let unsubHydrate;
+    let unsubFinish;
+    if (persist2 && typeof persist2.onHydrate === "function" && typeof persist2.onFinishHydration === "function") {
+      unsubHydrate = persist2.onHydrate(() => setHydrated(false));
+      unsubFinish = persist2.onFinishHydration(() => setHydrated(true));
+      setHydrated(persist2.hasHydrated());
+    } else {
+      setHydrated(true);
+    }
+    return () => {
+      unsubHydrate?.();
+      unsubFinish?.();
+    };
+  }, []);
   const textareaRef = reactExports.useRef(null);
-  const [historyIndex, setHistoryIndex] = reactExports.useState(null);
   const draftMessageRef = reactExports.useRef("");
-  const userMessages = messages.filter((msg) => msg.role === "user");
-  const handleChange = reactExports.useCallback((value) => {
-    setInputValue(value);
-    setHistoryIndex(null);
-  }, []);
+  const submittedMessages = conversationId ? getSubmittedMessages(conversationId) : [];
+  const historyIndex = conversationId ? getCurrentHistoryIndex(conversationId) : null;
+  reactExports.useEffect(() => {
+    if (!hydrated) return;
+    if (conversationId) {
+      const draft = getCurrentInput(conversationId);
+      if (historyIndex !== null && submittedMessages.length > 0) {
+        setInputValue(submittedMessages[historyIndex] || "");
+      } else {
+        setInputValue(draft);
+      }
+      initializedRef.current = conversationId;
+      draftMessageRef.current = "";
+    } else {
+      setInputValue("");
+      initializedRef.current = void 0;
+      draftMessageRef.current = "";
+    }
+  }, [
+    conversationId,
+    hydrated,
+    getCurrentInput,
+    historyIndex,
+    submittedMessages
+  ]);
+  reactExports.useEffect(() => {
+    if (!hydrated) return;
+    if (!conversationId) return;
+    if (initializedRef.current === conversationId) return;
+    setCurrentInput(conversationId, inputValue);
+  }, [conversationId, inputValue, setCurrentInput, hydrated]);
+  const handleChange = reactExports.useCallback(
+    (value) => {
+      setInputValue(value);
+      if (conversationId) {
+        setCurrentInput(conversationId, value);
+        resetCurrentHistoryIndex(conversationId);
+      }
+    },
+    [conversationId, setCurrentInput, resetCurrentHistoryIndex]
+  );
   const handleSubmit = reactExports.useCallback(() => {
-    if (!inputValue.trim()) return;
+    if (!inputValue.trim() || !conversationId) return;
     onSubmit?.(inputValue);
+    addSubmittedMessage(conversationId, inputValue);
     setInputValue("");
-    setHistoryIndex(null);
+    setCurrentInput(conversationId, "");
+    resetCurrentHistoryIndex(conversationId);
     draftMessageRef.current = "";
     if (scrollToBottom) {
       setTimeout(() => {
         scrollToBottom();
       }, 150);
     }
-  }, [inputValue, onSubmit, scrollToBottom]);
+  }, [
+    inputValue,
+    conversationId,
+    onSubmit,
+    addSubmittedMessage,
+    setCurrentInput,
+    resetCurrentHistoryIndex,
+    scrollToBottom
+  ]);
   const getCursorPosition = reactExports.useCallback(() => {
     const textarea = textareaRef.current;
     if (!textarea) return { line: 0, totalLines: 1 };
@@ -37046,34 +37321,33 @@ const useMessageInput = ({
     const totalLines = (text4.match(/\n/g) || []).length + 1;
     return { line: linesUpToCursor, totalLines };
   }, []);
-  const isCursorAtFirstLine = reactExports.useCallback(() => {
-    const { line: line2 } = getCursorPosition();
-    return line2 === 1;
-  }, [getCursorPosition]);
+  const isCursorAtFirstLine = reactExports.useCallback(
+    () => getCursorPosition().line === 1,
+    [getCursorPosition]
+  );
   const isCursorAtLastLine = reactExports.useCallback(() => {
     const { line: line2, totalLines } = getCursorPosition();
     return line2 === totalLines;
   }, [getCursorPosition]);
   const handleKeyDown = reactExports.useCallback(
     (e3) => {
+      if (!conversationId) return;
       if (e3.key === "Enter" && !e3.shiftKey) {
         e3.preventDefault();
         handleSubmit();
         return;
       }
-      if (userMessages.length === 0) {
-        return;
-      }
+      if (!submittedMessages.length) return;
       if (e3.key === "ArrowUp" && isCursorAtFirstLine()) {
         e3.preventDefault();
         if (historyIndex === null) {
           draftMessageRef.current = inputValue;
-          setHistoryIndex(userMessages.length - 1);
-          setInputValue(userMessages[userMessages.length - 1].message || "");
+          setCurrentHistoryIndex(conversationId, submittedMessages.length - 1);
+          setInputValue(submittedMessages[submittedMessages.length - 1] || "");
         } else if (historyIndex > 0) {
           const newIndex = historyIndex - 1;
-          setHistoryIndex(newIndex);
-          setInputValue(userMessages[newIndex].message || "");
+          setCurrentHistoryIndex(conversationId, newIndex);
+          setInputValue(submittedMessages[newIndex] || "");
         }
         setTimeout(() => {
           if (textareaRef.current) {
@@ -37086,12 +37360,12 @@ const useMessageInput = ({
       if (e3.key === "ArrowDown" && isCursorAtLastLine()) {
         e3.preventDefault();
         if (historyIndex !== null) {
-          if (historyIndex < userMessages.length - 1) {
+          if (historyIndex < submittedMessages.length - 1) {
             const newIndex = historyIndex + 1;
-            setHistoryIndex(newIndex);
-            setInputValue(userMessages[newIndex].message || "");
+            setCurrentHistoryIndex(conversationId, newIndex);
+            setInputValue(submittedMessages[newIndex] || "");
           } else {
-            setHistoryIndex(null);
+            resetCurrentHistoryIndex(conversationId);
             setInputValue(draftMessageRef.current);
             draftMessageRef.current = "";
           }
@@ -37111,14 +37385,12 @@ const useMessageInput = ({
       isCursorAtLastLine,
       historyIndex,
       inputValue,
-      userMessages
+      submittedMessages,
+      conversationId,
+      setCurrentHistoryIndex,
+      resetCurrentHistoryIndex
     ]
   );
-  reactExports.useEffect(() => {
-    setInputValue("");
-    setHistoryIndex(null);
-    draftMessageRef.current = "";
-  }, [conversationId]);
   return {
     inputValue,
     setInputValue: handleChange,
@@ -37409,19 +37681,18 @@ async function createAgentComment(baseUrl, agentId, accessToken, data2) {
   }
   return response.json();
 }
-async function listAgentComments(baseUrl, agentId, accessToken, page = 1, perPage = 20) {
+async function listAgentComments(baseUrl, agentId, page = 1, perPage = 20) {
   const url = new URL(
     joinUrl$2(baseUrl, `/v1/agents/${encodeURIComponent(agentId)}/comments`)
   );
   url.searchParams.set("page", String(page));
   url.searchParams.set("per_page", String(perPage));
+  const headers = {};
   let response;
   try {
     response = await fetch(url.toString(), {
       method: "GET",
-      headers: {
-        Authorization: `Bearer ${accessToken}`
-      },
+      headers,
       credentials: "same-origin"
     });
   } catch (err) {
@@ -39557,7 +39828,7 @@ const StyledIcon$1 = styled$1(FontAwesomeIcon)(({ theme: theme2 }) => ({
   color: theme2.palette.primary.main,
   fontSize: "1.2rem"
 }));
-const StyledTextField$5 = styled$1(TextField)(({ theme: theme2 }) => ({
+const StyledTextField$4 = styled$1(TextField)(({ theme: theme2 }) => ({
   "& .MuiOutlinedInput-root": {
     borderRadius: 8,
     transition: "all 0.2s ease-in-out",
@@ -39578,7 +39849,7 @@ const StyledTextField$5 = styled$1(TextField)(({ theme: theme2 }) => ({
     padding: "12px 14px"
   }
 }));
-const NameField = styled$1(StyledTextField$5)({
+const NameField = styled$1(StyledTextField$4)({
   marginBottom: 12,
   "& .MuiInputLabel-root": {
     transform: "translate(12px, 12px) scale(1)"
@@ -39707,7 +39978,7 @@ const CreateAgentDialog = ({
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
-            StyledTextField$5,
+            StyledTextField$4,
             {
               margin: "dense",
               id: "description",
@@ -39748,7 +40019,7 @@ const LabelIcon$7 = styled$1(Box)({
   display: "flex",
   alignItems: "center"
 });
-const StyledTextField$4 = styled$1(TextField)(
+const StyledTextField$3 = styled$1(TextField)(
   ({ theme: theme2, multiline }) => ({
     "& .MuiOutlinedInput-root": {
       borderRadius: 6,
@@ -40049,7 +40320,7 @@ const EditableField = ({
     ] }),
     isEditing ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { position: "relative" }, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        StyledTextField$4,
+        StyledTextField$3,
         {
           fullWidth: true,
           variant: "outlined",
@@ -40637,12 +40908,12 @@ const StyledSlider = styled$1(Slider)(({ theme: theme2 }) => ({
 const InputContainer = styled$1(Box)({
   display: "flex",
   alignItems: "center",
-  minWidth: "90px"
-  // Slightly reduced min-width
+  minWidth: "110px"
+  // Increased min-width for wider input
 });
-const StyledTextField$3 = styled$1(TextField)(({ theme: theme2 }) => ({
-  width: "90px",
-  // Fixed width
+const StyledTextField$2 = styled$1(TextField)(({ theme: theme2 }) => ({
+  width: "110px",
+  // Increased width for wider input
   "& .MuiOutlinedInput-root": {
     borderRadius: theme2.shape.borderRadius,
     // Standard border radius
@@ -40825,7 +41096,7 @@ const SliderSetting = ({
             // Consistent loading indicator size
             /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 20, sx: { margin: "8px 12px" } })
           ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-            StyledTextField$3,
+            StyledTextField$2,
             {
               value: inputValue,
               onChange: handleInputChange,
@@ -43408,10 +43679,13 @@ const UpdateNotification = ({
   const [backendUpdateCompleted, setBackendUpdateCompleted] = reactExports.useState(false);
   const [manualUpdateRequired, setManualUpdateRequired] = reactExports.useState(false);
   const [manualUpdateInfo, setManualUpdateInfo] = reactExports.useState(null);
-  const { shouldShowUpdate, deferUpdate } = useDeferredUpdatesStore();
+  const { shouldShowUpdate, deferUpdate, hydrated } = useDeferredUpdatesStore();
   reactExports.useEffect(() => {
     window.api.systemInfo.getAppVersion().then((version2) => setAppVersion(version2)).catch(() => setAppVersion("unknown"));
   }, []);
+  if (!hydrated) {
+    return null;
+  }
   const checkForUpdates = reactExports.useCallback(async () => {
     try {
       setChecking(true);
@@ -43459,7 +43733,7 @@ const UpdateNotification = ({
   }, []);
   const handleDeferBackendUpdate = reactExports.useCallback(() => {
     if (backendUpdateInfo) {
-      deferUpdate(backendUpdateInfo.latestVersion);
+      deferUpdate(UpdateType.BACKEND, backendUpdateInfo.latestVersion);
       setSnackbarOpen(false);
       setBackendUpdateAvailable(false);
       setBackendUpdateInfo(null);
@@ -43467,7 +43741,7 @@ const UpdateNotification = ({
   }, [deferUpdate, backendUpdateInfo]);
   const handleDeferUpdate = reactExports.useCallback(() => {
     if (updateInfo) {
-      deferUpdate(updateInfo.version);
+      deferUpdate(UpdateType.UI, updateInfo.version);
       setSnackbarOpen(false);
       setUpdateAvailable(false);
       setUpdateDownloaded(false);
@@ -43476,7 +43750,7 @@ const UpdateNotification = ({
   reactExports.useEffect(() => {
     const removeUpdateAvailableListener = window.api.updater.onUpdateAvailable(
       (info) => {
-        if (shouldShowUpdate(info.version)) {
+        if (shouldShowUpdate(UpdateType.UI, info.version)) {
           setUpdateAvailable(true);
           setUpdateInfo(info);
           setSnackbarOpen(true);
@@ -43489,7 +43763,7 @@ const UpdateNotification = ({
     });
     const removeUpdateDownloadedListener = window.api.updater.onUpdateDownloaded((info) => {
       setDownloading(false);
-      if (shouldShowUpdate(info.version)) {
+      if (shouldShowUpdate(UpdateType.UI, info.version)) {
         setUpdateDownloaded(true);
         setUpdateInfo(info);
         setSnackbarOpen(true);
@@ -43518,7 +43792,7 @@ const UpdateNotification = ({
       }
     );
     const removeBackendUpdateAvailableListener = window.api.updater.onBackendUpdateAvailable((info) => {
-      if (shouldShowUpdate(info.latestVersion)) {
+      if (shouldShowUpdate(UpdateType.BACKEND, info.latestVersion)) {
         const enhancedInfo = {
           ...info,
           canManageUpdate: !info.updateCommand.includes("manually")
@@ -48816,25 +49090,19 @@ const useAgentCommentsQuery = ({
   agentId,
   enabled = true
 }) => {
-  const { isAuthenticated, sessionToken } = useRadientAuth();
-  const query = useQuery({
-    // Ensure queryKey is valid even if agentId is temporarily undefined/empty
+  return useQuery({
     queryKey: agentCommentsKeys.list(agentId || "invalid"),
     queryFn: async () => {
       if (!agentId) {
         throw new Error("Agent ID is required to fetch comments.");
       }
-      if (!sessionToken) {
-        throw new Error("Authentication token is required to fetch comments.");
-      }
       const response = await listAgentComments(
         apiConfig.radientBaseUrl,
-        agentId,
-        sessionToken
+        agentId
       );
       return response.result;
     },
-    enabled: !!agentId && isAuthenticated && !!sessionToken && enabled,
+    enabled: !!agentId && enabled,
     staleTime: 2 * 60 * 1e3,
     // 2 minutes
     gcTime: 5 * 60 * 1e3,
@@ -48842,7 +49110,6 @@ const useAgentCommentsQuery = ({
     refetchOnWindowFocus: true
     // Refetch comments if window regains focus
   });
-  return query;
 };
 const useCreateAgentCommentMutation = () => {
   const queryClient2 = useQueryClient();
@@ -49026,7 +49293,7 @@ const CommentsSection = ({
     // Renamed from 'comments'
     isLoading,
     error
-  } = useAgentCommentsQuery({ agentId, enabled: isAuthenticated });
+  } = useAgentCommentsQuery({ agentId });
   const comments2 = commentsResponse?.records ?? [];
   const createCommentMutation = useCreateAgentCommentMutation();
   const updateCommentMutation = useUpdateAgentCommentMutation();
@@ -49121,12 +49388,9 @@ const CommentsSection = ({
           ]
         }
       )
-    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", color: "textSecondary", sx: { mt: 3, mb: 2 }, children: [
-      " ",
-      "Sign in to view and leave comments."
-    ] }),
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "textSecondary", sx: { mt: 3, mb: 2 }, children: "Sign in to leave comments." }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { sx: { my: 3 } }),
-    isLoading && isAuthenticated && // Skeleton Loading State
+    isLoading && // Skeleton Loading State
     /* @__PURE__ */ jsxRuntimeExports.jsx(List$1, { children: [...Array(3)].map((_2, index2) => (
       // biome-ignore lint/suspicious/noArrayIndexKey: Static list for skeleton, index is acceptable here
       /* @__PURE__ */ jsxRuntimeExports.jsxs(CommentItem, { divider: true, children: [
@@ -49141,11 +49405,11 @@ const CommentsSection = ({
         ] })
       ] }, `skeleton-${index2}`)
     )) }),
-    error && isAuthenticated && /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { color: "error", sx: { my: 3 }, children: [
+    error && /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { color: "error", sx: { my: 3 }, children: [
       "Failed to load comments: ",
       error.message
     ] }),
-    !isLoading && !error && isAuthenticated && /* @__PURE__ */ jsxRuntimeExports.jsx(List$1, { children: comments2.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "textSecondary", children: "No comments yet. Be the first to comment!" }) : (
+    !isLoading && !error && /* @__PURE__ */ jsxRuntimeExports.jsx(List$1, { children: comments2.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "textSecondary", children: "No comments yet. Be the first to comment!" }) : (
       // Use the extracted comments array
       comments2.map(
         (comment2) => editingCommentId === comment2.id ? (
@@ -49701,7 +49965,7 @@ const MetaInfoContainer$1 = styled$1(Box)(({ theme: theme2 }) => ({
   color: theme2.palette.text.secondary,
   fontSize: "0.875rem"
 }));
-const DescriptionBox$2 = styled$1(Box)(({ theme: theme2 }) => ({
+const DescriptionBox$1 = styled$1(Box)(({ theme: theme2 }) => ({
   marginTop: theme2.spacing(2),
   marginBottom: theme2.spacing(4),
   lineHeight: 1.6
@@ -49951,7 +50215,7 @@ const AgentDetailsPage = () => {
         ")"
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(DescriptionBox$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", sx: { fontSize: "0.875rem" }, children: agent.description || "No description provided." }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(DescriptionBox$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", sx: { fontSize: "0.875rem" }, children: agent.description || "No description provided." }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { sx: { my: 3 } }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(CommentsSection, { agentId: agent.id }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -50091,11 +50355,11 @@ const AgentCard = ({
   onLikeToggle,
   onFavouriteToggle,
   isLikeActionLoading = false,
-  isFavouriteActionLoading = false,
-  showActions = false
+  isFavouriteActionLoading = false
 }) => {
   const navigate = useNavigate();
   const downloadMutation = useDownloadAgentMutation();
+  const { isAuthenticated } = useRadientAuth();
   const { data: likeCount, isLoading: isLoadingLikes } = useAgentLikeCountQuery(
     {
       agentId: agent.id
@@ -50126,6 +50390,9 @@ const AgentCard = ({
   };
   const description = agent.description ?? "";
   const truncatedDescription = truncateWithEllipsis(description, 140);
+  const likeTooltip = isAuthenticated ? isLiked ? "Unlike agent" : "Like agent" : "Log in to Radient to like agents";
+  const favouriteTooltip = isAuthenticated ? isFavourited ? "Unfavourite agent" : "Favourite agent" : "Log in to Radient to favourite agents";
+  const downloadTooltip = "Download agent to your computer";
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledCard$1, { onClick: handleCardClick, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(
       Box,
@@ -50231,12 +50498,12 @@ const AgentCard = ({
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledCardActions, { children: [
-      showActions ? /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionButtonGroup, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionButtonGroup, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: likeTooltip, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
           LikeFavouriteButton,
           {
-            onClick: (e3) => handleActionClick(e3, onLikeToggle),
-            disabled: isLikeActionLoading,
+            onClick: isAuthenticated ? (e3) => handleActionClick(e3, onLikeToggle) : void 0,
+            disabled: isLikeActionLoading || !isAuthenticated,
             color: isLiked ? "error" : void 0,
             "aria-label": isLiked ? "Unlike agent" : "Like agent",
             focusRipple: true,
@@ -50257,12 +50524,12 @@ const AgentCard = ({
               /* @__PURE__ */ jsxRuntimeExports.jsx(CountDisplay, { children: isLoadingLikes ? /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { variant: "text", width: 20 }) : likeCount ?? 0 })
             ]
           }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        ) }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: favouriteTooltip, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
           LikeFavouriteButton,
           {
-            onClick: (e3) => handleActionClick(e3, onFavouriteToggle),
-            disabled: isFavouriteActionLoading,
+            onClick: isAuthenticated ? (e3) => handleActionClick(e3, onFavouriteToggle) : void 0,
+            disabled: isFavouriteActionLoading || !isAuthenticated,
             color: isFavourited ? "warning" : void 0,
             "aria-label": isFavourited ? "Unfavourite agent" : "Favourite agent",
             focusRipple: true,
@@ -50283,10 +50550,10 @@ const AgentCard = ({
               /* @__PURE__ */ jsxRuntimeExports.jsx(CountDisplay, { children: isLoadingFavourites ? /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { variant: "text", width: 20 }) : favouriteCount ?? 0 })
             ]
           }
-        )
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Box, {}),
+        ) }) })
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(ActionButtonGroup, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: "Download agent to your computer", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: downloadTooltip, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           IconButton,
           {
             size: "small",
@@ -50303,7 +50570,7 @@ const AgentCard = ({
               }
             )
           }
-        ) }),
+        ) }) }),
         isLoadingDownloads || downloadMutation.isPending ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           Skeleton,
           {
@@ -82606,7 +82873,7 @@ const languages = [
     name: "Go",
     extensions: ["go"],
     load() {
-      return __vitePreload(() => import("./index-CkAsfYTs.js"), true ? __vite__mapDeps([0,1,2]) : void 0, import.meta.url).then((m2) => m2.go());
+      return __vitePreload(() => import("./index-BpktHwp9.js"), true ? __vite__mapDeps([0,1,2]) : void 0, import.meta.url).then((m2) => m2.go());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -82783,7 +83050,7 @@ const languages = [
     alias: ["yml"],
     extensions: ["yaml", "yml"],
     load() {
-      return __vitePreload(() => import("./index-BkZEKoZT.js"), true ? __vite__mapDeps([3,1,2]) : void 0, import.meta.url).then((m2) => m2.yaml());
+      return __vitePreload(() => import("./index-D4xePR3Q.js"), true ? __vite__mapDeps([3,1,2]) : void 0, import.meta.url).then((m2) => m2.yaml());
     }
   }),
   // Legacy modes ported from CodeMirror 5
@@ -141403,7 +141670,7 @@ const OptionsButton = styled$1(IconButton)(({ theme: theme2 }) => ({
     transform: "translateY(-1px)"
   }
 }));
-const DescriptionBox$1 = styled$1(Box)({
+const DescriptionBox = styled$1(Box)({
   display: "flex",
   flexDirection: "column",
   width: "90%"
@@ -141437,7 +141704,7 @@ const ChatHeader = ({
             children: /* @__PURE__ */ jsxRuntimeExports.jsx(Bot, { size: 24 })
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(DescriptionBox$1, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(DescriptionBox, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Typography,
             {
@@ -142487,7 +142754,7 @@ const SuggestionChip = styled$1(Button)(({ theme: theme2 }) => ({
     }
   }
 }));
-const StyledTextField$2 = styled$1(TextField)(({ theme: theme2 }) => ({
+const StyledTextField$1 = styled$1(TextField)(({ theme: theme2 }) => ({
   flex: 1,
   "& .MuiOutlinedInput-root": {
     backgroundColor: "transparent",
@@ -142643,7 +142910,6 @@ const MessageInput = ({
     textareaRef
   } = useMessageInput({
     conversationId,
-    messages,
     onSubmit,
     scrollToBottom
   });
@@ -142698,7 +142964,7 @@ const MessageInput = ({
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        StyledTextField$2,
+        StyledTextField$1,
         {
           fullWidth: true,
           placeholder: isInputDisabled ? "Agent is busy" : "Ask me for help",
@@ -180108,6 +180374,153 @@ function ft(n2) {
   }
   return React.memo(l2);
 }
+const CodeContainer$4 = styled$1(Box)({
+  marginBottom: 16,
+  width: "100%"
+});
+const SectionLabel$4 = styled$1(Typography)(({ theme: theme2 }) => ({
+  display: "block",
+  marginBottom: 4,
+  color: theme2.palette.error.light
+}));
+const ErrorContainer$2 = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "isUser"
+})(({ isUser, theme: theme2 }) => ({
+  fontFamily: '"Roboto Mono", monospace',
+  fontSize: "0.85rem",
+  backgroundColor: alpha$1(
+    theme2.palette.error.main,
+    theme2.palette.mode === "dark" ? 0.1 : 0.05
+  ),
+  borderRadius: "8px",
+  padding: 12,
+  maxHeight: "200px",
+  overflow: "auto",
+  display: "flex",
+  flexDirection: "column-reverse",
+  whiteSpace: "pre-wrap",
+  color: isUser ? theme2.palette.error.main : theme2.palette.error.light,
+  width: "100%",
+  boxShadow: `0 2px 6px ${alpha$1(theme2.palette.common.black, theme2.palette.mode === "dark" ? 0.15 : 0.1)}`,
+  "&::-webkit-scrollbar": {
+    width: "6px"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: alpha$1(
+      theme2.palette.mode === "dark" ? theme2.palette.common.white : theme2.palette.common.black,
+      0.1
+    ),
+    borderRadius: "3px"
+  }
+}));
+const ErrorBlock = ({ error, isUser }) => {
+  if (!error || error === "[No error output]") return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer$4, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$4, { variant: "caption", children: "Error" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorContainer$2, { isUser, children: error })
+  ] });
+};
+const CodeContainer$3 = styled$1(Box)({
+  marginBottom: 16,
+  width: "100%"
+});
+const SectionLabel$3 = styled$1(Typography)(({ theme: theme2 }) => ({
+  display: "block",
+  marginBottom: 4,
+  color: theme2.palette.text.secondary
+}));
+const LogContainer = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "isUser"
+})(({ isUser, theme: theme2 }) => ({
+  fontFamily: '"Roboto Mono", monospace',
+  fontSize: "0.85rem",
+  backgroundColor: alpha$1(
+    theme2.palette.mode === "dark" ? theme2.palette.common.black : theme2.palette.grey[200],
+    theme2.palette.mode === "dark" ? 0.3 : 0.5
+  ),
+  borderRadius: "8px",
+  padding: 12,
+  maxHeight: "200px",
+  overflow: "auto",
+  display: "flex",
+  flexDirection: "column-reverse",
+  whiteSpace: "pre-wrap",
+  color: isUser ? theme2.palette.info.main : theme2.palette.info.light,
+  width: "100%",
+  boxShadow: `0 2px 6px ${alpha$1(theme2.palette.common.black, theme2.palette.mode === "dark" ? 0.15 : 0.1)}`,
+  "&::-webkit-scrollbar": {
+    width: "6px"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: alpha$1(
+      theme2.palette.mode === "dark" ? theme2.palette.common.white : theme2.palette.common.black,
+      0.1
+    ),
+    borderRadius: "3px"
+  }
+}));
+const LogBlock = ({ log: log2, isUser }) => {
+  if (!log2 || log2 === "[No logger output]") return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer$3, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$3, { variant: "caption", children: "Logs" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(LogContainer, { isUser, children: log2 })
+  ] });
+};
+const CodeContainer$2 = styled$1(Box)({
+  marginBottom: 16,
+  width: "100%"
+});
+const SectionLabel$2 = styled$1(Typography)(({ theme: theme2 }) => ({
+  display: "block",
+  marginBottom: 4,
+  color: theme2.palette.text.secondary
+}));
+const OutputContainer = styled$1(Box)(({ theme: theme2 }) => ({
+  fontFamily: '"Roboto Mono", monospace',
+  fontSize: "0.85rem",
+  backgroundColor: alpha$1(
+    theme2.palette.mode === "dark" ? theme2.palette.common.black : theme2.palette.grey[200],
+    theme2.palette.mode === "dark" ? 0.3 : 0.5
+  ),
+  borderRadius: "8px",
+  padding: 12,
+  maxHeight: "300px",
+  overflow: "auto",
+  whiteSpace: "pre",
+  width: "100%",
+  boxShadow: `0 2px 6px ${alpha$1(
+    theme2.palette.common.black,
+    theme2.palette.mode === "dark" ? 0.15 : 0.1
+  )}`,
+  color: theme2.palette.text.primary,
+  overflowX: "auto",
+  display: "flex",
+  flexDirection: "column-reverse",
+  "&::-webkit-scrollbar": {
+    width: "6px",
+    height: "6px"
+  },
+  "&::-webkit-scrollbar-thumb": {
+    backgroundColor: alpha$1(
+      theme2.palette.mode === "dark" ? theme2.palette.common.white : theme2.palette.common.black,
+      0.1
+    ),
+    borderRadius: "3px"
+  },
+  "&::-webkit-scrollbar-corner": {
+    backgroundColor: alpha$1(
+      theme2.palette.mode === "dark" ? theme2.palette.common.black : theme2.palette.grey[200],
+      theme2.palette.mode === "dark" ? 0.3 : 0.5
+    )
+  }
+}));
+const OutputBlock = ({ output }) => {
+  if (!output) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer$2, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$2, { variant: "caption", children: "Output" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(OutputContainer, { children: output })
+  ] });
+};
 const SyntaxHighlighterStyles$1 = ft`
   .loading-syntax-highlighter * {
     font-family: 'Roboto Mono', monospace !important;
@@ -180201,62 +180614,80 @@ const CodeToggleButton = styled$1(Button)(({ theme: theme2 }) => ({
     marginLeft: 0
   }
 }));
-const CodeContainer$4 = styled$1(Box)(() => ({
+const CodeContainer$1 = styled$1(Box)(() => ({
   maxWidth: "100%",
   marginLeft: 16,
   marginTop: 8
 }));
-const LoadingCodeBlock = ({ code: code2 }) => {
+const LoadingCodeBlock = ({ code: code2, label, language: language2 = "python" }) => {
   if (!code2) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Box,
-    {
-      sx: {
-        width: "100%",
-        maxHeight: "300px",
-        overflow: "auto",
-        "&::-webkit-scrollbar": {
-          width: "6px",
-          height: "6px"
-        },
-        "&::-webkit-scrollbar-thumb": {
-          backgroundColor: "rgba(255, 255, 255, 0.1)",
-          borderRadius: "3px"
-        },
-        "&::-webkit-scrollbar-corner": {
-          backgroundColor: "rgba(0, 0, 0, 0.3)"
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { width: "100%", marginBottom: 2 }, children: [
+    label && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Typography,
+      {
+        variant: "caption",
+        sx: {
+          color: (theme2) => theme2.palette.text.secondary,
+          fontWeight: 600,
+          marginLeft: 0.5,
+          marginBottom: 0.5,
+          letterSpacing: 0.5,
+          textTransform: "uppercase",
+          opacity: 0.7
         },
-        borderRadius: "8px"
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SyntaxHighlighterStyles$1, {}),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          highlighter,
-          {
-            language: "python",
-            style: atomOneDark,
-            customStyle: {
-              fontSize: "0.85rem",
-              width: "100%",
-              boxShadow: "0 2px 6px rgba(0, 0, 0, 0.2)",
-              padding: "0.75rem",
-              margin: 0
-              // Remove margin to make it more compact
-            },
-            codeTagProps: {
-              style: {
-                fontFamily: '"Roboto Mono", monospace !important'
-              }
-            },
-            className: "loading-syntax-highlighter",
-            wrapLines: true,
-            wrapLongLines: true,
-            children: code2
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Box,
+      {
+        sx: {
+          width: "100%",
+          maxHeight: "300px",
+          overflow: "auto",
+          display: "flex",
+          borderRadius: "8px",
+          "&::-webkit-scrollbar": {
+            width: "6px",
+            height: "6px"
+          },
+          "&::-webkit-scrollbar-thumb": {
+            backgroundColor: "rgba(255, 255, 255, 0.1)",
+            borderRadius: "3px"
+          },
+          "&::-webkit-scrollbar-corner": {
+            backgroundColor: "rgba(0, 0, 0, 0.3)"
           }
-        )
-      ]
-    }
-  );
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SyntaxHighlighterStyles$1, {}),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            highlighter,
+            {
+              language: language2,
+              style: atomOneDark,
+              customStyle: {
+                fontSize: "0.85rem",
+                width: "100%",
+                boxShadow: "0 2px 6px rgba(0, 0, 0, 0.2)",
+                padding: "0.75rem",
+                margin: 0
+              },
+              codeTagProps: {
+                style: {
+                  fontFamily: '"Roboto Mono", monospace !important'
+                }
+              },
+              className: "loading-syntax-highlighter",
+              wrapLines: true,
+              wrapLongLines: true,
+              children: code2
+            }
+          )
+        ]
+      }
+    )
+  ] });
 };
 const getStatusText = (status) => {
   switch (status) {
@@ -180321,6 +180752,9 @@ const LoadingIndicator = ({ status, currentExecution, scrollToBottom }) => {
   const streamingMessage = getStreamingMessage(currentExecution?.id || "");
   const isStreaming = !!streamingMessage && !streamingMessage.isComplete;
   const codeSnippet = currentExecution?.code || null;
+  const stdout = currentExecution?.stdout || "";
+  const stderr = currentExecution?.stderr || "";
+  const logging = currentExecution?.logging || "";
   const message2 = currentExecution?.message || null;
   const statusText = currentExecution ? getDetailedStatusText(status, currentExecution) : status ? getStatusText(status) : "Thinking";
   const {
@@ -180364,7 +180798,7 @@ const LoadingIndicator = ({ status, currentExecution, scrollToBottom }) => {
             /* @__PURE__ */ jsxRuntimeExports.jsx(Dot$1, { delay: 0.2 }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(Dot$1, { delay: 0.4 })
           ] }),
-          codeSnippet && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          (codeSnippet || stdout || stderr || logging) && /* @__PURE__ */ jsxRuntimeExports.jsx(
             CodeToggleButton,
             {
               onClick: toggleCodeExpansion,
@@ -180383,7 +180817,19 @@ const LoadingIndicator = ({ status, currentExecution, scrollToBottom }) => {
           )
         ] })
       ] }) }),
-      codeSnippet && isCodeExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeContainer$4, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingCodeBlock, { code: codeSnippet }) })
+      isCodeExpanded && (codeSnippet || stdout || stderr || logging) && /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer$1, { children: [
+        codeSnippet && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          LoadingCodeBlock,
+          {
+            code: codeSnippet,
+            label: "Code",
+            language: "python"
+          }
+        ),
+        stdout && /* @__PURE__ */ jsxRuntimeExports.jsx(OutputBlock, { output: stdout, isUser: false }),
+        stderr && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBlock, { error: stderr, isUser: false }),
+        logging && /* @__PURE__ */ jsxRuntimeExports.jsx(LogBlock, { log: logging, isUser: false })
+      ] })
     ] })
   ] });
 };
@@ -180438,11 +180884,11 @@ const ActionHighlight = ({
     children
   ] });
 };
-const CodeContainer$3 = styled$1(Box)({
+const CodeContainer = styled$1(Box)({
   marginBottom: 16,
   width: "100%"
 });
-const SectionLabel$4 = styled$1(Typography)(({ theme: theme2 }) => ({
+const SectionLabel$1 = styled$1(Typography)(({ theme: theme2 }) => ({
   display: "block",
   marginBottom: 4,
   color: theme2.palette.text.secondary
@@ -180454,8 +180900,8 @@ const SyntaxHighlighterStyles = ft`
 `;
 const CodeBlock = ({ code: code2 }) => {
   if (!code2) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer$3, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$4, { variant: "caption", children: "Code" }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$1, { variant: "caption", children: "Code" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(SyntaxHighlighterStyles, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       highlighter,
@@ -180482,50 +180928,6 @@ const CodeBlock = ({ code: code2 }) => {
     )
   ] });
 };
-const CodeContainer$2 = styled$1(Box)({
-  marginBottom: 16,
-  width: "100%"
-});
-const SectionLabel$3 = styled$1(Typography)(({ theme: theme2 }) => ({
-  display: "block",
-  marginBottom: 4,
-  color: theme2.palette.error.light
-}));
-const ErrorContainer$2 = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "isUser"
-})(({ isUser, theme: theme2 }) => ({
-  fontFamily: '"Roboto Mono", monospace',
-  fontSize: "0.85rem",
-  backgroundColor: alpha$1(
-    theme2.palette.error.main,
-    theme2.palette.mode === "dark" ? 0.1 : 0.05
-  ),
-  borderRadius: "8px",
-  padding: 12,
-  maxHeight: "200px",
-  overflow: "auto",
-  whiteSpace: "pre-wrap",
-  color: isUser ? theme2.palette.error.main : theme2.palette.error.light,
-  width: "100%",
-  boxShadow: `0 2px 6px ${alpha$1(theme2.palette.common.black, theme2.palette.mode === "dark" ? 0.15 : 0.1)}`,
-  "&::-webkit-scrollbar": {
-    width: "6px"
-  },
-  "&::-webkit-scrollbar-thumb": {
-    backgroundColor: alpha$1(
-      theme2.palette.mode === "dark" ? theme2.palette.common.white : theme2.palette.common.black,
-      0.1
-    ),
-    borderRadius: "3px"
-  }
-}));
-const ErrorBlock = ({ error, isUser }) => {
-  if (!error || error === "[No error output]") return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer$2, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$3, { variant: "caption", children: "Error" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorContainer$2, { isUser, children: error })
-  ] });
-};
 const canvasSupportedExtensions = /* @__PURE__ */ new Set([
   ...Object.keys(langs),
   ...Object.keys(languageOverrideMap)
@@ -180613,8 +181015,13 @@ const FileAttachment = ({
         const state = useCanvasStore.getState();
         const files = state.conversations[conversationId]?.files ?? [];
         const openTabs = state.conversations[conversationId]?.openTabs ?? [];
-        const existsFile = files.some((d2) => d2.id === docId);
-        const updatedFiles = existsFile ? files : [...files, newDoc];
+        const updatedFiles = (() => {
+          const idx = files.findIndex((d2) => d2.id === docId);
+          if (idx !== -1) {
+            return [...files.slice(0, idx), newDoc, ...files.slice(idx + 1)];
+          }
+          return [...files, newDoc];
+        })();
         setFiles(conversationId, updatedFiles);
         const existsTab = openTabs.some((t2) => t2.id === docId);
         const updatedTabs = existsTab ? openTabs : [...openTabs, { id: docId, title }];
@@ -180741,100 +181148,6 @@ const ImageAttachment = ({
     }
   );
 };
-const CodeContainer$1 = styled$1(Box)({
-  marginBottom: 16,
-  width: "100%"
-});
-const SectionLabel$2 = styled$1(Typography)(({ theme: theme2 }) => ({
-  display: "block",
-  marginBottom: 4,
-  color: theme2.palette.text.secondary
-}));
-const LogContainer = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "isUser"
-})(({ isUser, theme: theme2 }) => ({
-  fontFamily: '"Roboto Mono", monospace',
-  fontSize: "0.85rem",
-  backgroundColor: alpha$1(
-    theme2.palette.mode === "dark" ? theme2.palette.common.black : theme2.palette.grey[200],
-    theme2.palette.mode === "dark" ? 0.3 : 0.5
-  ),
-  borderRadius: "8px",
-  padding: 12,
-  maxHeight: "200px",
-  overflow: "auto",
-  whiteSpace: "pre-wrap",
-  color: isUser ? theme2.palette.info.main : theme2.palette.info.light,
-  width: "100%",
-  boxShadow: `0 2px 6px ${alpha$1(theme2.palette.common.black, theme2.palette.mode === "dark" ? 0.15 : 0.1)}`,
-  "&::-webkit-scrollbar": {
-    width: "6px"
-  },
-  "&::-webkit-scrollbar-thumb": {
-    backgroundColor: alpha$1(
-      theme2.palette.mode === "dark" ? theme2.palette.common.white : theme2.palette.common.black,
-      0.1
-    ),
-    borderRadius: "3px"
-  }
-}));
-const LogBlock = ({ log: log2, isUser }) => {
-  if (!log2 || log2 === "[No logger output]") return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer$1, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$2, { variant: "caption", children: "Logs" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(LogContainer, { isUser, children: log2 })
-  ] });
-};
-const CodeContainer = styled$1(Box)({
-  marginBottom: 16,
-  width: "100%"
-});
-const SectionLabel$1 = styled$1(Typography)(({ theme: theme2 }) => ({
-  display: "block",
-  marginBottom: 4,
-  color: theme2.palette.text.secondary
-}));
-const OutputContainer = styled$1(Box)(({ theme: theme2 }) => ({
-  fontFamily: '"Roboto Mono", monospace',
-  fontSize: "0.85rem",
-  backgroundColor: alpha$1(
-    theme2.palette.mode === "dark" ? theme2.palette.common.black : theme2.palette.grey[200],
-    theme2.palette.mode === "dark" ? 0.3 : 0.5
-  ),
-  borderRadius: "8px",
-  padding: 12,
-  maxHeight: "300px",
-  overflow: "auto",
-  whiteSpace: "pre",
-  width: "100%",
-  boxShadow: `0 2px 6px ${alpha$1(theme2.palette.common.black, theme2.palette.mode === "dark" ? 0.15 : 0.1)}`,
-  color: theme2.palette.text.primary,
-  overflowX: "auto",
-  "&::-webkit-scrollbar": {
-    width: "6px",
-    height: "6px"
-  },
-  "&::-webkit-scrollbar-thumb": {
-    backgroundColor: alpha$1(
-      theme2.palette.mode === "dark" ? theme2.palette.common.white : theme2.palette.common.black,
-      0.1
-    ),
-    borderRadius: "3px"
-  },
-  "&::-webkit-scrollbar-corner": {
-    backgroundColor: alpha$1(
-      theme2.palette.mode === "dark" ? theme2.palette.common.black : theme2.palette.grey[200],
-      theme2.palette.mode === "dark" ? 0.3 : 0.5
-    )
-  }
-}));
-const OutputBlock = ({ output }) => {
-  if (!output) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(CodeContainer, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionLabel$1, { variant: "caption", children: "Output" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(OutputContainer, { children: output })
-  ] });
-};
 const AttachmentVideo = styled$1("video")(({ theme: theme2 }) => ({
   maxWidth: "100%",
   maxHeight: 300,
@@ -182116,6 +182429,47 @@ const getAttachmentUrl = (client, path2) => {
 };
 const MessageItem = reactExports.memo(
   ({ message: message2, onMessageComplete, isLastMessage, conversationId }) => {
+    const setFiles = useCanvasStore((s2) => s2.setFiles);
+    reactExports.useEffect(() => {
+      if (!message2.files || message2.files.length === 0) return;
+      const state = useCanvasStore.getState();
+      const conv = state.conversations[conversationId];
+      if (!conv) return;
+      const { openTabs, files } = conv;
+      if (!openTabs || openTabs.length === 0) return;
+      (async () => {
+        let updatedFiles = files;
+        let didUpdate = false;
+        for (const filePath of message2.files ?? []) {
+          const normalizedPath = filePath.startsWith("file://") ? filePath.substring(7) : filePath;
+          const tabIsOpen = openTabs.some((tab2) => tab2.id === normalizedPath);
+          if (!tabIsOpen) continue;
+          const fileIdx = updatedFiles.findIndex(
+            (f2) => f2.id === normalizedPath
+          );
+          if (fileIdx === -1) continue;
+          try {
+            const result = await window.api.readFile(normalizedPath);
+            if (result.success) {
+              const currentDoc = updatedFiles[fileIdx];
+              if (currentDoc.content !== result.data) {
+                const updatedDoc = { ...currentDoc, content: result.data };
+                updatedFiles = [
+                  ...updatedFiles.slice(0, fileIdx),
+                  updatedDoc,
+                  ...updatedFiles.slice(fileIdx + 1)
+                ];
+                didUpdate = true;
+              }
+            }
+          } catch (_2) {
+          }
+        }
+        if (didUpdate) {
+          setFiles(conversationId, updatedFiles);
+        }
+      })();
+    }, [message2, conversationId, setFiles]);
     const shouldHide = (message2.action === "DONE" || message2.action === "ASK") && message2.execution_type === "action" && message2.task_classification === "conversation" || !message2.message && (!message2.files || message2.files.length === 0) && !message2.code && !message2.stdout && !message2.stderr && !message2.logging && message2.is_complete;
     if (shouldHide) {
       return null;
@@ -183854,7 +184208,7 @@ const menuItemSx = (theme2) => ({
     }
   }
 });
-const menuPropsSx = (theme2) => ({
+const menuPropsSx$1 = (theme2) => ({
   PaperProps: {
     sx: {
       mt: 0.5,
@@ -183870,8 +184224,6 @@ const RECOMMENDED_AGENT_COUNT = 8;
 const StyledGridContainer = styled$1(Grid)(({ theme: theme2 }) => ({
   overflowY: "auto",
   padding: theme2.spacing(2, 0),
-  height: 400,
-  maxHeight: 400,
   flexGrow: 1,
   width: "100%",
   "&::-webkit-scrollbar": {
@@ -183991,7 +184343,7 @@ const CreateAgentStep = ({
           ] })
         }
       ),
-      !isLoadingAgents && !agentsError && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledGridContainer, { container: true, spacing: 2, children: recommendedAgents.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", align: "center", children: "No recommended agents found. You can proceed or add agents later." }) }) : recommendedAgents.map((agent) => /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: 4, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      !isLoadingAgents && !agentsError && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledGridContainer, { container: true, spacing: 2, children: recommendedAgents.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", align: "center", children: "No recommended agents found. You can proceed or add agents later." }) }) : recommendedAgents.map((agent) => /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, sm: 6, md: 6, lg: 6, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         Box,
         {
           sx: {
@@ -184306,7 +184658,7 @@ const DefaultModelStep = () => {
               id: "provider-select",
               value: selectedProvider,
               onChange: handleProviderChange,
-              MenuProps: menuPropsSx(theme2),
+              MenuProps: menuPropsSx$1(theme2),
               children: availableProviders.map((provider) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: provider.id, children: provider.name }, provider.id))
             }
           ),
@@ -184326,7 +184678,7 @@ const DefaultModelStep = () => {
               id: "model-select",
               value: selectedModel,
               onChange: handleModelChange,
-              MenuProps: menuPropsSx(theme2),
+              MenuProps: menuPropsSx$1(theme2),
               disabled: availableModels.length === 0,
               children: [
                 availableModels.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { disabled: true, value: "", children: "No models found for this provider" }),
@@ -184629,7 +184981,7 @@ const ModelCredentialStep = () => {
               id: "credential-select",
               value: selectedCredential,
               onChange: handleCredentialChange,
-              MenuProps: menuPropsSx(theme2),
+              MenuProps: menuPropsSx$1(theme2),
               children: modelProviderCredentials.map((cred) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: cred.key, children: cred.name }, cred.key))
             }
           ),
@@ -184881,22 +185233,7 @@ const RadientChoiceStep = ({
             "Get started for free with ",
             /* @__PURE__ */ jsxRuntimeExports.jsx(RadientPassText, { children: "Radient Pass" })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(CardSubtitle, { variant: "body2", children: [
-            " ",
-            "Batteries included with",
-            " ",
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Typography,
-              {
-                component: "span",
-                fontWeight: "medium",
-                color: radientTheme.palette.primary.main,
-                sx: { fontSize: "inherit" },
-                children: "web search, image generation, site crawling, hundreds of AI models"
-              }
-            ),
-            ", and more. One API key instead of many, with potential savings when Radient picks the best model to handle each step. Two-click setup, no credit card required."
-          ] })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardSubtitle, { variant: "body2", children: "Designed for best speed, accuracy, and performance with Local Operator. Get access to all tools and models at once, with potential savings when Radient picks the best model to handle each step. Two-click setup, no credit card required." })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(CardIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           "img",
@@ -184923,7 +185260,7 @@ const RadientChoiceStep = ({
             "Set up your own keys ",
             /* @__PURE__ */ jsxRuntimeExports.jsx(FreeText, { children: "(Free Forever)" })
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(CardSubtitle, { variant: "body2", children: "Full flexibility for technical users. Bring your own API keys for providers like OpenAI, Anthropic, SERP API, etc., and manage billing separately." })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CardSubtitle, { variant: "body2", children: "Full flexibility for technical users. Bring your own API keys for providers like OpenAI, Anthropic, Tavily API, etc., and manage billing separately." })
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(CardIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { fontSize: "3.5rem", children: "🔧" }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(ChooseOption, { className: "choose-option", children: [
@@ -185236,7 +185573,7 @@ const SearchApiStep = () => {
               id: "search-api-select",
               value: selectedCredential,
               onChange: handleCredentialChange,
-              MenuProps: menuPropsSx(theme2),
+              MenuProps: menuPropsSx$1(theme2),
               children: searchApiCredentials.map((cred) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: cred.key, children: cred.key === RECOMMENDED_CREDENTIAL ? `${cred.name} (Recommended)` : cred.name }, cred.key))
             }
           ),
@@ -185525,7 +185862,6 @@ const OnboardingModal = ({ open: open2 }) => {
         }
       } catch (error) {
         console.error("Error validating session/fetching user info:", error);
-        showErrorToast("Session validation failed. Please sign in again.");
         clearSession();
       }
     };
@@ -208830,6 +209166,7 @@ const StyledCard = styled$1(Card)(({ theme: theme2 }) => ({
   marginBottom: theme2.spacing(3),
   backgroundColor: theme2.palette.background.paper,
   borderRadius: 6,
+  backgroundImage: "none",
   border: `1px solid ${theme2.palette.divider}`,
   boxShadow: "none",
   width: "100%"
@@ -209152,15 +209489,20 @@ const CredentialCard = ({
           variant: "outlined",
           size: "small",
           color: "primary",
-          startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faKey, size: "xs" }),
+          startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FontAwesomeIcon,
+            {
+              icon: faKey,
+              size: "xs",
+              style: { fontSize: "0.875rem" }
+            }
+          ),
           onClick: () => onAdd?.(credentialKey),
           sx: { ...primaryButtonSx, boxShadow: "none" },
           children: "Configure"
         }
       ),
-      credInfo.url && // Keep ts-ignore as requested
-      // @ts-ignore
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: `Get your ${credInfo.name} key`, placement: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      credInfo.url && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { title: `Get your ${credInfo.name} key`, placement: "top", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         IconButton,
         {
           size: "small",
@@ -209176,57 +209518,101 @@ const CredentialCard = ({
     ] }) })
   ] });
 };
-const StyledFormControl = styled$1(FormControl)(({ theme: theme2 }) => ({
-  marginBottom: theme2.spacing(2.5)
-  // Consistent spacing
-}));
-const StyledTextField$1 = styled$1(TextField)(({ theme: theme2 }) => ({
-  marginBottom: theme2.spacing(2.5),
-  // Consistent spacing
-  "& .MuiInputBase-root": {
-    borderRadius: theme2.shape.borderRadius * 0.75,
-    backgroundColor: theme2.palette.background.paper
+const StyledOutlinedInput = styled$1(OutlinedInput)(({ theme: theme2 }) => ({
+  borderRadius: theme2.shape.borderRadius * 0.75,
+  backgroundColor: theme2.palette.background.paper,
+  border: `1px solid ${theme2.palette.divider}`,
+  minHeight: "40px",
+  height: "40px",
+  fontSize: "0.875rem",
+  paddingRight: 0,
+  "& .MuiOutlinedInput-notchedOutline": {
+    border: "none"
   },
+  "& .MuiSelect-select": {
+    display: "flex",
+    alignItems: "center",
+    gap: theme2.spacing(1),
+    fontSize: "0.875rem",
+    padding: theme2.spacing(1, 1.5),
+    height: "calc(40px - 16px)",
+    boxSizing: "border-box"
+  },
+  "& .MuiInputBase-input": {
+    padding: theme2.spacing(1, 1.5),
+    fontSize: "0.875rem",
+    height: "calc(40px - 16px)",
+    boxSizing: "border-box"
+  },
+  "& .MuiInputBase-input::placeholder": {
+    color: theme2.palette.text.disabled,
+    opacity: 1
+  },
+  "&:hover": {
+    borderColor: theme2.palette.text.secondary
+  },
+  "&.Mui-focused": {
+    borderColor: theme2.palette.primary.main,
+    boxShadow: `0 0 0 2px ${theme2.palette.primary.main}33`
+  }
+}));
+const menuPropsSx = (theme2) => ({
+  PaperProps: {
+    sx: {
+      borderRadius: theme2.shape.borderRadius * 0.75,
+      boxShadow: theme2.shadows[2],
+      mt: 0.5,
+      "& .MuiMenuItem-root": {
+        fontSize: "0.875rem",
+        minHeight: "40px",
+        px: 2
+      }
+    }
+  }
+});
+const textFieldInputSx = (theme2) => ({
   "& .MuiOutlinedInput-root": {
-    "& .MuiOutlinedInput-notchedOutline": {
-      borderColor: theme2.palette.divider
-    },
-    "&:hover .MuiOutlinedInput-notchedOutline": {
+    borderRadius: theme2.shape.borderRadius * 0.75,
+    backgroundColor: theme2.palette.background.paper,
+    border: `1px solid ${theme2.palette.divider}`,
+    minHeight: "40px",
+    height: "40px",
+    transition: "border-color 0.2s ease, box-shadow 0.2s ease",
+    "&:hover": {
       borderColor: theme2.palette.text.secondary
     },
-    "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+    "&.Mui-focused": {
       borderColor: theme2.palette.primary.main,
-      borderWidth: "1px"
+      boxShadow: `0 0 0 2px ${theme2.palette.primary.main}33`
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: "none"
     }
   },
-  "& .MuiInputLabel-root": {
+  "& .MuiInputBase-input": {
+    padding: theme2.spacing(1, 1.5),
     fontSize: "0.875rem",
-    "&.Mui-focused": {
-      color: theme2.palette.primary.main
-    }
-  }
-}));
-const StyledSelect = styled$1(Select)(({ theme: theme2 }) => ({
-  borderRadius: theme2.shape.borderRadius * 0.75,
-  backgroundColor: theme2.palette.background.paper,
-  "& .MuiOutlinedInput-notchedOutline": {
-    borderColor: theme2.palette.divider
+    height: "calc(40px - 16px)",
+    boxSizing: "border-box"
   },
-  "&:hover .MuiOutlinedInput-notchedOutline": {
-    borderColor: theme2.palette.text.secondary
+  "& .MuiInputBase-input::placeholder": {
+    color: theme2.palette.text.disabled,
+    opacity: 1
   },
-  "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-    borderColor: theme2.palette.primary.main
+  "& .MuiFormHelperText-root": {
+    fontSize: "0.75rem",
+    mt: 0.5,
+    ml: 0.5
   }
-}));
-const DescriptionBox = styled$1(Box)(({ theme: theme2 }) => ({
+});
+const DescriptionBoxSx = (theme2) => ({
   marginTop: theme2.spacing(1),
   marginBottom: theme2.spacing(2),
   padding: theme2.spacing(1.5),
-  backgroundColor: theme2.palette.action.hover,
+  backgroundColor: alpha$1(theme2.palette.background.default, 0.5),
   border: `1px solid ${theme2.palette.divider}`,
   borderRadius: theme2.shape.borderRadius * 0.75
-}));
+});
 const CredentialDialog = ({
   open: open2,
   onClose,
@@ -209279,6 +209665,21 @@ const CredentialDialog = ({
     (cred) => cred.key === key
   );
   const dialogTitle = isEditMode ? "Update Credential" : "Add New Credential";
+  const FieldLabel2 = styled$1("div")(({ theme: theme22 }) => ({
+    fontFamily: theme22.typography.fontFamily,
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    color: theme22.palette.text.secondary,
+    marginBottom: 6,
+    display: "flex",
+    alignItems: "center"
+  }));
+  const LabelIcon2 = styled$1(Box)({
+    marginRight: 8,
+    opacity: 0.9,
+    display: "flex",
+    alignItems: "center"
+  });
   const dialogActions = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button,
@@ -209325,7 +209726,7 @@ const CredentialDialog = ({
       }
     )
   ] });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
     BaseDialog,
     {
       open: open2,
@@ -209334,111 +209735,120 @@ const CredentialDialog = ({
       actions: dialogActions,
       maxWidth: "sm",
       fullWidth: true,
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { pt: 2 }, children: [
-          isEditMode ? (
-            // Display the key being edited (non-editable)
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { mb: 2.5, children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "overline", color: "text.secondary", children: "Credential Key" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { fontWeight: 500, children: initialKey })
-            ] })
-          ) : (
-            // Show selection for adding new credentials
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledFormControl, { fullWidth: true, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabel, { id: "credential-key-label", children: "Credential Type" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  StyledSelect,
-                  {
-                    labelId: "credential-key-label",
-                    value: useCustomKey ? "_custom_" : key,
-                    label: "Credential Type",
-                    onChange: (e3) => {
-                      const selectedValue = e3.target.value;
-                      if (selectedValue === "_custom_") {
-                        setUseCustomKey(true);
-                        setKey("");
-                      } else {
-                        setUseCustomKey(false);
-                        setKey(selectedValue);
-                        setCustomKey("");
-                      }
-                    },
-                    displayEmpty: !key && !useCustomKey,
-                    children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: "", disabled: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("em", { children: "Select a credential type..." }) }),
-                      CREDENTIAL_MANIFEST.map((cred) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                        MenuItem,
-                        {
-                          value: cred.key,
-                          disabled: isExistingKey(cred.key),
-                          children: [
-                            cred.name,
-                            " ",
-                            isExistingKey(cred.key) && "(Configured)"
-                          ]
-                        },
-                        cred.key
-                      )),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: "_custom_", children: "Custom Credential" })
-                    ]
-                  }
-                )
-              ] }),
-              useCustomKey && /* @__PURE__ */ jsxRuntimeExports.jsx(
-                StyledTextField$1,
-                {
-                  label: "Custom Credential Key",
-                  fullWidth: true,
-                  value: customKey,
-                  onChange: (e3) => setCustomKey(e3.target.value),
-                  error: isExistingKey(customKey),
-                  helperText: isExistingKey(customKey) ? "This credential already exists" : "",
-                  required: true,
-                  autoFocus: true
-                }
-              ),
-              selectedCredentialManifest && !useCustomKey && /* @__PURE__ */ jsxRuntimeExports.jsxs(DescriptionBox, { children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: selectedCredentialManifest.description }),
-                selectedCredentialManifest.url && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                  Link,
-                  {
-                    href: selectedCredentialManifest.url,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    variant: "body2",
-                    sx: { display: "inline-flex", alignItems: "center" },
-                    children: [
-                      "Get your ",
-                      selectedCredentialManifest.name,
-                      " key"
-                    ]
-                  }
-                )
-              ] })
-            ] })
-          ),
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { pt: 2 }, children: [
+        isEditMode ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { mb: 2.5, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
-            StyledTextField$1,
+            Typography,
             {
-              label: "Credential Value",
+              variant: "overline",
+              color: "text.secondary",
+              sx: { fontSize: "0.75rem", letterSpacing: 1, fontWeight: 500 },
+              children: "Credential Key"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { fontWeight: 500, sx: { fontSize: "0.95rem" }, children: initialKey })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(FormControl, { fullWidth: true, sx: { mb: 2.5 }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel2, { children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(LabelIcon2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faKey, size: "sm" }) }),
+              "Credential Type"
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Select,
+              {
+                value: useCustomKey ? "_custom_" : key,
+                onChange: (e3) => {
+                  const selectedValue = e3.target.value;
+                  if (selectedValue === "_custom_") {
+                    setUseCustomKey(true);
+                    setKey("");
+                  } else {
+                    setUseCustomKey(false);
+                    setKey(selectedValue);
+                    setCustomKey("");
+                  }
+                },
+                displayEmpty: !key && !useCustomKey,
+                MenuProps: menuPropsSx(theme2),
+                input: /* @__PURE__ */ jsxRuntimeExports.jsx(StyledOutlinedInput, { notched: false, label: void 0 }),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: "", disabled: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("em", { children: "Select a credential type..." }) }),
+                  CREDENTIAL_MANIFEST.map((cred) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    MenuItem,
+                    {
+                      value: cred.key,
+                      disabled: isExistingKey(cred.key),
+                      children: [
+                        cred.name,
+                        " ",
+                        isExistingKey(cred.key) && "(Configured)"
+                      ]
+                    },
+                    cred.key
+                  )),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: "_custom_", children: "Custom Credential" })
+                ]
+              }
+            )
+          ] }),
+          useCustomKey && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TextField,
+            {
+              label: "Custom Credential Key",
               fullWidth: true,
-              type: "password",
-              value,
-              onChange: (e3) => setValue(e3.target.value),
-              onKeyDown: (e3) => {
-                if (e3.key === "Enter" && canSave) {
-                  handleSave();
-                }
-              },
+              value: customKey,
+              onChange: (e3) => setCustomKey(e3.target.value),
+              error: isExistingKey(customKey),
+              helperText: isExistingKey(customKey) ? "This credential already exists" : "",
               required: true,
-              autoFocus: isEditMode,
-              helperText: isEditMode ? `Enter the new value for ${initialKey}` : "Enter the credential value or API key."
+              autoFocus: true,
+              sx: textFieldInputSx(theme2)
             }
-          )
+          ),
+          selectedCredentialManifest && !useCustomKey && /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: DescriptionBoxSx(theme2), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", gutterBottom: true, children: selectedCredentialManifest.description }),
+            selectedCredentialManifest.url && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Link,
+              {
+                href: selectedCredentialManifest.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                variant: "body2",
+                sx: { display: "inline-flex", alignItems: "center" },
+                children: [
+                  "Get your ",
+                  selectedCredentialManifest.name,
+                  " key"
+                ]
+              }
+            )
+          ] })
         ] }),
-        " "
-      ]
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel2, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(LabelIcon2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faKey, size: "sm" }) }),
+          "Credential Value"
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TextField,
+          {
+            fullWidth: true,
+            type: "password",
+            value,
+            onChange: (e3) => setValue(e3.target.value),
+            onKeyDown: (e3) => {
+              if (e3.key === "Enter" && canSave) {
+                handleSave();
+              }
+            },
+            required: true,
+            autoFocus: isEditMode,
+            placeholder: "Enter the credential value or API key.",
+            helperText: isEditMode ? `Enter the new value for ${initialKey}` : "Enter the credential value or API key.",
+            sx: textFieldInputSx(theme2),
+            InputLabelProps: { shrink: false }
+          }
+        )
+      ] })
     }
   );
 };
@@ -210028,6 +210438,10 @@ const StyledTextField = styled$1(TextField)(({ theme: theme2 }) => ({
     fontSize: "0.875rem",
     // Consistent font size
     lineHeight: 1.5,
+    whiteSpace: "pre-wrap",
+    // Ensure text wraps within the input
+    wordBreak: "break-word",
+    // Break long words to prevent overflow
     // Shadcn-like scrollbar
     "&::-webkit-scrollbar": {
       width: "8px",
@@ -211375,7 +211789,7 @@ const SettingsPage = () => {
                     {
                       value: config2.values.conversation_length,
                       label: "Maximum Conversation History",
-                      description: "Number of messages to keep in conversation history for context. More messages will make the agents have longer memory but more expensive to run.",
+                      description: "Number of messages to keep in conversation history for context. More messages will make the agents have longer memory but more expensive to run.  Recommended: 100",
                       min: 10,
                       max: 200,
                       step: 10,
@@ -211390,7 +211804,7 @@ const SettingsPage = () => {
                     {
                       value: config2.values.detail_length,
                       label: "Detail View Length",
-                      description: "Maximum number of messages to show in the detailed conversation view. Messages beyond this limit will be summarized. Shortening this will decrease costs but some important details could get lost from earlier messages.",
+                      description: "Maximum number of messages to show in the detailed conversation view. Messages beyond this limit will be summarized. Shortening this will decrease costs but some important details could get lost from earlier messages.  Recommended: 20",
                       min: 10,
                       max: 100,
                       step: 5,
@@ -211405,7 +211819,7 @@ const SettingsPage = () => {
                     {
                       value: config2.values.max_learnings_history,
                       label: "Maximum Learnings History",
-                      description: "Number of learning items to retain for context and personalization. More items will make the agents acquire a longer history of knowledge from your conversations but more expensive to run.",
+                      description: "Number of learning items to retain for context and personalization. More items will make the agents acquire a longer history of knowledge from your conversations but more expensive to run.  Recommended: 50",
                       min: 10,
                       max: 100,
                       step: 10,