local-operator-ui 0.4.4 → 0.4.6

package/out/renderer/assets/{index-ChdP-bmN.js → index-BNTp0j7e.js}

@@ -35031,7 +35031,7 @@ const useJobPolling = ({
     currentExecution
   };
 };
-const useScrollToBottom = (dependencies = [], threshold = 100, buttonThreshold = 50) => {
+const useScrollToBottom = (dependencies = [], threshold = 150, buttonThreshold = 50) => {
   const ref = reactExports.useRef(null);
   const containerRef = reactExports.useRef(null);
   const [shouldScrollToBottom, setShouldScrollToBottom] = reactExports.useState(true);
@@ -35149,7 +35149,7 @@ const SidebarContainer$6 = styled$1(Box)({
   width: 280,
   height: "100%"
 });
-const ContentContainer$4 = styled$1(Box)({
+const ContentContainer$5 = styled$1(Box)({
   flexGrow: 1,
   height: "100%",
   overflow: "hidden"
@@ -35161,7 +35161,7 @@ styled$1(Divider)(({ theme }) => ({
 const ChatLayout = ({ sidebar, content: content2 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Container$1, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarContainer$6, { children: sidebar }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ContentContainer$4, { children: content2 })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ContentContainer$5, { children: content2 })
   ] });
 };
 const normalizePath = (path2) => {
@@ -35480,7 +35480,7 @@ const useUpdateAgent = () => {
     }
   });
 };
-const StyledDialog = styled$1(Dialog)(({ theme }) => ({
+const StyledDialog$1 = styled$1(Dialog)(({ theme }) => ({
   "& .MuiBackdrop-root": {
     backdropFilter: "blur(8px)",
     backgroundColor: alpha(theme.palette.background.default, 0.7)
@@ -35527,7 +35527,7 @@ const StyledDialog = styled$1(Dialog)(({ theme }) => ({
     backgroundColor: theme.palette.background.default
   }
 }));
-const StyledDialogActions = styled$1(DialogActions)(({ theme }) => ({
+const StyledDialogActions$1 = styled$1(DialogActions)(({ theme }) => ({
   padding: "12px 24px 20px 24px",
   gap: 12,
   borderTop: `1px solid ${alpha(theme.palette.divider, 0.1)}`
@@ -35555,7 +35555,7 @@ const BaseDialog = ({
   dialogProps = {}
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    StyledDialog,
+    StyledDialog$1,
     {
       open: open2,
       onClose,
@@ -35565,7 +35565,7 @@ const BaseDialog = ({
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: typeof title === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", fontWeight: 600, children: title }) : title }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(DialogContent, { children }),
-        actions && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledDialogActions, { children: actions })
+        actions && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledDialogActions$1, { children: actions })
       ]
     }
   );
@@ -48437,7 +48437,7 @@ const MessageInput = ({
         StyledTextField$2,
         {
           fullWidth: true,
-          placeholder: isInputDisabled ? "⌛ Agent is busy" : "Ask me for help",
+          placeholder: isInputDisabled ? "Agent is busy" : "Ask me for help",
           value: newMessage,
           onChange: (e) => setNewMessage(e.target.value),
           onKeyDown: handleKeyDown,
@@ -85917,7 +85917,7 @@ const AgentAvatar$2 = styled$1(Avatar)(({ theme }) => ({
   boxShadow: "none",
   border: "none"
 }));
-const ContentContainer$3 = styled$1(Box)(() => ({
+const ContentContainer$4 = styled$1(Box)(() => ({
   display: "flex",
   flexDirection: "column",
   gap: 8,
@@ -86111,7 +86111,7 @@ const LoadingIndicator = ({ status, currentExecution, scrollToBottom }) => {
     ref,
     scrollToBottom: scrollToBottomHook,
     isFarFromBottom
-  } = useScrollToBottom([status, currentExecution, message2], 100, 50);
+  } = useScrollToBottom([status, currentExecution, message2], 150, 50);
   reactExports.useEffect(() => {
     if (codeSnippet && isCodeExpanded && !isStreaming && !isFarFromBottom) {
       requestAnimationFrame(() => {
@@ -86139,7 +86139,7 @@ const LoadingIndicator = ({ status, currentExecution, scrollToBottom }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingContainer$5, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, style: { height: 0, width: 0 } }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(AgentAvatar$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faRobot, size: "sm" }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(ContentContainer$3, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(ContentContainer$4, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(StatusContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(StatusText, { variant: "body2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(StatusTextContent, { children: message2 ? message2 : `${statusText}` }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(StatusControls, { children: [
@@ -105955,12 +105955,12 @@ const MessageContainer = ({
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(StyledContainer$1, { isUser, children });
 };
-const ContentContainer$2 = styled$1(Box)(() => ({
+const ContentContainer$3 = styled$1(Box)(() => ({
   marginBottom: 16
 }));
 const MessageContent = ({ content: content2 }) => {
   if (!content2) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ContentContainer$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownRenderer, { content: content2 }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ContentContainer$3, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(MarkdownRenderer, { content: content2 }) });
 };
 const ControlsContainer = styled$1(Box, {
   shouldForwardProp: (prop) => prop !== "isUser"
@@ -108493,7 +108493,8 @@ const MessagePaper = ({
   children,
   content: content2,
   message: message2,
-  onMessageComplete
+  onMessageComplete,
+  isLastMessage
 }) => {
   const theme = useTheme$1();
   if (isUser) {
@@ -108552,29 +108553,34 @@ const MessagePaper = ({
     }
     return children;
   }, [children]);
-  const {
-    ref: scrollRef,
-    forceScrollToBottom,
-    isNearBottom
-  } = useScrollToBottom(
-    // Dependencies that should trigger scroll evaluation
-    [content2, isStreamable, message2?.is_complete],
-    150,
-    // Threshold for "near bottom" in pixels
-    50
-    // Threshold for showing scroll button
-  );
-  reactExports.useEffect(() => {
-    if (!isStreamable || !message2) return;
-    const scrollInterval = setInterval(() => {
-      if (isNearBottom) {
-        forceScrollToBottom();
-      }
-    }, 350);
-    return () => {
-      clearInterval(scrollInterval);
-    };
-  }, [isStreamable, message2, forceScrollToBottom, isNearBottom]);
+  let scrollRef = null;
+  let forceScrollToBottom = () => {
+  };
+  let isNearBottom = false;
+  if (isLastMessage) {
+    const scrollHook = useScrollToBottom(
+      // Dependencies that should trigger scroll evaluation
+      [content2, isStreamable, message2?.is_complete],
+      250,
+      // Threshold for "near bottom" in pixels
+      50
+      // Threshold for showing scroll button
+    );
+    scrollRef = scrollHook.ref;
+    forceScrollToBottom = scrollHook.forceScrollToBottom;
+    isNearBottom = scrollHook.isNearBottom;
+    reactExports.useEffect(() => {
+      if (!isStreamable || !message2) return;
+      const scrollInterval = setInterval(() => {
+        if (isNearBottom) {
+          forceScrollToBottom();
+        }
+      }, 350);
+      return () => {
+        clearInterval(scrollInterval);
+      };
+    }, [isStreamable, message2, forceScrollToBottom, isNearBottom]);
+  }
   const streamingMessageComponent = reactExports.useMemo(() => {
     if (!isStreamable || !message2) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -108588,20 +108594,13 @@ const MessagePaper = ({
         conversationId: message2.conversation_id,
         refetchOnComplete: true,
         onComplete: () => {
-          forceScrollToBottom();
           if (onMessageComplete) {
             onMessageComplete();
           }
         }
       }
     );
-  }, [
-    isStreamable,
-    message2,
-    messageStyles,
-    onMessageComplete,
-    forceScrollToBottom
-  ]);
+  }, [isStreamable, message2, messageStyles, onMessageComplete]);
   const regularMessageComponents = reactExports.useMemo(() => {
     if (isStreamable) return null;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
@@ -108749,7 +108748,7 @@ const getAttachmentUrl = (client, path2) => {
   return path2;
 };
 const MessageItem = reactExports.memo(
-  ({ message: message2, onMessageComplete }) => {
+  ({ message: message2, onMessageComplete, isLastMessage }) => {
     const shouldHide = (message2.action === "DONE" || message2.action === "ASK") && message2.execution_type === "action" && message2.task_classification === "conversation" || !message2.message && (!message2.files || message2.files.length === 0) && !message2.code && !message2.stdout && !message2.stderr && !message2.logging && message2.is_complete;
     if (shouldHide) {
       return null;
@@ -108802,6 +108801,7 @@ const MessageItem = reactExports.memo(
           content: message2.message,
           message: message2,
           onMessageComplete,
+          isLastMessage,
           children: [
             message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
               ImageAttachment,
@@ -108868,6 +108868,7 @@ const MessageItem = reactExports.memo(
               content: message2.message,
               message: message2,
               onMessageComplete,
+              isLastMessage,
               children: [
                 message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.files.filter((file) => isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsx(
                   ImageAttachment,
@@ -109012,7 +109013,7 @@ const MessagesView = ({
       messages.length > 0 ? (
         // Only render visible messages plus a buffer
         /* @__PURE__ */ jsxRuntimeExports.jsxs(CenteredMessagesContainer, { children: [
-          messages.map((message2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          messages.map((message2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             MessageItem,
             {
               message: {
@@ -109020,6 +109021,7 @@ const MessagesView = ({
                 conversation_id: conversationId
                 // Add conversation ID to message
               },
+              isLastMessage: index2 === messages.length - 1,
               onMessageComplete: () => {
                 if (refetch) {
                   refetch();
@@ -110502,6 +110504,7 @@ const PlaceholderView = ({
   ] });
 };
 const ChatPage = () => {
+  const didAutoScrollRef = React$1.useRef(false);
   const { agentId, navigateToAgent, clearAgentId } = useAgentRouteParam();
   const navigate = useNavigate();
   const queryClient2 = useQueryClient();
@@ -110555,7 +110558,7 @@ const ChatPage = () => {
     isFarFromBottom,
     scrollToBottom,
     forceScrollToBottom
-  } = useScrollToBottom(scrollDependencies, 100);
+  } = useScrollToBottom(scrollDependencies, 150);
   reactExports.useEffect(() => {
     if (effectiveAgentId && agents.length > 0) {
       const agentExists = agents.some((agent) => agent.id === effectiveAgentId);
@@ -110585,6 +110588,39 @@ const ChatPage = () => {
     forceScrollToBottom,
     getMessages
   ]);
+  reactExports.useEffect(() => {
+    didAutoScrollRef.current = false;
+  }, [agentId]);
+  reactExports.useEffect(() => {
+    if (!didAutoScrollRef.current && agentId && !isLoadingMessages && messages.length > 0) {
+      const container = messagesContainerRef.current;
+      if (!container) return;
+      let lastScrollHeight = container.scrollHeight;
+      let stableCounter = 0;
+      const maxStableCount = 3;
+      const interval = setInterval(() => {
+        const currentScrollHeight = container.scrollHeight;
+        if (currentScrollHeight !== lastScrollHeight) {
+          lastScrollHeight = currentScrollHeight;
+          stableCounter = 0;
+        } else {
+          stableCounter++;
+        }
+        if (stableCounter >= maxStableCount) {
+          clearInterval(interval);
+          forceScrollToBottom();
+          didAutoScrollRef.current = true;
+        }
+      }, 100);
+      setTimeout(() => clearInterval(interval), 5e3);
+    }
+  }, [
+    agentId,
+    isLoadingMessages,
+    messages.length,
+    forceScrollToBottom,
+    messagesContainerRef
+  ]);
   reactExports.useEffect(() => {
     if (conversationId) {
       checkForActiveJobs(conversationId);
@@ -112423,7 +112459,7 @@ const SidebarContainer$2 = styled$1(Box)({
   width: 280,
   height: "100%"
 });
-const ContentContainer$1 = styled$1(Box)({
+const ContentContainer$2 = styled$1(Box)({
   flexGrow: 1,
   height: "100%",
   overflow: "hidden"
@@ -112517,7 +112553,7 @@ const AgentsPage = () => {
         onSelectAgent: handleSelectAgent
       }
     ) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(ContentContainer$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ContentInnerContainer, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ContentContainer$2, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ContentInnerContainer, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { position: "relative", width: "100%", mb: 2 }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           PageHeader,
@@ -113257,6 +113293,128 @@ const useOnboardingStore = create$1()(
     }
   )
 );
+const StyledDialog = styled$1(Dialog)(({ theme }) => ({
+  "& .MuiBackdrop-root": {
+    // Apply gradient to the backdrop for full screen effect
+    background: "linear-gradient(135deg, rgba(30,30,30,1), rgba(15,15,15,0.95), rgba(5,5,5,1), rgba(56,201,106,0.1))",
+    opacity: 1
+  },
+  "& .MuiPaper-root": {
+    margin: 0,
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "transparent",
+    backgroundImage: "none",
+    boxShadow: "none",
+    overflow: "hidden",
+    [theme.breakpoints.down("sm")]: {
+      padding: theme.spacing(3, 2, 2)
+    },
+    [theme.breakpoints.up("xs")]: {
+      minWidth: "300px"
+    },
+    [theme.breakpoints.up("sm")]: {
+      minWidth: "400px"
+    },
+    [theme.breakpoints.up("md")]: {
+      minWidth: "500px"
+    }
+  },
+  "& .MuiDialogContent-root": {
+    // Remove explicit background to let parent gradient show through
+    "&:first-of-type": {
+      paddingTop: 16
+    },
+    overflow: "auto",
+    "&::-webkit-scrollbar": {
+      width: "8px"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: alpha(
+        theme.palette.mode === "dark" ? theme.palette.common.white : theme.palette.common.black,
+        0.1
+      ),
+      borderRadius: "4px"
+    }
+  }
+}));
+const ContentContainer$1 = styled$1("div")(() => ({
+  width: "100%",
+  height: "100%",
+  maxWidth: "780px",
+  maxHeight: "680px",
+  boxSizing: "border-box",
+  display: "flex",
+  flexDirection: "column",
+  flexGrow: 1
+}));
+const StyledDialogTitle = styled$1(DialogTitle)(({ theme }) => ({
+  margin: 0,
+  paddingLeft: theme.spacing(3),
+  // Add horizontal padding
+  paddingRight: theme.spacing(3),
+  // Add horizontal padding
+  color: theme.palette.text.primary,
+  // Remove explicit background
+  "& .MuiTypography-root": {
+    fontWeight: 400,
+    fontSize: "2rem"
+  }
+}));
+const StyledDialogContent = styled$1(DialogContent)(({ theme }) => ({
+  paddingLeft: theme.spacing(3),
+  // Add horizontal padding
+  paddingRight: theme.spacing(3),
+  // Add horizontal padding
+  flexGrow: 1,
+  overflowY: "auto",
+  width: "100%",
+  // Ensure it takes full width before padding
+  boxSizing: "border-box"
+}));
+const StyledDialogActions = styled$1(DialogActions)(({ theme }) => ({
+  paddingLeft: theme.spacing(3),
+  // Add horizontal padding
+  paddingRight: theme.spacing(3),
+  // Add horizontal padding
+  marginTop: theme.spacing(2),
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+  width: "100%",
+  boxSizing: "border-box"
+  // Remove explicit background
+}));
+const OnboardingDialog = ({
+  open: open2,
+  title,
+  stepIndicators,
+  children,
+  actions,
+  dialogProps = {}
+}) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    StyledDialog,
+    {
+      open: open2,
+      onClose: () => {
+      },
+      fullScreen: true,
+      disableEscapeKeyDown: true,
+      ...dialogProps,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(ContentContainer$1, { children: [
+        title && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledDialogTitle, { children: title }),
+        stepIndicators,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(StyledDialogContent, { children }),
+        actions && /* @__PURE__ */ jsxRuntimeExports.jsx(StyledDialogActions, { children: actions })
+      ] })
+    }
+  );
+};
 const fadeIn = keyframes`
   from {
     opacity: 0;
@@ -113278,46 +113436,6 @@ const pulse = keyframes`
     transform: scale(1);
   }
 `;
-styled$1(Dialog)(({ theme }) => ({
-  "& .MuiBackdrop-root": {
-    backdropFilter: "blur(12px)",
-    backgroundColor: alpha(theme.palette.background.default, 0.7)
-  },
-  "& .MuiDialog-paper": {
-    borderRadius: 16,
-    maxWidth: 700,
-    width: "100%",
-    backgroundColor: alpha(theme.palette.background.paper, 0.95),
-    boxShadow: `0 15px 50px ${alpha(theme.palette.primary.main, 0.2)}, 0 10px 40px ${alpha(theme.palette.common.black, 0.4)}`,
-    border: `1px solid ${alpha(theme.palette.primary.main, 0.1)}`,
-    overflow: "hidden",
-    animation: `${fadeIn} 0.4s ease-out`
-  }
-}));
-styled$1(DialogTitle)(({ theme }) => ({
-  padding: "24px 28px 16px 28px",
-  fontSize: "1.35rem",
-  fontWeight: 700,
-  textAlign: "center",
-  borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
-  background: `linear-gradient(to right, ${alpha(theme.palette.primary.main, 0.05)}, ${alpha(theme.palette.background.default, 0.8)}, ${alpha(theme.palette.primary.main, 0.05)})`,
-  color: theme.palette.primary.main
-}));
-styled$1(DialogContent)(({ theme }) => ({
-  padding: "20px 28px",
-  display: "flex",
-  flexDirection: "column",
-  gap: theme.spacing(3),
-  backgroundColor: theme.palette.background.default,
-  animation: `${fadeIn} 0.5s ease-out`
-}));
-styled$1(DialogActions)(({ theme }) => ({
-  padding: "16px 28px 24px 28px",
-  justifyContent: "space-between",
-  gap: 16,
-  borderTop: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
-  background: `linear-gradient(to right, ${alpha(theme.palette.primary.main, 0.05)}, ${alpha(theme.palette.background.default, 0.8)}, ${alpha(theme.palette.primary.main, 0.05)})`
-}));
 styled$1(Button)(({ theme }) => ({
   borderRadius: 8,
   padding: "10px 24px",
@@ -113371,28 +113489,35 @@ const StepIndicatorContainer = styled$1(Box)(({ theme }) => ({
   padding: theme.spacing(1, 0)
 }));
 const StepDot = styled$1(Box, {
-  shouldForwardProp: (prop) => prop !== "active"
-})(({ theme, active }) => ({
-  width: active ? 12 : 10,
-  height: active ? 12 : 10,
-  borderRadius: "50%",
-  backgroundColor: active ? theme.palette.primary.main : alpha(theme.palette.primary.main, 0.25),
-  boxShadow: active ? `0 0 10px ${alpha(theme.palette.primary.main, 0.5)}` : "none",
-  transition: "all 0.3s ease-in-out",
-  animation: active ? `${pulse} 2s infinite ease-in-out` : "none"
-}));
-const SectionContainer = styled$1(Paper)(({ theme }) => ({
-  padding: theme.spacing(3.5),
-  borderRadius: 12,
-  boxShadow: `0 4px 20px ${alpha(theme.palette.common.black, 0.08)}`,
-  border: `1px solid ${alpha(theme.palette.primary.main, 0.1)}`,
-  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.95)} 0%, ${alpha(theme.palette.background.paper, 0.85)} 100%)`,
-  animation: `${fadeIn} 0.5s ease-out`,
-  transition: "transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out",
-  "&:hover": {
-    boxShadow: `0 6px 25px ${alpha(theme.palette.primary.main, 0.15)}`,
-    transform: "translateY(-2px)"
+  shouldForwardProp: (prop) => prop !== "active" && prop !== "visited"
+})(({ theme, active, visited }) => {
+  const baseSize = 10;
+  const activeSize = 12;
+  let backgroundColor = alpha(theme.palette.primary.main, 0.25);
+  let boxShadow = "none";
+  let animationStyle = "none";
+  if (active) {
+    backgroundColor = theme.palette.primary.main;
+    boxShadow = `0 0 10px ${alpha(theme.palette.primary.main, 0.5)}`;
+    animationStyle = `${pulse} 2s infinite ease-in-out`;
+  } else if (visited) {
+    backgroundColor = theme.palette.primary.main;
   }
+  return {
+    width: active ? activeSize : baseSize,
+    height: active ? activeSize : baseSize,
+    borderRadius: "50%",
+    backgroundColor,
+    boxShadow,
+    transition: "all 0.3s ease-in-out",
+    animation: animationStyle,
+    cursor: visited ? "pointer" : "default",
+    opacity: !visited && !active ? 0.4 : 1
+  };
+});
+const SectionContainer = styled$1("div")(() => ({
+  animation: `${fadeIn} 0.5s ease-out`,
+  transition: "transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out"
 }));
 const SectionTitle$2 = styled$1(Typography)(({ theme }) => ({
   fontSize: "1.25rem",
@@ -114223,13 +114348,6 @@ const ModelCredentialStep = () => {
   const { data: credentialsData } = useCredentials();
   const updateCredentialMutation = useUpdateCredential();
   const { refreshModels } = useModels();
-  reactExports.useEffect(() => {
-    if (credentialsData?.keys.includes(selectedCredential) && !saveSuccess) {
-      setError("This credential is already set");
-    } else {
-      setError("");
-    }
-  }, [selectedCredential, credentialsData, saveSuccess]);
   const handleCredentialChange = (event) => {
     setSelectedCredential(event.target.value);
     setCredentialValue("");
@@ -114282,7 +114400,6 @@ const ModelCredentialStep = () => {
     (cred) => cred.key === selectedCredential
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionContainer, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionTitle$2, { children: "Add Model Provider Credential" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionDescription$2, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "✨" }),
       " To unlock the power of AI models, you need to add at least one model provider API key. Your key will be securely stored on your device and used to access amazing AI capabilities!"
@@ -114472,10 +114589,15 @@ const ModelCredentialStep = () => {
     ] })
   ] });
 };
+const RECOMMENDED_CREDENTIAL = "TAVILY_API_KEY";
 const SearchApiStep = () => {
   const searchApiCredentials = CREDENTIAL_MANIFEST.filter(
     (cred) => cred.key === "TAVILY_API_KEY" || cred.key === "SERP_API_KEY"
-  );
+  ).sort((a, b2) => {
+    if (a.key === RECOMMENDED_CREDENTIAL) return -1;
+    if (b2.key === RECOMMENDED_CREDENTIAL) return 1;
+    return 0;
+  });
   const [selectedCredential, setSelectedCredential] = reactExports.useState(
     searchApiCredentials[0]?.key || ""
   );
@@ -114486,13 +114608,6 @@ const SearchApiStep = () => {
   const successTimeoutRef = reactExports.useRef(null);
   const { data: credentialsData } = useCredentials();
   const updateCredentialMutation = useUpdateCredential();
-  reactExports.useEffect(() => {
-    if (credentialsData?.keys.includes(selectedCredential) && !saveSuccess) {
-      setError("This credential is already set");
-    } else {
-      setError("");
-    }
-  }, [selectedCredential, credentialsData, saveSuccess]);
   const handleCredentialChange = (event) => {
     setSelectedCredential(event.target.value);
     setCredentialValue("");
@@ -114541,7 +114656,6 @@ const SearchApiStep = () => {
     (cred) => cred.key === selectedCredential
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionContainer, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionTitle$2, { children: "Enable Web Search (Optional)" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionDescription$2, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🌐" }),
       " Supercharge your AI agents with the ability to search the web for real-time information! This optional feature gives your AI assistants access to the latest data from across the internet."
@@ -114605,7 +114719,7 @@ const SearchApiStep = () => {
                 value: selectedCredential,
                 onChange: handleCredentialChange,
                 label: "🔎 Search API Provider",
-                children: searchApiCredentials.map((cred) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: cred.key, children: cred.name }, cred.key))
+                children: searchApiCredentials.map((cred) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: cred.key, children: cred.key === RECOMMENDED_CREDENTIAL ? `${cred.name} (Recommended)` : cred.name }, cred.key))
               }
             ),
             /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperText, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
@@ -114795,7 +114909,6 @@ const UserProfileStep = () => {
     setEmail(e.target.value);
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionContainer, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionTitle$2, { children: "Your Profile Information" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionDescription$2, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🔒" }),
       " This information is stored locally and is only used to personalize your AI experience. It's never shared with any external services - your privacy matters to us!"
@@ -114811,7 +114924,7 @@ const UserProfileStep = () => {
           onChange: handleNameChange,
           error: !!nameError,
           helperText: nameError || "This will be used to create a personalized AI experience",
-          placeholder: "Enter your awesome name",
+          placeholder: "Enter your name",
           required: true,
           InputProps: {
             startAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { style: { marginRight: "8px" }, children: "😎" })
@@ -114870,7 +114983,7 @@ const UserProfileStep = () => {
 };
 const WelcomeStep = () => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { animation: "fadeIn 0.6s ease-out" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
       Typography,
       {
         variant: "body1",
@@ -114880,10 +114993,7 @@ const WelcomeStep = () => {
           fontWeight: 500,
           lineHeight: 1.6
         },
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🚀" }),
-          " Welcome to Local Operator! We're thrilled to have you here! Let's set up your AI environment so you can start creating amazing things with AI agents."
-        ]
+        children: "Let's set up your AI environment so you can start creating amazing things with AI agents!"
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -114941,20 +115051,52 @@ const WelcomeStep = () => {
 const OnboardingModal = ({ open: open2 }) => {
   const { currentStep, setCurrentStep, completeOnboarding } = useOnboardingStore();
   const navigate = useNavigate();
+  const steps = reactExports.useMemo(
+    () => [
+      OnboardingStep.WELCOME,
+      OnboardingStep.USER_PROFILE,
+      OnboardingStep.MODEL_CREDENTIAL,
+      OnboardingStep.SEARCH_API,
+      OnboardingStep.DEFAULT_MODEL,
+      OnboardingStep.CREATE_AGENT,
+      OnboardingStep.CONGRATULATIONS
+    ],
+    []
+  );
+  const stepTitles = {
+    [OnboardingStep.WELCOME]: "Welcome to Local Operator",
+    [OnboardingStep.USER_PROFILE]: "Set Up Your Profile",
+    [OnboardingStep.MODEL_CREDENTIAL]: "Add Model Provider Credentials",
+    [OnboardingStep.SEARCH_API]: "Enable Web Search (Recommended)",
+    [OnboardingStep.DEFAULT_MODEL]: "Choose Your Default Model",
+    [OnboardingStep.CREATE_AGENT]: "Create Your First Agent",
+    [OnboardingStep.CONGRATULATIONS]: "🎉 Setup Complete!"
+  };
+  const [visitedSteps, setVisitedSteps] = reactExports.useState(
+    /* @__PURE__ */ new Set([currentStep])
+  );
+  reactExports.useEffect(() => {
+    setVisitedSteps((prev2) => {
+      if (prev2.has(currentStep)) return prev2;
+      const updated = new Set(prev2);
+      updated.add(currentStep);
+      return updated;
+    });
+  }, [currentStep]);
   const stepTitle = reactExports.useMemo(() => {
     switch (currentStep) {
       case OnboardingStep.WELCOME:
-        return "👋 Welcome to Local Operator";
+        return "Welcome to Local Operator";
       case OnboardingStep.USER_PROFILE:
-        return "👤 Set Up Your Profile";
+        return "Set Up Your Profile";
       case OnboardingStep.MODEL_CREDENTIAL:
-        return "🔑 Add Model Provider Credential";
+        return "Add Model Provider Credentials";
       case OnboardingStep.SEARCH_API:
-        return "🔍 Enable Web Search (Optional)";
+        return "Enable Web Search (Recommended)";
       case OnboardingStep.DEFAULT_MODEL:
-        return "🤖 Choose Your Default Model";
+        return "Choose Your Default Model";
       case OnboardingStep.CREATE_AGENT:
-        return "✨ Create Your First Agent";
+        return "Create Your First Agent";
       case OnboardingStep.CONGRATULATIONS:
         return "🎉 Setup Complete!";
       default:
@@ -115042,48 +115184,58 @@ const OnboardingModal = ({ open: open2 }) => {
   const handleSkip = reactExports.useCallback(() => {
     if (currentStep === OnboardingStep.SEARCH_API) {
       setCurrentStep(OnboardingStep.DEFAULT_MODEL);
+    } else if (currentStep === OnboardingStep.CREATE_AGENT) {
+      setCurrentStep(OnboardingStep.CONGRATULATIONS);
     }
   }, [currentStep, setCurrentStep]);
-  const canSkip = currentStep === OnboardingStep.SEARCH_API;
+  const canSkip = currentStep === OnboardingStep.SEARCH_API || currentStep === OnboardingStep.CREATE_AGENT;
   const canGoBack = currentStep !== OnboardingStep.WELCOME && currentStep !== OnboardingStep.CONGRATULATIONS;
   const nextButtonText = currentStep === OnboardingStep.CONGRATULATIONS ? "🚀 Get Started" : "Next →";
-  const renderStepIndicators = () => {
-    const steps = [
-      OnboardingStep.WELCOME,
-      OnboardingStep.USER_PROFILE,
-      OnboardingStep.MODEL_CREDENTIAL,
-      OnboardingStep.SEARCH_API,
-      OnboardingStep.DEFAULT_MODEL,
-      OnboardingStep.CREATE_AGENT,
-      OnboardingStep.CONGRATULATIONS
-    ];
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(StepIndicatorContainer, { children: steps.map((step) => /* @__PURE__ */ jsxRuntimeExports.jsx(StepDot, { active: currentStep === step }, step)) });
-  };
+  const hasCreatedAgent = Boolean(
+    sessionStorage.getItem("onboarding_created_agent_id")
+  );
   const dialogTitle = /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", fontWeight: 600, children: stepTitle });
   const dialogActions = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { children: canGoBack ? /* @__PURE__ */ jsxRuntimeExports.jsx(SecondaryButton, { onClick: handleBack, children: "Back" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Box, {}) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", gap: 2, alignItems: "center" }, children: [
       canSkip && /* @__PURE__ */ jsxRuntimeExports.jsx(SkipButton, { onClick: handleSkip, children: "Skip" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(PrimaryButton, { onClick: handleNext, children: nextButtonText })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        PrimaryButton,
+        {
+          onClick: handleNext,
+          disabled: currentStep === OnboardingStep.CREATE_AGENT && !hasCreatedAgent,
+          children: nextButtonText
+        }
+      )
     ] })
   ] });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    BaseDialog,
+  const stepIndicators = /* @__PURE__ */ jsxRuntimeExports.jsx(StepIndicatorContainer, { children: steps.map((step) => {
+    const isActive = currentStep === step;
+    const isVisited = visitedSteps.has(step);
+    const canNavigate = isVisited && step !== currentStep;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: stepTitles[step], arrow: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Box,
+      {
+        onClick: () => {
+          if (canNavigate) {
+            setCurrentStep(step);
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(StepDot, { active: isActive, visited: isVisited })
+      }
+    ) }, step);
+  }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    OnboardingDialog,
     {
       open: open2,
-      onClose: () => {
-      },
       title: dialogTitle,
+      stepIndicators,
       actions: dialogActions,
-      maxWidth: "md",
-      fullWidth: true,
       dialogProps: {
         disableEscapeKeyDown: true
       },
-      children: [
-        renderStepIndicators(),
-        stepContent
-      ]
+      children: stepContent
     }
   );
 };

package/out/renderer/index.html

@@ -8,7 +8,7 @@
   <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
   <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; script-src 'self'; 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'" />
-  <script type="module" crossorigin src="./assets/index-ChdP-bmN.js"></script>
+  <script type="module" crossorigin src="./assets/index-BNTp0j7e.js"></script>
   <link rel="modulepreload" crossorigin href="./assets/error-boundary-BSN19Qr4.js">
   <link rel="stylesheet" crossorigin href="./assets/error-boundary-B9KBGB-g.css">
   <link rel="stylesheet" crossorigin href="./assets/index-94BTFuhu.css">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "local-operator-ui",
-	"version": "0.4.4",
+	"version": "0.4.6",
 	"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",
@@ -76,7 +76,9 @@
 		"@tanstack/react-query": "^5.67.1",
 		"@tanstack/react-query-devtools": "^5.67.1",
 		"date-fns": "^4.1.0",
+		"dmg-builder": "24.13.3",
 		"dotenv": "^16.4.7",
+		"electron-builder-squirrel-windows": "26.0.12",
 		"electron-debug": "^3.2.0",
 		"electron-log": "^4.4.8",
 		"electron-updater": "^6.1.4",
@@ -200,7 +202,8 @@
 					"arch": ["x64", "arm64"]
 				}
 			],
-			"artifactName": "${name}-setup-${version}-${arch}.${ext}"
+			"artifactName": "${name}-setup-${version}-${arch}.${ext}",
+			"verifyUpdateCodeSignature": false
 		},
 		"nsis": {
 			"createDesktopShortcut": true,