local-operator-ui 0.1.0 → 0.1.1

package/out/renderer/assets/{index-BCnP7htg.js → index-VQ62D3K7.js}

@@ -5434,7 +5434,7 @@ const useThemePropsDefault = (inProps) => useThemeProps({
   name: "MuiContainer",
   defaultTheme: defaultTheme$2
 });
-const useUtilityClasses$U = (ownerState, componentName) => {
+const useUtilityClasses$V = (ownerState, componentName) => {
   const getContainerUtilityClass = (slot) => {
     return generateUtilityClass(componentName, slot);
   };
@@ -5524,7 +5524,7 @@ function createContainer(options = {}) {
       fixed,
       maxWidth: maxWidth2
     };
-    const classes = useUtilityClasses$U(ownerState, componentName);
+    const classes = useUtilityClasses$V(ownerState, componentName);
     return (
       // @ts-ignore theme is injected by the styled util
       /* @__PURE__ */ jsxRuntimeExports.jsx(ContainerRoot, {
@@ -6723,7 +6723,7 @@ function getSvgIconUtilityClass(slot) {
   return generateUtilityClass("MuiSvgIcon", slot);
 }
 generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
-const useUtilityClasses$T = (ownerState) => {
+const useUtilityClasses$U = (ownerState) => {
   const {
     color: color2,
     fontSize,
@@ -6862,7 +6862,7 @@ const SvgIcon = /* @__PURE__ */ reactExports.forwardRef(function SvgIcon2(inProp
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$T(ownerState);
+  const classes = useUtilityClasses$U(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -14104,7 +14104,7 @@ function getCollapseUtilityClass(slot) {
   return generateUtilityClass("MuiCollapse", slot);
 }
 generateUtilityClasses("MuiCollapse", ["root", "horizontal", "vertical", "entered", "hidden", "wrapper", "wrapperInner"]);
-const useUtilityClasses$S = (ownerState) => {
+const useUtilityClasses$T = (ownerState) => {
   const {
     orientation,
     classes
@@ -14232,7 +14232,7 @@ const Collapse = /* @__PURE__ */ reactExports.forwardRef(function Collapse2(inPr
     orientation,
     collapsedSize: collapsedSizeProp
   };
-  const classes = useUtilityClasses$S(ownerState);
+  const classes = useUtilityClasses$T(ownerState);
   const theme2 = useTheme();
   const timer = useTimeout();
   const wrapperRef = reactExports.useRef(null);
@@ -14393,7 +14393,7 @@ function getPaperUtilityClass(slot) {
   return generateUtilityClass("MuiPaper", slot);
 }
 generateUtilityClasses("MuiPaper", ["root", "rounded", "outlined", "elevation", "elevation0", "elevation1", "elevation2", "elevation3", "elevation4", "elevation5", "elevation6", "elevation7", "elevation8", "elevation9", "elevation10", "elevation11", "elevation12", "elevation13", "elevation14", "elevation15", "elevation16", "elevation17", "elevation18", "elevation19", "elevation20", "elevation21", "elevation22", "elevation23", "elevation24"]);
-const useUtilityClasses$R = (ownerState) => {
+const useUtilityClasses$S = (ownerState) => {
   const {
     square,
     elevation,
@@ -14465,7 +14465,7 @@ const Paper = /* @__PURE__ */ reactExports.forwardRef(function Paper2(inProps, r
     square,
     variant
   };
-  const classes = useUtilityClasses$R(ownerState);
+  const classes = useUtilityClasses$S(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(PaperRoot, {
     as: component,
     ownerState,
@@ -14917,7 +14917,7 @@ function getButtonBaseUtilityClass(slot) {
   return generateUtilityClass("MuiButtonBase", slot);
 }
 const buttonBaseClasses = generateUtilityClasses("MuiButtonBase", ["root", "disabled", "focusVisible"]);
-const useUtilityClasses$Q = (ownerState) => {
+const useUtilityClasses$R = (ownerState) => {
   const {
     disabled: disabled2,
     focusVisible,
@@ -15134,7 +15134,7 @@ const ButtonBase = /* @__PURE__ */ reactExports.forwardRef(function ButtonBase2(
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$Q(ownerState);
+  const classes = useUtilityClasses$R(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
@@ -15232,7 +15232,7 @@ const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css$1`
 const dashAnimation = typeof circularDashKeyframe !== "string" ? css$1`
         animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
       ` : null;
-const useUtilityClasses$P = (ownerState) => {
+const useUtilityClasses$Q = (ownerState) => {
   const {
     classes,
     variant,
@@ -15355,7 +15355,7 @@ const CircularProgress = /* @__PURE__ */ reactExports.forwardRef(function Circul
     value,
     variant
   };
-  const classes = useUtilityClasses$P(ownerState);
+  const classes = useUtilityClasses$Q(ownerState);
   const circleStyle = {};
   const rootStyle = {};
   const rootProps = {};
@@ -15400,7 +15400,7 @@ function getIconButtonUtilityClass(slot) {
   return generateUtilityClass("MuiIconButton", slot);
 }
 const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]);
-const useUtilityClasses$O = (ownerState) => {
+const useUtilityClasses$P = (ownerState) => {
   const {
     classes,
     disabled: disabled2,
@@ -15586,7 +15586,7 @@ const IconButton = /* @__PURE__ */ reactExports.forwardRef(function IconButton2(
     loadingIndicator,
     size
   };
-  const classes = useUtilityClasses$O(ownerState);
+  const classes = useUtilityClasses$P(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconButtonRoot, {
     id: loading ? loadingId : idProp,
     className: clsx(classes.root, className),
@@ -15625,7 +15625,7 @@ const InfoOutlinedIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("pa
 const ClearIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 }), "Close");
-const useUtilityClasses$N = (ownerState) => {
+const useUtilityClasses$O = (ownerState) => {
   const {
     variant,
     color: color2,
@@ -15780,7 +15780,7 @@ const Alert = /* @__PURE__ */ reactExports.forwardRef(function Alert2(inProps, r
     variant,
     colorSeverity: color2 || severity
   };
-  const classes = useUtilityClasses$N(ownerState);
+  const classes = useUtilityClasses$O(ownerState);
   const externalForwardedProps = {
     slots: {
       closeButton: components.CloseButton,
@@ -15867,7 +15867,7 @@ function getTypographyUtilityClass(slot) {
   return generateUtilityClass("MuiTypography", slot);
 }
 const typographyClasses = generateUtilityClasses("MuiTypography", ["root", "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "inherit", "button", "caption", "overline", "alignLeft", "alignRight", "alignCenter", "alignJustify", "noWrap", "gutterBottom", "paragraph"]);
-const v6Colors = {
+const v6Colors$1 = {
   primary: true,
   secondary: true,
   error: true,
@@ -15879,7 +15879,7 @@ const v6Colors = {
   textDisabled: true
 };
 const extendSxProp = internal_createExtendSxProp();
-const useUtilityClasses$M = (ownerState) => {
+const useUtilityClasses$N = (ownerState) => {
   const {
     align,
     gutterBottom,
@@ -15988,7 +15988,7 @@ const Typography = /* @__PURE__ */ reactExports.forwardRef(function Typography2(
     props: inProps,
     name: "MuiTypography"
   });
-  const isSxColor = !v6Colors[color2];
+  const isSxColor = !v6Colors$1[color2];
   const props = extendSxProp({
     ...themeProps,
     ...isSxColor && {
@@ -16019,7 +16019,7 @@ const Typography = /* @__PURE__ */ reactExports.forwardRef(function Typography2(
     variantMapping
   };
   const Component = component || (paragraph2 ? "p" : variantMapping[variant] || defaultVariantMapping[variant]) || "span";
-  const classes = useUtilityClasses$M(ownerState);
+  const classes = useUtilityClasses$N(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TypographyRoot, {
     as: Component,
     ref,
@@ -18304,7 +18304,7 @@ function resolveAnchorEl$1(anchorEl) {
 function isHTMLElement(element2) {
   return element2.nodeType !== void 0;
 }
-const useUtilityClasses$L = (ownerState) => {
+const useUtilityClasses$M = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -18405,7 +18405,7 @@ const PopperTooltip = /* @__PURE__ */ reactExports.forwardRef(function PopperToo
   if (TransitionProps !== null) {
     childProps.TransitionProps = TransitionProps;
   }
-  const classes = useUtilityClasses$L(props);
+  const classes = useUtilityClasses$M(props);
   const Root = slots.root ?? "div";
   const rootProps = useSlotProps({
     elementType: Root,
@@ -18553,7 +18553,7 @@ function getListSubheaderUtilityClass(slot) {
   return generateUtilityClass("MuiListSubheader", slot);
 }
 generateUtilityClasses("MuiListSubheader", ["root", "colorPrimary", "colorInherit", "gutters", "inset", "sticky"]);
-const useUtilityClasses$K = (ownerState) => {
+const useUtilityClasses$L = (ownerState) => {
   const {
     classes,
     color: color2,
@@ -18648,7 +18648,7 @@ const ListSubheader = /* @__PURE__ */ reactExports.forwardRef(function ListSubhe
     disableSticky,
     inset
   };
-  const classes = useUtilityClasses$K(ownerState);
+  const classes = useUtilityClasses$L(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListSubheaderRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -18667,7 +18667,7 @@ function getChipUtilityClass(slot) {
   return generateUtilityClass("MuiChip", slot);
 }
 const chipClasses = generateUtilityClasses("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]);
-const useUtilityClasses$J = (ownerState) => {
+const useUtilityClasses$K = (ownerState) => {
   const {
     classes,
     disabled: disabled2,
@@ -19058,7 +19058,7 @@ const Chip = /* @__PURE__ */ reactExports.forwardRef(function Chip2(inProps, ref
     clickable,
     variant
   };
-  const classes = useUtilityClasses$J(ownerState);
+  const classes = useUtilityClasses$K(ownerState);
   const moreProps = component === ButtonBase ? {
     component: ComponentProp || "div",
     focusVisibleClassName: classes.focusVisible,
@@ -19315,7 +19315,7 @@ const inputOverridesResolver = (props, styles2) => {
   } = props;
   return [styles2.input, ownerState.size === "small" && styles2.inputSizeSmall, ownerState.multiline && styles2.inputMultiline, ownerState.type === "search" && styles2.inputTypeSearch, ownerState.startAdornment && styles2.inputAdornedStart, ownerState.endAdornment && styles2.inputAdornedEnd, ownerState.hiddenLabel && styles2.inputHiddenLabel];
 };
-const useUtilityClasses$I = (ownerState) => {
+const useUtilityClasses$J = (ownerState) => {
   const {
     classes,
     color: color2,
@@ -19701,7 +19701,7 @@ const InputBase = /* @__PURE__ */ reactExports.forwardRef(function InputBase2(in
     startAdornment,
     type
   };
-  const classes = useUtilityClasses$I(ownerState);
+  const classes = useUtilityClasses$J(ownerState);
   const Root = slots.root || components.Root || InputBaseRoot;
   const rootProps = slotProps.root || componentsProps.root || {};
   const Input3 = slots.input || components.Input || InputBaseInput;
@@ -19794,7 +19794,7 @@ function getAutocompleteUtilityClass(slot) {
 }
 const autocompleteClasses = generateUtilityClasses("MuiAutocomplete", ["root", "expanded", "fullWidth", "focused", "focusVisible", "tag", "tagSizeSmall", "tagSizeMedium", "hasPopupIcon", "hasClearIcon", "inputRoot", "input", "inputFocused", "endAdornment", "clearIndicator", "popupIndicator", "popupIndicatorOpen", "popper", "popperDisablePortal", "paper", "listbox", "loading", "noOptions", "option", "groupLabel", "groupUl"]);
 var _ClearIcon, _ArrowDropDownIcon;
-const useUtilityClasses$H = (ownerState) => {
+const useUtilityClasses$I = (ownerState) => {
   const {
     classes,
     disablePortal,
@@ -20290,7 +20290,7 @@ const Autocomplete = /* @__PURE__ */ reactExports.forwardRef(function Autocomple
     popupOpen,
     size
   };
-  const classes = useUtilityClasses$H(ownerState);
+  const classes = useUtilityClasses$I(ownerState);
   const externalForwardedProps = {
     slots: {
       paper: PaperComponentProp,
@@ -20505,7 +20505,7 @@ function getAvatarUtilityClass(slot) {
   return generateUtilityClass("MuiAvatar", slot);
 }
 generateUtilityClasses("MuiAvatar", ["root", "colorDefault", "circular", "rounded", "square", "img", "fallback"]);
-const useUtilityClasses$G = (ownerState) => {
+const useUtilityClasses$H = (ownerState) => {
   const {
     classes,
     variant,
@@ -20670,7 +20670,7 @@ const Avatar = /* @__PURE__ */ reactExports.forwardRef(function Avatar2(inProps,
   const hasImgNotFailing = hasImg && loaded2 !== "error";
   ownerState.colorDefault = !hasImgNotFailing;
   delete ownerState.ownerState;
-  const classes = useUtilityClasses$G(ownerState);
+  const classes = useUtilityClasses$H(ownerState);
   const [ImgSlot, imgSlotProps] = useSlot("img", {
     className: classes.img,
     elementType: AvatarImg,
@@ -20831,7 +20831,7 @@ function getBackdropUtilityClass(slot) {
   return generateUtilityClass("MuiBackdrop", slot);
 }
 generateUtilityClasses("MuiBackdrop", ["root", "invisible"]);
-const useUtilityClasses$F = (ownerState) => {
+const useUtilityClasses$G = (ownerState) => {
   const {
     classes,
     invisible
@@ -20894,7 +20894,7 @@ const Backdrop = /* @__PURE__ */ reactExports.forwardRef(function Backdrop2(inPr
     component,
     invisible
   };
-  const classes = useUtilityClasses$F(ownerState);
+  const classes = useUtilityClasses$G(ownerState);
   const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
     root: components.Root,
@@ -20947,7 +20947,7 @@ function getButtonUtilityClass(slot) {
 const buttonClasses = generateUtilityClasses("MuiButton", ["root", "text", "textInherit", "textPrimary", "textSecondary", "textSuccess", "textError", "textInfo", "textWarning", "outlined", "outlinedInherit", "outlinedPrimary", "outlinedSecondary", "outlinedSuccess", "outlinedError", "outlinedInfo", "outlinedWarning", "contained", "containedInherit", "containedPrimary", "containedSecondary", "containedSuccess", "containedError", "containedInfo", "containedWarning", "disableElevation", "focusVisible", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorSuccess", "colorError", "colorInfo", "colorWarning", "textSizeSmall", "textSizeMedium", "textSizeLarge", "outlinedSizeSmall", "outlinedSizeMedium", "outlinedSizeLarge", "containedSizeSmall", "containedSizeMedium", "containedSizeLarge", "sizeMedium", "sizeSmall", "sizeLarge", "fullWidth", "startIcon", "endIcon", "icon", "iconSizeSmall", "iconSizeMedium", "iconSizeLarge", "loading", "loadingWrapper", "loadingIconPlaceholder", "loadingIndicator", "loadingPositionCenter", "loadingPositionStart", "loadingPositionEnd"]);
 const ButtonGroupContext = /* @__PURE__ */ reactExports.createContext({});
 const ButtonGroupButtonContext = /* @__PURE__ */ reactExports.createContext(void 0);
-const useUtilityClasses$E = (ownerState) => {
+const useUtilityClasses$F = (ownerState) => {
   const {
     color: color2,
     disableElevation,
@@ -21449,7 +21449,7 @@ const Button = /* @__PURE__ */ reactExports.forwardRef(function Button2(inProps,
     type,
     variant
   };
-  const classes = useUtilityClasses$E(ownerState);
+  const classes = useUtilityClasses$F(ownerState);
   const startIcon = (startIconProp || loading && loadingPosition === "start") && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonStartIcon, {
     className: classes.startIcon,
     ownerState,
@@ -21500,7 +21500,7 @@ function getCardUtilityClass(slot) {
   return generateUtilityClass("MuiCard", slot);
 }
 generateUtilityClasses("MuiCard", ["root"]);
-const useUtilityClasses$D = (ownerState) => {
+const useUtilityClasses$E = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -21530,7 +21530,7 @@ const Card = /* @__PURE__ */ reactExports.forwardRef(function Card2(inProps, ref
     ...props,
     raised
   };
-  const classes = useUtilityClasses$D(ownerState);
+  const classes = useUtilityClasses$E(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CardRoot, {
     className: clsx(classes.root, className),
     elevation: raised ? 8 : void 0,
@@ -21543,7 +21543,7 @@ function getCardContentUtilityClass(slot) {
   return generateUtilityClass("MuiCardContent", slot);
 }
 generateUtilityClasses("MuiCardContent", ["root"]);
-const useUtilityClasses$C = (ownerState) => {
+const useUtilityClasses$D = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -21576,7 +21576,7 @@ const CardContent = /* @__PURE__ */ reactExports.forwardRef(function CardContent
     ...props,
     component
   };
-  const classes = useUtilityClasses$C(ownerState);
+  const classes = useUtilityClasses$D(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CardContentRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -21589,7 +21589,7 @@ function getSwitchBaseUtilityClass(slot) {
   return generateUtilityClass("PrivateSwitchBase", slot);
 }
 generateUtilityClasses("PrivateSwitchBase", ["root", "checked", "disabled", "input", "edgeStart", "edgeEnd"]);
-const useUtilityClasses$B = (ownerState) => {
+const useUtilityClasses$C = (ownerState) => {
   const {
     classes,
     checked,
@@ -21726,7 +21726,7 @@ const SwitchBase = /* @__PURE__ */ reactExports.forwardRef(function SwitchBase2(
     disableFocusRipple,
     edge
   };
-  const classes = useUtilityClasses$B(ownerState);
+  const classes = useUtilityClasses$C(ownerState);
   const externalForwardedProps = {
     slots,
     slotProps: {
@@ -22594,7 +22594,7 @@ function getModalUtilityClass(slot) {
   return generateUtilityClass("MuiModal", slot);
 }
 generateUtilityClasses("MuiModal", ["root", "hidden", "backdrop"]);
-const useUtilityClasses$A = (ownerState) => {
+const useUtilityClasses$B = (ownerState) => {
   const {
     open,
     exited,
@@ -22705,7 +22705,7 @@ const Modal = /* @__PURE__ */ reactExports.forwardRef(function Modal2(inProps, r
     ...propsWithDefaults,
     exited
   };
-  const classes = useUtilityClasses$A(ownerState);
+  const classes = useUtilityClasses$B(ownerState);
   const childProps = {};
   if (children.props.tabIndex === void 0) {
     childProps.tabIndex = "-1";
@@ -22798,7 +22798,7 @@ const DialogBackdrop = styled(Backdrop, {
   // Improve scrollable dialog support.
   zIndex: -1
 });
-const useUtilityClasses$z = (ownerState) => {
+const useUtilityClasses$A = (ownerState) => {
   const {
     classes,
     scroll,
@@ -23003,7 +23003,7 @@ const Dialog = /* @__PURE__ */ reactExports.forwardRef(function Dialog2(inProps,
     maxWidth: maxWidth2,
     scroll
   };
-  const classes = useUtilityClasses$z(ownerState);
+  const classes = useUtilityClasses$A(ownerState);
   const backdropClick = reactExports.useRef();
   const handleMouseDown = (event) => {
     backdropClick.current = event.target === event.currentTarget;
@@ -23125,7 +23125,7 @@ function getDialogActionsUtilityClass(slot) {
   return generateUtilityClass("MuiDialogActions", slot);
 }
 generateUtilityClasses("MuiDialogActions", ["root", "spacing"]);
-const useUtilityClasses$y = (ownerState) => {
+const useUtilityClasses$z = (ownerState) => {
   const {
     classes,
     disableSpacing
@@ -23175,7 +23175,7 @@ const DialogActions = /* @__PURE__ */ reactExports.forwardRef(function DialogAct
     ...props,
     disableSpacing
   };
-  const classes = useUtilityClasses$y(ownerState);
+  const classes = useUtilityClasses$z(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DialogActionsRoot, {
     className: clsx(classes.root, className),
     ownerState,
@@ -23191,7 +23191,7 @@ function getDialogTitleUtilityClass(slot) {
   return generateUtilityClass("MuiDialogTitle", slot);
 }
 const dialogTitleClasses = generateUtilityClasses("MuiDialogTitle", ["root"]);
-const useUtilityClasses$x = (ownerState) => {
+const useUtilityClasses$y = (ownerState) => {
   const {
     classes,
     dividers
@@ -23252,7 +23252,7 @@ const DialogContent = /* @__PURE__ */ reactExports.forwardRef(function DialogCon
     ...props,
     dividers
   };
-  const classes = useUtilityClasses$x(ownerState);
+  const classes = useUtilityClasses$y(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DialogContentRoot, {
     className: clsx(classes.root, className),
     ownerState,
@@ -23264,7 +23264,7 @@ function getDialogContentTextUtilityClass(slot) {
   return generateUtilityClass("MuiDialogContentText", slot);
 }
 generateUtilityClasses("MuiDialogContentText", ["root"]);
-const useUtilityClasses$w = (ownerState) => {
+const useUtilityClasses$x = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -23294,7 +23294,7 @@ const DialogContentText = /* @__PURE__ */ reactExports.forwardRef(function Dialo
     className,
     ...ownerState
   } = props;
-  const classes = useUtilityClasses$w(ownerState);
+  const classes = useUtilityClasses$x(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DialogContentTextRoot, {
     component: "p",
     variant: "body1",
@@ -23306,7 +23306,7 @@ const DialogContentText = /* @__PURE__ */ reactExports.forwardRef(function Dialo
     classes
   });
 });
-const useUtilityClasses$v = (ownerState) => {
+const useUtilityClasses$w = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -23334,7 +23334,7 @@ const DialogTitle = /* @__PURE__ */ reactExports.forwardRef(function DialogTitle
     ...other
   } = props;
   const ownerState = props;
-  const classes = useUtilityClasses$v(ownerState);
+  const classes = useUtilityClasses$w(ownerState);
   const {
     titleId = idProp
   } = reactExports.useContext(DialogContext);
@@ -23352,7 +23352,7 @@ function getDividerUtilityClass(slot) {
   return generateUtilityClass("MuiDivider", slot);
 }
 const dividerClasses = generateUtilityClasses("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]);
-const useUtilityClasses$u = (ownerState) => {
+const useUtilityClasses$v = (ownerState) => {
   const {
     absolute,
     children,
@@ -23566,7 +23566,7 @@ const Divider = /* @__PURE__ */ reactExports.forwardRef(function Divider2(inProp
     textAlign,
     variant
   };
-  const classes = useUtilityClasses$u(ownerState);
+  const classes = useUtilityClasses$v(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(DividerRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -23799,7 +23799,7 @@ const overridesResolver$4 = (props, styles2) => {
   } = props;
   return [styles2.root, (ownerState.variant === "permanent" || ownerState.variant === "persistent") && styles2.docked, styles2.modal];
 };
-const useUtilityClasses$t = (ownerState) => {
+const useUtilityClasses$u = (ownerState) => {
   const {
     classes,
     anchor,
@@ -23989,7 +23989,7 @@ const Drawer = /* @__PURE__ */ reactExports.forwardRef(function Drawer2(inProps,
     variant,
     ...other
   };
-  const classes = useUtilityClasses$t(ownerState);
+  const classes = useUtilityClasses$u(ownerState);
   const externalForwardedProps = {
     slots: {
       transition: TransitionComponent,
@@ -24086,7 +24086,7 @@ const Drawer = /* @__PURE__ */ reactExports.forwardRef(function Drawer2(inProps,
     children: slidingDrawer
   });
 });
-const useUtilityClasses$s = (ownerState) => {
+const useUtilityClasses$t = (ownerState) => {
   const {
     classes,
     disableUnderline,
@@ -24365,7 +24365,7 @@ const FilledInput = /* @__PURE__ */ reactExports.forwardRef(function FilledInput
     multiline,
     type
   };
-  const classes = useUtilityClasses$s(props);
+  const classes = useUtilityClasses$t(props);
   const filledInputComponentsProps = {
     root: {
       ownerState
@@ -24397,7 +24397,7 @@ function getFormControlUtilityClasses(slot) {
   return generateUtilityClass("MuiFormControl", slot);
 }
 generateUtilityClasses("MuiFormControl", ["root", "marginNone", "marginNormal", "marginDense", "fullWidth", "disabled"]);
-const useUtilityClasses$r = (ownerState) => {
+const useUtilityClasses$s = (ownerState) => {
   const {
     classes,
     margin: margin2,
@@ -24487,7 +24487,7 @@ const FormControl = /* @__PURE__ */ reactExports.forwardRef(function FormControl
     size,
     variant
   };
-  const classes = useUtilityClasses$r(ownerState);
+  const classes = useUtilityClasses$s(ownerState);
   const [adornedStart, setAdornedStart] = reactExports.useState(() => {
     let initialAdornedStart = false;
     if (children) {
@@ -24572,7 +24572,7 @@ function getFormHelperTextUtilityClasses(slot) {
 }
 const formHelperTextClasses = generateUtilityClasses("MuiFormHelperText", ["root", "error", "disabled", "sizeSmall", "sizeMedium", "contained", "focused", "filled", "required"]);
 var _span$3;
-const useUtilityClasses$q = (ownerState) => {
+const useUtilityClasses$r = (ownerState) => {
   const {
     classes,
     contained,
@@ -24667,7 +24667,7 @@ const FormHelperText = /* @__PURE__ */ reactExports.forwardRef(function FormHelp
     required: fcs.required
   };
   delete ownerState.ownerState;
-  const classes = useUtilityClasses$q(ownerState);
+  const classes = useUtilityClasses$r(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperTextRoot, {
     as: component,
     className: clsx(classes.root, className),
@@ -24688,7 +24688,7 @@ function getFormLabelUtilityClasses(slot) {
   return generateUtilityClass("MuiFormLabel", slot);
 }
 const formLabelClasses = generateUtilityClasses("MuiFormLabel", ["root", "colorSecondary", "focused", "disabled", "error", "filled", "required", "asterisk"]);
-const useUtilityClasses$p = (ownerState) => {
+const useUtilityClasses$q = (ownerState) => {
   const {
     classes,
     color: color2,
@@ -24786,7 +24786,7 @@ const FormLabel = /* @__PURE__ */ reactExports.forwardRef(function FormLabel2(in
     focused: fcs.focused,
     required: fcs.required
   };
-  const classes = useUtilityClasses$p(ownerState);
+  const classes = useUtilityClasses$q(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormLabelRoot, {
     as: component,
     ownerState,
@@ -25114,7 +25114,7 @@ function resolveSpacingClasses(spacing, breakpoints) {
   });
   return classes;
 }
-const useUtilityClasses$o = (ownerState) => {
+const useUtilityClasses$p = (ownerState) => {
   const {
     classes,
     container,
@@ -25192,7 +25192,7 @@ const Grid = /* @__PURE__ */ reactExports.forwardRef(function Grid2(inProps, ref
     ...breakpointsValues,
     breakpoints: breakpoints.keys
   };
-  const classes = useUtilityClasses$o(ownerState);
+  const classes = useUtilityClasses$p(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(GridContext.Provider, {
     value: columns,
     children: /* @__PURE__ */ jsxRuntimeExports.jsx(GridRoot, {
@@ -25364,7 +25364,7 @@ const Grow = /* @__PURE__ */ reactExports.forwardRef(function Grow2(props, ref)
 if (Grow) {
   Grow.muiSupportAuto = true;
 }
-const useUtilityClasses$n = (ownerState) => {
+const useUtilityClasses$o = (ownerState) => {
   const {
     classes,
     disableUnderline
@@ -25497,7 +25497,7 @@ const Input = /* @__PURE__ */ reactExports.forwardRef(function Input2(inProps, r
     type = "text",
     ...other
   } = props;
-  const classes = useUtilityClasses$n(props);
+  const classes = useUtilityClasses$o(props);
   const ownerState = {
     disableUnderline
   };
@@ -25536,7 +25536,7 @@ const overridesResolver$3 = (props, styles2) => {
   } = props;
   return [styles2.root, styles2[`position${capitalize$1(ownerState.position)}`], ownerState.disablePointerEvents === true && styles2.disablePointerEvents, styles2[ownerState.variant]];
 };
-const useUtilityClasses$m = (ownerState) => {
+const useUtilityClasses$n = (ownerState) => {
   const {
     classes,
     disablePointerEvents,
@@ -25623,7 +25623,7 @@ const InputAdornment = /* @__PURE__ */ reactExports.forwardRef(function InputAdo
     position: position2,
     variant
   };
-  const classes = useUtilityClasses$m(ownerState);
+  const classes = useUtilityClasses$n(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(FormControlContext.Provider, {
     value: null,
     children: /* @__PURE__ */ jsxRuntimeExports.jsx(InputAdornmentRoot, {
@@ -25652,7 +25652,7 @@ function getInputLabelUtilityClasses(slot) {
   return generateUtilityClass("MuiInputLabel", slot);
 }
 generateUtilityClasses("MuiInputLabel", ["root", "focused", "disabled", "error", "required", "asterisk", "formControl", "sizeSmall", "shrink", "animated", "standard", "filled", "outlined"]);
-const useUtilityClasses$l = (ownerState) => {
+const useUtilityClasses$m = (ownerState) => {
   const {
     classes,
     formControl,
@@ -25841,7 +25841,7 @@ const InputLabel = /* @__PURE__ */ reactExports.forwardRef(function InputLabel2(
     required: fcs.required,
     focused: fcs.focused
   };
-  const classes = useUtilityClasses$l(ownerState);
+  const classes = useUtilityClasses$m(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabelRoot, {
     "data-shrink": shrink,
     ref,
@@ -25851,6 +25851,229 @@ const InputLabel = /* @__PURE__ */ reactExports.forwardRef(function InputLabel2(
     classes
   });
 });
+function getLinkUtilityClass(slot) {
+  return generateUtilityClass("MuiLink", slot);
+}
+const linkClasses = generateUtilityClasses("MuiLink", ["root", "underlineNone", "underlineHover", "underlineAlways", "button", "focusVisible"]);
+const getTextDecoration = ({
+  theme: theme2,
+  ownerState
+}) => {
+  const transformedColor = ownerState.color;
+  const color2 = getPath(theme2, `palette.${transformedColor}.main`, false) || getPath(theme2, `palette.${transformedColor}`, false) || ownerState.color;
+  const channelColor = getPath(theme2, `palette.${transformedColor}.mainChannel`) || getPath(theme2, `palette.${transformedColor}Channel`);
+  if ("vars" in theme2 && channelColor) {
+    return `rgba(${channelColor} / 0.4)`;
+  }
+  return alpha(color2, 0.4);
+};
+const v6Colors = {
+  primary: true,
+  secondary: true,
+  error: true,
+  info: true,
+  success: true,
+  warning: true,
+  textPrimary: true,
+  textSecondary: true,
+  textDisabled: true
+};
+const useUtilityClasses$l = (ownerState) => {
+  const {
+    classes,
+    component,
+    focusVisible,
+    underline
+  } = ownerState;
+  const slots = {
+    root: ["root", `underline${capitalize$1(underline)}`, component === "button" && "button", focusVisible && "focusVisible"]
+  };
+  return composeClasses(slots, getLinkUtilityClass, classes);
+};
+const LinkRoot = styled(Typography, {
+  name: "MuiLink",
+  slot: "Root",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.root, styles2[`underline${capitalize$1(ownerState.underline)}`], ownerState.component === "button" && styles2.button];
+  }
+})(memoTheme(({
+  theme: theme2
+}) => {
+  return {
+    variants: [{
+      props: {
+        underline: "none"
+      },
+      style: {
+        textDecoration: "none"
+      }
+    }, {
+      props: {
+        underline: "hover"
+      },
+      style: {
+        textDecoration: "none",
+        "&:hover": {
+          textDecoration: "underline"
+        }
+      }
+    }, {
+      props: {
+        underline: "always"
+      },
+      style: {
+        textDecoration: "underline",
+        "&:hover": {
+          textDecorationColor: "inherit"
+        }
+      }
+    }, {
+      props: ({
+        underline,
+        ownerState
+      }) => underline === "always" && ownerState.color !== "inherit",
+      style: {
+        textDecorationColor: "var(--Link-underlineColor)"
+      }
+    }, ...Object.entries(theme2.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+      props: {
+        underline: "always",
+        color: color2
+      },
+      style: {
+        "--Link-underlineColor": theme2.vars ? `rgba(${theme2.vars.palette[color2].mainChannel} / 0.4)` : alpha(theme2.palette[color2].main, 0.4)
+      }
+    })), {
+      props: {
+        underline: "always",
+        color: "textPrimary"
+      },
+      style: {
+        "--Link-underlineColor": theme2.vars ? `rgba(${theme2.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme2.palette.text.primary, 0.4)
+      }
+    }, {
+      props: {
+        underline: "always",
+        color: "textSecondary"
+      },
+      style: {
+        "--Link-underlineColor": theme2.vars ? `rgba(${theme2.vars.palette.text.secondaryChannel} / 0.4)` : alpha(theme2.palette.text.secondary, 0.4)
+      }
+    }, {
+      props: {
+        underline: "always",
+        color: "textDisabled"
+      },
+      style: {
+        "--Link-underlineColor": (theme2.vars || theme2).palette.text.disabled
+      }
+    }, {
+      props: {
+        component: "button"
+      },
+      style: {
+        position: "relative",
+        WebkitTapHighlightColor: "transparent",
+        backgroundColor: "transparent",
+        // Reset default value
+        // We disable the focus ring for mouse, touch and keyboard users.
+        outline: 0,
+        border: 0,
+        margin: 0,
+        // Remove the margin in Safari
+        borderRadius: 0,
+        padding: 0,
+        // Remove the padding in Firefox
+        cursor: "pointer",
+        userSelect: "none",
+        verticalAlign: "middle",
+        MozAppearance: "none",
+        // Reset
+        WebkitAppearance: "none",
+        // Reset
+        "&::-moz-focus-inner": {
+          borderStyle: "none"
+          // Remove Firefox dotted outline.
+        },
+        [`&.${linkClasses.focusVisible}`]: {
+          outline: "auto"
+        }
+      }
+    }]
+  };
+}));
+const Link = /* @__PURE__ */ reactExports.forwardRef(function Link2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiLink"
+  });
+  const theme2 = useTheme();
+  const {
+    className,
+    color: color2 = "primary",
+    component = "a",
+    onBlur,
+    onFocus,
+    TypographyClasses,
+    underline = "always",
+    variant = "inherit",
+    sx,
+    ...other
+  } = props;
+  const [focusVisible, setFocusVisible] = reactExports.useState(false);
+  const handleBlur = (event) => {
+    if (!isFocusVisible(event.target)) {
+      setFocusVisible(false);
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  const handleFocus = (event) => {
+    if (isFocusVisible(event.target)) {
+      setFocusVisible(true);
+    }
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+  const ownerState = {
+    ...props,
+    color: color2,
+    component,
+    focusVisible,
+    underline,
+    variant
+  };
+  const classes = useUtilityClasses$l(ownerState);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(LinkRoot, {
+    color: color2,
+    className: clsx(classes.root, className),
+    classes: TypographyClasses,
+    component,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    ref,
+    ownerState,
+    variant,
+    ...other,
+    sx: [...v6Colors[color2] === void 0 ? [{
+      color: color2
+    }] : [], ...Array.isArray(sx) ? sx : [sx]],
+    style: {
+      ...other.style,
+      ...underline === "always" && color2 !== "inherit" && !v6Colors[color2] && {
+        "--Link-underlineColor": getTextDecoration({
+          theme: theme2,
+          ownerState
+        })
+      }
+    }
+  });
+});
 const ListContext = /* @__PURE__ */ reactExports.createContext({});
 function getListUtilityClass(slot) {
   return generateUtilityClass("MuiList", slot);
@@ -52564,6 +52787,18 @@ const ModelsApi = {
   listProviders,
   listModels
 };
+const getImageUrl = (baseUrl, imagePath) => {
+  const normalizedBaseUrl = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
+  let normalizedPath = imagePath;
+  if (normalizedPath.startsWith("file://")) {
+    normalizedPath = normalizedPath.substring(7);
+  }
+  const encodedPath = encodeURIComponent(normalizedPath);
+  return `${normalizedBaseUrl}/v1/static/images?path=${encodedPath}`;
+};
+const StaticApi = {
+  getImageUrl
+};
 class LocalOperatorClient {
   baseUrl;
   /**
@@ -52616,6 +52851,12 @@ class LocalOperatorClient {
   get models() {
     return this.bindBaseUrlToApi(ModelsApi);
   }
+  /**
+   * Get the Static API client with methods bound to the base URL
+   */
+  get static() {
+    return this.bindBaseUrlToApi(StaticApi);
+  }
   /**
    * Bind the base URL to all methods of an API client
    *
@@ -56959,7 +57200,8 @@ const convertToMessage = (record) => {
     stdout: record.stdout,
     stderr: record.stderr,
     logging: record.logging,
-    timestamp: record.timestamp ? new Date(record.timestamp) : /* @__PURE__ */ new Date()
+    timestamp: record.timestamp ? new Date(record.timestamp) : /* @__PURE__ */ new Date(),
+    files: record.files
   };
 };
 const useConversationMessages = (conversationId, pageSize2 = 20) => {
@@ -57368,13 +57610,14 @@ const useJobPolling = ({
     checkForActiveJobs
   };
 };
-const useScrollToBottom = (dependencies = [], threshold = 300, screenHeightThreshold = 1) => {
+const useScrollToBottom = (dependencies = [], threshold = 300, buttonThreshold = 50) => {
   const ref = reactExports.useRef(null);
   const containerRef = reactExports.useRef(null);
   const [shouldScrollToBottom, setShouldScrollToBottom] = reactExports.useState(true);
   const [isFarFromBottom, setIsFarFromBottom] = reactExports.useState(false);
   const lastScrollPositionRef = reactExports.useRef(0);
   const scrollTimeoutRef = reactExports.useRef(null);
+  const isProcessingScrollRef = reactExports.useRef(false);
   const scrollToBottom = reactExports.useCallback(() => {
     if (!ref.current) return;
     requestAnimationFrame(() => {
@@ -57383,36 +57626,48 @@ const useScrollToBottom = (dependencies = [], threshold = 300, screenHeightThres
       }
     });
   }, []);
+  const checkScrollPosition = reactExports.useCallback(() => {
+    if (!containerRef.current || isProcessingScrollRef.current) return;
+    isProcessingScrollRef.current = true;
+    const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
+    const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
+    const currentShouldScroll = distanceFromBottom <= threshold;
+    const shouldShowButton = distanceFromBottom > buttonThreshold;
+    if (Math.abs(lastScrollPositionRef.current - scrollTop) > 20 || currentShouldScroll !== shouldScrollToBottom || shouldShowButton !== isFarFromBottom) {
+      lastScrollPositionRef.current = scrollTop;
+      setShouldScrollToBottom(currentShouldScroll);
+      setIsFarFromBottom(shouldShowButton);
+    }
+    isProcessingScrollRef.current = false;
+  }, [threshold, buttonThreshold, shouldScrollToBottom, isFarFromBottom]);
   const handleScroll = reactExports.useCallback(() => {
     if (!containerRef.current) return;
     if (scrollTimeoutRef.current !== null) {
       window.clearTimeout(scrollTimeoutRef.current);
     }
     scrollTimeoutRef.current = window.setTimeout(() => {
-      if (!containerRef.current) return;
-      const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-      const distanceFromBottom = scrollHeight - scrollTop - clientHeight;
-      const currentShouldScroll = distanceFromBottom <= threshold;
-      const isFarEnough = distanceFromBottom > clientHeight;
-      if (Math.abs(lastScrollPositionRef.current - scrollTop) > 50 || currentShouldScroll !== shouldScrollToBottom || isFarEnough !== isFarFromBottom) {
-        lastScrollPositionRef.current = scrollTop;
-        setShouldScrollToBottom(currentShouldScroll);
-        setIsFarFromBottom(isFarEnough);
-      }
+      checkScrollPosition();
       scrollTimeoutRef.current = null;
-    }, 100);
-  }, [threshold, shouldScrollToBottom, isFarFromBottom, screenHeightThreshold]);
+    }, 50);
+  }, [checkScrollPosition]);
   reactExports.useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
     container.addEventListener("scroll", handleScroll, { passive: true });
+    checkScrollPosition();
     return () => {
       if (scrollTimeoutRef.current !== null) {
         window.clearTimeout(scrollTimeoutRef.current);
       }
       container.removeEventListener("scroll", handleScroll);
     };
-  }, [handleScroll]);
+  }, [handleScroll, checkScrollPosition]);
+  reactExports.useEffect(() => {
+    const animationFrame = requestAnimationFrame(() => {
+      checkScrollPosition();
+    });
+    return () => cancelAnimationFrame(animationFrame);
+  }, [...dependencies, checkScrollPosition]);
   reactExports.useEffect(() => {
     if (!shouldScrollToBottom || !ref.current) return;
     const animationFrame = requestAnimationFrame(() => {
@@ -57429,13 +57684,15 @@ const useScrollToBottom = (dependencies = [], threshold = 300, screenHeightThres
       const { overflow, overflowY } = window.getComputedStyle(parent);
       if (overflow === "auto" || overflow === "scroll" || overflowY === "auto" || overflowY === "scroll") {
         containerRef.current = parent;
+        checkScrollPosition();
         break;
       }
       parent = parent.parentElement;
     }
-  }, []);
+  }, [checkScrollPosition]);
   return {
     ref,
+    containerRef,
     isNearBottom: shouldScrollToBottom,
     isFarFromBottom,
     scrollToBottom
@@ -58294,6 +58551,14 @@ const StyledDialog = styled(Dialog)(({ theme: theme2 }) => ({
     backgroundColor: theme2.palette.background.default,
     "&:first-of-type": {
       paddingTop: 16
+    },
+    overflow: "auto",
+    "&::-webkit-scrollbar": {
+      width: "8px"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      backgroundColor: "rgba(255, 255, 255, 0.1)",
+      borderRadius: "4px"
     }
   },
   "& .MuiDialogActions-root": {
@@ -58370,7 +58635,7 @@ const DangerButton = styled(DialogButton)(({ theme: theme2 }) => ({
   },
   transition: "all 0.2s ease-in-out"
 }));
-const FormContainer$1 = styled(Box)({
+const FormContainer$2 = styled(Box)({
   display: "flex",
   flexDirection: "column",
   gap: 20
@@ -58452,7 +58717,7 @@ const SidebarContent = styled(Box)({
     borderRadius: "4px"
   }
 });
-const SectionTitle$4 = styled(Typography)(({ theme: theme2 }) => ({
+const SectionTitle$5 = styled(Typography)(({ theme: theme2 }) => ({
   fontWeight: 600,
   marginBottom: theme2.spacing(2),
   marginTop: theme2.spacing(3),
@@ -59096,7 +59361,7 @@ const GenerationSettingsSection = ({
   updateAgentMutation
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$4, { variant: "subtitle1", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$5, { variant: "subtitle1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$3, { icon: faSliders }),
       "Generation Settings",
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -59850,6 +60115,49 @@ const HostingSelect = ({
     )
   ] });
 };
+const useModels = ({ autoFetch = true } = {}) => {
+  const baseUrl = apiConfig.baseUrl;
+  const {
+    providers: providers2,
+    models,
+    isLoading,
+    error,
+    lastFetched,
+    isInitialized,
+    fetchModels,
+    getModelsForProvider
+  } = useModelsStore();
+  reactExports.useEffect(() => {
+    if (autoFetch) {
+      fetchModels(baseUrl);
+      const intervalId = setInterval(
+        () => {
+          fetchModels(baseUrl);
+        },
+        15 * 60 * 1e3
+      );
+      return () => clearInterval(intervalId);
+    }
+    return void 0;
+  }, [autoFetch, baseUrl, fetchModels]);
+  const refreshModels = async () => {
+    await fetchModels(baseUrl, true);
+  };
+  const getModelById = (modelId) => {
+    return models.find((model) => model.id === modelId);
+  };
+  return {
+    providers: providers2,
+    models,
+    isLoading,
+    error,
+    lastFetched,
+    isInitialized,
+    getModelsForProvider,
+    getModelById,
+    refreshModels
+  };
+};
 function ok$1() {
 }
 function unreachable() {
@@ -69544,6 +69852,18 @@ const ModelSelect = ({
     const models = getModelsForHostingProvider(hostingId);
     return models;
   }, [hostingId]);
+  const { refreshModels } = useModels();
+  const previousHostingIdRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    if (hostingId && previousHostingIdRef.current !== hostingId) {
+      previousHostingIdRef.current = hostingId;
+      const timeoutId = setTimeout(() => {
+        refreshModels();
+      }, 0);
+      return () => clearTimeout(timeoutId);
+    }
+    return void 0;
+  }, [hostingId, refreshModels]);
   const modelOptions = reactExports.useMemo(() => {
     const options = [
       {
@@ -69677,8 +69997,12 @@ const ModelSelect = ({
     }
   };
   const getProviderFromId = (id) => {
-    const providerMatch = id.match(/^([^/]+)\//);
-    return providerMatch ? providerMatch[1] : "";
+    if (!id || typeof id !== "string") return "";
+    const slashIndex = id.indexOf("/");
+    if (slashIndex > 0) {
+      return id.substring(0, slashIndex);
+    }
+    return "";
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldContainer, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(FieldLabel, { variant: "subtitle2", children: [
@@ -69765,49 +70089,6 @@ const ModelSelect = ({
     )
   ] });
 };
-const useModels = ({ autoFetch = true } = {}) => {
-  const baseUrl = apiConfig.baseUrl;
-  const {
-    providers: providers2,
-    models,
-    isLoading,
-    error,
-    lastFetched,
-    isInitialized,
-    fetchModels,
-    getModelsForProvider
-  } = useModelsStore();
-  reactExports.useEffect(() => {
-    if (autoFetch) {
-      fetchModels(baseUrl);
-      const intervalId = setInterval(
-        () => {
-          fetchModels(baseUrl);
-        },
-        15 * 60 * 1e3
-      );
-      return () => clearInterval(intervalId);
-    }
-    return void 0;
-  }, [autoFetch, baseUrl, fetchModels]);
-  const refreshModels = async () => {
-    await fetchModels(baseUrl, true);
-  };
-  const getModelById = (modelId) => {
-    return models.find((model) => model.id === modelId);
-  };
-  return {
-    providers: providers2,
-    models,
-    isLoading,
-    error,
-    lastFetched,
-    isInitialized,
-    getModelsForProvider,
-    getModelById,
-    refreshModels
-  };
-};
 const ModelHostingSection = ({
   agent,
   savingField,
@@ -69817,7 +70098,7 @@ const ModelHostingSection = ({
   updateAgentMutation
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$4, { variant: "subtitle1", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$5, { variant: "subtitle1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$3, { icon: faServer }),
       "Model & Hosting",
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -70533,6 +70814,242 @@ const ChatUtilities = ({
     ) }) })
   ] });
 };
+const AttachmentsContainer = styled(Box)(({ theme: theme2 }) => ({
+  display: "flex",
+  flexWrap: "wrap",
+  gap: theme2.spacing(1.5),
+  padding: theme2.spacing(2),
+  borderTop: `1px solid ${alpha(theme2.palette.divider, 0.1)}`,
+  backgroundColor: alpha(theme2.palette.background.paper, 0.4)
+}));
+const AttachmentItem = styled(Paper)(({ theme: theme2 }) => ({
+  position: "relative",
+  borderRadius: theme2.shape.borderRadius,
+  overflow: "hidden",
+  width: 100,
+  height: 100,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  border: `1px solid ${alpha(theme2.palette.divider, 0.2)}`,
+  backgroundColor: alpha(theme2.palette.background.paper, 0.6),
+  transition: "all 0.2s ease-in-out",
+  "&:hover": {
+    transform: "translateY(-2px)",
+    boxShadow: theme2.shadows[3]
+  }
+}));
+const AttachmentImage$1 = styled("img")({
+  width: "100%",
+  height: "100%",
+  objectFit: "cover"
+});
+const AttachmentName = styled(Typography)(({ theme: theme2 }) => ({
+  position: "absolute",
+  bottom: 0,
+  left: 0,
+  right: 0,
+  padding: theme2.spacing(0.5),
+  backgroundColor: alpha(theme2.palette.background.paper, 0.8),
+  fontSize: "0.7rem",
+  textAlign: "center",
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis"
+}));
+const RemoveButton = styled(IconButton)(({ theme: theme2 }) => ({
+  position: "absolute",
+  top: 2,
+  right: -4,
+  width: 24,
+  height: 24,
+  padding: 4,
+  backgroundColor: alpha(theme2.palette.background.paper, 0.8),
+  color: theme2.palette.error.main,
+  "&:hover": {
+    backgroundColor: alpha(theme2.palette.background.paper, 0.9)
+  }
+}));
+const LargePreview = styled(Box)(({ theme: theme2 }) => ({
+  position: "absolute",
+  top: -320,
+  width: 300,
+  height: 300,
+  backgroundColor: theme2.palette.background.paper,
+  borderRadius: theme2.shape.borderRadius,
+  boxShadow: theme2.shadows[10],
+  padding: theme2.spacing(1),
+  zIndex: 1e3,
+  opacity: 0,
+  visibility: "hidden",
+  transform: "translateY(20px)",
+  transition: "opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s linear 1.5s",
+  "& img": {
+    width: "100%",
+    height: "100%",
+    objectFit: "contain"
+  }
+}));
+const AttachmentWrapper = styled(Box)({
+  position: "relative",
+  "&:hover .large-preview": {
+    opacity: 1,
+    visibility: "visible",
+    transform: "translateY(0)",
+    transitionDelay: "1.5s"
+  }
+});
+const FileIcon$1 = styled(Box)(({ theme: theme2 }) => ({
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: alpha(theme2.palette.primary.main, 0.1),
+  color: theme2.palette.primary.main,
+  fontSize: "0.8rem",
+  fontWeight: 500,
+  padding: theme2.spacing(1),
+  textAlign: "center"
+}));
+const AttachmentsPreview = ({
+  attachments,
+  onRemoveAttachment,
+  disabled: disabled2 = false
+}) => {
+  const client2 = reactExports.useMemo(() => {
+    return createLocalOperatorClient(apiConfig.baseUrl);
+  }, []);
+  const isImage2 = reactExports.useCallback((path) => {
+    const imageExtensions = [
+      ".jpg",
+      ".jpeg",
+      ".png",
+      ".gif",
+      ".webp",
+      ".bmp",
+      ".svg"
+    ];
+    const lowerPath = path.toLowerCase();
+    return imageExtensions.some((ext) => lowerPath.endsWith(ext));
+  }, []);
+  const getFileName2 = reactExports.useCallback((path) => {
+    const parts = path.split(/[/\\]/);
+    return parts[parts.length - 1];
+  }, []);
+  const getAttachmentUrl2 = reactExports.useCallback(
+    (path) => {
+      if (isImage2(path) && !path.startsWith("http")) {
+        const normalizedPath = path.startsWith("file://") ? path : `file://${path}`;
+        return client2.static.getImageUrl(normalizedPath);
+      }
+      return path;
+    },
+    [client2, isImage2]
+  );
+  const handleRemove = reactExports.useCallback(
+    (index2) => (event) => {
+      event.stopPropagation();
+      if (!disabled2) {
+        onRemoveAttachment(index2);
+      }
+    },
+    [onRemoveAttachment, disabled2]
+  );
+  if (!attachments.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AttachmentsContainer, { children: attachments.map((attachment, index2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(AttachmentWrapper, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AttachmentItem, { elevation: 1, children: [
+      isImage2(attachment) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        AttachmentImage$1,
+        {
+          src: getAttachmentUrl2(attachment),
+          alt: getFileName2(attachment)
+        }
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon$1, { children: getFileName2(attachment) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(AttachmentName, { variant: "caption", noWrap: true, children: getFileName2(attachment) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Remove attachment", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        RemoveButton,
+        {
+          size: "small",
+          onClick: handleRemove(index2),
+          disabled: disabled2,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faTimes, size: "xs" })
+        }
+      ) })
+    ] }),
+    isImage2(attachment) && /* @__PURE__ */ jsxRuntimeExports.jsx(LargePreview, { className: "large-preview", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        src: getAttachmentUrl2(attachment),
+        alt: getFileName2(attachment)
+      }
+    ) })
+  ] }, `${index2}-${attachment}`)) });
+};
+const ButtonContainer$1 = styled(Box)(() => ({
+  position: "absolute",
+  top: -60,
+  // Position above the message input
+  right: 20,
+  zIndex: 2e3,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  pointerEvents: "none"
+  // Prevent container from blocking clicks
+}));
+const StyledButton = styled(IconButton)(({ theme: theme2 }) => ({
+  backgroundColor: theme2.palette.background.paper,
+  color: theme2.palette.text.secondary,
+  width: 44,
+  height: 44,
+  backdropFilter: "blur(8px)",
+  WebkitBackdropFilter: "blur(8px)",
+  borderRadius: "12px",
+  pointerEvents: "auto",
+  boxShadow: "0 2px 12px rgba(0, 0, 0, 0.15)",
+  border: "1px solid rgba(255, 255, 255, 0.1)",
+  transform: "translateY(0)",
+  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+  "&:hover": {
+    backgroundColor: theme2.palette.background.paper,
+    transform: "translateY(-2px)",
+    boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)",
+    color: theme2.palette.primary.main,
+    "& svg": {
+      transform: "translateY(1px)"
+    }
+  },
+  "&:active": {
+    transform: "translateY(0)",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
+  },
+  "& svg": {
+    fontSize: "1rem",
+    transition: "transform 0.2s ease"
+  }
+}));
+const ScrollToBottomButton = ({
+  visible,
+  onClick,
+  className
+}) => {
+  const handleClick = reactExports.useCallback(() => {
+    onClick();
+  }, [onClick]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Fade, { in: visible, timeout: 200, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonContainer$1, { className, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    StyledButton,
+    {
+      "aria-label": "Scroll to bottom",
+      onClick: handleClick,
+      size: "small",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faArrowDown })
+    }
+  ) }) });
+};
 const useMessageInput = ({
   conversationId,
   messages,
@@ -70645,14 +71162,16 @@ const useMessageInput = ({
     textareaRef
   };
 };
-const FormContainer = styled("form")(({ theme: theme2 }) => ({
+const FormContainer$1 = styled("form")(({ theme: theme2 }) => ({
   padding: theme2.spacing(3),
   display: "flex",
   alignItems: "center",
   gap: theme2.spacing(2),
   borderTop: `1px solid ${alpha(theme2.palette.divider, 0.1)}`,
   backgroundColor: alpha(theme2.palette.background.paper, 0.4),
-  minHeight: 100
+  minHeight: 100,
+  position: "relative"
+  // Add position relative for the scroll button
 }));
 const AttachmentButton = styled(IconButton)(({ theme: theme2 }) => ({
   backgroundColor: alpha(theme2.palette.primary.main, 0.08),
@@ -70693,34 +71212,6 @@ const StyledTextField$2 = styled(TextField)(({ theme: theme2 }) => ({
     alignItems: "center"
   }
 }));
-const FilePreviewContainer = styled(Box)(({ theme: theme2 }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  backgroundColor: alpha(theme2.palette.primary.main, 0.08),
-  borderRadius: theme2.shape.borderRadius,
-  padding: theme2.spacing(1, 2),
-  border: `1px solid ${alpha(theme2.palette.primary.main, 0.2)}`,
-  height: 48,
-  margin: theme2.spacing(0, 1)
-}));
-const FileNameText = styled(Typography)({
-  maxWidth: 150,
-  fontWeight: 500,
-  color: "primary.main",
-  display: "flex",
-  alignItems: "center"
-});
-const RemoveFileButton = styled(IconButton)(({ theme: theme2 }) => ({
-  marginLeft: theme2.spacing(1),
-  color: "primary.main",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  "&:hover": {
-    backgroundColor: alpha(theme2.palette.primary.main, 0.15)
-  }
-}));
 const SendButton = styled(Button)(({ theme: theme2 }) => ({
   borderRadius: theme2.shape.borderRadius * 1.5,
   minWidth: "auto",
@@ -70750,9 +71241,12 @@ const MessageInput = ({
   conversationId,
   messages,
   currentJobId,
-  onCancelJob
+  onCancelJob,
+  isFarFromBottom = false,
+  scrollToBottom = () => {
+  }
 }) => {
-  const [selectedFile, setSelectedFile] = reactExports.useState(null);
+  const [attachments, setAttachments] = reactExports.useState([]);
   const fileInputRef = reactExports.useRef(null);
   const {
     inputValue: newMessage,
@@ -70764,96 +71258,121 @@ const MessageInput = ({
     conversationId,
     messages,
     onSubmit: (message2) => {
-      onSendMessage(message2, selectedFile);
-      setSelectedFile(null);
+      onSendMessage(message2, attachments);
+      setAttachments([]);
     }
   });
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (!newMessage.trim() && !selectedFile) return;
+    if (!newMessage.trim() && attachments.length === 0) return;
     submitMessage();
   };
   const handleFileSelect = (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      setSelectedFile(e.target.files[0]);
+      const newAttachments = Array.from(e.target.files).map((file) => {
+        const filePath = file.path;
+        if (filePath) {
+          return filePath;
+        }
+        return URL.createObjectURL(file);
+      });
+      setAttachments((prev2) => [...prev2, ...newAttachments]);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
     }
   };
+  const handleRemoveAttachment = (index2) => {
+    setAttachments((prev2) => {
+      const newAttachments = [...prev2];
+      if (newAttachments[index2].startsWith("blob:")) {
+        URL.revokeObjectURL(newAttachments[index2]);
+      }
+      newAttachments.splice(index2, 1);
+      return newAttachments;
+    });
+  };
   const triggerFileInput = () => {
     fileInputRef.current?.click();
   };
   const isInputDisabled = Boolean(isLoading && currentJobId);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer, { onSubmit: handleSubmit, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "input",
-      {
-        type: "file",
-        ref: fileInputRef,
-        onChange: handleFileSelect,
-        style: { display: "none" },
-        accept: "image/*,.pdf,.doc,.docx,.txt",
-        disabled: isInputDisabled
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Attach file", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      AttachmentButton,
-      {
-        onClick: triggerFileInput,
-        color: "primary",
-        size: "medium",
-        "aria-label": "Attach file",
-        disabled: isInputDisabled,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPaperclip })
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      StyledTextField$2,
-      {
-        fullWidth: true,
-        placeholder: isInputDisabled ? "⌛ Agent is busy..." : "✨ Type to Chat! Press ↵ to send, Shift+↵ for new line 📝",
-        value: newMessage,
-        onChange: (e) => setNewMessage(e.target.value),
-        onKeyDown: handleKeyDown,
-        multiline: true,
-        maxRows: 4,
-        variant: "outlined",
-        inputRef: textareaRef,
-        disabled: isInputDisabled
-      }
-    ),
-    selectedFile && /* @__PURE__ */ jsxRuntimeExports.jsxs(FilePreviewContainer, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(FileNameText, { variant: "caption", noWrap: true, children: selectedFile.name }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$1, { onSubmit: handleSubmit, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        RemoveFileButton,
+        ScrollToBottomButton,
         {
-          size: "small",
-          onClick: () => setSelectedFile(null),
-          "aria-label": "Remove file",
+          visible: isFarFromBottom,
+          onClick: scrollToBottom
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "input",
+        {
+          type: "file",
+          ref: fileInputRef,
+          onChange: handleFileSelect,
+          style: { display: "none" },
+          accept: "image/*,.pdf,.doc,.docx,.txt",
           disabled: isInputDisabled,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faTimes, size: "xs" })
+          multiple: true
         }
-      )
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Attach file", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        AttachmentButton,
+        {
+          onClick: triggerFileInput,
+          color: "primary",
+          size: "medium",
+          "aria-label": "Attach file",
+          disabled: isInputDisabled,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPaperclip })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        StyledTextField$2,
+        {
+          fullWidth: true,
+          placeholder: isInputDisabled ? "⌛ Agent is busy..." : "✨ Type to Chat! Press ↵ to send, Shift+↵ for new line 📝",
+          value: newMessage,
+          onChange: (e) => setNewMessage(e.target.value),
+          onKeyDown: handleKeyDown,
+          multiline: true,
+          maxRows: 4,
+          variant: "outlined",
+          inputRef: textareaRef,
+          disabled: isInputDisabled
+        }
+      ),
+      isLoading && currentJobId ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Stop agent", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SendButton,
+        {
+          type: "button",
+          variant: "contained",
+          color: "error",
+          onClick: () => onCancelJob?.(currentJobId),
+          "aria-label": "Stop agent",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faStop })
+        }
+      ) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Send message", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        SendButton,
+        {
+          type: "submit",
+          variant: "contained",
+          color: "primary",
+          disabled: isLoading || !newMessage.trim() && attachments.length === 0,
+          "aria-label": "Send message",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPaperPlane })
+        }
+      ) }) })
     ] }),
-    isLoading && currentJobId ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Stop agent", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      SendButton,
+    attachments.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      AttachmentsPreview,
       {
-        type: "button",
-        variant: "contained",
-        color: "error",
-        onClick: () => onCancelJob?.(currentJobId),
-        "aria-label": "Stop agent",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faStop })
-      }
-    ) }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip, { title: "Send message", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      SendButton,
-      {
-        type: "submit",
-        variant: "contained",
-        color: "primary",
-        disabled: isLoading || !newMessage.trim() && !selectedFile,
-        "aria-label": "Send message",
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faPaperPlane })
+        attachments,
+        onRemoveAttachment: handleRemoveAttachment,
+        disabled: isInputDisabled
       }
-    ) }) })
+    )
   ] });
 };
 const LoadingIndicator = ({ status, agentName = "Agent" }) => {
@@ -108371,8 +108890,89 @@ const AttachmentImage = styled("img")({
   maxHeight: 200,
   borderRadius: 8,
   marginBottom: 8,
-  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
+  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+  cursor: "pointer",
+  transition: "transform 0.2s ease, box-shadow 0.2s ease",
+  "&:hover": {
+    transform: "scale(1.02)",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)"
+  }
 });
+const FileAttachment = styled(Box)(() => ({
+  display: "flex",
+  alignItems: "center",
+  padding: "8px 12px",
+  marginTop: 8,
+  backgroundColor: "rgba(0, 0, 0, 0.1)",
+  borderRadius: 8,
+  boxShadow: "0 1px 4px rgba(0, 0, 0, 0.1)",
+  width: "fit-content",
+  maxWidth: "100%",
+  cursor: "pointer",
+  transition: "all 0.2s ease",
+  "&:hover": {
+    backgroundColor: "rgba(0, 0, 0, 0.15)",
+    transform: "translateY(-1px)",
+    boxShadow: "0 2px 5px rgba(0, 0, 0, 0.15)"
+  },
+  "&:active": {
+    transform: "translateY(0)",
+    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)"
+  }
+}));
+const FileIcon = styled(Box)(({ theme: theme2 }) => ({
+  marginRight: 8,
+  color: theme2.palette.primary.main,
+  display: "flex",
+  alignItems: "center"
+}));
+const FileName = styled(Typography)({
+  fontSize: "0.85rem",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  maxWidth: "100%",
+  textDecoration: "none",
+  "&:hover": {
+    textDecoration: "underline"
+  }
+});
+const isWebUrl = (path) => {
+  return path.startsWith("http://") || path.startsWith("https://");
+};
+const isImage = (path) => {
+  const imageExtensions = [
+    ".jpg",
+    ".jpeg",
+    ".png",
+    ".gif",
+    ".webp",
+    ".bmp",
+    ".svg",
+    ".tiff",
+    ".tif",
+    ".ico",
+    ".heic",
+    ".heif",
+    ".avif",
+    ".jfif",
+    ".pjpeg",
+    ".pjp"
+  ];
+  const lowerPath = path.toLowerCase();
+  return imageExtensions.some((ext) => lowerPath.endsWith(ext));
+};
+const getFileName = (path) => {
+  const parts = path.split(/[/\\]/);
+  return parts[parts.length - 1];
+};
+const getAttachmentUrl = (client2, path) => {
+  if (isImage(path) && !path.startsWith("http")) {
+    const normalizedPath = path.startsWith("file://") ? path : `file://${path}`;
+    return client2.static.getImageUrl(normalizedPath);
+  }
+  return path;
+};
 const SectionLabel = styled(Typography)(({ theme: theme2 }) => ({
   display: "block",
   marginBottom: 4,
@@ -108483,22 +109083,49 @@ const Timestamp = styled(Typography, {
 const MessageItem = reactExports.memo(
   ({ message: message2 }) => {
     const isUser = message2.role === "user";
+    const client2 = reactExports.useMemo(() => {
+      return createLocalOperatorClient(apiConfig.baseUrl);
+    }, []);
     const formattedTimestamp = reactExports.useMemo(() => {
       return message2.timestamp.toLocaleTimeString([], {
         hour: "2-digit",
         minute: "2-digit"
       });
     }, [message2.timestamp]);
+    const getUrl = reactExports.useCallback(
+      (path) => getAttachmentUrl(client2, path),
+      [client2]
+    );
+    const handleFileClick = reactExports.useCallback((filePath) => {
+      try {
+        if (isWebUrl(filePath)) {
+          window.api.openExternal(filePath);
+        } else {
+          const normalizedPath = filePath.startsWith("file://") ? filePath.substring(7) : filePath;
+          window.api.openFile(normalizedPath);
+        }
+      } catch (error) {
+        console.error("Error opening file:", error);
+      }
+    }, []);
+    const handleImageClick = reactExports.useCallback(
+      (filePath) => {
+        handleFileClick(filePath);
+      },
+      [handleFileClick]
+    );
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(MessageContainer, { isUser, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(UserAvatar$1, { isUser, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: isUser ? faUser : faRobot, size: "sm" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(MessagePaper, { elevation: isUser ? 2 : 1, isUser, children: [
-        message2.attachments && message2.attachments.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mb: 2 }, children: message2.attachments.map((attachment) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        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(
           AttachmentImage,
           {
-            src: attachment,
-            alt: "Attachment"
+            src: getUrl(file),
+            alt: getFileName(file),
+            onClick: () => handleImageClick(file),
+            title: `Click to open ${getFileName(file)}`
           },
-          `${message2.id}-${attachment}`
+          `${message2.id}-${file}`
         )) }),
         message2.message && /* @__PURE__ */ jsxRuntimeExports.jsx(
           Box,
@@ -108570,6 +109197,18 @@ const MessageItem = reactExports.memo(
           /* @__PURE__ */ jsxRuntimeExports.jsx(LogContainer, { isUser, children: message2.logging })
         ] }),
         message2.status && /* @__PURE__ */ jsxRuntimeExports.jsx(StatusIndicator, { status: message2.status, children: message2.status }),
+        message2.files && message2.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { mt: 2 }, children: message2.files.filter((file) => !isImage(file)).map((file) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          FileAttachment,
+          {
+            onClick: () => handleFileClick(file),
+            title: `Click to open ${getFileName(file)}`,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(FileIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faFile, size: "sm" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(FileName, { variant: "body2", children: getFileName(file) })
+            ]
+          },
+          `${message2.id}-${file}`
+        )) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Timestamp, { variant: "caption", isUser, children: formattedTimestamp })
       ] })
     ] });
@@ -108682,65 +109321,6 @@ const RawInfoView = ({ content: content2 }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(RawInfoContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", component: "pre", sx: { fontSize: "0.8rem" }, children: content2 }) })
   ] });
 };
-const ButtonContainer$1 = styled(Box)(() => ({
-  position: "fixed",
-  bottom: 200,
-  right: 20,
-  zIndex: 1e3,
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  pointerEvents: "none"
-  // Prevent container from blocking clicks
-}));
-const StyledButton = styled(IconButton)(({ theme: theme2 }) => ({
-  backgroundColor: theme2.palette.background.paper,
-  color: theme2.palette.text.secondary,
-  width: 44,
-  height: 44,
-  backdropFilter: "blur(8px)",
-  WebkitBackdropFilter: "blur(8px)",
-  borderRadius: "12px",
-  pointerEvents: "auto",
-  boxShadow: "0 2px 12px rgba(0, 0, 0, 0.15)",
-  border: "1px solid rgba(255, 255, 255, 0.1)",
-  transform: "translateY(0)",
-  transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-  "&:hover": {
-    backgroundColor: theme2.palette.background.paper,
-    transform: "translateY(-2px)",
-    boxShadow: "0 4px 16px rgba(0, 0, 0, 0.2)",
-    color: theme2.palette.primary.main,
-    "& svg": {
-      transform: "translateY(1px)"
-    }
-  },
-  "&:active": {
-    transform: "translateY(0)",
-    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
-  },
-  "& svg": {
-    fontSize: "1rem",
-    transition: "transform 0.2s ease"
-  }
-}));
-const ScrollToBottomButton = ({
-  visible,
-  onClick
-}) => {
-  const handleClick = reactExports.useCallback(() => {
-    onClick();
-  }, [onClick]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Fade, { in: visible, timeout: 200, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonContainer$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-    StyledButton,
-    {
-      "aria-label": "Scroll to bottom",
-      onClick: handleClick,
-      size: "small",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faArrowDown })
-    }
-  ) }) });
-};
 const ChatContainer = styled(Paper)({
   display: "flex",
   flexDirection: "column",
@@ -108773,13 +109353,6 @@ const ChatContent = ({
   agentData
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ChatContainer, { elevation: 0, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ScrollToBottomButton,
-      {
-        visible: isFarFromBottom,
-        onClick: scrollToBottom
-      }
-    ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       ChatHeader,
       {
@@ -108825,7 +109398,9 @@ const ChatContent = ({
         conversationId: agentId,
         messages,
         currentJobId,
-        onCancelJob
+        onCancelJob,
+        isFarFromBottom,
+        scrollToBottom
       }
     ),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ChatUtilities, { agentId, agentData })
@@ -109217,7 +109792,7 @@ const CreateAgentDialog = ({
       maxWidth: "sm",
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Subtitle, { children: "Configure your new AI assistant with a name and optional description" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("form", { id: "create-agent-form", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$1, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("form", { id: "create-agent-form", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$2, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             NameField,
             {
@@ -111348,14 +111923,14 @@ const ChatPage = () => {
     [addMessage, conversationId, setCurrentJobId, setIsLoading]
   );
   const handleSendMessage = reactExports.useCallback(
-    async (content2, file) => {
+    async (content2, attachments) => {
       if (!conversationId) return;
       const userMessage = {
         id: v4(),
         role: "user",
         message: content2,
         timestamp: /* @__PURE__ */ new Date(),
-        attachments: file ? [URL.createObjectURL(file)] : void 0
+        files: attachments.length > 0 ? attachments : void 0
       };
       addMessage(conversationId, userMessage);
       setIsLoading(true);
@@ -111386,7 +111961,8 @@ const ChatPage = () => {
             persist_conversation: true,
             // Persist conversation history
             user_message_id: userMessage.id,
-            options: Object.keys(filteredOptions).length > 0 ? filteredOptions : void 0
+            options: Object.keys(filteredOptions).length > 0 ? filteredOptions : void 0,
+            attachments: attachments.length > 0 ? attachments : void 0
           }
         );
         if (jobDetails.result?.id) {
@@ -111560,7 +112136,7 @@ const PageHeader = ({
     children
   ] });
 };
-const SectionTitle$3 = styled(Typography)(({ theme: theme2 }) => ({
+const SectionTitle$4 = styled(Typography)(({ theme: theme2 }) => ({
   fontWeight: 600,
   marginBottom: theme2.spacing(2),
   display: "flex",
@@ -111664,7 +112240,7 @@ const ChatSettings = ({
     setLocalAgent(selectedAgent);
   }, [selectedAgent]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mt: 4, mb: 3 }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$3, { variant: "subtitle1", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$4, { variant: "subtitle1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$2, { icon: faComments }),
       "Chat Settings",
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -112193,7 +112769,7 @@ const HeaderContainer = styled(Box)(({ theme: theme2 }) => ({
   marginBottom: theme2.spacing(2),
   gap: theme2.spacing(2)
 }));
-const SectionTitle$2 = styled(Typography)(({ theme: theme2 }) => ({
+const SectionTitle$3 = styled(Typography)(({ theme: theme2 }) => ({
   fontWeight: 600,
   marginBottom: theme2.spacing(2),
   display: "flex",
@@ -112331,7 +112907,7 @@ const GeneralSettings = ({
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { sx: { mb: 3 } }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mb: 3 }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$2, { variant: "subtitle1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$3, { variant: "subtitle1", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon$1, { icon: faInfoCircle }),
         "Agent Information"
       ] }),
@@ -112396,7 +112972,7 @@ const GeneralSettings = ({
     ] })
   ] });
 };
-const SectionTitle$1 = styled(Typography)(({ theme: theme2 }) => ({
+const SectionTitle$2 = styled(Typography)(({ theme: theme2 }) => ({
   fontWeight: 600,
   marginBottom: theme2.spacing(2),
   display: "flex",
@@ -112423,7 +112999,7 @@ const SecuritySettings = ({
   initialSelectedAgentId
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mt: 1 }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$1, { variant: "subtitle1", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionTitle$2, { variant: "subtitle1", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(TitleIcon, { icon: faShieldAlt }),
       "Security Prompt",
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -112968,7 +113544,7 @@ const ModelsInitializer = () => {
   return null;
 };
 const localOperatorIcon = "" + new URL("icon-ngVHF_bZ.png", import.meta.url).href;
-const pulse = keyframes`
+const pulse$1 = keyframes`
   0% {
     box-shadow: 0 0 0 0 rgba(56, 201, 106, 0.4);
   }
@@ -113002,7 +113578,7 @@ const LogoImage = styled("img", {
   "&:hover": {
     transform: "scale(1.12) rotate(5deg)",
     filter: "drop-shadow(0 0 12px rgba(56, 201, 106, 0.5))",
-    animation: `${pulse} 1.5s infinite`
+    animation: `${pulse$1} 1.5s infinite`
   }
 }));
 const LogoText = styled(Typography)({
@@ -113466,6 +114042,268 @@ const SidebarNavigation = () => {
     ] })
   ] });
 };
+var OnboardingStep = /* @__PURE__ */ ((OnboardingStep2) => {
+  OnboardingStep2["WELCOME"] = "welcome";
+  OnboardingStep2["USER_PROFILE"] = "user_profile";
+  OnboardingStep2["MODEL_CREDENTIAL"] = "model_credential";
+  OnboardingStep2["SEARCH_API"] = "search_api";
+  OnboardingStep2["DEFAULT_MODEL"] = "default_model";
+  OnboardingStep2["CREATE_AGENT"] = "create_agent";
+  OnboardingStep2["CONGRATULATIONS"] = "congratulations";
+  return OnboardingStep2;
+})(OnboardingStep || {});
+const useOnboardingStore = create$1()(
+  persist(
+    (set) => ({
+      isComplete: false,
+      currentStep: "welcome",
+      isActive: false,
+      completeOnboarding: () => {
+        set({
+          isComplete: true,
+          isActive: false
+        });
+      },
+      setCurrentStep: (step) => {
+        set({ currentStep: step });
+      },
+      activateOnboarding: () => {
+        set({ isActive: true });
+      },
+      deactivateOnboarding: () => {
+        set({ isActive: false });
+      },
+      resetOnboarding: () => {
+        set({
+          isComplete: false,
+          currentStep: "welcome",
+          isActive: false
+        });
+      }
+    }),
+    {
+      name: "onboarding-storage"
+    }
+  )
+);
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const pulse = keyframes`
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+`;
+styled(Dialog)(({ theme: theme2 }) => ({
+  "& .MuiBackdrop-root": {
+    backdropFilter: "blur(12px)",
+    backgroundColor: alpha(theme2.palette.background.default, 0.7)
+  },
+  "& .MuiDialog-paper": {
+    borderRadius: 16,
+    maxWidth: 700,
+    width: "100%",
+    backgroundColor: alpha(theme2.palette.background.paper, 0.95),
+    boxShadow: `0 15px 50px ${alpha(theme2.palette.primary.main, 0.2)}, 0 10px 40px ${alpha(theme2.palette.common.black, 0.4)}`,
+    border: `1px solid ${alpha(theme2.palette.primary.main, 0.1)}`,
+    overflow: "hidden",
+    animation: `${fadeIn} 0.4s ease-out`
+  }
+}));
+styled(DialogTitle)(({ theme: theme2 }) => ({
+  padding: "24px 28px 16px 28px",
+  fontSize: "1.35rem",
+  fontWeight: 700,
+  textAlign: "center",
+  borderBottom: `1px solid ${alpha(theme2.palette.divider, 0.1)}`,
+  background: `linear-gradient(to right, ${alpha(theme2.palette.primary.main, 0.05)}, ${alpha(theme2.palette.background.default, 0.8)}, ${alpha(theme2.palette.primary.main, 0.05)})`,
+  color: theme2.palette.primary.main
+}));
+styled(DialogContent)(({ theme: theme2 }) => ({
+  padding: "20px 28px",
+  display: "flex",
+  flexDirection: "column",
+  gap: theme2.spacing(3),
+  backgroundColor: theme2.palette.background.default,
+  animation: `${fadeIn} 0.5s ease-out`
+}));
+styled(DialogActions)(({ theme: theme2 }) => ({
+  padding: "16px 28px 24px 28px",
+  justifyContent: "space-between",
+  gap: 16,
+  borderTop: `1px solid ${alpha(theme2.palette.divider, 0.1)}`,
+  background: `linear-gradient(to right, ${alpha(theme2.palette.primary.main, 0.05)}, ${alpha(theme2.palette.background.default, 0.8)}, ${alpha(theme2.palette.primary.main, 0.05)})`
+}));
+styled(Button)(({ theme: theme2 }) => ({
+  borderRadius: 8,
+  padding: "10px 24px",
+  fontWeight: 600,
+  textTransform: "none",
+  minWidth: 120,
+  backgroundColor: theme2.palette.primary.main,
+  color: theme2.palette.primary.contrastText,
+  "&:hover": {
+    backgroundColor: theme2.palette.primary.dark,
+    boxShadow: `0 6px 16px ${alpha(theme2.palette.primary.main, 0.5)}`,
+    transform: "translateY(-2px)"
+  },
+  "&:active": {
+    transform: "translateY(0)"
+  },
+  transition: "all 0.2s ease-in-out"
+}));
+styled(Button)(({ theme: theme2 }) => ({
+  borderRadius: 8,
+  padding: "10px 24px",
+  fontWeight: 500,
+  textTransform: "none",
+  minWidth: 120,
+  borderColor: alpha(theme2.palette.divider, 0.5),
+  color: theme2.palette.text.secondary,
+  "&:hover": {
+    backgroundColor: alpha(theme2.palette.action.hover, 0.1),
+    color: theme2.palette.text.primary,
+    borderColor: theme2.palette.primary.light,
+    boxShadow: `0 4px 12px ${alpha(theme2.palette.common.black, 0.08)}`
+  },
+  transition: "all 0.2s ease-in-out"
+}));
+const SkipButton = styled(Button)(({ theme: theme2 }) => ({
+  color: theme2.palette.text.secondary,
+  textTransform: "none",
+  fontWeight: 500,
+  "&:hover": {
+    backgroundColor: "transparent",
+    textDecoration: "underline",
+    color: theme2.palette.primary.light
+  },
+  transition: "all 0.2s ease-in-out"
+}));
+const StepIndicatorContainer = styled(Box)(({ theme: theme2 }) => ({
+  display: "flex",
+  justifyContent: "center",
+  gap: theme2.spacing(1.5),
+  marginBottom: theme2.spacing(3),
+  padding: theme2.spacing(1, 0)
+}));
+const StepDot = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "active"
+})(({ theme: theme2, active }) => ({
+  width: active ? 12 : 10,
+  height: active ? 12 : 10,
+  borderRadius: "50%",
+  backgroundColor: active ? theme2.palette.primary.main : alpha(theme2.palette.primary.main, 0.25),
+  boxShadow: active ? `0 0 10px ${alpha(theme2.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(Paper)(({ theme: theme2 }) => ({
+  padding: theme2.spacing(3.5),
+  borderRadius: 12,
+  boxShadow: `0 4px 20px ${alpha(theme2.palette.common.black, 0.08)}`,
+  border: `1px solid ${alpha(theme2.palette.primary.main, 0.1)}`,
+  background: `linear-gradient(135deg, ${alpha(theme2.palette.background.paper, 0.95)} 0%, ${alpha(theme2.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(theme2.palette.primary.main, 0.15)}`,
+    transform: "translateY(-2px)"
+  }
+}));
+const SectionTitle$1 = styled(Typography)(({ theme: theme2 }) => ({
+  fontSize: "1.25rem",
+  fontWeight: 700,
+  marginBottom: theme2.spacing(1.5),
+  color: theme2.palette.primary.main,
+  display: "flex",
+  alignItems: "center",
+  gap: theme2.spacing(1)
+}));
+const SectionDescription$1 = styled(Typography)(({ theme: theme2 }) => ({
+  fontSize: "1rem",
+  color: theme2.palette.text.secondary,
+  marginBottom: theme2.spacing(2.5),
+  lineHeight: 1.6
+}));
+const FormContainer = styled(Box)(() => ({
+  display: "flex",
+  flexDirection: "column",
+  gap: 24,
+  "& .MuiTextField-root": {
+    transition: "transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out",
+    "&:focus-within": {
+      transform: "translateY(-2px)"
+    }
+  }
+}));
+styled(Typography)(({ theme: theme2 }) => ({
+  fontSize: "0.95rem",
+  color: theme2.palette.primary.main,
+  cursor: "pointer",
+  fontWeight: 500,
+  display: "inline-flex",
+  alignItems: "center",
+  gap: theme2.spacing(0.5),
+  "&:hover": {
+    textDecoration: "underline",
+    color: theme2.palette.primary.dark
+  },
+  transition: "all 0.2s ease-in-out"
+}));
+const CongratulationsContainer = styled(Box)(({ theme: theme2 }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  textAlign: "center",
+  padding: theme2.spacing(5, 3),
+  animation: `${fadeIn} 0.6s ease-out`
+}));
+const CongratulationsIcon = styled(Box)(({ theme: theme2 }) => ({
+  fontSize: "4rem",
+  color: theme2.palette.success.main,
+  marginBottom: theme2.spacing(3),
+  animation: `${pulse} 2s infinite ease-in-out`,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: `radial-gradient(circle, ${alpha(theme2.palette.success.main, 0.15)} 0%, transparent 70%)`,
+  borderRadius: "50%",
+  padding: theme2.spacing(2)
+}));
+const CongratulationsTitle = styled(Typography)(({ theme: theme2 }) => ({
+  fontSize: "2rem",
+  fontWeight: 700,
+  marginBottom: theme2.spacing(2),
+  color: theme2.palette.primary.main,
+  background: `linear-gradient(90deg, ${theme2.palette.primary.main} 0%, ${theme2.palette.success.main} 100%)`,
+  WebkitBackgroundClip: "text",
+  WebkitTextFillColor: "transparent"
+}));
+const CongratulationsMessage = styled(Typography)(({ theme: theme2 }) => ({
+  fontSize: "1.1rem",
+  color: theme2.palette.text.secondary,
+  marginBottom: theme2.spacing(4),
+  maxWidth: 550,
+  lineHeight: 1.6
+}));
+const EmojiContainer = styled(Box)(({ theme: theme2 }) => ({
+  display: "inline-flex",
+  marginRight: theme2.spacing(1),
+  fontSize: "1em"
+}));
 const configQueryKey = ["config"];
 const useConfig = () => {
   return useQuery({
@@ -113490,6 +114328,235 @@ const useConfig = () => {
     staleTime: 5e3
   });
 };
+const CreateAgentStep = () => {
+  const [name2, setName] = reactExports.useState("");
+  const [description, setDescription] = reactExports.useState("");
+  const [nameError, setNameError] = reactExports.useState("");
+  const [isSaving, setIsSaving] = reactExports.useState(false);
+  const [saveSuccess, setSaveSuccess] = reactExports.useState(false);
+  const successTimeoutRef = reactExports.useRef(null);
+  const { data: configData } = useConfig();
+  const { setCurrentStep } = useOnboardingStore();
+  const createAgentMutation = useCreateAgent();
+  const { setLastChatAgentId } = useAgentSelectionStore();
+  const handleNameChange = (e) => {
+    const value = e.target.value;
+    setName(value);
+    if (!value.trim()) {
+      setNameError("Agent name is required");
+    } else {
+      setNameError("");
+    }
+  };
+  const handleDescriptionChange = (e) => {
+    setDescription(e.target.value);
+  };
+  const handleCreateAgent = async () => {
+    if (name2.trim() && !nameError && configData?.values.hosting && configData?.values.model_name && !isSaving) {
+      try {
+        setIsSaving(true);
+        setSaveSuccess(false);
+        const result = await createAgentMutation.mutateAsync({
+          name: name2.trim(),
+          description: description.trim() || void 0,
+          hosting: configData.values.hosting,
+          model: configData.values.model_name
+        });
+        if (result?.id) {
+          setLastChatAgentId(result.id);
+          sessionStorage.setItem("onboarding_created_agent_id", result.id);
+        }
+        setSaveSuccess(true);
+        if (successTimeoutRef.current) {
+          clearTimeout(successTimeoutRef.current);
+        }
+        successTimeoutRef.current = setTimeout(() => {
+          setSaveSuccess(false);
+          setCurrentStep(OnboardingStep.CONGRATULATIONS);
+        }, 1500);
+      } catch (err) {
+        console.error("Failed to create agent:", err);
+      } finally {
+        setIsSaving(false);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionContainer, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionTitle$1, { children: "Create Your First AI Assistant" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionDescription$1, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🤖" }),
+      " It's time to create your very first AI assistant! Give it a name and personality that reflects what you want it to help you with. This is where the magic begins!"
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Box,
+      {
+        sx: {
+          p: 2,
+          mb: 3,
+          borderRadius: 2,
+          background: (theme2) => `linear-gradient(135deg, ${alpha(theme2.palette.primary.main, 0.05)} 0%, ${alpha(theme2.palette.secondary.main, 0.05)} 100%)`,
+          border: (theme2) => `1px solid ${alpha(theme2.palette.primary.main, 0.1)}`,
+          display: "flex",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FontAwesomeIcon,
+            {
+              icon: faLightbulb,
+              style: {
+                fontSize: "1.5rem",
+                marginRight: "12px",
+                color: "#ff9800"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "span", sx: { fontWeight: 600 }, children: "Pro tip!" }),
+            " ",
+            `Give your agent a descriptive name and purpose. For example, "Research Assistant" or "Creative Writing Partner" will help you remember what it's designed to do.`
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { position: "relative" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TextField,
+        {
+          label: "Agent Name",
+          variant: "outlined",
+          fullWidth: true,
+          value: name2,
+          onChange: handleNameChange,
+          error: !!nameError,
+          helperText: nameError || "Give your AI assistant a memorable name",
+          placeholder: "My Awesome Assistant",
+          required: true,
+          disabled: isSaving,
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              FontAwesomeIcon,
+              {
+                icon: faRobot,
+                style: { marginRight: "10px", color: "#666" }
+              }
+            )
+          },
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              "&.Mui-focused fieldset": {
+                borderColor: "primary.main",
+                borderWidth: 2
+              }
+            }
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { position: "relative" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TextField,
+        {
+          label: "Description (Optional)",
+          variant: "outlined",
+          fullWidth: true,
+          value: description,
+          onChange: handleDescriptionChange,
+          helperText: "Describe what your AI assistant will help you with",
+          placeholder: "A helpful assistant for research, writing, coding...",
+          multiline: true,
+          rows: 3,
+          disabled: isSaving,
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              FontAwesomeIcon,
+              {
+                icon: faLightbulb,
+                style: {
+                  marginRight: "10px",
+                  marginTop: "16px",
+                  color: "#666"
+                }
+              }
+            )
+          },
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              "&.Mui-focused fieldset": {
+                borderColor: "primary.main",
+                borderWidth: 2
+              }
+            }
+          }
+        }
+      ) }),
+      saveSuccess && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Alert,
+        {
+          severity: "success",
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCheck }),
+          sx: {
+            mt: 2,
+            mb: 2,
+            animation: "fadeIn 0.5s ease-out",
+            border: (theme2) => `1px solid ${alpha(theme2.palette.success.main, 0.5)}`
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🎉" }),
+            " Your AI assistant has been created successfully! Get ready for amazing conversations!"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          variant: "contained",
+          color: "primary",
+          fullWidth: true,
+          onClick: handleCreateAgent,
+          disabled: !name2.trim() || !!nameError || isSaving,
+          startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faMagicWandSparkles }),
+          sx: {
+            mt: 3,
+            py: 1.5,
+            fontSize: "1rem",
+            fontWeight: 600,
+            borderRadius: 2,
+            background: (theme2) => `linear-gradient(90deg, ${theme2.palette.primary.main}, ${theme2.palette.secondary.main})`,
+            boxShadow: (theme2) => `0 4px 15px ${alpha(theme2.palette.primary.main, 0.4)}`,
+            "&:hover": {
+              background: (theme2) => `linear-gradient(90deg, ${theme2.palette.primary.dark}, ${theme2.palette.secondary.dark})`,
+              boxShadow: (theme2) => `0 6px 20px ${alpha(theme2.palette.primary.main, 0.6)}`,
+              transform: "translateY(-2px)"
+            },
+            transition: "all 0.3s ease"
+          },
+          children: isSaving ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 24 }) : "Create My AI Assistant"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Box,
+        {
+          sx: {
+            mt: 2,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "💫" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Typography,
+              {
+                variant: "body2",
+                sx: { color: "text.secondary", fontStyle: "italic" },
+                children: "This is the final step before your AI journey begins!"
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+};
 const useUpdateConfig = () => {
   const queryClient2 = useQueryClient();
   const client2 = createLocalOperatorClient(apiConfig.baseUrl);
@@ -113535,6 +114602,1338 @@ const useUpdateConfig = () => {
     }
   });
 };
+const DefaultModelStep = () => {
+  const {
+    providers: providers2,
+    models,
+    isLoading: isLoadingModels,
+    refreshModels
+  } = useModels({ autoFetch: false });
+  const { data: credentialsData, isLoading: isLoadingCredentials } = useCredentials();
+  const { isLoading: isLoadingConfig } = useConfig();
+  const updateConfigMutation = useUpdateConfig();
+  const [selectedProvider, setSelectedProvider] = reactExports.useState("");
+  const [selectedModel, setSelectedModel] = reactExports.useState("");
+  const [isSaving, setIsSaving] = reactExports.useState(false);
+  const [saveSuccess, setSaveSuccess] = reactExports.useState(false);
+  const successTimeoutRef = reactExports.useRef(null);
+  const hasRefreshedModelsRef = reactExports.useRef(false);
+  const availableProviders = reactExports.useMemo(() => {
+    if (!providers2 || !credentialsData) return [];
+    return providers2.filter((provider) => {
+      const providerKey = `${provider.id.toUpperCase()}_API_KEY`;
+      return credentialsData.keys.includes(providerKey);
+    });
+  }, [providers2, credentialsData]);
+  const availableModels = reactExports.useMemo(() => {
+    if (!models || !selectedProvider) return [];
+    return models.filter((model) => model.provider === selectedProvider);
+  }, [models, selectedProvider]);
+  const handleProviderChange = (event) => {
+    const newProvider = event.target.value;
+    setSelectedProvider(newProvider);
+    setSelectedModel("");
+    setSaveSuccess(false);
+  };
+  const handleModelChange = (event) => {
+    const newModel = event.target.value;
+    setSelectedModel(newModel);
+    setSaveSuccess(false);
+    if (selectedProvider && newModel) {
+      saveModelConfig(selectedProvider, newModel);
+    }
+  };
+  const saveModelConfig = reactExports.useCallback(
+    async (provider, model) => {
+      if (provider && model && !isSaving) {
+        try {
+          setIsSaving(true);
+          setSaveSuccess(false);
+          await updateConfigMutation.mutateAsync({
+            hosting: provider,
+            model_name: model
+          });
+          setSaveSuccess(true);
+          if (successTimeoutRef.current) {
+            clearTimeout(successTimeoutRef.current);
+          }
+          successTimeoutRef.current = setTimeout(() => {
+            setSaveSuccess(false);
+          }, 3e3);
+        } catch (err) {
+          console.error("Failed to update default model:", err);
+          setSaveSuccess(false);
+        } finally {
+          setIsSaving(false);
+        }
+      }
+    },
+    [isSaving, updateConfigMutation]
+  );
+  reactExports.useEffect(() => {
+    return () => {
+      if (successTimeoutRef.current) {
+        clearTimeout(successTimeoutRef.current);
+      }
+    };
+  }, []);
+  reactExports.useEffect(() => {
+    if (credentialsData && !isLoadingCredentials && !hasRefreshedModelsRef.current) {
+      refreshModels();
+      hasRefreshedModelsRef.current = true;
+    }
+  }, [credentialsData, isLoadingCredentials, refreshModels]);
+  reactExports.useEffect(() => {
+    if (isLoadingModels || isLoadingCredentials || isLoadingConfig || !credentialsData || !providers2 || availableProviders.length === 0)
+      return;
+    if (selectedProvider) return;
+    let provider = availableProviders[0].id;
+    for (const p2 of availableProviders) {
+      const providerKey = `${p2.id.toUpperCase()}_API_KEY`;
+      if (credentialsData.keys.includes(providerKey)) {
+        provider = p2.id;
+        break;
+      }
+    }
+    setSelectedProvider(provider);
+  }, [
+    availableProviders,
+    providers2,
+    isLoadingModels,
+    isLoadingCredentials,
+    isLoadingConfig,
+    credentialsData,
+    selectedProvider
+  ]);
+  reactExports.useEffect(() => {
+    if (availableModels.length > 0 && !selectedModel) {
+      setSelectedModel(availableModels[0].id);
+      if (selectedProvider && availableModels[0].id) {
+        saveModelConfig(selectedProvider, availableModels[0].id);
+      }
+    }
+  }, [availableModels, selectedModel, selectedProvider, saveModelConfig]);
+  const isLoading = isLoadingModels || isLoadingCredentials || isLoadingConfig;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionContainer, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionTitle$1, { children: "Choose Your Default Model" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionDescription$1, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "✨" }),
+      " Select your preferred AI model and provider that will power all your agents. Don't worry, you can always customize this for individual agents later!"
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Box,
+      {
+        sx: {
+          p: 2,
+          mb: 3,
+          borderRadius: 2,
+          background: (theme2) => `linear-gradient(135deg, ${alpha(theme2.palette.primary.main, 0.05)} 0%, ${alpha(theme2.palette.secondary.main, 0.05)} 100%)`,
+          border: (theme2) => `1px solid ${alpha(theme2.palette.primary.main, 0.1)}`,
+          display: "flex",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            FontAwesomeIcon,
+            {
+              icon: faBrain,
+              style: {
+                fontSize: "1.5rem",
+                marginRight: "12px",
+                color: "#7e57c2"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "span", sx: { fontWeight: 600 }, children: "Choose wisely!" }),
+            " ",
+            "Different models have different capabilities, strengths, and specialties. Pick the one that best suits your needs."
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(FormContainer, { children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { display: "flex", justifyContent: "center", p: 3 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { sx: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        EmojiContainer,
+        {
+          style: {
+            marginRight: "8px",
+            animation: "pulse 1.5s infinite ease-in-out"
+          },
+          children: "⏳"
+        }
+      ),
+      "Loading available AI models..."
+    ] }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        FormControl,
+        {
+          fullWidth: true,
+          variant: "outlined",
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              "&.Mui-focused fieldset": {
+                borderColor: "primary.main",
+                borderWidth: 2
+              }
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabel, { id: "provider-select-label", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                FontAwesomeIcon,
+                {
+                  icon: faRobot,
+                  style: { fontSize: "0.9rem" }
+                }
+              ),
+              "Model Provider"
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Select,
+              {
+                labelId: "provider-select-label",
+                id: "provider-select",
+                value: selectedProvider,
+                onChange: handleProviderChange,
+                label: "Model Provider",
+                children: availableProviders.map((provider) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: provider.id, children: provider.name }, provider.id))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperText, { children: "Choose your AI provider from the ones you've added credentials for" })
+          ]
+        }
+      ),
+      selectedProvider && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        FormControl,
+        {
+          fullWidth: true,
+          variant: "outlined",
+          sx: {
+            mt: 2,
+            "& .MuiOutlinedInput-root": {
+              "&.Mui-focused fieldset": {
+                borderColor: "primary.main",
+                borderWidth: 2
+              }
+            },
+            animation: "fadeIn 0.5s ease-out"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabel, { id: "model-select-label", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                FontAwesomeIcon,
+                {
+                  icon: faWandMagicSparkles,
+                  style: { fontSize: "0.9rem" }
+                }
+              ),
+              "AI Model"
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Select,
+              {
+                labelId: "model-select-label",
+                id: "model-select",
+                value: selectedModel,
+                onChange: handleModelChange,
+                label: "AI Model",
+                children: availableModels.map((model) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: model.id, children: model.name }, model.id))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperText, { children: "Select the specific AI model you want to use" })
+          ]
+        }
+      ),
+      saveSuccess && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Alert,
+        {
+          severity: "success",
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCheck }),
+          sx: {
+            mt: 3,
+            mb: 2,
+            animation: "fadeIn 0.5s ease-out",
+            border: (theme2) => `1px solid ${alpha(theme2.palette.success.main, 0.5)}`
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🎉" }),
+            " Default model configuration saved successfully! Your AI is ready to go!"
+          ] })
+        }
+      ),
+      selectedProvider && selectedModel && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Box,
+        {
+          sx: {
+            mt: 3,
+            p: 2.5,
+            borderRadius: 2,
+            background: (theme2) => alpha(theme2.palette.success.light, 0.1),
+            border: (theme2) => `1px solid ${alpha(theme2.palette.success.main, 0.2)}`,
+            animation: "fadeIn 0.5s ease-out"
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "flex-start" }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              EmojiContainer,
+              {
+                style: {
+                  marginRight: "8px",
+                  fontSize: "1.2rem",
+                  flexShrink: 0
+                },
+                children: "🚀"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Typography,
+              {
+                variant: "body2",
+                sx: {
+                  fontWeight: 500,
+                  whiteSpace: "normal"
+                },
+                children: [
+                  "Great choice! You've selected",
+                  " ",
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Box,
+                    {
+                      component: "span",
+                      sx: {
+                        fontWeight: 700,
+                        color: "primary.main",
+                        display: "inline"
+                      },
+                      children: availableModels.find(
+                        (model) => model.id === selectedModel
+                      )?.name
+                    }
+                  ),
+                  " ",
+                  "from",
+                  " ",
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Box,
+                    {
+                      component: "span",
+                      sx: {
+                        fontWeight: 700,
+                        color: "primary.main",
+                        display: "inline"
+                      },
+                      children: availableProviders.find(
+                        (provider) => provider.id === selectedProvider
+                      )?.name
+                    }
+                  ),
+                  " ",
+                  "as your default AI model."
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    ] }) })
+  ] });
+};
+const CREDENTIAL_MANIFEST = [
+  {
+    key: "OPENAI_API_KEY",
+    name: "OpenAI API Key",
+    description: "API key for accessing OpenAI models like GPT-4o, o3-mini, and GPT-4.5.",
+    url: "https://platform.openai.com/api-keys"
+  },
+  {
+    key: "OPENROUTER_API_KEY",
+    name: "OpenRouter API Key",
+    description: "API key for OpenRouter, which provides access to various AI models from different providers.  Getting an openrouter key allows you to simultaneously access many models from different providers.",
+    url: "https://openrouter.ai/keys"
+  },
+  {
+    key: "DEEPSEEK_API_KEY",
+    name: "DeepSeek API Key",
+    description: "API key for DeepSeek AI models, specialized in code generation and understanding.",
+    url: "https://platform.deepseek.com/"
+  },
+  {
+    key: "MISTRAL_API_KEY",
+    name: "Mistral API Key",
+    description: "API key for Mistral AI models, known for efficient and powerful language processing.",
+    url: "https://console.mistral.ai/api-keys/"
+  },
+  {
+    key: "KIMI_API_KEY",
+    name: "Kimi API Key",
+    description: "API key for Kimi AI, providing advanced language models with strong reasoning capabilities.",
+    url: "https://kimi.moonshot.cn/"
+  },
+  {
+    key: "ALIBABA_CLOUD_API_KEY",
+    name: "Alibaba Cloud API Key",
+    description: "API key for Alibaba Cloud AI models, offering a range of language and vision capabilities such as Qwen.",
+    url: "https://www.alibabacloud.com/product/ai"
+  },
+  {
+    key: "GOOGLE_AI_STUDIO_API_KEY",
+    name: "Google AI Studio API Key",
+    description: "API key for Google AI Studio, providing access to Gemini and other Google AI models.",
+    url: "https://aistudio.google.com/"
+  },
+  {
+    key: "ANTHROPIC_API_KEY",
+    name: "Anthropic API Key",
+    description: "API key for Anthropic's Claude models, known for agentic code generation capabilities.",
+    url: "https://console.anthropic.com/settings/keys"
+  },
+  {
+    key: "SERP_API_KEY",
+    name: "SERP API Key",
+    description: "API key for Search Engine Results Page API, allowing access to search engine data.  Allows your agents to search the web for information.",
+    url: "https://serpapi.com/dashboard"
+  },
+  {
+    key: "TAVILY_API_KEY",
+    name: "Tavily API Key",
+    description: "API key for Tavily, a search API designed specifically for AI applications.  Allows your agents to search the web for information.",
+    url: "https://tavily.com/#api"
+  }
+];
+const getCredentialInfo = (key) => {
+  return CREDENTIAL_MANIFEST.find((cred) => cred.key === key) || {
+    key,
+    name: key,
+    description: "Custom credential",
+    url: ""
+  };
+};
+const useUpdateCredential = () => {
+  const queryClient2 = useQueryClient();
+  const client2 = createLocalOperatorClient(apiConfig.baseUrl);
+  return useMutation({
+    mutationFn: async (credentialUpdate) => {
+      try {
+        const response = await client2.credentials.updateCredential(credentialUpdate);
+        if (response.status >= 400) {
+          throw new Error(response.message || "Failed to update credential");
+        }
+        return response;
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "An unknown error occurred while updating credential";
+        y$1.error(errorMessage);
+        throw error;
+      }
+    },
+    onSuccess: async (_data, variables) => {
+      await queryClient2.invalidateQueries({
+        queryKey: credentialsQueryKey,
+        refetchType: "none"
+        // Don't automatically refetch
+      });
+      queryClient2.setQueryData(
+        credentialsQueryKey,
+        (oldData) => {
+          if (!oldData) return oldData;
+          if (!oldData.keys.includes(variables.key)) {
+            return {
+              ...oldData,
+              keys: [...oldData.keys, variables.key]
+            };
+          }
+          return oldData;
+        }
+      );
+      await queryClient2.refetchQueries({
+        queryKey: credentialsQueryKey,
+        type: "all"
+        // Refetch all related queries at once
+      });
+      y$1.success(`Credential "${variables.key}" updated successfully`);
+    },
+    onError: (error) => {
+      console.error("Error updating credential:", error);
+    }
+  });
+};
+const ModelCredentialStep = () => {
+  const modelProviderCredentials = CREDENTIAL_MANIFEST.filter(
+    (cred) => cred.key !== "SERP_API_KEY" && cred.key !== "TAVILY_API_KEY"
+  );
+  const [selectedCredential, setSelectedCredential] = reactExports.useState(
+    modelProviderCredentials[0]?.key || ""
+  );
+  const [credentialValue, setCredentialValue] = reactExports.useState("");
+  const [error, setError] = reactExports.useState("");
+  const [isSaving, setIsSaving] = reactExports.useState(false);
+  const [saveSuccess, setSaveSuccess] = reactExports.useState(false);
+  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("");
+    setError("");
+    setSaveSuccess(false);
+  };
+  const handleCredentialValueChange = (event) => {
+    setCredentialValue(event.target.value);
+    if (!event.target.value.trim()) {
+      setError("API key is required");
+    } else {
+      setError("");
+    }
+    setSaveSuccess(false);
+  };
+  const successTimeoutRef = reactExports.useRef(null);
+  const handleSaveCredential = async () => {
+    if (selectedCredential && credentialValue.trim() && !credentialsData?.keys.includes(selectedCredential) && !isSaving) {
+      try {
+        setIsSaving(true);
+        setSaveSuccess(false);
+        await updateCredentialMutation.mutateAsync({
+          key: selectedCredential,
+          value: credentialValue.trim()
+        });
+        setSaveSuccess(true);
+        refreshModels();
+        if (successTimeoutRef.current) {
+          clearTimeout(successTimeoutRef.current);
+        }
+        successTimeoutRef.current = setTimeout(() => {
+          setSaveSuccess(false);
+        }, 3e3);
+      } catch (err) {
+        console.error("Failed to save credential:", err);
+        setSaveSuccess(false);
+      } finally {
+        setIsSaving(false);
+      }
+    }
+  };
+  reactExports.useEffect(() => {
+    return () => {
+      if (successTimeoutRef.current) {
+        clearTimeout(successTimeoutRef.current);
+      }
+    };
+  }, []);
+  const selectedCredentialInfo = CREDENTIAL_MANIFEST.find(
+    (cred) => cred.key === selectedCredential
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionContainer, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionTitle$1, { children: "Add Model Provider Credential" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionDescription$1, { 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!"
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        FormControl,
+        {
+          fullWidth: true,
+          variant: "outlined",
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              "&.Mui-focused fieldset": {
+                borderColor: "primary.main",
+                borderWidth: 2
+              }
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabel, { id: "credential-select-label", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🤖" }),
+              " Model Provider"
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Select,
+              {
+                labelId: "credential-select-label",
+                id: "credential-select",
+                value: selectedCredential,
+                onChange: handleCredentialChange,
+                label: "🤖 Model Provider",
+                children: modelProviderCredentials.map((cred) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: cred.key, children: cred.name }, cred.key))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperText, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                FontAwesomeIcon,
+                {
+                  icon: faShieldAlt,
+                  style: {
+                    marginRight: "6px",
+                    fontSize: "0.8rem",
+                    color: "#666"
+                  }
+                }
+              ),
+              "Select your preferred AI model provider"
+            ] }) })
+          ]
+        }
+      ),
+      selectedCredentialInfo && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Box,
+        {
+          sx: {
+            mt: 2,
+            p: 2,
+            borderRadius: 2,
+            border: (theme2) => `1px solid ${alpha(theme2.palette.primary.main, 0.2)}`,
+            background: (theme2) => alpha(theme2.palette.background.paper, 0.5)
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Typography,
+              {
+                variant: "body2",
+                sx: { mb: 1, display: "flex", alignItems: "center" },
+                children: selectedCredentialInfo.description
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Link,
+              {
+                href: selectedCredentialInfo.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                sx: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  mb: 1,
+                  color: "primary.main",
+                  fontWeight: 500,
+                  "&:hover": {
+                    textDecoration: "none",
+                    color: "primary.dark"
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🔗" }),
+                  " Get",
+                  " ",
+                  selectedCredentialInfo.name,
+                  " ",
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    FontAwesomeIcon,
+                    {
+                      icon: faExternalLinkAlt,
+                      style: { marginLeft: "4px", fontSize: "0.8rem" }
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      saveSuccess && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Alert,
+        {
+          severity: "success",
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCheck }),
+          sx: {
+            mb: 2,
+            animation: "fadeIn 0.5s ease-out",
+            border: (theme2) => `1px solid ${alpha(theme2.palette.success.main, 0.5)}`
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🎉" }),
+            " Credential saved successfully! You're one step closer to AI magic!"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TextField,
+        {
+          label: "API Key",
+          variant: "outlined",
+          fullWidth: true,
+          value: credentialValue,
+          onChange: handleCredentialValueChange,
+          error: !!error,
+          helperText: error || "Enter your API key to connect with powerful AI models",
+          placeholder: "Enter your API key here",
+          required: true,
+          type: "password",
+          onBlur: handleSaveCredential,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && selectedCredential && credentialValue.trim() && !error && !isSaving) {
+              handleSaveCredential();
+            }
+          },
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              FontAwesomeIcon,
+              {
+                icon: faKey,
+                style: { marginRight: "10px", color: "#666" }
+              }
+            ),
+            endAdornment: isSaving ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 20 }) : null
+          },
+          disabled: isSaving,
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              "&.Mui-focused fieldset": {
+                borderColor: "primary.main",
+                borderWidth: 2
+              }
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Box,
+        {
+          sx: {
+            mt: 2,
+            display: "flex",
+            alignItems: "center",
+            p: 1.5,
+            borderRadius: 1,
+            background: (theme2) => alpha(theme2.palette.info.main, 0.05)
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🔒" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Typography,
+              {
+                variant: "body2",
+                sx: { color: "text.secondary", fontStyle: "italic" },
+                children: "Your API keys are stored securely on your device and are never shared with anyone."
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const SearchApiStep = () => {
+  const searchApiCredentials = CREDENTIAL_MANIFEST.filter(
+    (cred) => cred.key === "SERP_API_KEY" || cred.key === "TAVILY_API_KEY"
+  );
+  const [selectedCredential, setSelectedCredential] = reactExports.useState(
+    searchApiCredentials[0]?.key || ""
+  );
+  const [credentialValue, setCredentialValue] = reactExports.useState("");
+  const [error, setError] = reactExports.useState("");
+  const [isSaving, setIsSaving] = reactExports.useState(false);
+  const [saveSuccess, setSaveSuccess] = reactExports.useState(false);
+  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("");
+    setError("");
+    setSaveSuccess(false);
+  };
+  const handleCredentialValueChange = (event) => {
+    setCredentialValue(event.target.value);
+    if (event.target.value.trim()) {
+      setError("");
+    }
+    setSaveSuccess(false);
+  };
+  const handleSaveCredential = async () => {
+    if (selectedCredential && credentialValue.trim() && !credentialsData?.keys.includes(selectedCredential) && !isSaving) {
+      try {
+        setIsSaving(true);
+        setSaveSuccess(false);
+        await updateCredentialMutation.mutateAsync({
+          key: selectedCredential,
+          value: credentialValue.trim()
+        });
+        setSaveSuccess(true);
+        if (successTimeoutRef.current) {
+          clearTimeout(successTimeoutRef.current);
+        }
+        successTimeoutRef.current = setTimeout(() => {
+          setSaveSuccess(false);
+        }, 3e3);
+      } catch (err) {
+        console.error("Failed to save credential:", err);
+        setSaveSuccess(false);
+      } finally {
+        setIsSaving(false);
+      }
+    }
+  };
+  reactExports.useEffect(() => {
+    return () => {
+      if (successTimeoutRef.current) {
+        clearTimeout(successTimeoutRef.current);
+      }
+    };
+  }, []);
+  const selectedCredentialInfo = CREDENTIAL_MANIFEST.find(
+    (cred) => cred.key === selectedCredential
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionContainer, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionTitle$1, { children: "Enable Web Search (Optional)" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionDescription$1, { 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."
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Box,
+        {
+          sx: {
+            p: 2,
+            mb: 3,
+            borderRadius: 2,
+            background: (theme2) => `linear-gradient(135deg, ${alpha(theme2.palette.primary.main, 0.05)} 0%, ${alpha(theme2.palette.info.main, 0.1)} 100%)`,
+            border: (theme2) => `1px solid ${alpha(theme2.palette.primary.main, 0.1)}`,
+            display: "flex",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              FontAwesomeIcon,
+              {
+                icon: faGlobe,
+                style: {
+                  fontSize: "1.5rem",
+                  marginRight: "12px",
+                  color: "#3f51b5"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { component: "span", sx: { fontWeight: 600 }, children: "Web-enabled AI is more powerful!" }),
+              " ",
+              "Your agents can find current information, research topics, and provide up-to-date answers."
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        FormControl,
+        {
+          fullWidth: true,
+          variant: "outlined",
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              "&.Mui-focused fieldset": {
+                borderColor: "primary.main",
+                borderWidth: 2
+              }
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabel, { id: "search-api-select-label", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🔎" }),
+              " Search API Provider"
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Select,
+              {
+                labelId: "search-api-select-label",
+                id: "search-api-select",
+                value: selectedCredential,
+                onChange: handleCredentialChange,
+                label: "🔎 Search API Provider",
+                children: searchApiCredentials.map((cred) => /* @__PURE__ */ jsxRuntimeExports.jsx(MenuItem, { value: cred.key, children: cred.name }, cred.key))
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(FormHelperText, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                FontAwesomeIcon,
+                {
+                  icon: faSearch,
+                  style: {
+                    marginRight: "6px",
+                    fontSize: "0.8rem",
+                    color: "#666"
+                  }
+                }
+              ),
+              "Choose your preferred search provider"
+            ] }) })
+          ]
+        }
+      ),
+      selectedCredentialInfo && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Box,
+        {
+          sx: {
+            mt: 2,
+            p: 2,
+            borderRadius: 2,
+            border: (theme2) => `1px solid ${alpha(theme2.palette.primary.main, 0.2)}`,
+            background: (theme2) => alpha(theme2.palette.background.paper, 0.5)
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Typography,
+              {
+                variant: "body2",
+                sx: { mb: 1, display: "flex", alignItems: "center" },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "💡" }),
+                  " ",
+                  selectedCredentialInfo.description
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              Link,
+              {
+                href: selectedCredentialInfo.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                sx: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  mb: 1,
+                  color: "primary.main",
+                  fontWeight: 500,
+                  "&:hover": {
+                    textDecoration: "none",
+                    color: "primary.dark"
+                  }
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🔗" }),
+                  " Get",
+                  " ",
+                  selectedCredentialInfo.name,
+                  " ",
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    FontAwesomeIcon,
+                    {
+                      icon: faExternalLinkAlt,
+                      style: { marginLeft: "4px", fontSize: "0.8rem" }
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      saveSuccess && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Alert,
+        {
+          severity: "success",
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCheck }),
+          sx: {
+            mb: 2,
+            animation: "fadeIn 0.5s ease-out",
+            border: (theme2) => `1px solid ${alpha(theme2.palette.success.main, 0.5)}`
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🎉" }),
+            " Search API credential saved successfully! Your AI can now explore the web!"
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TextField,
+        {
+          label: "API Key",
+          variant: "outlined",
+          fullWidth: true,
+          value: credentialValue,
+          onChange: handleCredentialValueChange,
+          error: !!error,
+          helperText: error || "Enter your API key for the selected provider (optional)",
+          placeholder: "Enter your API key here",
+          type: "password",
+          onBlur: handleSaveCredential,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" && selectedCredential && credentialValue.trim() && !error && !isSaving) {
+              handleSaveCredential();
+            }
+          },
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              FontAwesomeIcon,
+              {
+                icon: faKey,
+                style: { marginRight: "10px", color: "#666" }
+              }
+            ),
+            endAdornment: isSaving ? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, { size: 20 }) : null
+          },
+          disabled: isSaving,
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              "&.Mui-focused fieldset": {
+                borderColor: "primary.main",
+                borderWidth: 2
+              }
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Box,
+        {
+          sx: {
+            mt: 3,
+            p: 2,
+            borderRadius: 2,
+            background: (theme2) => alpha(theme2.palette.info.light, 0.1),
+            border: (theme2) => `1px dashed ${alpha(theme2.palette.info.main, 0.3)}`,
+            display: "flex",
+            alignItems: "center"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { style: { fontSize: "1.2rem", marginRight: "8px" }, children: "💫" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Typography,
+              {
+                variant: "body2",
+                sx: { fontStyle: "italic", color: "text.secondary" },
+                children: "This step is completely optional! You can skip it now and add search capabilities later in Settings if you prefer."
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+const UserProfileStep = () => {
+  const { profile, updateProfile } = useUserStore();
+  const [name2, setName] = reactExports.useState(profile.name === "User" ? "" : profile.name);
+  const [email, setEmail] = reactExports.useState(
+    profile.email === "user@example.com" ? "" : profile.email
+  );
+  const [nameError, setNameError] = reactExports.useState("");
+  reactExports.useEffect(() => {
+    if (name2.trim()) {
+      updateProfile({ name: name2.trim() });
+    }
+    if (email.trim()) {
+      updateProfile({ email: email.trim() });
+    }
+  }, [name2, email, updateProfile]);
+  const handleNameChange = (e) => {
+    const value = e.target.value;
+    setName(value);
+    if (!value.trim()) {
+      setNameError("Name is required");
+    } else {
+      setNameError("");
+    }
+  };
+  const handleEmailChange = (e) => {
+    setEmail(e.target.value);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionContainer, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionTitle$1, { children: "Your Profile Information" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(SectionDescription$1, { 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!"
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { position: "relative" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TextField,
+        {
+          label: "Your Name",
+          variant: "outlined",
+          fullWidth: true,
+          value: name2,
+          onChange: handleNameChange,
+          error: !!nameError,
+          helperText: nameError || "This will be used to create a personalized AI experience",
+          placeholder: "Enter your awesome name",
+          required: true,
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { style: { marginRight: "8px" }, children: "😎" })
+          },
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              "&.Mui-focused fieldset": {
+                borderColor: "primary.main",
+                borderWidth: 2
+              }
+            }
+          }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { position: "relative" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TextField,
+        {
+          label: "Email Address",
+          variant: "outlined",
+          fullWidth: true,
+          value: email,
+          onChange: handleEmailChange,
+          helperText: "Optional: This is only stored locally for your convenience",
+          placeholder: "Enter your email address",
+          type: "email",
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { style: { marginRight: "8px" }, children: "📧" })
+          },
+          sx: {
+            "& .MuiOutlinedInput-root": {
+              "&.Mui-focused fieldset": {
+                borderColor: "primary.main",
+                borderWidth: 2
+              }
+            }
+          }
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mt: 3, display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "💡" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Box,
+        {
+          component: "span",
+          sx: {
+            fontSize: "0.9rem",
+            fontStyle: "italic",
+            color: "text.secondary"
+          },
+          children: "Personalizing your profile helps your AI assistants provide a more tailored experience!"
+        }
+      )
+    ] })
+  ] });
+};
+const WelcomeStep = () => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { animation: "fadeIn 0.6s ease-out" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Typography,
+      {
+        variant: "body1",
+        paragraph: true,
+        sx: {
+          fontSize: "1.1rem",
+          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."
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Typography,
+      {
+        variant: "body1",
+        paragraph: true,
+        sx: {
+          fontSize: "1.05rem",
+          mb: 3
+        },
+        children: "This quick setup will guide you through:"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SectionContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SectionDescription$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mt: 0 }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mb: 1.5, display: "flex", alignItems: "flex-start" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "👤" }),
+        " Setting up your personalized user profile"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mb: 1.5, display: "flex", alignItems: "flex-start" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🔑" }),
+        " Adding your first AI model provider credential"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mb: 1.5, display: "flex", alignItems: "flex-start" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🔍" }),
+        " Supercharging your AI with web search capabilities"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { mb: 1.5, display: "flex", alignItems: "flex-start" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "🤖" }),
+        " Selecting your perfect default AI model"
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Box, { sx: { display: "flex", alignItems: "flex-start" }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "✨" }),
+        " Creating your first intelligent AI assistant"
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Typography,
+      {
+        variant: "body2",
+        sx: {
+          mt: 3,
+          fontStyle: "italic",
+          display: "flex",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(EmojiContainer, { children: "💡" }),
+          " Don't worry! You can always customize these settings later in the Settings page."
+        ]
+      }
+    )
+  ] });
+};
+const OnboardingModal = ({ open }) => {
+  const { currentStep, setCurrentStep, completeOnboarding } = useOnboardingStore();
+  const navigate = useNavigate();
+  const stepTitle = reactExports.useMemo(() => {
+    switch (currentStep) {
+      case OnboardingStep.WELCOME:
+        return "👋 Welcome to Local Operator";
+      case OnboardingStep.USER_PROFILE:
+        return "👤 Set Up Your Profile";
+      case OnboardingStep.MODEL_CREDENTIAL:
+        return "🔑 Add Model Provider Credential";
+      case OnboardingStep.SEARCH_API:
+        return "🔍 Enable Web Search (Optional)";
+      case OnboardingStep.DEFAULT_MODEL:
+        return "🤖 Choose Your Default Model";
+      case OnboardingStep.CREATE_AGENT:
+        return "✨ Create Your First Agent";
+      case OnboardingStep.CONGRATULATIONS:
+        return "🎉 Setup Complete!";
+      default:
+        return "🚀 First-Time Setup";
+    }
+  }, [currentStep]);
+  const stepContent = reactExports.useMemo(() => {
+    switch (currentStep) {
+      case OnboardingStep.WELCOME:
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(WelcomeStep, {});
+      case OnboardingStep.USER_PROFILE:
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(UserProfileStep, {});
+      case OnboardingStep.MODEL_CREDENTIAL:
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(ModelCredentialStep, {});
+      case OnboardingStep.SEARCH_API:
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(SearchApiStep, {});
+      case OnboardingStep.DEFAULT_MODEL:
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(DefaultModelStep, {});
+      case OnboardingStep.CREATE_AGENT:
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(CreateAgentStep, {});
+      case OnboardingStep.CONGRATULATIONS:
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(CongratulationsContainer, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CongratulationsIcon, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(FontAwesomeIcon, { icon: faCheck }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CongratulationsTitle, { children: "🎉 You're all set! 🚀" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CongratulationsMessage, { children: "Amazing! Your Local Operator is now configured and ready to use. You can start chatting with your new AI assistant right away or explore more exciting features in the settings. Get ready for an incredible AI experience!" })
+        ] });
+      default:
+        return null;
+    }
+  }, [currentStep]);
+  const handleNext = reactExports.useCallback(() => {
+    switch (currentStep) {
+      case OnboardingStep.WELCOME:
+        setCurrentStep(OnboardingStep.USER_PROFILE);
+        break;
+      case OnboardingStep.USER_PROFILE:
+        setCurrentStep(OnboardingStep.MODEL_CREDENTIAL);
+        break;
+      case OnboardingStep.MODEL_CREDENTIAL:
+        setCurrentStep(OnboardingStep.SEARCH_API);
+        break;
+      case OnboardingStep.SEARCH_API:
+        setCurrentStep(OnboardingStep.DEFAULT_MODEL);
+        break;
+      case OnboardingStep.DEFAULT_MODEL:
+        setCurrentStep(OnboardingStep.CREATE_AGENT);
+        break;
+      case OnboardingStep.CREATE_AGENT:
+        setCurrentStep(OnboardingStep.CONGRATULATIONS);
+        break;
+      case OnboardingStep.CONGRATULATIONS: {
+        completeOnboarding();
+        const createdAgentId = sessionStorage.getItem(
+          "onboarding_created_agent_id"
+        );
+        if (createdAgentId) {
+          navigate(`/chat/${createdAgentId}`);
+          sessionStorage.removeItem("onboarding_created_agent_id");
+        } else {
+          navigate("/chat");
+        }
+        break;
+      }
+    }
+  }, [currentStep, setCurrentStep, completeOnboarding, navigate]);
+  const handleBack = reactExports.useCallback(() => {
+    switch (currentStep) {
+      case OnboardingStep.USER_PROFILE:
+        setCurrentStep(OnboardingStep.WELCOME);
+        break;
+      case OnboardingStep.MODEL_CREDENTIAL:
+        setCurrentStep(OnboardingStep.USER_PROFILE);
+        break;
+      case OnboardingStep.SEARCH_API:
+        setCurrentStep(OnboardingStep.MODEL_CREDENTIAL);
+        break;
+      case OnboardingStep.DEFAULT_MODEL:
+        setCurrentStep(OnboardingStep.SEARCH_API);
+        break;
+      case OnboardingStep.CREATE_AGENT:
+        setCurrentStep(OnboardingStep.DEFAULT_MODEL);
+        break;
+    }
+  }, [currentStep, setCurrentStep]);
+  const handleSkip = reactExports.useCallback(() => {
+    if (currentStep === OnboardingStep.SEARCH_API) {
+      setCurrentStep(OnboardingStep.DEFAULT_MODEL);
+    }
+  }, [currentStep, setCurrentStep]);
+  const canSkip = currentStep === OnboardingStep.SEARCH_API;
+  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 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 })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    BaseDialog,
+    {
+      open,
+      onClose: () => {
+      },
+      title: dialogTitle,
+      actions: dialogActions,
+      maxWidth: "md",
+      fullWidth: true,
+      dialogProps: {
+        disableEscapeKeyDown: true
+      },
+      children: [
+        renderStepIndicators(),
+        stepContent
+      ]
+    }
+  );
+};
 const SettingContainer = styled(Paper)(({ theme: theme2 }) => ({
   padding: theme2.spacing(2.5),
   borderRadius: theme2.shape.borderRadius * 2,
@@ -113619,124 +116018,6 @@ const ToggleSetting = ({
     ) })
   ] });
 };
