local-operator-ui 0.5.1 → 0.5.2

package/out/renderer/assets/{index-B87fKloA.js → index-BJAGPaLC.js}

@@ -1,4 +1,4 @@
-import { L as LRParser, E as ExternalTokenizer, a as LocalTokenGroup, s as styleTags, C as ContextTracker, t as tags, b as LRLanguage, c as snippetCompletion, d as LanguageSupport, i as ifNotIn, e as completeFromList, f as indentNodeProp, g as foldNodeProp, h as continuedIndent, j as delimitedIndent, k as flatIndent, l as foldInside, m as syntaxTree, N as NodeWeakMap, I as IterMode } from "./index-CzJMsYKD.js";
+import { L as LRParser, E as ExternalTokenizer, a as LocalTokenGroup, s as styleTags, C as ContextTracker, t as tags, b as LRLanguage, c as snippetCompletion, d as LanguageSupport, i as ifNotIn, e as completeFromList, f as indentNodeProp, g as foldNodeProp, h as continuedIndent, j as delimitedIndent, k as flatIndent, l as foldInside, m as syntaxTree, N as NodeWeakMap, I as IterMode } from "./index-jZN-YHoh.js";
 import "./fonts-ChEL5asK.js";
 const insertedSemi = 177, space$1 = 179, identifier = 184, String = 12, closeParen$1 = 13, Number = 17, Rune = 20, closeBrace$1 = 25, closeBracket = 53, IncDecOp = 95, _return = 142, _break = 144, _continue = 145, fallthrough = 148;
 const newline = 10, carriageReturn = 13, space = 32, tab = 9, slash = 47, closeParen = 41, closeBrace = 125;

package/out/renderer/assets/{index-CfuGYyUa.js → index-DTD3Qh6P.js}

@@ -1,4 +1,4 @@
-import { L as LRParser, E as ExternalTokenizer, s as styleTags, C as ContextTracker, t as tags, b as LRLanguage, d as LanguageSupport, p as parseMixed, f as indentNodeProp, g as foldNodeProp, j as delimitedIndent, l as foldInside } from "./index-CzJMsYKD.js";
+import { L as LRParser, E as ExternalTokenizer, s as styleTags, C as ContextTracker, t as tags, b as LRLanguage, d as LanguageSupport, p as parseMixed, f as indentNodeProp, g as foldNodeProp, j as delimitedIndent, l as foldInside } from "./index-jZN-YHoh.js";
 import "./fonts-ChEL5asK.js";
 const blockEnd = 63, eof = 64, DirectiveEnd = 1, DocEnd = 2, sequenceStartMark = 3, sequenceContinueMark = 4, explicitMapStartMark = 5, explicitMapContinueMark = 6, flowMapMark = 7, mapStartMark = 65, mapContinueMark = 66, Literal = 8, QuotedLiteral = 9, Anchor = 10, Alias = 11, Tag = 12, BlockLiteralContent = 13, BracketL = 19, FlowSequence = 20, Colon = 29, BraceL = 33, FlowMapping = 34, BlockLiteralHeader = 47;
 const type_Top = 0, type_Seq = 1, type_Map = 2, type_Flow = 3, type_Lit = 4;

package/out/renderer/assets/{index-CzJMsYKD.js → index-jZN-YHoh.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-BJAGPaLC.js","./fonts-ChEL5asK.js","./fonts-B9KBGB-g.css","./index-DTD3Qh6P.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);
@@ -35684,7 +35698,9 @@ const useMessageInput = ({
     setHistoryIndex(null);
     draftMessageRef.current = "";
     if (scrollToBottom) {
-      scrollToBottom();
+      setTimeout(() => {
+        scrollToBottom();
+      }, 150);
     }
   }, [inputValue, onSubmit, scrollToBottom]);
   const getCursorPosition = reactExports.useCallback(() => {
@@ -37354,7 +37370,7 @@ const useStreamingMessage = ({
               };
               doRefetch();
             }
-          }, 100);
+          }, 500);
         }
       } else {
         updateStreamingMessage(messageId, messageData);
@@ -37583,24 +37599,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 +37612,7 @@ const useStreamingMessage = ({
     keepAlive,
     safeDisconnect,
     messageId,
-    completeStreamingMessage,
-    refetchMessage,
-    refetchOnComplete
+    completeStreamingMessage
   ]);
   return {
     message: message2,
@@ -56079,7 +56081,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: [
@@ -56747,32 +56755,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 +56779,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 +56791,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 +56844,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 +56894,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 +56908,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 +56979,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 +57088,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 +57139,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 +57157,7 @@ const AgentsPage = () => {
         }, 0);
       }
     }
