local-operator-ui 0.5.1 → 0.5.3

package/out/renderer/assets/{index-CzJMsYKD.js → index-DIWhONeg.js}

@@ -1,4 +1,4 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-B87fKloA.js","./fonts-ChEL5asK.js","./fonts-B9KBGB-g.css","./index-CfuGYyUa.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-PjN-o7b5.js","./fonts-ChEL5asK.js","./fonts-B9KBGB-g.css","./index-Bi6Xp3wq.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 faEllipsisVertical, a7 as faComment, a8 as faGear, a9 as faFileExport, aa as faBroom, ab as faTrash, ac as DEFAULT_THEME, ad as faChevronLeft, ae as faChevronRight, af as faRobot, ag as faCheck, ah as faTimes, ai as faEraser, aj as faPen, ak as faFileImport, al as faUpload, am as faPlus, an as faSearch, ao as requireReact, ap as LinearProgress, aq as faComments, ar as faInfoCircle, as as faServer, at as faStar, au as faTag, av as faIdCard, aw as faCalendarAlt, ax as faCodeBranch, ay as faShieldAlt, az as faArrowLeft, aA as faClock, aB as faHome, aC as faDownload, aD as faFileAlt, aE as faDesktop, aF as faImage, aG as faMusic, aH as faVideo, aI as faLaptop, aJ as faUsers, aK as faDatabase, aL as faBoxOpen, aM as faBook, aN as faHdd, aO as faBox, aP as faArchive, aQ as faNetworkWired, aR as faFolder, aS as faFolderOpen, aT as faFolderTree, aU as faChevronDown, aV as faTools, aW as _extends$u, aX as faSliders, aY as faArrowDown, aZ as faPaperclip, a_ as faStop, a$ as faPaperPlane, b0 as faChevronUp, b1 as faQuestion, b2 as faFile, b3 as faExclamationCircle, b4 as faLightbulb, b5 as faCode, b6 as faCommentDots, b7 as faEdit, b8 as faPencilAlt, b9 as faUser, ba as faCopy, bb as isDevelopmentMode, bc as faCommentSlash, bd as faArrowRight, be as faMagicWandSparkles, bf as faBrain, bg as faWandMagicSparkles, bh as faExternalLinkAlt, bi as faKey, bj as radientTheme, bk as faGlobe, bl as commonjsGlobal, bm as PropTypes, bn as faLock, bo as faSignOut, bp as faAdjust, bq as faSave, br as themes, 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 faEnvelope, bB as faHistory, bC as faListAlt, bD as faCreditCard, bE as faPlusCircle, bF as faChartLine, bG as faShield, bH as library$1, bI as icons$1, bJ as CssBaseline, bK as ThemeProvider$1, bL as getTheme, bM as ReactDOM$1, bN as ErrorBoundary } from "./fonts-ChEL5asK.js";
 const styled = createStyled();
 function getThemeProps(params) {
@@ -27066,15 +27066,23 @@ const AgentsApi = {
    * @param page - Page number (default: 1)
    * @param perPage - Number of agents per page (default: 10)
    * @param name - Optional name query to search agents by name
+   * @param sort - Optional field to sort by (e.g., 'name', 'created_date', 'last_message_datetime')
+   * @param direction - Optional sort direction ('asc' or 'desc')
    * @returns Promise resolving to the agents list response
    */
-  async listAgents(baseUrl, page = 1, perPage = 10, name2) {
+  async listAgents(baseUrl, page = 1, perPage = 10, name2, sort, direction) {
     const url = new URL(`${baseUrl}/v1/agents`);
     url.searchParams.append("page", page.toString());
     url.searchParams.append("per_page", perPage.toString());
     if (name2) {
       url.searchParams.append("name", name2);
     }
+    if (sort) {
+      url.searchParams.append("sort", sort);
+    }
+    if (direction) {
+      url.searchParams.append("direction", direction);
+    }
     const response = await fetch(url.toString(), {
       method: "GET",
       headers: {
@@ -33132,7 +33140,7 @@ const useConnectivityGate = () => {
   };
 };
 const agentsQueryKey = ["agents"];
-const useAgents = (page = 1, perPage = 50, refetchInterval = 0, name2) => {
+const useAgents = (page = 1, perPage = 50, refetchInterval = 0, name2, sort, direction) => {
   const { shouldEnableQuery, getConnectivityError } = useConnectivityGate();
   const connectivityError = getConnectivityError();
   reactExports.useEffect(() => {
@@ -33143,15 +33151,21 @@ const useAgents = (page = 1, perPage = 50, refetchInterval = 0, name2) => {
   return useQuery({
     // Only enable the query if server is online (bypass internet check)
     enabled: shouldEnableQuery({ bypassInternetCheck: true }),
-    queryKey: [...agentsQueryKey, page, perPage, name2],
+    queryKey: [...agentsQueryKey, page, perPage, name2, sort, direction],
     queryFn: async () => {
       try {
         const client = createLocalOperatorClient(apiConfig.baseUrl);
-        const response = await client.agents.listAgents(page, perPage, name2);
-        if (response.status >= 400) {
+        const response = await client.agents.listAgents(
+          page,
+          perPage,
+          name2,
+          sort,
+          direction
+        );
+        if (response.status >= 400 || !response.result) {
           throw new Error(response.message || "Failed to fetch agents");
         }
-        return response.result?.agents || [];
+        return response.result;
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : "An unknown error occurred while fetching agents";
         showErrorToast(errorMessage);
@@ -34065,7 +34079,9 @@ const DividerFlexItem = styled$1(Box)({
   flexShrink: 0,
   zIndex: 10
 });
-const DividerHoverArea = styled$1(Box)(({ $active, $side }) => ({
+const DividerHoverArea = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "$active" && prop !== "$side"
+})(({ $active, $side }) => ({
   position: "absolute",
   top: 0,
   [$side]: 0,
@@ -34078,7 +34094,9 @@ const DividerHoverArea = styled$1(Box)(({ $active, $side }) => ({
   zIndex: 11,
   transition: "width 0.2s cubic-bezier(0.4,0,0.2,1)"
 }));
-const DividerLine = styled$1(Box)(
+const DividerLine = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "$active" && prop !== "$side"
+})(
   ({ theme: theme2, $side, $active }) => ({
     position: "absolute",
     top: 0,
@@ -34093,7 +34111,9 @@ const DividerLine = styled$1(Box)(
     transition: "width 0.2s cubic-bezier(0.4,0,0.2,1), background 0.2s, opacity 0.2s"
   })
 );
-const DragHandle = styled$1(Box)(({ theme: theme2, $active }) => ({
+const DragHandle = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "$active"
+})(({ theme: theme2, $active }) => ({
   position: "absolute",
   left: "50%",
   top: "50%",
@@ -34265,37 +34285,80 @@ const useDeferredUpdatesStore = create$1()(
 const CheckForUpdatesButton = () => {
   const [checking, setChecking] = reactExports.useState(false);
   const [snackbarOpen, setSnackbarOpen] = reactExports.useState(false);
+  const [snackbarMessage, setSnackbarMessage] = reactExports.useState(null);
+  const [snackbarSeverity, setSnackbarSeverity] = reactExports.useState("info");
   const [manualUpdateInfo, setManualUpdateInfo] = reactExports.useState(null);
+  const manualCheckRef = reactExports.useRef(false);
   const { clearDeferredUpdate } = useDeferredUpdatesStore();
   reactExports.useEffect(() => {
-    const removeManualUpdateListener = window.api.updater.onUpdateError(
+    const removeUpdateErrorListener = window.api.updater.onUpdateError(
       (message2) => {
+        if (!manualCheckRef.current) return;
+        const suppressedPatterns = [
+          "ENOENT: no such file or directory, open",
+          // e.g. missing update yml
+          "Could not get code signature for running application",
+          // macOS spurious
+          "Cannot find latest.yml"
+          // electron-updater
+        ];
+        const isSuppressed = suppressedPatterns.some(
+          (pat) => message2.includes(pat)
+        );
         if (message2.includes("manually")) {
           setManualUpdateInfo({
             message: "Please update the local-operator package manually using pip.",
             command: "pip install --upgrade local-operator"
           });
+          setSnackbarSeverity("warning");
+          setSnackbarOpen(true);
+        } else if (!isSuppressed) {
+          setSnackbarMessage(message2);
+          setSnackbarSeverity("error");
           setSnackbarOpen(true);
         }
       }
     );
+    const removeUpdateNotAvailableListener = window.api.updater.onUpdateNotAvailable(() => {
+      if (!manualCheckRef.current) return;
+      setSnackbarMessage("No updates available. You are up to date!");
+      setSnackbarSeverity("success");
+      setSnackbarOpen(true);
+    });
+    const removeBackendUpdateNotAvailableListener = window.api.updater.onBackendUpdateNotAvailable(() => {
+      if (!manualCheckRef.current) return;
+      setSnackbarMessage("No server updates available. You are up to date!");
+      setSnackbarSeverity("success");
+      setSnackbarOpen(true);
+    });
     return () => {
-      removeManualUpdateListener();
+      removeUpdateErrorListener();
+      removeUpdateNotAvailableListener();
+      removeBackendUpdateNotAvailableListener();
     };
   }, []);
   const checkForUpdates = async () => {
     try {
       setChecking(true);
+      manualCheckRef.current = true;
       clearDeferredUpdate();
       await window.api.updater.checkForAllUpdates();
     } catch (error) {
-      console.error("Error checking for updates:", error);
+      setSnackbarMessage(
+        `Error checking for updates: ${error instanceof Error ? error.message : String(error)}`
+      );
+      setSnackbarSeverity("error");
+      setSnackbarOpen(true);
     } finally {
       setChecking(false);
+      setTimeout(() => {
+        manualCheckRef.current = false;
+      }, 2e3);
     }
   };
   const handleSnackbarClose = () => {
     setSnackbarOpen(false);
+    setSnackbarMessage(null);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -34341,6 +34404,24 @@ const CheckForUpdatesButton = () => {
           }
         )
       }
+    ),
+    snackbarMessage && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Snackbar,
+      {
+        open: snackbarOpen,
+        autoHideDuration: 6e3,
+        onClose: handleSnackbarClose,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Alert,
+          {
+            onClose: handleSnackbarClose,
+            severity: snackbarSeverity,
+            sx: { width: "100%" },
+            children: snackbarMessage
+          }
+        )
+      }
     )
   ] });
 };
@@ -35339,7 +35420,7 @@ const useModels = ({ autoFetch = true } = {}) => {
       fetchModels(baseUrl);
     }
   }, [hasConnectivityIssue, autoFetch, isInitialized, baseUrl, fetchModels]);
-  const refreshModels = async () => {
+  const refreshModels = reactExports.useCallback(async () => {
     if (shouldEnableQuery({ bypassInternetCheck: true })) {
       await fetchModels(baseUrl, true);
     } else {
@@ -35348,7 +35429,7 @@ const useModels = ({ autoFetch = true } = {}) => {
         throw error2;
       }
     }
-  };
+  }, [baseUrl, fetchModels, shouldEnableQuery, getConnectivityError]);
   const getModelById = (modelId) => {
     return models.find((model) => model.id === modelId);
   };
@@ -35684,7 +35765,9 @@ const useMessageInput = ({
     setHistoryIndex(null);
     draftMessageRef.current = "";
     if (scrollToBottom) {
-      scrollToBottom();
+      setTimeout(() => {
+        scrollToBottom();
+      }, 150);
     }
   }, [inputValue, onSubmit, scrollToBottom]);
   const getCursorPosition = reactExports.useCallback(() => {
@@ -35832,14 +35915,14 @@ function jwtDecode(token2, options) {
     throw new InvalidTokenError(`Invalid token specified: invalid json for part #${pos + 1} (${e3.message})`);
   }
 }
-function joinUrl(baseUrl, path2) {
+function joinUrl$1(baseUrl, path2) {
   const normalizedBaseUrl = baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
   const normalizedPath = path2.startsWith("/") ? path2.slice(1) : path2;
   return normalizedBaseUrl + normalizedPath;
 }
 async function exchangeToken(baseUrl, provider, tokens2, clientId) {
   const endpoint = provider === "google" ? "/v1/auth/google" : "/v1/auth/microsoft";
-  const url = joinUrl(baseUrl, endpoint);
+  const url = joinUrl$1(baseUrl, endpoint);
   const body2 = {
     id_token: tokens2.idToken,
     access_token: tokens2.accessToken,
@@ -35860,7 +35943,7 @@ async function exchangeToken(baseUrl, provider, tokens2, clientId) {
   return response.json();
 }
 async function createApplication(baseUrl, tenantId, accessToken, applicationData) {
-  const url = joinUrl(baseUrl, `/v1/tenants/${tenantId}/applications`);
+  const url = joinUrl$1(baseUrl, `/v1/tenants/${tenantId}/applications`);
   const response = await fetch(url, {
     method: "POST",
     headers: {
@@ -35883,7 +35966,7 @@ async function exchangeMicrosoftToken(baseUrl, tokens2, clientId) {
   return exchangeToken(baseUrl, "microsoft", tokens2, clientId);
 }
 async function getUserInfo(baseUrl, accessToken) {
-  const url = joinUrl(baseUrl, "/v1/me");
+  const url = joinUrl$1(baseUrl, "/v1/me");
   const response = await fetch(url, {
     method: "GET",
     headers: {
@@ -35898,7 +35981,7 @@ async function getUserInfo(baseUrl, accessToken) {
   return response.json();
 }
 async function provisionAccount(baseUrl, accessToken) {
-  const url = joinUrl(baseUrl, "/v1/provision");
+  const url = joinUrl$1(baseUrl, "/v1/provision");
   const response = await fetch(url, {
     method: "POST",
     headers: {
@@ -35915,7 +35998,7 @@ async function provisionAccount(baseUrl, accessToken) {
   return response.json();
 }
 async function refreshToken(baseUrl, refreshToken2, clientId) {
-  const url = joinUrl(baseUrl, "/v1/auth/token");
+  const url = joinUrl$1(baseUrl, "/v1/auth/token");
   const body2 = {
     refresh_token: refreshToken2,
     grant_type: "refresh_token",
@@ -35936,7 +36019,7 @@ async function refreshToken(baseUrl, refreshToken2, clientId) {
   return response.json();
 }
 async function revokeToken(baseUrl, token2, tokenType) {
-  const url = joinUrl(baseUrl, "/v1/auth/revoke");
+  const url = joinUrl$1(baseUrl, "/v1/auth/revoke");
   const response = await fetch(url, {
     method: "POST",
     headers: {
@@ -35993,6 +36076,46 @@ const BillingApiImpl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defi
   __proto__: null,
   getCreditBalance
 }, Symbol.toStringTag, { value: "Module" }));
+function joinUrl(baseUrl, path2) {
+  const normalizedBaseUrl = baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`;
+  const normalizedPath = path2.startsWith("/") ? path2.slice(1) : path2;
+  return normalizedBaseUrl + normalizedPath;
+}
+const fetchPrices = async (baseUrl) => {
+  const url = joinUrl(baseUrl, "/v1/prices");
+  try {
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        // No Authorization needed for this public endpoint
+        "Content-Type": "application/json"
+      },
+      credentials: "same-origin"
+      // Match credentials policy from auth-api
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error(
+        `Error fetching Radient prices: ${response.status} ${errorText}`
+      );
+      throw new Error(
+        errorText || `Failed to fetch Radient prices: ${response.status}`
+      );
+    }
+    const apiResponse = await response.json();
+    return apiResponse.result;
+  } catch (error) {
+    console.error("Error during fetchPrices execution:", error);
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error("An unknown error occurred while fetching prices");
+  }
+};
+const PricesApiImpl = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  fetchPrices
+}, Symbol.toStringTag, { value: "Module" }));
 const getUsageRollup = async (baseUrl, tenantId, accessToken, params) => {
   const endpointUrl = `${baseUrl}/v1/tenants/${tenantId}/usage/rollup`;
   const queryParams = new URLSearchParams();
@@ -36060,6 +36183,12 @@ class RadientClient {
   get usage() {
     return this.bindBaseUrlToApi(UsageApiImpl);
   }
+  /**
+   * Get the Prices API client with methods bound to the base URL
+   */
+  get prices() {
+    return this.bindBaseUrlToApi(PricesApiImpl);
+  }
   /**
    * Bind the base URL to all methods of an API module
    *
@@ -36197,34 +36326,57 @@ async function updateAccessToken(accessToken, expiresIn, newRefreshToken) {
   const expiry = Date.now() + expiresIn * 1e3;
   await window.api.session.storeSession(accessToken, expiry, refreshToken2);
 }
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      // Default stale time of 5 minutes
-      staleTime: 5 * 60 * 1e3,
-      // Default cache time of 10 minutes
-      gcTime: 10 * 60 * 1e3,
-      // Default retry configuration
-      retry: 1,
-      // Default refetch configuration
-      refetchOnWindowFocus: true,
-      refetchOnMount: true,
-      // Don't wait for reconnect to refetch - we handle offline status separately
-      refetchOnReconnect: false,
-      // Continue to run queries even when offline
-      networkMode: "always"
-    },
-    mutations: {
-      // Retry mutations once by default
-      retry: 1,
-      // Continue to run mutations even when offline
-      networkMode: "always"
-    }
-  }
-});
-const resetQueryCache = () => {
-  queryClient.clear();
+const DEFAULT_PROFILE = {
+  name: "User",
+  email: "user@example.com"
 };
+const useUserStore = create$1()(
+  persist(
+    (set) => ({
+      profile: DEFAULT_PROFILE,
+      isSigningOut: false,
+      // Default value
+      updateName: (name2) => {
+        set((state) => ({
+          profile: {
+            ...state.profile,
+            name: name2
+          }
+        }));
+      },
+      updateEmail: (email2) => {
+        set((state) => ({
+          profile: {
+            ...state.profile,
+            email: email2
+          }
+        }));
+      },
+      updateProfile: (profile) => {
+        set((state) => ({
+          profile: {
+            ...state.profile,
+            ...profile
+          }
+        }));
+      },
+      setIsSigningOut: (status) => {
+        set({ isSigningOut: status });
+      },
+      clearProfile: () => {
+        set({
+          profile: {
+            name: "",
+            email: ""
+          }
+        });
+      }
+    }),
+    {
+      name: "user-profile-storage"
+    }
+  )
+);
 const radientUserKeys = {
   all: ["radient-user"],
   user: () => [...radientUserKeys.all, "user"],
@@ -36233,6 +36385,7 @@ const radientUserKeys = {
 };
 const useRadientUserQuery = () => {
   const queryClient2 = useQueryClient();
+  const { setIsSigningOut } = useUserStore();
   const radientClient2 = createRadientClient(
     apiConfig.radientBaseUrl,
     apiConfig.radientClientId
@@ -36353,6 +36506,9 @@ const useRadientUserQuery = () => {
   const hasLocalSession = !!sessionQuery.data && !sessionQuery.isLoading;
   const isAuthenticated = !!userQuery.data && !userQuery.isLoading;
   const signOutMutation = useMutation({
+    onMutate: () => {
+      setIsSigningOut(true);
+    },
     mutationFn: async () => {
       const session = sessionQuery.data;
       if (session?.refreshToken) {
@@ -36365,16 +36521,20 @@ const useRadientUserQuery = () => {
           console.error("Failed to revoke refresh token:", error);
         }
       }
-      clearSession();
+      await clearSession();
       return true;
     },
-    onSuccess: () => {
-      resetQueryCache();
+    onSuccess: async () => {
+      await clearSession();
+      queryClient2.removeQueries({ queryKey: radientUserKeys.all });
+      refreshTokenMutation.reset();
       showSuccessToast("Successfully signed out");
+      setIsSigningOut(false);
     },
     onError: (error) => {
       const errorMessage = error instanceof Error ? error.message : String(error);
       showErrorToast(`Failed to sign out: ${errorMessage}`);
+      setIsSigningOut(false);
     }
   });
   const refreshUserMutation = useMutation({
@@ -36455,7 +36615,7 @@ const radientClient = createRadientClient(
   apiConfig.radientClientId
 );
 const useOidcAuth = (options) => {
-  const { onSuccess } = options || {};
+  const { onSuccess, onAfterCredentialUpdate } = options || {};
   const [loading, setLoading] = reactExports.useState(true);
   const [error, setError] = reactExports.useState(null);
   const [status, setStatus] = reactExports.useState({
@@ -36522,6 +36682,13 @@ const useOidcAuth = (options) => {
             key: "RADIENT_API_KEY",
             value: appResponse.result.api_key
           });
+          if (onAfterCredentialUpdate) {
+            try {
+              onAfterCredentialUpdate();
+            } catch (err) {
+              console.error("Error in onAfterCredentialUpdate callback:", err);
+            }
+          }
           try {
             await updateConfig({
               hosting: "radient",
@@ -36550,9 +36717,59 @@ const useOidcAuth = (options) => {
         showErrorToast(msg || "Authentication failed");
       }
     },
-    [queryClient2, updateConfig, onSuccess]
-    // Added onSuccess dependency
+    [queryClient2, updateConfig, onSuccess, onAfterCredentialUpdate]
   );
+  const signInWithGoogle = reactExports.useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await window.api.oauth.login("google");
+      if (!result.success) {
+        throw new Error(result.error || "Failed to initiate Google login");
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      console.error("Error initiating Google sign-in:", msg);
+      setError(msg);
+      showErrorToast(msg);
+      setLoading(false);
+    }
+  }, []);
+  const signInWithMicrosoft = reactExports.useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await window.api.oauth.login("microsoft");
+      if (!result.success) {
+        throw new Error(result.error || "Failed to initiate Microsoft login");
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      console.error("Error initiating Microsoft sign-in:", msg);
+      setError(msg);
+      showErrorToast(msg);
+      setLoading(false);
+    }
+  }, []);
+  const logout = reactExports.useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await window.api.oauth.logout();
+      if (!result.success) {
+        throw new Error(result.error || "Logout failed");
+      }
+      await window.api.session.clearSession();
+      queryClient2.invalidateQueries({ queryKey: radientUserKeys.all });
+      showSuccessToast("Successfully signed out.");
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err);
+      console.error("Error during logout:", msg);
+      setError(msg);
+      showErrorToast(msg);
+      setLoading(false);
+    }
+  }, [queryClient2]);
   reactExports.useEffect(() => {
     const cleanup = window.api.oauth.onStatusUpdate((newStatus) => {
       setStatus(newStatus);
@@ -36611,57 +36828,6 @@ const useOidcAuth = (options) => {
     };
     checkInitialStatus();
   }, []);
-  const signInWithGoogle = reactExports.useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await window.api.oauth.login("google");
-      if (!result.success) {
-        throw new Error(result.error || "Failed to initiate Google login");
-      }
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : String(err);
-      console.error("Error initiating Google sign-in:", msg);
-      setError(msg);
-      showErrorToast(msg);
-      setLoading(false);
-    }
-  }, []);
-  const signInWithMicrosoft = reactExports.useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await window.api.oauth.login("microsoft");
-      if (!result.success) {
-        throw new Error(result.error || "Failed to initiate Microsoft login");
-      }
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : String(err);
-      console.error("Error initiating Microsoft sign-in:", msg);
-      setError(msg);
-      showErrorToast(msg);
-      setLoading(false);
-    }
-  }, []);
-  const logout = reactExports.useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await window.api.oauth.logout();
-      if (!result.success) {
-        throw new Error(result.error || "Logout failed");
-      }
-      await window.api.session.clearSession();
-      queryClient2.invalidateQueries({ queryKey: radientUserKeys.all });
-      showSuccessToast("Successfully signed out.");
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : String(err);
-      console.error("Error during logout:", msg);
-      setError(msg);
-      showErrorToast(msg);
-      setLoading(false);
-    }
-  }, [queryClient2]);
   return {
     signInWithGoogle,
     signInWithMicrosoft,
@@ -36694,56 +36860,15 @@ const usePaginationParams = () => {
     isView: (view) => location2.pathname.startsWith(`/${view}`)
   };
 };
-const DEFAULT_PROFILE = {
-  name: "User",
-  email: "user@example.com"
-};
-const useUserStore = create$1()(
-  persist(
-    (set) => ({
-      profile: DEFAULT_PROFILE,
-      updateName: (name2) => {
-        set((state) => ({
-          profile: {
-            ...state.profile,
-            name: name2
-          }
-        }));
-      },
-      updateEmail: (email2) => {
-        set((state) => ({
-          profile: {
-            ...state.profile,
-            email: email2
-          }
-        }));
-      },
-      updateProfile: (profile) => {
-        set((state) => ({
-          profile: {
-            ...state.profile,
-            ...profile
-          }
-        }));
-      }
-    }),
-    {
-      name: "user-profile-storage"
-    }
-  )
-);
 const useRadientAuth = () => {
   const userStore = useUserStore();
   const {
     user: radientUser,
     session,
     isLoading,
-    // Combined loading state from useRadientUserQuery
     error,
     isAuthenticated,
-    // Backend validated flag from useRadientUserQuery
     hasLocalSession,
-    // Local token exists flag from useRadientUserQuery
     signOut,
     refreshUser,
     refreshToken: refreshToken2
@@ -36757,7 +36882,7 @@ const useRadientAuth = () => {
     authStatus = "unauthenticated";
   }
   reactExports.useEffect(() => {
-    if (!radientUser?.account) {
+    if (!isAuthenticated || !radientUser?.account) {
       return;
     }
     const { account } = radientUser;
@@ -36771,31 +36896,23 @@ const useRadientAuth = () => {
         email: account.email || currentEmail
       });
     }
-  }, [radientUser, userStore]);
+  }, [isAuthenticated, radientUser, userStore]);
   return {
     // Authentication state
     authStatus,
-    // Use the new combined status
     isAuthenticated,
-    // Keep backend-validated flag for detailed checks if needed
     hasLocalSession,
-    // Expose this flag
     isLoading,
-    // Keep the combined loading flag
     error,
-    // User information (from Radient or fallback to user store)
-    user: {
-      name: radientUser?.account?.name || userStore.profile.name,
-      email: radientUser?.account?.email || userStore.profile.email,
-      // Include the full Radient user object if available
+    // User information: only return if authenticated, otherwise null
+    user: isAuthenticated && radientUser?.account ? {
+      name: radientUser.account.name,
+      email: radientUser.account.email,
       radientUser
-      // Added type assertion for clarity
-    },
+    } : null,
     // Session token for API calls
     sessionToken: session?.accessToken,
-    // Expose the full session for advanced use cases
     session,
-    // Token refresh function
     refreshToken: refreshToken2,
     // Actions
     refreshUser,
@@ -37354,7 +37471,7 @@ const useStreamingMessage = ({
               };
               doRefetch();
             }
-          }, 100);
+          }, 500);
         }
       } else {
         updateStreamingMessage(messageId, messageData);
@@ -37583,24 +37700,12 @@ const useStreamingMessage = ({
       if (onComplete) {
         onComplete(message2);
       }
-      if (refetchOnComplete) {
-        const timer = setTimeout(() => {
-          if (mountedRef.current) {
-            refetchMessage().catch((error2) => {
-              const errorMessage = error2 instanceof Error ? error2.message : String(error2);
-              console.error(`Error auto-refetching message: ${errorMessage}`);
-            });
-          }
-        }, 500);
-        return () => clearTimeout(timer);
-      }
       if (!keepAlive) {
         safeDisconnect();
       }
     } else if (!isComplete) {
       isCompletePrevRef.current = false;
     }
-    return void 0;
   }, [
     isComplete,
     message2,
@@ -37608,9 +37713,7 @@ const useStreamingMessage = ({
     keepAlive,
     safeDisconnect,
     messageId,
-    completeStreamingMessage,
-    refetchMessage,
-    refetchOnComplete
+    completeStreamingMessage
   ]);
   return {
     message: message2,
@@ -37948,20 +38051,18 @@ const FieldContainer$3 = styled$1(Box)({
   marginBottom: 16
   // Reduced margin
 });
-const FieldLabel$4 = styled$1(Typography)(({ theme: theme2 }) => ({
-  marginBottom: 6,
-  // Reduced margin
+const FieldLabel$4 = styled$1("label")(({ theme: theme2 }) => ({
   display: "flex",
   alignItems: "center",
+  marginBottom: 6,
   color: theme2.palette.text.secondary,
   fontWeight: 500,
-  // Slightly less bold
-  fontSize: "0.875rem"
-  // Small text size
+  fontSize: "0.875rem",
+  fontFamily: theme2.typography.fontFamily,
+  lineHeight: theme2.typography.body2.lineHeight
 }));
 const LabelIcon$4 = styled$1(Box)({
   marginRight: 8,
-  // Reduced margin
   opacity: 0.9,
   display: "flex",
   alignItems: "center"
@@ -37970,233 +38071,156 @@ const StyledTextField$4 = styled$1(TextField)(
   ({ theme: theme2, multiline }) => ({
     "& .MuiOutlinedInput-root": {
       borderRadius: 6,
-      // Slightly less rounded
       backgroundColor: theme2.palette.background.paper,
-      // Use paper background
       border: `1px solid ${theme2.palette.divider}`,
-      // Use divider color for border
       padding: 0,
-      // Remove root padding
       minHeight: multiline ? "auto" : "36px",
-      // Target height
       height: multiline ? "auto" : "36px",
-      // Explicit height
       alignItems: multiline ? "flex-start" : "center",
       transition: "border-color 0.2s ease, box-shadow 0.2s ease",
       "&:hover": {
         borderColor: theme2.palette.text.secondary,
-        // Darker border on hover
         backgroundColor: theme2.palette.background.paper
-        // Keep background consistent
       },
       "&.Mui-focused": {
         backgroundColor: theme2.palette.background.paper,
-        // Keep background consistent
         borderColor: theme2.palette.primary.main,
-        // Primary border color on focus
         boxShadow: `0 0 0 2px ${theme2.palette.primary.main}33`
-        // Subtle focus ring like shadcn
       },
-      // Remove default outline
       "& .MuiOutlinedInput-notchedOutline": {
         border: "none"
       }
     },
     "& .MuiInputBase-input": {
       padding: multiline ? "8px 12px" : "4px 12px",
-      // Target inner padding (vertical 4px)
       fontSize: "0.875rem",
-      // Small text size
       lineHeight: 1.5,
-      // Adjusted line height
       fontFamily: "inherit",
       height: multiline ? "auto" : "calc(36px - 8px)",
-      // Adjust height based on padding
-      // Ensure text doesn't overflow container
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: multiline ? "pre-wrap" : "nowrap",
       wordBreak: "break-word",
-      // Keep break-word for multiline
       alignSelf: multiline ? "flex-start" : "center"
-      // Center single line text vertically
     },
-    // Style placeholder
     "& .MuiInputBase-input::placeholder": {
       color: theme2.palette.text.disabled,
       opacity: 1
-      // Ensure placeholder is visible
     }
   })
 );
 const ActionButtonsContainer = styled$1(Box)({
   position: "absolute",
   top: "50%",
-  // Center vertically
   transform: "translateY(-50%)",
-  // Adjust vertical centering
   right: 6,
-  // Position from right
   display: "flex",
   alignItems: "center",
-  // Align items vertically
   gap: 4,
   zIndex: 10
 });
 const ActionIconButton = styled$1(IconButton)(({ theme: theme2 }) => ({
   padding: 4,
-  // Smaller padding
   borderRadius: 4,
-  // Slightly rounded corners
   height: 24,
-  // Smaller height
   width: 24,
-  // Smaller width
   color: theme2.palette.text.secondary,
-  // Default color
   "&:hover": {
     backgroundColor: theme2.palette.action.hover,
-    // Subtle hover background
     color: theme2.palette.text.primary
   }
 }));
 const SaveButton = styled$1(ActionIconButton)(({ theme: theme2 }) => ({
   color: theme2.palette.success.main,
-  // Green color for save
   "&:hover": {
     backgroundColor: `${theme2.palette.success.main}1A`,
-    // Lighter green background on hover
     color: theme2.palette.success.dark
   }
 }));
 const CancelButton = styled$1(ActionIconButton)(({ theme: theme2 }) => ({
   color: theme2.palette.error.main,
-  // Red color for cancel/close
   "&:hover": {
     backgroundColor: `${theme2.palette.error.main}1A`,
-    // Lighter red background on hover
     color: theme2.palette.error.dark
   }
 }));
 const ClearButton = styled$1(Button)(({ theme: theme2 }) => ({
   backgroundColor: theme2.palette.action.selected,
-  // Use a subtle background
   color: theme2.palette.error.main,
-  // Destructive text color
   minWidth: "auto",
   height: 24,
-  // Match icon button height
   padding: "0 8px",
-  // Horizontal padding
   fontSize: "0.75rem",
-  // Smaller text
   borderRadius: 4,
   textTransform: "none",
-  // No uppercase
   boxShadow: "none",
   border: `1px solid ${theme2.palette.action.disabledBackground}`,
-  // Subtle border
   marginLeft: 4,
-  // Add some space from icons
   marginRight: 16,
   "&:hover": {
     backgroundColor: theme2.palette.action.hover,
-    // Consistent hover
     borderColor: theme2.palette.error.light,
     boxShadow: "none"
   },
-  // Adjust icon size and margin
   "& .MuiButton-startIcon": {
     marginRight: 4,
     marginLeft: -2,
     "& > *:nth-of-type(1)": {
-      // Target the FontAwesomeIcon
       fontSize: "0.8rem"
     }
   }
 }));
-const DisplayContainer = styled$1(Button, {
+const DisplayContainer = styled$1("button", {
   shouldForwardProp: (prop) => prop !== "multiline"
-  // Explicitly type the props passed to the styled Button
 })(({ theme: theme2, multiline }) => ({
   padding: multiline ? "8px 12px" : "4px 12px",
-  // Match input padding
   borderRadius: 6,
-  // Match input border radius
   backgroundColor: theme2.palette.background.paper,
-  // Match input background
   border: `1px solid ${theme2.palette.divider}`,
-  // Match input border
   position: "relative",
   minHeight: multiline ? "auto" : "36px",
-  // Match input height
   height: multiline ? "auto" : "36px",
-  // Explicit height
   display: "flex",
   alignItems: multiline ? "flex-start" : "center",
-  // Align text
   transition: "border-color 0.2s ease, background-color 0.2s ease",
   cursor: "pointer",
   boxSizing: "border-box",
-  // Ensure padding/border are included in height
-  // Button specific resets/styles
   width: "100%",
-  // Ensure it takes full width like the input
   textAlign: "left",
-  // Align text to the left
   textTransform: "none",
-  // Reset button text transform
   justifyContent: "flex-start",
-  // Align content (icon, text) to the start
   color: theme2.palette.text.primary,
-  // Ensure text color matches input text
   fontWeight: "normal",
-  // Reset button font weight
   fontFamily: "inherit",
-  // Use default font
-  "&:hover": {
+  outline: "none",
+  "&:hover, &:focus": {
     borderColor: theme2.palette.text.secondary,
-    // Match input hover border
-    backgroundColor: theme2.palette.action.hover,
-    // Subtle background change on hover
-    "& .edit-button": {
-      opacity: 1
-      // Show edit button on hover
-    }
+    backgroundColor: theme2.palette.action.hover
+  },
+  "&:focus-visible": {
+    outline: `2px solid ${theme2.palette.primary.main}`
   }
 }));
 const DisplayText = styled$1(Typography, {
   shouldForwardProp: (prop) => prop !== "multiline"
 })(({ multiline }) => ({
   fontSize: "0.875rem",
-  // Match input text size
   lineHeight: 1.5,
-  // Match input line height
   fontFamily: "inherit",
-  // Use standard font
   whiteSpace: multiline ? "pre-wrap" : "nowrap",
   wordBreak: "break-word",
   paddingRight: 30,
-  // Space for the edit button
   overflow: "hidden",
-  // Prevent overflow
   textOverflow: "ellipsis",
-  // Add ellipsis if text is too long
   flexGrow: 1,
-  // Allow text to take available space
   alignSelf: multiline ? "flex-start" : "center"
-  // Center single line text vertically
 }));
 const PlaceholderText = styled$1(Typography)(({ theme: theme2 }) => ({
   color: theme2.palette.text.disabled,
   fontStyle: "normal",
-  // Remove italic
   fontSize: "0.875rem",
-  // Match input text size
   lineHeight: 1.5,
-  // Match input line height
   paddingRight: 30,
-  // Space for the edit button
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
@@ -38205,28 +38229,18 @@ const PlaceholderText = styled$1(Typography)(({ theme: theme2 }) => ({
 const EditButton = styled$1(IconButton)(({ theme: theme2 }) => ({
   position: "absolute",
   top: "50%",
-  // Center vertically
   transform: "translateY(-50%)",
-  // Adjust vertical centering
   right: 6,
-  // Position from right
   color: theme2.palette.text.secondary,
-  // Use secondary text color
   opacity: 0,
-  // Hidden by default
   transition: "opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease",
   padding: 4,
-  // Match other icon buttons
   borderRadius: 4,
-  // Match other icon buttons
   height: 24,
-  // Match other icon buttons
   width: 24,
-  // Match other icon buttons
   marginLeft: 4,
   "&:hover": {
     backgroundColor: theme2.palette.action.hover,
-    // Subtle hover background
     color: theme2.palette.text.primary
   }
 }));
@@ -38409,62 +38423,64 @@ const EditableField = ({
           }
         )
       ] }) })
-    ] }) : (
-      // Using Box with role="button" is acceptable for MUI, but ensure accessibility attributes are correct
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { position: "relative", width: "100%" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
         DisplayContainer,
         {
+          type: "button",
           onClick: handleEdit,
           multiline,
           "aria-label": `Current value: ${displayValue || placeholder2}. Click to edit.`,
-          tabIndex: 0,
           onKeyDown: handleDisplayContainerKeyDown,
-          children: [
-            displayValue ? /* @__PURE__ */ jsxRuntimeExports.jsx(DisplayText, { multiline, children: displayValue }) : /* @__PURE__ */ jsxRuntimeExports.jsx(PlaceholderText, { children: placeholder2 }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              EditButton,
-              {
-                className: "edit-button",
-                size: "small",
-                onClick: (e3) => {
-                  e3.stopPropagation();
-                  handleEdit();
-                },
-                title: "Edit",
-                "aria-label": `Edit ${label}`,
-                tabIndex: -1,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPen, size: "xs" })
-              }
-            ),
-            showClearButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
-              ClearButton,
-              {
-                className: "edit-button",
-                sx: {
-                  position: "absolute",
-                  top: "50%",
-                  transform: "translateY(-50%)",
-                  // Position next to edit icon, adjust based on icon size/padding
-                  right: 30,
-                  opacity: 0,
-                  // Hidden by default
-                  transition: "opacity 0.2s ease",
-                  pointerEvents: "auto"
-                  // Ensure it's clickable when visible
-                },
-                size: "small",
-                onClick: clearField,
-                title: "Clear field",
-                "aria-label": `Clear ${label}`,
-                startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faEraser }),
-                tabIndex: -1,
-                children: "Clear"
-              }
-            )
-          ]
+          children: displayValue ? /* @__PURE__ */ jsxRuntimeExports.jsx(DisplayText, { multiline, children: displayValue }) : /* @__PURE__ */ jsxRuntimeExports.jsx(PlaceholderText, { children: placeholder2 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        EditButton,
+        {
+          className: "edit-button",
+          size: "small",
+          sx: {
+            position: "absolute",
+            top: "50%",
+            right: 6,
+            transform: "translateY(-50%)",
+            opacity: 0,
+            transition: "opacity 0.2s ease",
+            pointerEvents: "auto",
+            "&:hover, &:focus, button:focus + &": { opacity: 1 }
+          },
+          onClick: handleEdit,
+          title: "Edit",
+          "aria-label": `Edit ${label}`,
+          tabIndex: -1,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPen, size: "xs" })
+        }
+      ),
+      showClearButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ClearButton,
+        {
+          className: "edit-button",
+          sx: {
+            position: "absolute",
+            top: "50%",
+            right: 36,
+            transform: "translateY(-50%)",
+            opacity: 0,
+            transition: "opacity 0.2s ease",
+            pointerEvents: "auto",
+            "&:hover, &:focus, button:focus + &": { opacity: 1 }
+          },
+          size: "small",
+          onClick: clearField,
+          title: "Clear field",
+          "aria-label": `Clear ${label}`,
+          startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faEraser }),
+          tabIndex: -1,
+          children: "Clear"
         }
       )
-    )
+    ] })
   ] });
 };
 const StyledIcon$1 = styled$1(FontAwesomeIcon)(({ theme: theme2 }) => ({
@@ -46309,10 +46325,13 @@ const HostingSelect = ({
         },
         getOptionLabel: (option2) => option2.name,
         isOptionEqualToValue: (option2, value2) => option2.id === value2.id,
-        renderOption: (props2, option2) => /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ...props2, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(OptionContainer$1, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(OptionLabel$1, { children: option2.name }),
-          option2.description && /* @__PURE__ */ jsxRuntimeExports.jsx(OptionDescription$1, { children: option2.description })
-        ] }) }),
+        renderOption: (props2, option2) => {
+          const { key, ...rest } = props2;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(OptionContainer$1, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(OptionLabel$1, { children: option2.name }),
+            option2.description && /* @__PURE__ */ jsxRuntimeExports.jsx(OptionDescription$1, { children: option2.description })
+          ] }) }, key);
+        },
         freeSolo: allowCustom,
         renderInput: (params) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           TextField,
@@ -55913,16 +55932,15 @@ const ModelSelect = ({
     return void 0;
   }, [hostingId, refreshModels, isModelsLoading]);
   const modelOptions = reactExports.useMemo(() => {
-    const options = [
-      {
-        id: "",
-        name: "Default",
-        description: "Clear model selection",
-        model: void 0
-      }
-    ];
+    const optionsMap = /* @__PURE__ */ new Map();
+    optionsMap.set("", {
+      id: "",
+      name: "Default",
+      description: "Clear model selection",
+      model: void 0
+    });
     for (const model of availableModels) {
-      options.push({
+      optionsMap.set(model.id, {
         id: model.id,
         name: model.name,
         description: model.description,
@@ -55930,30 +55948,15 @@ const ModelSelect = ({
         recommended: model.recommended
       });
     }
-    const modelExists = availableModels.some((model) => {
-      if (model.id === value) {
-        return true;
-      }
-      if (value?.includes("/")) {
-        return model.id?.endsWith(value.split("/")[1]);
-      }
-      if (value && !value.includes("/")) {
-        if (model.id.includes("/")) {
-          return model.id.endsWith(`/${value}`);
-        }
-        return model.id === value;
-      }
-      return false;
-    });
-    if (value && value.trim() !== "" && !modelExists) {
-      options.push({
+    if (value && value.trim() !== "" && !optionsMap.has(value)) {
+      optionsMap.set(value, {
         id: value,
         name: value,
         description: "Custom model",
         model: void 0
       });
     }
-    return options;
+    return Array.from(optionsMap.values());
   }, [availableModels, value]);
   const helperText = reactExports.useMemo(() => {
     if (availableModels.length === 0 && hostingId) {
@@ -56079,7 +56082,13 @@ const ModelSelect = ({
         },
         getOptionLabel: (option2) => option2.name,
         isOptionEqualToValue: (option2, value2) => option2.id === value2.id,
-        groupBy: (option2) => getProviderFromId(option2.id),
+        groupBy: (option2) => {
+          const modelOption = option2;
+          if (hostingId === "radient" && modelOption.id === "auto") {
+            return "radient";
+          }
+          return getProviderFromId(modelOption.id);
+        },
         renderOption: (props2, option2) => {
           const { key, ...rest } = props2;
           return /* @__PURE__ */ jsxRuntimeExports.jsx("li", { ...rest, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(OptionContainer, { children: [
@@ -56150,19 +56159,19 @@ const ModelSelect = ({
   ] });
 };
 const FieldContainer = styled$1(Box)({
-  marginBottom: 24,
   position: "relative"
 });
-const FieldLabel$1 = styled$1(Typography)(({ theme: theme2 }) => ({
+const FieldLabel$1 = styled$1("div")(({ theme: theme2 }) => ({
+  fontFamily: theme2.typography.fontFamily,
+  fontSize: "0.875rem",
+  // Small text size
+  fontWeight: 500,
+  // Slightly less bold
+  color: theme2.palette.text.secondary,
   marginBottom: 6,
   // Reduced margin
   display: "flex",
-  alignItems: "center",
-  color: theme2.palette.text.secondary,
-  fontWeight: 500,
-  // Slightly less bold
-  fontSize: "0.875rem"
-  // Small text size
+  alignItems: "center"
 }));
 const LabelIcon$1 = styled$1(Box)({
   marginRight: 8,
@@ -56194,42 +56203,57 @@ const TitleIcon$2 = styled$1(FontAwesomeIcon)(({ theme: theme2 }) => ({
 }));
 const InfoCard = styled$1(Box)(({ theme: theme2 }) => ({
   display: "flex",
-  // Keep flex for vertical alignment if needed
   alignItems: "center",
-  // Align text vertically
   height: "36px",
-  // Match input height
   padding: theme2.spacing(0.5, 1.5),
-  // Match input padding (4px 12px)
   borderRadius: 4,
-  // Less rounded corners
   backgroundColor: theme2.palette.background.paper,
-  // Use paper background
   border: `1px solid ${theme2.palette.divider}`,
-  // Use divider color for border
   boxSizing: "border-box",
   width: "100%",
-  // Take full width of the grid item
   overflow: "hidden"
-  // Prevent text overflow
 }));
 const ValueText = styled$1(Typography)(({ theme: theme2 }) => ({
-  // Keep as Typography for consistency
   fontWeight: 400,
-  // Normal weight for value text inside the box
   fontSize: "0.875rem",
   color: theme2.palette.text.primary,
   whiteSpace: "nowrap",
-  // Prevent wrapping
   overflow: "hidden",
-  // Hide overflow
   textOverflow: "ellipsis"
-  // Add ellipsis
 }));
 const MonospaceValueText = styled$1(ValueText)(({ theme: theme2 }) => ({
   fontFamily: "monospace",
   color: theme2.palette.mode === "light" ? theme2.palette.grey[900] : theme2.palette.text.primary
 }));
+const ModelPlaceholderContainer = styled$1("div")(({ theme: theme2 }) => ({
+  padding: "4px 12px",
+  borderRadius: 6,
+  backgroundColor: theme2.palette.background.paper,
+  border: `1px solid ${theme2.palette.divider}`,
+  position: "relative",
+  minHeight: "36px",
+  height: "36px",
+  display: "flex",
+  alignItems: "center",
+  boxSizing: "border-box",
+  width: "100%",
+  textAlign: "left",
+  justifyContent: "flex-start",
+  color: theme2.palette.text.primary,
+  fontWeight: "normal",
+  fontFamily: "inherit"
+}));
+const ModelPlaceholderText = styled$1("div")(({ theme: theme2 }) => ({
+  color: theme2.palette.text.disabled,
+  fontStyle: "normal",
+  fontSize: "0.875rem",
+  lineHeight: 1.5,
+  paddingRight: 30,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  flexGrow: 1
+}));
 const GeneralSettings = ({
   selectedAgent,
   savingField,
@@ -56273,7 +56297,8 @@ const GeneralSettings = ({
           }
         }
       ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, spacing: 2, alignItems: "center", children: [
+        " ",
         /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, md: 6, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           HostingSelect,
           {
@@ -56330,29 +56355,11 @@ const GeneralSettings = ({
           },
           `model-select-${currentHosting}`
         ) : /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldContainer, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$1, { variant: "subtitle2", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel$1, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(LabelIcon$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faRobot }) }),
             "Model"
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            TextField,
-            {
-              placeholder: "Select a hosting provider first...",
-              variant: "outlined",
-              size: "small",
-              disabled: true,
-              fullWidth: true,
-              InputProps: {
-                sx: {
-                  fontSize: "0.875rem",
-                  lineHeight: 1.6,
-                  backgroundColor: (theme2) => theme2.palette.inputField.background,
-                  borderRadius: 2,
-                  padding: "16px"
-                }
-              }
-            }
-          )
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ModelPlaceholderContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(ModelPlaceholderText, { children: "Select a hosting provider first..." }) })
         ] }) })
       ] })
     ] }),
@@ -56747,32 +56754,21 @@ const AgentsList$1 = styled$1(List$1)(({ theme: theme2 }) => ({
 }));
 const AgentListItemButton$1 = styled$1(ListItemButton)(({ theme: theme2 }) => ({
   margin: "0 8px 8px",
-  // Match chat sidebar margin
   borderRadius: 8,
-  // marginBottom: 4, // Removed, handled by margin bottom
-  // marginBottom: 4, // Removed, handled by margin bottom
   paddingRight: 12,
-  // Match chat sidebar padding (now that secondaryAction is removed)
   paddingTop: 6,
-  // Match chat sidebar padding
   paddingBottom: 6,
-  // Match chat sidebar padding
   paddingLeft: 12,
-  // Match chat sidebar padding
   position: "relative",
-  // Add relative positioning like chat sidebar
   "&.Mui-selected": {
     backgroundColor: alpha$1(theme2.palette.sidebar.itemActive, 0.1),
-    // Match chat sidebar alpha
     color: theme2.palette.sidebar.itemActiveText,
     "&:hover": {
       backgroundColor: alpha$1(theme2.palette.sidebar.itemActiveHover, 0.15)
-      // Match chat sidebar alpha
     }
   },
   "&:hover": {
     backgroundColor: alpha$1(theme2.palette.sidebar.itemHover, 0.1)
-    // Match chat sidebar alpha
   }
 }));
 const AgentAvatar$2 = styled$1(Avatar, {
@@ -56782,15 +56778,11 @@ const AgentAvatar$2 = styled$1(Avatar, {
   color: selected ? theme2.palette.sidebar.itemActiveText : theme2.palette.icon.text,
   boxShadow: `0 2px 4px ${alpha$1(theme2.palette.common.black, 0.15)}`,
   width: 42,
-  // Match chat sidebar avatar size
   height: 42
-  // Match chat sidebar avatar size
 }));
 const AgentName$1 = styled$1(Typography)(() => ({
   fontWeight: 600,
-  // Match chat sidebar
   fontSize: "0.9rem",
-  // Match chat sidebar
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis",
@@ -56798,50 +56790,37 @@ const AgentName$1 = styled$1(Typography)(() => ({
 }));
 const DescriptionText = styled$1("div")(({ theme: theme2 }) => ({
   fontSize: "0.8rem",
-  // Match chat sidebar message preview
   color: theme2.palette.mode === "dark" ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.6)",
-  // Match chat sidebar message preview
   whiteSpace: "nowrap",
   overflow: "hidden",
   textOverflow: "ellipsis",
   width: "100%",
   minHeight: "18px"
-  // Match chat sidebar message preview
 }));
 const CreationDateText = styled$1("div")(({ theme: theme2 }) => ({
   display: "flex",
   alignItems: "center",
   fontSize: "0.7rem",
-  // Match chat sidebar timestamp
   color: theme2.palette.mode === "dark" ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.5)",
-  // Match chat sidebar timestamp
   marginTop: 2,
-  // Add small margin like chat sidebar name/preview spacing
   gap: 4
 }));
 const OptionsButtonContainer$1 = styled$1(Box)({
   position: "absolute",
   right: -8,
-  // Position relative to the container it will be placed in
   top: "50%",
-  // Center vertically
   transform: "translateY(-50%) translateX(100%)",
-  // Center vertically and position off-screen horizontally
   opacity: 0,
   transition: "opacity 0.2s ease, transform 0.2s ease",
-  // Target hover on the parent ListItemButton to trigger the effect
   ".MuiListItemButton-root:hover &": {
     opacity: 1,
     transform: "translateY(-50%) translateX(0)",
-    // Center vertically and slide in horizontally on hover
     visibility: "visible"
   },
   zIndex: 2,
   pointerEvents: "none",
-  // Container doesn't block clicks
   "& > *": {
     pointerEvents: "auto"
-    // Button inside is clickable
   }
 });
 const formatDate = (dateString) => {
@@ -56864,22 +56843,28 @@ const AgentsSidebar = ({
   const perPage = 50;
   const exportAgentMutation = useExportAgent();
   const { page, setPage } = usePaginationParams();
-  const [stableAgents, setStableAgents] = reactExports.useState([]);
-  const prevFetchingRef = reactExports.useRef(false);
   const {
-    data: agents = [],
+    data: agentListResult,
     isLoading,
     isError,
-    refetch,
-    isFetching
-  } = useAgents(page, perPage, 0, searchQuery);
-  reactExports.useEffect(() => {
-    if (agents.length > 0 && (!isFetching || prevFetchingRef.current && !isFetching)) {
-      setStableAgents(agents);
+    refetch
+  } = useAgents(page, perPage, 0, searchQuery, "created_date", "desc");
+  const agents = agentListResult?.agents || [];
+  const totalAgents = agentListResult?.total || 0;
+  const { data: selectedAgentDetails } = useAgent(
+    // Only fetch if selectedAgentId exists and is not found in the current agents list
+    selectedAgentId && !agents.find((a2) => a2.id === selectedAgentId) ? selectedAgentId : void 0
+  );
+  const combinedAgents = reactExports.useMemo(() => {
+    const combined = [...agents];
+    if (selectedAgentDetails && !combined.find((a2) => a2.id === selectedAgentDetails.id)) {
+      combined.push(selectedAgentDetails);
     }
-    prevFetchingRef.current = isFetching;
-  }, [agents, isFetching]);
-  const displayAgents = isFetching && stableAgents.length > 0 ? stableAgents : agents;
+    combined.sort((a2, b2) => {
+      return new Date(b2.created_date).getTime() - new Date(a2.created_date).getTime();
+    });
+    return combined;
+  }, [agents, selectedAgentDetails]);
   const handlePageChange = reactExports.useCallback(
     (_event, value) => {
       setPage(value);
@@ -56908,7 +56893,7 @@ const AgentsSidebar = ({
     async (agentId) => {
       try {
         const blob = await exportAgentMutation.mutateAsync(agentId);
-        const agent = agents.find((a22) => a22.id === agentId);
+        const agent = combinedAgents.find((a22) => a22.id === agentId);
         const agentName = agent ? agent.name.replace(/\s+/g, "-").toLowerCase() : agentId;
         const url = URL.createObjectURL(blob);
         const a2 = document.createElement("a");
@@ -56922,41 +56907,48 @@ const AgentsSidebar = ({
         console.error("Failed to export agent:", error);
       }
     },
-    [agents, exportAgentMutation]
+    [combinedAgents, exportAgentMutation]
+    // Use combinedAgents
   );
   const handleAgentCreated = reactExports.useCallback(
     (agentId) => {
       const fetchAndSelectAgent = async () => {
         try {
           const result = await refetch();
-          const updatedAgents = result.data || [];
-          const createdAgent = updatedAgents.find(
+          const updatedAgentList = result.data?.agents || [];
+          const createdAgent = updatedAgentList.find(
             (agent) => agent.id === agentId
           );
-          if (createdAgent && onSelectAgent) {
+          if (createdAgent) {
             onSelectAgent(createdAgent);
           } else {
-            await queryClient.prefetchQuery({
-              queryKey: ["agents", agentId],
-              queryFn: async () => {
-                const client = createLocalOperatorClient(apiConfig.baseUrl);
-                const response = await client.agents.getAgent(agentId);
-                return response.result;
+            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."
+                );
               }
-            });
-            const agentDetails = queryClient.getQueryData(["agents", agentId]);
-            if (agentDetails && onSelectAgent) {
-              onSelectAgent(agentDetails);
+            } catch (fetchError) {
+              console.error(
+                "Error fetching newly created agent details:",
+                fetchError
+              );
             }
           }
         } catch (error) {
-          console.error("Error fetching agent details:", error);
-          refetch();
+          console.error("Error refetching agents list:", error);
         }
       };
       fetchAndSelectAgent();
     },
     [onSelectAgent, refetch]
+    // Keep dependencies
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SidebarContainer$4, { elevation: 0, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -56986,101 +56978,96 @@ const AgentsSidebar = ({
         ),
         children: "Failed to load agents. Please try again."
       }
-    ) : displayAgents.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyStateContainer$3, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: "No agents found" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(AgentsList$1, { children: displayAgents.map((agent) => /* @__PURE__ */ jsxRuntimeExports.jsx(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ) : combinedAgents.length === 0 && !isLoading ? (
+      // Check combinedAgents and isLoading
+      /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyStateContainer$3, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: searchQuery ? "No agents match your search" : "No agents found" }) })
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(AgentsList$1, { children: combinedAgents.map((agent) => /* @__PURE__ */ jsxRuntimeExports.jsx(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       AgentListItemButton$1,
       {
-        selected: selectedAgentId === agent.id,
+        selected: selectedAgentId === agent.id || selectedAgentDetails?.id === agent.id,
         onClick: () => handleSelectAgent(agent),
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemAvatar, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AgentAvatar$2, { selected: selectedAgentId === agent.id, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faRobot }) }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            ListItemText,
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemText, { disableTypography: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Box,
             {
-              disableTypography: true,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                Box,
-                {
-                  sx: {
-                    position: "relative",
-                    width: "100%",
-                    overflow: "hidden"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Tooltip$1,
-                      {
-                        enterDelay: 1200,
-                        enterNextDelay: 1200,
-                        title: agent.name,
-                        arrow: true,
-                        placement: "top-start",
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(AgentName$1, { children: agent.name })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Tooltip$1,
-                      {
-                        title: agent.description || "No description",
-                        arrow: true,
-                        placement: "bottom-start",
-                        enterDelay: 1200,
-                        enterNextDelay: 1200,
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(DescriptionText, { children: agent.description || "No description" })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Tooltip$1,
-                      {
-                        title: `Created: ${formatDate(agent.created_date)}`,
-                        arrow: true,
-                        placement: "bottom-start",
-                        enterDelay: 1200,
-                        enterNextDelay: 1200,
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CreationDateText, { children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faClock, size: "xs" }),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formatDate(agent.created_date) })
-                        ] })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(OptionsButtonContainer$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                      Tooltip$1,
+              sx: {
+                position: "relative",
+                width: "100%",
+                overflow: "hidden"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Tooltip$1,
+                  {
+                    enterDelay: 1200,
+                    enterNextDelay: 1200,
+                    title: agent.name,
+                    arrow: true,
+                    placement: "top-start",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(AgentName$1, { children: agent.name })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Tooltip$1,
+                  {
+                    title: agent.description || "No description",
+                    arrow: true,
+                    placement: "bottom-start",
+                    enterDelay: 1200,
+                    enterNextDelay: 1200,
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(DescriptionText, { children: agent.description || "No description" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Tooltip$1,
+                  {
+                    title: `Created: ${formatDate(agent.created_date)}`,
+                    arrow: true,
+                    placement: "bottom-start",
+                    enterDelay: 1200,
+                    enterNextDelay: 1200,
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CreationDateText, { children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faClock, size: "xs" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formatDate(agent.created_date) })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(OptionsButtonContainer$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Tooltip$1,
+                  {
+                    enterDelay: 1200,
+                    enterNextDelay: 1200,
+                    title: "Agent Options",
+                    arrow: true,
+                    placement: "top",
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      AgentOptionsMenu,
                       {
-                        enterDelay: 1200,
-                        enterNextDelay: 1200,
-                        title: "Agent Options",
-                        arrow: true,
-                        placement: "top",
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                          AgentOptionsMenu,
-                          {
-                            agentId: agent.id,
-                            agentName: agent.name,
-                            isAgentsPage: true,
-                            onAgentDeleted: (deletedAgentId) => {
-                              refetch();
-                            },
-                            onChatWithAgent: () => navigate(`/chat/${agent.id}`),
-                            onExportAgent: () => handleExportAgent(agent.id),
-                            buttonSx: {
-                              // Match chat sidebar options button style
-                              width: 24,
-                              height: 24,
-                              borderRadius: "4px",
-                              display: "flex",
-                              justifyContent: "center",
-                              alignItems: "center",
-                              opacity: 1
-                              // Opacity controlled by container
-                            }
-                          }
-                        ) })
+                        agentId: agent.id,
+                        agentName: agent.name,
+                        isAgentsPage: true,
+                        onAgentDeleted: (deletedAgentId) => {
+                          refetch();
+                        },
+                        onChatWithAgent: () => navigate(`/chat/${agent.id}`),
+                        onExportAgent: () => handleExportAgent(agent.id),
+                        buttonSx: {
+                          width: 24,
+                          height: 24,
+                          borderRadius: "4px",
+                          display: "flex",
+                          justifyContent: "center",
+                          alignItems: "center",
+                          opacity: 1
+                        }
                       }
                     ) })
-                  ]
-                }
-              )
+                  }
+                ) })
+              ]
             }
-          )
+          ) })
         ]
       }
     ) }, agent.id)) }),
@@ -57100,11 +57087,11 @@ const AgentsSidebar = ({
         onAgentImported: handleAgentCreated
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    totalAgents > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
       CompactPagination,
       {
         page,
-        count: Math.max(1, Math.ceil(displayAgents.length / perPage)),
+        count: Math.max(1, Math.ceil(totalAgents / perPage)),
         onChange: (newPage) => handlePageChange({}, newPage)
       }
     )
@@ -57151,7 +57138,8 @@ const AgentsPage = () => {
   const prevAgentIdRef = reactExports.useRef(agentId);
   const exportAgentMutation = useExportAgent();
   const { setLastAgentsPageAgentId, getLastAgentId, clearLastAgentId } = useAgentSelectionStore();
-  const { data: agents = [] } = useAgents();
+  const { data: agentListResult } = useAgents();
+  const agents = agentListResult?.agents || [];
   const effectiveAgentId = agentId || getLastAgentId("agents");
   const [selectedAgent, setSelectedAgent] = reactExports.useState(null);
   const { data: initialAgent, refetch: refetchAgent } = useAgent(
@@ -57168,7 +57156,7 @@ const AgentsPage = () => {
         }, 0);
       }
     }
-  }, [effectiveAgentId, agents]);
+  }, [effectiveAgentId, agents, clearLastAgentId, clearAgentId]);
   reactExports.useEffect(() => {
     if (agentId) {
       setLastAgentsPageAgentId(agentId);
@@ -57855,11 +57843,14 @@ const DirectoryIndicator = ({
     )
   ] }) });
 };
-const UtilitiesContainer = styled$1(Box)(({ theme: theme2 }) => ({
+const UtilitiesContainer = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "$expanded"
+})(({ theme: theme2, $expanded }) => ({
   padding: theme2.spacing(1, 3),
   backgroundColor: alpha$1(theme2.palette.background.paper, 0.4),
   borderTop: `1px solid ${alpha$1(theme2.palette.divider, 0.1)}`,
-  minHeight: 52
+  // Apply minHeight only when collapsed to allow expansion
+  minHeight: $expanded ? "auto" : 52
 }));
 const UtilitiesHeader = styled$1(Box)(({ theme: theme2 }) => ({
   display: "flex",
@@ -57888,7 +57879,7 @@ const ChatUtilities = ({
     setExpanded(!expanded);
   };
   if (!agentId) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(UtilitiesContainer, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(UtilitiesContainer, { $expanded: expanded, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(UtilitiesHeader, { onClick: toggleExpanded, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         IconButton,
@@ -76428,7 +76419,7 @@ const languages = [
     name: "Go",
     extensions: ["go"],
     load() {
-      return __vitePreload(() => import("./index-B87fKloA.js"), true ? __vite__mapDeps([0,1,2]) : void 0, import.meta.url).then((m2) => m2.go());
+      return __vitePreload(() => import("./index-PjN-o7b5.js"), true ? __vite__mapDeps([0,1,2]) : void 0, import.meta.url).then((m2) => m2.go());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -76605,7 +76596,7 @@ const languages = [
     alias: ["yml"],
     extensions: ["yaml", "yml"],
     load() {
-      return __vitePreload(() => import("./index-CfuGYyUa.js"), true ? __vite__mapDeps([3,1,2]) : void 0, import.meta.url).then((m2) => m2.yaml());
+      return __vitePreload(() => import("./index-Bi6Xp3wq.js"), true ? __vite__mapDeps([3,1,2]) : void 0, import.meta.url).then((m2) => m2.yaml());
     }
   }),
   // Legacy modes ported from CodeMirror 5
@@ -136137,10 +136128,10 @@ const AttachmentsPreview = ({
     ) })
   ] }, `${index2}-${attachment}`)) });
 };
-const ButtonContainer$1 = styled$1(Box)(
-  ({
-    isChatUtilitiesExpanded
-  }) => ({
+const ButtonContainer$1 = styled$1(Box, {
+  shouldForwardProp: (prop) => prop !== "isChatUtilitiesExpanded"
+})(
+  ({ isChatUtilitiesExpanded }) => ({
     position: "absolute",
     bottom: isChatUtilitiesExpanded ? 260 : 200,
     zIndex: 1e3,
@@ -136462,7 +136453,7 @@ const MessageInput = ({
       const newAttachments = Array.from(e3.target.files).map((file) => {
         const filePath = file.path;
         if (filePath) {
-          return filePath;
+          return normalizePath(filePath);
         }
         return URL.createObjectURL(file);
       });
@@ -178232,7 +178223,6 @@ const AgentListItemButton = styled$1(ListItemButton)(({ theme: theme2 }) => ({
   paddingBottom: 6,
   paddingLeft: 12,
   position: "relative",
-  // Ensure proper positioning context
   "&.Mui-selected": {
     backgroundColor: alpha$1(theme2.palette.sidebar.itemActive, 0.1),
     color: theme2.palette.sidebar.itemActiveText,
@@ -178259,9 +178249,7 @@ const MessageBubble = styled$1("div")({
   width: "100%",
   overflow: "hidden",
   position: "relative",
-  // Ensure the message bubble maintains its layout
   isolation: "isolate"
-  // Create a new stacking context
 });
 const AgentNameContainer = styled$1(Box)({
   display: "flex",
@@ -178269,7 +178257,6 @@ const AgentNameContainer = styled$1(Box)({
   alignItems: "center",
   width: "100%",
   position: "relative",
-  // Ensure the container maintains its position
   overflow: "hidden"
 });
 const AgentName = styled$1(Typography)(() => ({
@@ -178320,11 +178307,9 @@ const OptionsButtonContainer = styled$1(Box)({
     visibility: "visible"
   },
   zIndex: 2,
-  // Ensure the container doesn't affect layout when clicked
   pointerEvents: "none",
   "& > *": {
     pointerEvents: "auto"
-    // Allow clicks on children (the button itself)
   }
 });
 const NoMessagesContainer = styled$1("div")(({ theme: theme2 }) => ({
@@ -178350,11 +178335,32 @@ const ChatSidebar = ({
   const clearConversationMutation = useClearAgentConversation();
   const { page, setPage } = usePaginationParams();
   const {
-    data: agents = [],
+    data: agentListResult,
+    // Rename data to agentListResult
     isLoading,
     isError,
     refetch
-  } = useAgents(page, perPage, 5e3, searchQuery);
+  } = useAgents(
+    page,
+    perPage,
+    5e3,
+    searchQuery,
+    "last_message_datetime",
+    "desc"
+  );
+  const agents = agentListResult?.agents || [];
+  const totalAgents = agentListResult?.total || 0;
+  const { data: selectedAgentDetails } = useAgent(
+    // Only fetch if selectedConversation exists and is not found in the current agents list
+    selectedConversation && !agents.find((a2) => a2.id === selectedConversation) ? selectedConversation : void 0
+  );
+  const combinedAgents = reactExports.useMemo(() => {
+    const combined = [...agents];
+    if (selectedAgentDetails && !combined.find((a2) => a2.id === selectedAgentDetails.id)) {
+      combined.push(selectedAgentDetails);
+    }
+    return combined;
+  }, [agents, selectedAgentDetails]);
   const handlePageChange = reactExports.useCallback(
     (_event, value) => {
       setPage(value);
@@ -178383,7 +178389,7 @@ const ChatSidebar = ({
     async (agentId) => {
       try {
         const blob = await exportAgentMutation.mutateAsync(agentId);
-        const agent = agents.find((a22) => a22.id === agentId);
+        const agent = combinedAgents.find((a22) => a22.id === agentId);
         const agentName = agent ? agent.name.replace(/\s+/g, "-").toLowerCase() : agentId;
         const url = URL.createObjectURL(blob);
         const a2 = document.createElement("a");
@@ -178397,15 +178403,16 @@ const ChatSidebar = ({
         console.error("Failed to export agent:", error);
       }
     },
-    [agents, exportAgentMutation]
+    [combinedAgents, exportAgentMutation]
+    // Use combinedAgents
   );
   const handleAgentCreated = reactExports.useCallback(
     (agentId) => {
       const fetchAndSelectAgent = async () => {
         try {
           const result = await refetch();
-          const updatedAgents = result.data || [];
-          const createdAgent = updatedAgents.find(
+          const updatedAgentList = result.data?.agents || [];
+          const createdAgent = updatedAgentList.find(
             (agent) => agent.id === agentId
           );
           if (createdAgent) {
@@ -178426,14 +178433,6 @@ const ChatSidebar = ({
     if (!message2) return "";
     return message2.length > maxLength ? `${message2.substring(0, maxLength)}...` : message2;
   };
-  const sortedAgents = [...agents].sort((a2, b2) => {
-    if (a2.last_message_datetime && b2.last_message_datetime) {
-      return new Date(b2.last_message_datetime).getTime() - new Date(a2.last_message_datetime).getTime();
-    }
-    if (a2.last_message_datetime) return -1;
-    if (b2.last_message_datetime) return 1;
-    return 0;
-  });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SidebarContainer$2, { elevation: 0, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       SidebarHeader$2,
@@ -178462,10 +178461,13 @@ const ChatSidebar = ({
         ),
         children: "Failed to load agents. Please try again."
       }
-    ) : sortedAgents.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyStateContainer$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: "No agents found" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(AgentsList, { children: sortedAgents.map((agent) => /* @__PURE__ */ jsxRuntimeExports.jsx(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ) : combinedAgents.length === 0 && !isLoading ? (
+      // Check combinedAgents and isLoading
+      /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyStateContainer$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: searchQuery ? "No agents match your search" : "No agents found" }) })
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(AgentsList, { children: combinedAgents.map((agent) => /* @__PURE__ */ jsxRuntimeExports.jsx(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
       AgentListItemButton,
       {
-        selected: selectedConversation === agent.id,
+        selected: selectedConversation === agent.id || selectedAgentDetails?.id === agent.id,
         onClick: () => handleSelectConversation(agent.id),
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(ListItemAvatar, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AgentAvatar, { selected: selectedConversation === agent.id, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faRobot }) }) }),
@@ -178571,11 +178573,11 @@ const ChatSidebar = ({
         onAgentImported: handleAgentCreated
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    totalAgents > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
       CompactPagination,
       {
         page,
-        count: Math.max(1, Math.ceil(sortedAgents.length / perPage)),
+        count: Math.max(1, Math.ceil(totalAgents / perPage)),
         onChange: (newPage) => handlePageChange({}, newPage)
       }
     )
@@ -178700,8 +178702,10 @@ const ChatPage = () => {
   );
   const messagesEndRef = reactExports.useRef(null);
   reactExports.useEffect(() => {
-    if (effectiveAgentId && agents.length > 0) {
-      const agentExists = agents.some((agent) => agent.id === effectiveAgentId);
+    if (effectiveAgentId && agents && "agents" in agents && agents.agents.length > 0) {
+      const agentExists = agents.agents.some(
+        (agent) => agent.id === effectiveAgentId
+      );
       if (!agentExists) {
         setTimeout(() => {
           clearLastAgentId("chat");
@@ -179513,10 +179517,17 @@ const CreateAgentStep = () => {
           severity: "success",
           icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCheck }),
           sx: successAlertSx,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { sx: { mb: 0 }, children: "🎉" }),
-            " AI assistant created successfully!"
-          ] })
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Box,
+            {
+              component: "span",
+              sx: { display: "flex", alignItems: "center", gap: 1 },
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { sx: { mb: 0 }, children: "🎉" }),
+                " AI assistant created successfully!"
+              ]
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -180421,39 +180432,23 @@ const SignInButton = styled$1(Button)(({ theme: theme2 }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  // Center content
   padding: theme2.spacing(0.75, 2),
-  // Consistent padding
   borderRadius: theme2.shape.borderRadius * 0.75,
-  // Consistent radius
   fontSize: "0.875rem",
-  // Standard font size
   fontWeight: 500,
-  // Standard weight
   textTransform: "none",
   marginBottom: theme2.spacing(1.5),
-  // Reduced margin between buttons
   width: "100%",
   maxWidth: 320,
-  // Keep max width for centering effect
   border: `1px solid ${theme2.palette.divider}`,
-  // Standard border
   backgroundColor: theme2.palette.background.paper,
-  // Standard background
   color: theme2.palette.text.primary,
-  // Standard text color
   boxShadow: "none",
-  // Remove shadow
   transition: "background-color 0.2s ease-in-out, border-color 0.2s ease-in-out",
-  // Standard transition
   "&:hover": {
     backgroundColor: theme2.palette.action.hover,
-    // Standard hover
     borderColor: theme2.palette.divider,
-    // Keep border consistent on hover
     boxShadow: "none"
-    // Ensure no shadow on hover
-    // transform: "none", // Ensure no transform
   },
   "&:disabled": {
     borderColor: theme2.palette.divider,
@@ -180468,11 +180463,8 @@ const IconContainer = styled$1(Box)(({ theme: theme2 }) => ({
   alignItems: "center",
   justifyContent: "center",
   marginRight: theme2.spacing(1),
-  // Reduced margin
   fontSize: "1rem",
-  // Slightly smaller icon to fit button style
   width: 20,
-  // Explicit width/height for alignment
   height: 20
 }));
 const ButtonsContainer = styled$1(Box)(() => ({
@@ -180483,12 +180475,14 @@ const ButtonsContainer = styled$1(Box)(() => ({
 }));
 const RadientAuthButtons = ({
   onSignInSuccess,
+  onAfterCredentialUpdate,
   titleText: titleText2 = "Sign in to Radient",
   descriptionText = "Choose your preferred sign-in method to access Radient services."
 }) => {
   const theme2 = useTheme$1();
   const { signInWithGoogle, signInWithMicrosoft, loading, error } = useOidcAuth(
     {
+      onAfterCredentialUpdate,
       onSuccess: onSignInSuccess
     }
   );
@@ -180505,13 +180499,10 @@ const RadientAuthButtons = ({
       {
         sx: {
           fontSize: "1.125rem",
-          // ~18px
           fontWeight: 500,
           marginBottom: theme2.spacing(1),
-          // Reduced margin
           color: theme2.palette.text.primary,
           textAlign: "center"
-          // Center title
         },
         children: titleText2
       }
@@ -180521,13 +180512,10 @@ const RadientAuthButtons = ({
       {
         sx: {
           fontSize: "0.875rem",
-          // ~14px
           color: theme2.palette.text.secondary,
           marginBottom: theme2.spacing(3),
-          // Consistent margin
           lineHeight: 1.5,
           textAlign: "center"
-          // Center description
         },
         children: descriptionText
       }
@@ -180558,13 +180546,61 @@ const RadientAuthButtons = ({
     ] })
   ] });
 };
+const radientPricesKeys = {
+  all: ["radient-prices"],
+  prices: () => [...radientPricesKeys.all, "prices"]
+};
+const useRadientPricesQuery = () => {
+  const radientClient2 = createRadientClient(
+    apiConfig.radientBaseUrl,
+    apiConfig.radientClientId
+    // Not used by fetchPrices, but required by constructor
+  );
+  const pricesQuery = useQuery({
+    // Use the defined query key
+    queryKey: radientPricesKeys.prices(),
+    // The query function calls the fetchPrices method from the client
+    queryFn: async () => {
+      try {
+        const prices = await radientClient2.prices.fetchPrices();
+        return prices;
+      } catch (error) {
+        console.error("Failed to fetch Radient prices:", error);
+        throw error;
+      }
+    },
+    // This data is fairly static, so we can set a longer stale time
+    staleTime: 1e3 * 60 * 60,
+    // 1 hour
+    // Refetch only on mount or if stale, not on window focus or interval
+    refetchOnWindowFocus: false,
+    refetchOnMount: true,
+    refetchInterval: false,
+    // Retry on failure a few times
+    retry: 3
+  });
+  return {
+    // Prices data (default_new_credits, default_registration_credits)
+    prices: pricesQuery.data,
+    // Loading and error states from react-query
+    isLoading: pricesQuery.isLoading,
+    isFetching: pricesQuery.isFetching,
+    error: pricesQuery.error,
+    // Raw query object for advanced usage if needed
+    pricesQuery
+  };
+};
 const RadientSignInStep = ({
   onSignInSuccess
-  // This prop comes from OnboardingModal
 }) => {
   const theme2 = useTheme$1();
+  const { prices, isLoading, error } = useRadientPricesQuery();
+  const formatCurrency = (amount) => {
+    if (typeof amount !== "number") return "$...";
+    return `$${amount.toFixed(2)} USD`;
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionContainer, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionDescription$1, { sx: { mb: 3 }, children: "Sign in with your preferred method to get started with Radient Pass. This gives you access to web search, image generation, site crawling, and more." }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionDescription$1, { sx: { mb: 3 }, children: "Sign in with your preferred method to get started with Radient Pass in a couple clicks. This gives you access to hundreds of models updated in real time, cost-saving with Radient Auto, web search, image generation, site crawling, and more all in Local Operator." }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionDescription$1, { sx: { mb: 3 }, children: [
       "Start with",
       " ",
@@ -180575,7 +180611,7 @@ const RadientSignInStep = ({
           fontWeight: "medium",
           color: theme2.palette.primary.main,
           sx: { fontSize: "inherit" },
-          children: "$1 USD"
+          children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 16, sx: { mr: 0.5 } }) : formatCurrency(prices?.default_new_credits)
         }
       ),
       " ",
@@ -180588,11 +180624,12 @@ const RadientSignInStep = ({
           fontWeight: "medium",
           color: theme2.palette.primary.main,
           sx: { fontSize: "inherit" },
-          children: "$5 USD"
+          children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 16, sx: { mr: 0.5 } }) : formatCurrency(prices?.default_registration_credits)
         }
       ),
       " ",
-      "more with your first payment."
+      "more with your first payment.",
+      error && /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { color: "error", variant: "caption", display: "block", mt: 1, children: "Could not load credit information." })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Box,
@@ -181051,7 +181088,7 @@ const UserProfileStep = () => {
 };
 const stepTitles = {
   [OnboardingStep.RADIENT_CHOICE]: "Choose Your Setup Option",
-  [OnboardingStep.RADIENT_SIGNIN]: "Sign in with a Radient Pass",
+  [OnboardingStep.RADIENT_SIGNIN]: "Set Up With Radient Pass",
   [OnboardingStep.USER_PROFILE]: "Set Up Your Profile",
   [OnboardingStep.MODEL_CREDENTIAL]: "Add Model Provider Credentials",
   [OnboardingStep.SEARCH_API]: "Enable Web Search (Recommended)",
@@ -205316,8 +205353,11 @@ const LoadingContainer$2 = styled$1(Box)({
   alignItems: "center",
   minHeight: 150
 });
-const RadientAccountSection = () => {
+const RadientAccountSection = ({
+  onAfterCredentialUpdate
+}) => {
   const { isAuthenticated, user, isLoading, error, signOut } = useRadientAuth();
+  const isSigningOut = useUserStore((state) => state.isSigningOut);
   const handleSignOut = reactExports.useCallback(async () => {
     try {
       await signOut();
@@ -205326,7 +205366,7 @@ const RadientAccountSection = () => {
     }
   }, [signOut]);
   const accountInfoSection = reactExports.useMemo(() => {
-    if (!isAuthenticated || !user.radientUser) return null;
+    if (!isAuthenticated || !user?.radientUser) return null;
     const { account, identity: identity3 } = user.radientUser;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(InfoContainer, { children: [
@@ -205384,9 +205424,9 @@ const RadientAccountSection = () => {
         )
       ] })
     ] });
-  }, [isAuthenticated, user.radientUser, handleSignOut]);
+  }, [isAuthenticated, user?.radientUser, handleSignOut]);
   const signInSection = reactExports.useMemo(() => {
-    if (isAuthenticated) return null;
+    if (isAuthenticated && user) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mt: 1 }, children: [
       " ",
       /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", mb: 2.5, children: "You are not currently signed in to Radient. Sign in to access your account details or sign up to get free credits and unified access to models, tools, and more with Radient Pass." }),
@@ -205394,22 +205434,30 @@ const RadientAccountSection = () => {
         RadientAuthButtons,
         {
           titleText: "",
+          onAfterCredentialUpdate,
           descriptionText: "",
           onSignInSuccess: () => {
           }
         }
       )
     ] });
-  }, [isAuthenticated]);
+  }, [isAuthenticated, user, onAfterCredentialUpdate]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { children: [
     " ",
-    isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingContainer$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, {}) }) : error ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { color: "error", variant: "body2", children: [
-      "Error loading account information:",
-      " ",
-      error instanceof Error ? error.message : String(error)
-    ] }) : (
-      // Render either the account info or the sign-in prompt
-      accountInfoSection || signInSection
+    isLoading || isSigningOut ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoadingContainer$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, {}) }) : isAuthenticated && user?.radientUser ? (
+      // If authenticated and user data exists, show account info
+      accountInfoSection
+    ) : (
+      // If not loading and not authenticated (or user data missing), show sign-in section.
+      // Display error above if it exists.
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        error && /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { color: "error", variant: "body2", sx: { mb: 2 }, children: [
+          "Error checking account status:",
+          " ",
+          error instanceof Error ? error.message : String(error)
+        ] }),
+        signInSection
+      ] })
     )
   ] });
 };
@@ -206724,6 +206772,29 @@ const SettingsPage = () => {
   const [activeSection, setActiveSection] = reactExports.useState("general");
   const [isScrolling, setIsScrolling] = reactExports.useState(false);
   const scrollTimeoutRef = reactExports.useRef(null);
+  const { data: credentialsData, refetch: refetchCredentials } = useCredentials();
+  const { refreshModels } = useModels();
+  const credentialKeys = reactExports.useMemo(
+    () => credentialsData?.keys ? [...credentialsData.keys].sort() : [],
+    [credentialsData?.keys]
+  );
+  const lastRefreshRef = reactExports.useRef({
+    keys: "",
+    hosting: void 0
+  });
+  reactExports.useEffect(() => {
+    const keysString = credentialKeys.join(",");
+    const hosting = config2?.values?.hosting;
+    if (lastRefreshRef.current.keys !== keysString || lastRefreshRef.current.hosting !== hosting) {
+      lastRefreshRef.current = { keys: keysString, hosting };
+      refreshModels().catch((err) => {
+        console.error(
+          "Failed to refresh models after credentials or hosting change:",
+          err
+        );
+      });
+    }
+  }, [credentialKeys, config2?.values?.hosting, refreshModels]);
   const sectionRefs = reactExports.useRef({
     general: reactExports.useRef(null),
     radient: reactExports.useRef(null),
@@ -207001,7 +207072,15 @@ const SettingsPage = () => {
             description: "Manage your Radient account, Radient Pass details, and credits.",
             cardRef: sectionRefs.radient,
             children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(RadientAccountSection, {}),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                RadientAccountSection,
+                {
+                  onAfterCredentialUpdate: () => {
+                    refreshModels();
+                    refetchCredentials();
+                  }
+                }
+              ),
               isAuthenticated && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { sx: { my: 3 } }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(BillingInfo, {}),
@@ -207237,8 +207316,8 @@ const UserProfileSidebar = React.memo(
     const [anchorEl, setAnchorEl] = reactExports.useState(null);
     const open2 = Boolean(anchorEl);
     const { user, isAuthenticated, signOut } = useRadientAuth();
-    const userName = user.name;
-    const userEmail = user.email;
+    const userName = user?.name ?? "User";
+    const userEmail = user?.email ?? "";
     const handleClick = reactExports.useCallback(
       (event) => {
         if (useAuth) {
@@ -207562,6 +207641,109 @@ const App = () => {
     ] }) })
   ] });
 };
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      // Default stale time of 5 minutes
+      staleTime: 5 * 60 * 1e3,
+      // Default cache time of 10 minutes
+      gcTime: 10 * 60 * 1e3,
+      // Default retry configuration
+      retry: 1,
+      // Default refetch configuration
+      refetchOnWindowFocus: true,
+      refetchOnMount: true,
+      // Don't wait for reconnect to refetch - we handle offline status separately
+      refetchOnReconnect: false,
+      // Continue to run queries even when offline
+      networkMode: "always"
+    },
+    mutations: {
+      // Retry mutations once by default
+      retry: 1,
+      // Continue to run mutations even when offline
+      networkMode: "always"
+    }
+  }
+});
+const useRadientTokenRefresher = () => {
+  const { authStatus, hasLocalSession } = useRadientAuth();
+  const queryClient2 = useQueryClient();
+  const refreshTimeout = reactExports.useRef(null);
+  const radientClient2 = reactExports.useMemo(
+    () => createRadientClient(apiConfig.radientBaseUrl, apiConfig.radientClientId),
+    []
+  );
+  const clearRefreshTimeout = reactExports.useCallback(() => {
+    if (refreshTimeout.current) {
+      clearTimeout(refreshTimeout.current);
+      refreshTimeout.current = null;
+    }
+  }, []);
+  const refreshAccessToken = reactExports.useCallback(async () => {
+    const session = await getSession();
+    if (!session || !session.refreshToken) {
+      return;
+    }
+    const currentAccessToken = session.accessToken;
+    try {
+      const response = await radientClient2.refreshToken(session.refreshToken);
+      const newAccessToken = response.result.access_token;
+      const newRefreshToken = response.result.refresh_token || session.refreshToken;
+      await updateAccessToken(
+        newAccessToken,
+        response.result.expires_in,
+        newRefreshToken
+      );
+      if (newAccessToken !== currentAccessToken) {
+        queryClient2.invalidateQueries({ queryKey: radientUserKeys.session() });
+      }
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      if (errorMessage.toLowerCase().includes("invalid_grant") || errorMessage.toLowerCase().includes("refresh token expired") || errorMessage.toLowerCase().includes("invalid refresh token")) {
+        await clearSession();
+        queryClient2.invalidateQueries({ queryKey: radientUserKeys.all });
+        showErrorToast("Session expired. Please sign in again.");
+      }
+    }
+  }, [queryClient2, radientClient2]);
+  const schedulePeriodicRefresh = reactExports.useCallback(() => {
+    clearRefreshTimeout();
+    refreshTimeout.current = setTimeout(
+      async () => {
+        await refreshAccessToken();
+        schedulePeriodicRefresh();
+      },
+      5 * 60 * 1e3
+    );
+  }, [refreshAccessToken, clearRefreshTimeout]);
+  reactExports.useEffect(() => {
+    if (authStatus === "authenticated" || hasLocalSession) {
+      refreshAccessToken();
+      schedulePeriodicRefresh();
+      const handleFocus = () => {
+        refreshAccessToken();
+      };
+      window.addEventListener("focus", handleFocus);
+      return () => {
+        clearRefreshTimeout();
+        window.removeEventListener("focus", handleFocus);
+      };
+    }
+    clearRefreshTimeout();
+    return void 0;
+  }, [
+    authStatus,
+    hasLocalSession,
+    refreshAccessToken,
+    schedulePeriodicRefresh,
+    clearRefreshTimeout
+  ]);
+};
+const RadientTokenRefresherRunner = () => {
+  useRadientTokenRefresher();
+  return null;
+};
 const RadientAuthProvider = ({
   children
 }) => {
@@ -207631,7 +207813,10 @@ document.addEventListener("DOMContentLoaded", () => {
         options: posthogOptions,
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FeatureFlagProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AuthProviders, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ThemeProvider, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(CssBaseline, {}),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(HashRouter, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(App, {}) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(HashRouter, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(App, {}),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(RadientTokenRefresherRunner, {})
+          ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(ThemedToastContainer, {}),
           isDevelopmentMode()
         ] }) }) }) })