-const useUpdateCredential = () => {
-  const queryClient2 = useQueryClient();
-  const client2 = createLocalOperatorClient(apiConfig.baseUrl);
-  return useMutation({
-    mutationFn: async (credentialUpdate) => {
-      try {
-        const response = await client2.credentials.updateCredential(credentialUpdate);
-        if (response.status >= 400) {
-          throw new Error(response.message || "Failed to update credential");
-        }
-        return response;
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : "An unknown error occurred while updating credential";
-        y$1.error(errorMessage);
-        throw error;
-      }
-    },
-    onSuccess: async (_data, variables) => {
-      await queryClient2.invalidateQueries({
-        queryKey: credentialsQueryKey,
-        refetchType: "none"
-        // Don't automatically refetch
-      });
-      queryClient2.setQueryData(
-        credentialsQueryKey,
-        (oldData) => {
-          if (!oldData) return oldData;
-          if (!oldData.keys.includes(variables.key)) {
-            return {
-              ...oldData,
-              keys: [...oldData.keys, variables.key]
-            };
-          }
-          return oldData;
-        }
-      );
-      await queryClient2.refetchQueries({
-        queryKey: credentialsQueryKey,
-        type: "all"
-        // Refetch all related queries at once
-      });
-      y$1.success(`Credential "${variables.key}" updated successfully`);
-    },
-    onError: (error) => {
-      console.error("Error updating credential:", error);
-    }
-  });
-};
-const CREDENTIAL_MANIFEST = [
-  {
-    key: "OPENAI_API_KEY",
-    name: "OpenAI API Key",
-    description: "API key for accessing OpenAI models like GPT-4o, o3-mini, and GPT-4.5.",
-    url: "https://platform.openai.com/api-keys"
-  },
-  {
-    key: "OPENROUTER_API_KEY",
-    name: "OpenRouter API Key",
-    description: "API key for OpenRouter, which provides access to various AI models from different providers.  Getting an openrouter key allows you to simultaneously access many models from different providers.",
-    url: "https://openrouter.ai/keys"
-  },
-  {
-    key: "DEEPSEEK_API_KEY",
-    name: "DeepSeek API Key",
-    description: "API key for DeepSeek AI models, specialized in code generation and understanding.",
-    url: "https://platform.deepseek.com/"
-  },
-  {
-    key: "MISTRAL_API_KEY",
-    name: "Mistral API Key",
-    description: "API key for Mistral AI models, known for efficient and powerful language processing.",
-    url: "https://console.mistral.ai/api-keys/"
-  },
-  {
-    key: "KIMI_API_KEY",
-    name: "Kimi API Key",
-    description: "API key for Kimi AI, providing advanced language models with strong reasoning capabilities.",
-    url: "https://kimi.moonshot.cn/"
-  },
-  {
-    key: "ALIBABA_CLOUD_API_KEY",
-    name: "Alibaba Cloud API Key",
-    description: "API key for Alibaba Cloud AI models, offering a range of language and vision capabilities such as Qwen.",
-    url: "https://www.alibabacloud.com/product/ai"
-  },
-  {
-    key: "GOOGLE_AI_STUDIO_API_KEY",
-    name: "Google AI Studio API Key",
-    description: "API key for Google AI Studio, providing access to Gemini and other Google AI models.",
-    url: "https://aistudio.google.com/"
-  },
-  {
-    key: "ANTHROPIC_API_KEY",
-    name: "Anthropic API Key",
-    description: "API key for Anthropic's Claude models, known for agentic code generation capabilities.",
-    url: "https://console.anthropic.com/settings/keys"
-  },
-  {
-    key: "SERP_API_KEY",
-    name: "SERP API Key",
-    description: "API key for Search Engine Results Page API, allowing access to search engine data.  Allows your agents to search the web for information.",
-    url: "https://serpapi.com/dashboard"
-  },
-  {
-    key: "TAVILY_API_KEY",
-    name: "Tavily API Key",
-    description: "API key for Tavily, a search API designed specifically for AI applications.  Allows your agents to search the web for information.",
-    url: "https://tavily.com/#api"
-  }
-];
-const getCredentialInfo = (key) => {
-  return CREDENTIAL_MANIFEST.find((cred) => cred.key === key) || {
-    key,
-    name: key,
-    description: "Custom credential",
-    url: ""
-  };
-};
 const CredentialCardContainer = styled(Paper)(({ theme: theme2 }) => ({
   padding: theme2.spacing(2),
   height: "100%",
@@ -113908,7 +116189,7 @@ const CredentialDialog = ({
       actions: dialogActions,
       maxWidth: "sm",
       fullWidth: true,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$1, { children: [
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FormContainer$2, { children: [
         !initialKey && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(FormControl, { fullWidth: true, children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(InputLabel, { id: "credential-key-label", children: "Credential Type" }),
@@ -114956,6 +117237,29 @@ const SettingsPage = () => {
     ] })
   ] });
 };
+const useCheckFirstTimeUser = () => {
+  const { data: credentialsData, isLoading: isLoadingCredentials } = useCredentials();
+  const {
+    isComplete: isOnboardingComplete,
+    isActive: isOnboardingActive,
+    activateOnboarding,
+    deactivateOnboarding,
+    resetOnboarding
+  } = useOnboardingStore();
+  const isFirstTimeUser = !isOnboardingComplete && !isLoadingCredentials && (!credentialsData || credentialsData.keys.length === 0);
+  reactExports.useEffect(() => {
+    if (isFirstTimeUser && !isOnboardingActive) {
+      activateOnboarding();
+    }
+  }, [isFirstTimeUser, isOnboardingActive, activateOnboarding]);
+  return {
+    isFirstTimeUser,
+    isOnboardingActive,
+    activateOnboarding,
+    deactivateOnboarding,
+    resetOnboarding
+  };
+};
 library$1.add(icons, icons$1);
 const AppContainer = styled(Box)(() => ({
   display: "flex",
@@ -114969,9 +117273,11 @@ const MainContent = styled(Box)(() => ({
   flexDirection: "column"
 }));
 const App = () => {
+  const { isOnboardingActive } = useCheckFirstTimeUser();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(AppContainer, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(CssBaseline, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ModelsInitializer, {}),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(OnboardingModal, { open: isOnboardingActive }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarNavigation, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(MainContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Routes, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Route, { path: "/", element: /* @__PURE__ */ jsxRuntimeExports.jsx(Navigate, { to: "/chat", replace: true }) }),