-  }, [effectiveAgentId, agents]);
+  }, [effectiveAgentId, agents, clearLastAgentId, clearAgentId]);
   reactExports.useEffect(() => {
     if (agentId) {
       setLastAgentsPageAgentId(agentId);
@@ -57855,12 +57844,15 @@ const DirectoryIndicator = ({
     )
   ] }) });
 };
-const UtilitiesContainer = styled$1(Box)(({ theme: theme2 }) => ({
-  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
-}));
+const UtilitiesContainer = styled$1(Box)(
+  ({ 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)}`,
+    // Apply minHeight only when collapsed to allow expansion
+    minHeight: expanded ? "auto" : 52
+  })
+);
 const UtilitiesHeader = styled$1(Box)(({ theme: theme2 }) => ({
   display: "flex",
   alignItems: "center",
@@ -57888,7 +57880,7 @@ const ChatUtilities = ({
     setExpanded(!expanded);
   };
   if (!agentId) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(UtilitiesContainer, { children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(UtilitiesContainer, { expanded, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(UtilitiesHeader, { onClick: toggleExpanded, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         IconButton,
@@ -76428,7 +76420,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-BJAGPaLC.js"), true ? __vite__mapDeps([0,1,2]) : void 0, import.meta.url).then((m2) => m2.go());
     }
   }),
   /* @__PURE__ */ LanguageDescription.of({
@@ -76605,7 +76597,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-DTD3Qh6P.js"), true ? __vite__mapDeps([3,1,2]) : void 0, import.meta.url).then((m2) => m2.yaml());
     }
   }),
   // Legacy modes ported from CodeMirror 5
@@ -178232,7 +178224,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 +178250,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 +178258,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 +178308,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 +178336,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 +178390,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 +178404,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 +178434,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 +178462,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 +178574,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 +178703,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");

package/out/renderer/index.html

@@ -9,7 +9,7 @@
   <meta http-equiv="Content-Security-Policy"
     content="default-src 'self'; connect-src 'self' http://localhost:1111 http://127.0.0.1:1111 ws://localhost:1111 ws://127.0.0.1:1111 http://localhost:8080 http://127.0.0.1:8080 https://api.radienthq.com https://us.i.posthog.com https://login.microsoftonline.com https://accounts.google.com; script-src 'self' https://us-assets.i.posthog.com https://accounts.google.com https://login.microsoftonline.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: http://localhost:1111 http://127.0.0.1:1111; media-src 'self' http://localhost:1111 http://127.0.0.1:1111; font-src 'self'; frame-src 'self' https://accounts.google.com https://login.microsoftonline.com" />
   <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin-allow-popups" />
-  <script type="module" crossorigin src="./assets/index-CzJMsYKD.js"></script>
+  <script type="module" crossorigin src="./assets/index-jZN-YHoh.js"></script>
   <link rel="modulepreload" crossorigin href="./assets/fonts-ChEL5asK.js">
   <link rel="stylesheet" crossorigin href="./assets/fonts-B9KBGB-g.css">
   <link rel="stylesheet" crossorigin href="./assets/index-0vP6mKPB.css">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "local-operator-ui",
-	"version": "0.5.1",
+	"version": "0.5.2",
 	"productName": "Local Operator",
 	"description": "User interface for AI agent assistants that run Python code safely on your device through an intuitive chat interface. Supports local and cloud LLM models with built-in security features.",
 	"main": "./out/main/index.js",