@upsnap/strapi 1.0.9 → 1.0.10

package/dist/admin/{App-CEvUaGYv.js → App-CH5fBeNI.js}

@@ -98,6 +98,11 @@ const MONITOR = {
   LIGHTHOUSE_DEFAULT_INTERVAL_SECONDS: 7 * 86400
   // 7 days
 };
+const MONITOR_TYPE_OPTIONS = [
+  { value: MONITOR_TYPE.WEBSITE, label: "Website Monitoring" },
+  { value: MONITOR_TYPE.PORT, label: "Port Monitoring" },
+  { value: MONITOR_TYPE.KEYWORD, label: "Keyword Monitoring" }
+];
 const INTEGRATIONS_TYPES = {
   webhook: {
     name: "webhook",
@@ -177,6 +182,88 @@ const INCIDENTS_EXPORT_TYPES = {
   pdf: "pdf"
 };
 const INCIDENT_CHECK_TYPE_KEYS = Object.keys(INCIDENT_CHECK_TYPES);
+const generateRandomColor = () => {
+  const colors2 = [
+    "#d3ed75",
+    "#33FF57",
+    "#3357FF",
+    "#FF33F5",
+    "#33FFF5",
+    "#eed33b",
+    "#47c8ff",
+    "#4169E1",
+    "#32CD32",
+    "#FF1493",
+    "#8A2BE2",
+    "#00CED1",
+    "#FF4500",
+    "#2E8B57",
+    "#DC143C"
+  ];
+  return colors2[Math.floor(Math.random() * colors2.length)];
+};
+const STORAGE_KEY = "selectedMonitor";
+function getUserData() {
+  if (typeof window === "undefined") return null;
+  try {
+    const userDataString = localStorage.getItem("userDetails");
+    if (!userDataString) return null;
+    const userData = JSON.parse(userDataString);
+    return userData;
+  } catch (error) {
+    console.error("Error parsing userData from localStorage:", error);
+    return null;
+  }
+}
+async function getUserDetailsCached(forceFetchFromMicroservice = false) {
+  if (typeof window === "undefined") return null;
+  try {
+    const userDetailsString = localStorage.getItem("userDetails");
+    if (!userDetailsString) return null;
+    if (!forceFetchFromMicroservice) {
+      try {
+        const cached2 = JSON.parse(userDetailsString);
+        if (cached2.updated_at) {
+          const cachedTime = Date.parse(cached2.updated_at);
+          if (!isNaN(cachedTime)) {
+            const ageMs = Date.now() - cachedTime;
+            if (ageMs < 5 * 60 * 1e3) {
+              return cached2;
+            }
+          }
+        }
+      } catch (e) {
+        console.error("Error parsing cached user details:", e);
+      }
+    }
+    const data = await getUserDetails();
+    if (!data) {
+      return null;
+    }
+    setUserDetails(data);
+    return data;
+  } catch (error) {
+    console.error("Error parsing userDetails from localStorage:", error);
+    return null;
+  }
+}
+function setUserDetails(details) {
+  if (typeof window === "undefined") return;
+  try {
+    const toStore = { ...details, updated_at: (/* @__PURE__ */ new Date()).toISOString() };
+    localStorage.setItem("userDetails", JSON.stringify(toStore));
+  } catch (error) {
+    console.error("Error storing userDetails in localStorage:", error);
+  }
+}
+const clearAllStoredMonitors = () => {
+  if (typeof window === "undefined") return;
+  Object.keys(localStorage).forEach((key) => {
+    if (key.startsWith(`${STORAGE_KEY}`)) {
+      localStorage.removeItem(key);
+    }
+  });
+};
 const request = async (url, options = {}) => {
   const response = await axios__default.default({
     url: `/upsnap${url}`,
@@ -342,69 +429,22 @@ const fetchRegionsData = async () => {
     return [];
   }
 };
-const STORAGE_KEY = "selectedMonitor";
-function getUserData() {
-  if (typeof window === "undefined") return null;
-  try {
-    const userDataString = localStorage.getItem("userDetails");
-    if (!userDataString) return null;
-    const userData = JSON.parse(userDataString);
-    return userData;
-  } catch (error) {
-    console.error("Error parsing userData from localStorage:", error);
-    return null;
-  }
-}
-async function getUserDetailsCached(forceFetchFromMicroservice = false) {
-  if (typeof window === "undefined") return null;
+const fetchTags = async (setIsLoading, setTags) => {
+  setIsLoading(true);
   try {
-    const userDetailsString = localStorage.getItem("userDetails");
-    if (!userDetailsString) return null;
-    if (!forceFetchFromMicroservice) {
-      try {
-        const cached2 = JSON.parse(userDetailsString);
-        if (cached2.updated_at) {
-          const cachedTime = Date.parse(cached2.updated_at);
-          if (!isNaN(cachedTime)) {
-            const ageMs = Date.now() - cachedTime;
-            if (ageMs < 5 * 60 * 1e3) {
-              return cached2;
-            }
-          }
-        }
-      } catch (e) {
-        console.error("Error parsing cached user details:", e);
-      }
-    }
-    const data = await getUserDetails();
-    if (!data) {
-      return null;
+    const result = await request("/tags", {
+      method: "GET"
+    });
+    if (!result?.tagsData) {
+      throw new Error("Failed to fetch tags");
     }
-    setUserDetails(data);
-    return data;
-  } catch (error) {
-    console.error("Error parsing userDetails from localStorage:", error);
-    return null;
-  }
-}
-function setUserDetails(details) {
-  if (typeof window === "undefined") return;
-  try {
-    const toStore = { ...details, updated_at: (/* @__PURE__ */ new Date()).toISOString() };
-    localStorage.setItem("userDetails", JSON.stringify(toStore));
+    setTags(result?.tagsData?.data);
   } catch (error) {
-    console.error("Error storing userDetails in localStorage:", error);
+    console.error("Error fetching tags:", error);
+  } finally {
+    setIsLoading(false);
   }
-}
-const clearAllStoredMonitors = () => {
-  if (typeof window === "undefined") return;
-  Object.keys(localStorage).forEach((key) => {
-    if (key.startsWith(`${STORAGE_KEY}`)) {
-      localStorage.removeItem(key);
-    }
-  });
 };
-getUserData()?.user?.email ?? "";
 function MonitorsTable({
   monitors = [],
   onChange,
@@ -412,15 +452,15 @@ function MonitorsTable({
   handleDelete,
   setBulkDeleteIds
 }) {
-  const [open, setOpen] = React.useState(false);
-  const [channels, setChannels] = React.useState([]);
   const [selected, setSelected] = React.useState([]);
   const [loading, setLoading] = React.useState(true);
-  const [search, setSearch] = React.useState("");
-  const [defaultEmail, setDefaultEmail] = React.useState();
   const isInternalUpdate = React.useRef(false);
   const [primaryMonitorId, setPrimaryMonitorIdState] = React.useState(null);
+  const [availableTags, setAvailableTags] = React.useState([]);
   const navigate = reactRouterDom.useNavigate();
+  React.useEffect(() => {
+    fetchTags(setLoading, setAvailableTags);
+  }, [monitors]);
   React.useEffect(() => {
     async function fetchPrimaryMonitorId() {
       try {
@@ -446,7 +486,7 @@ function MonitorsTable({
     });
   };
   const toggleAll = async () => {
-    const allMonitorIds = Array.isArray(monitors) ? monitors.filter((m) => m.id !== null).map((m) => m.id.toString()) : [];
+    const allMonitorIds = Array.isArray(monitors) ? monitors.filter((monitor) => monitor.id !== null).map((monitor) => monitor.id.toString()) : [];
     const isAllSelected = allMonitorIds.every((id) => selected.includes(id));
     setSelected((prev) => {
       const updated = isAllSelected ? [] : allMonitorIds;
@@ -454,10 +494,6 @@ function MonitorsTable({
       return updated;
     });
   };
-  Array.isArray(channels) ? channels.filter((ch) => {
-    const email2 = ch.config?.recipients?.to ?? "";
-    return ch.name.toLowerCase().includes(search.toLowerCase()) || email2.toLowerCase().includes(search.toLowerCase());
-  }) : [];
   React.useEffect(() => {
     if (isInternalUpdate.current) ;
     setBulkDeleteIds(selected);
@@ -483,7 +519,9 @@ function MonitorsTable({
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.Checkbox,
         {
-          checked: monitors.length > 0 && monitors.every((c) => c.id !== null && selected.includes(c.id.toString())),
+          checked: monitors.length > 0 && monitors.every(
+            (monitor) => monitor.id !== null && selected.includes(monitor.id.toString())
+          ),
           onCheckedChange: toggleAll
         }
       ) }),
@@ -501,7 +539,35 @@ function MonitorsTable({
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "self-start", direction: "column", children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: monitor.name }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: monitor.config.meta.url })
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "row", gap: 1, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Badge,
+            {
+              size: "S",
+              active: monitor.is_enabled,
+              textColor: "primary500",
+              background: "neutral150",
+              children: monitor.service_type
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: monitor.config.meta.url }),
+          monitor.tag_ids && monitor.tag_ids.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { wrap: "wrap", gap: 1, width: "300px", children: monitor.tag_ids.map((tagId) => {
+            const tag = availableTags.find((tag2) => tag2.id === tagId);
+            if (!tag) return null;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.Badge,
+              {
+                size: "S",
+                style: {
+                  backgroundColor: `${tag.color}20`,
+                  border: `1px solid ${tag.color}40`
+                },
+                children: tag.name
+              },
+              tagId
+            );
+          }) })
+        ] })
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
         designSystem.Badge,
@@ -4894,7 +4960,7 @@ function MonitorIntervalSlider({
   const effectiveValue = userPlan === PLAN_TYPES.TRIAL && value < minMonitoringInterval ? minMonitoringInterval : value;
   const sliderPercent = secondsToSlider(effectiveValue);
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "100%", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: "Monitor interval" }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Monitor interval" }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: [
       "Your monitor will be checked every ",
       /* @__PURE__ */ jsxRuntime.jsx("strong", { children: format(effectiveValue) }),
@@ -4941,7 +5007,7 @@ function MonitorIntervalSlider({
           style: {
             left: `${pos}%`,
             transform: "translateX(-50%)",
-            fontSize: 11,
+            fontSize: 10,
             color: disabled ? "#C0C0CF" : "#666687",
             cursor: disabled ? "not-allowed" : "default"
           },
@@ -4992,7 +5058,7 @@ function IntervalSlider({
   const safeValue = Math.max(value, minAllowedSeconds);
   const sliderPercent = secondsToSlider(safeValue);
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "100%", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: "Monitor interval" }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Monitor interval" }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: [
       "Your monitor will be checked every ",
       /* @__PURE__ */ jsxRuntime.jsx("strong", { children: formatSeconds(safeValue) }),
@@ -5152,7 +5218,7 @@ function AdvancedSettings({
     }
     fetchUser();
   }, []);
-  const getPercent = (value) => (value - 6) / 55 * 100;
+  const getPercent = (value) => (value - 5) / 55 * 100;
   return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "advanced-settings", children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Accordion.Trigger,
@@ -5163,7 +5229,7 @@ function AdvancedSettings({
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { padding: 4, direction: "column", gap: 6, width: "100%", alignItems: "flex-start", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { maxWidth: "60%", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { maxWidth: "60%", paddingLeft: 4, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", children: "Request timeout" }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: [
           "The request timeout is ",
@@ -5216,7 +5282,7 @@ function AdvancedSettings({
           value
         )) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 6, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             designSystem.Switch,
@@ -5227,12 +5293,12 @@ function AdvancedSettings({
               }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", children: "Follow redirection" })
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Follow redirection" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "If disabled, we return redirection HTTP codes (3xx)." }) })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "100%", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", fontWeight: "bold", children: "Healthcheck settings" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "100%", paddingLeft: 5, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", children: "Healthcheck settings" }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 6, wrap: "wrap", direction: { initial: "column", medium: "row" }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: { initial: "100%", medium: "48%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
             HealthcheckServiceBlock,
@@ -5533,67 +5599,51 @@ function NotificationChannelsIntegration({
     ] }) }) })
   ] }) }) });
 }
-const RegionsMultiSelect = ({
-  selectedRegionIds,
-  onRegionsChange,
-  placeholder = "Select regions...",
-  primaryRegionId,
-  onPrimaryRegionChange
+const TagMultiSelect = ({
+  selectedTagIds,
+  onTagsChange,
+  placeholder = "Select or create tags...",
+  apiEndpoint = "/tags"
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [searchInput, setSearchInput] = React.useState("");
-  const [availableRegions, setAvailableRegions] = React.useState([]);
+  const [availableTags, setAvailableTags] = React.useState([]);
   const [isLoading, setIsLoading] = React.useState(false);
-  const [isTrialUser, setIsTrialUser] = React.useState(false);
+  const [isCreating, setIsCreating] = React.useState(false);
   const dropdownRef = React.useRef(null);
   const inputRef = React.useRef(null);
   React.useEffect(() => {
-    fetchRegions();
+    fetchTags(setIsLoading, setAvailableTags);
   }, []);
-  const fetchRegions = async () => {
-    setIsLoading(true);
+  const createTag = async (tagName) => {
+    setIsCreating(true);
     try {
-      let userDetails = await getUserDetailsCached();
-      if (!userDetails) {
-        userDetails = await getUserDetails();
-      }
-      const isTrial = userDetails?.user?.subscription_type === PLAN_TYPES.TRIAL;
-      setIsTrialUser(isTrial);
-      const result = await request("/regions", {
-        method: "GET"
+      const result = await request(apiEndpoint, {
+        method: "POST",
+        data: {
+          name: tagName,
+          color: generateRandomColor()
+        }
       });
-      if (!result) return;
-      if (!result) {
-        throw new Error("Failed to fetch regions");
-      }
-      const regions = result.regionsData.data.slice();
-      const defaultIndex = regions.findIndex((r) => r.id === DEFAULT_REGION.id);
-      if (defaultIndex > 0) {
-        const [defaultRegion] = regions.splice(defaultIndex, 1);
-        regions.unshift(defaultRegion);
-      }
-      setAvailableRegions(regions);
+      if (!result?.tagsData) return null;
+      const newTag = result?.tagsData?.data;
+      setAvailableTags((prev) => [...prev, newTag]);
+      return newTag;
     } catch (error) {
-      console.error("Error fetching regions:", error);
+      console.error("Error creating tag:", error);
+      return null;
     } finally {
-      setIsLoading(false);
+      setIsCreating(false);
     }
   };
-  const selectedRegions = availableRegions.filter(
-    (region) => selectedRegionIds.includes(String(region.id))
+  const selectedTags = availableTags.filter((tag) => selectedTagIds.includes(String(tag.id)));
+  const filteredTags = availableTags.filter(
+    (tag) => tag.name.toLowerCase().includes(searchInput.toLowerCase())
   );
-  const filteredRegions = availableRegions.filter(
-    (region) => region.name.toLowerCase().includes(searchInput.toLowerCase())
+  const exactMatch = availableTags.find(
+    (tag) => tag.name.toLowerCase() === searchInput.toLowerCase()
   );
-  const handleSetPrimary = (regionId) => {
-    if (isTrialUser && regionId !== DEFAULT_REGION.id) {
-      return;
-    }
-    if (!selectedRegionIds.includes(regionId)) {
-      onRegionsChange([...selectedRegionIds, regionId]);
-    }
-    onPrimaryRegionChange?.(regionId);
-  };
+  const showCreateOption = searchInput.trim() && !exactMatch;
   React.useEffect(() => {
     const handleClickOutside = (event) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -5604,41 +5654,46 @@ const RegionsMultiSelect = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const handleToggleRegion = (regionId) => {
-    if (isTrialUser && regionId !== DEFAULT_REGION.id) {
-      return;
-    }
-    if (selectedRegionIds.includes(regionId)) {
-      const updated = selectedRegionIds.filter((id) => id !== regionId);
-      onRegionsChange(updated);
-      if (primaryRegionId === regionId) {
-        onPrimaryRegionChange?.(updated[0] ?? null);
-      }
+  const handleToggleTag = (tagId) => {
+    const idStr = String(tagId);
+    if (selectedTagIds.includes(idStr)) {
+      onTagsChange(selectedTagIds.filter((id) => id !== idStr));
     } else {
-      onRegionsChange([...selectedRegionIds, regionId]);
+      onTagsChange([...selectedTagIds, idStr]);
     }
   };
-  const handleRemoveRegion = (regionId, e) => {
+  const handleRemoveTag = (tagId, e) => {
     e?.stopPropagation();
-    const updated = selectedRegionIds.filter((id) => id !== regionId);
-    onRegionsChange(updated);
-    if (primaryRegionId === regionId) {
-      onPrimaryRegionChange?.(updated[0] ?? null);
+    const idStr = String(tagId);
+    onTagsChange(selectedTagIds.filter((id) => id !== idStr));
+  };
+  const handleCreateTag = async () => {
+    if (!searchInput.trim() || isCreating) return;
+    const newTag = await createTag(searchInput.trim());
+    if (newTag) {
+      onTagsChange([...selectedTagIds, String(newTag.id)]);
+      setSearchInput("");
+      inputRef.current?.focus();
     }
   };
   const handleKeyDown = (e) => {
-    if (e.key === "Enter" && filteredRegions.length === 1) {
-      handleToggleRegion(filteredRegions[0].id);
-      setSearchInput("");
-    } else if (e.key === "Backspace" && !searchInput && selectedRegions.length > 0) {
-      handleRemoveRegion(selectedRegions[selectedRegions.length - 1].id);
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (showCreateOption) {
+        handleCreateTag();
+      } else if (filteredTags.length === 1) {
+        handleToggleTag(filteredTags[0].id);
+        setSearchInput("");
+      }
+    } else if (e.key === "Backspace" && !searchInput && selectedTags.length > 0) {
+      handleRemoveTag(selectedTags[selectedTags.length - 1].id);
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { position: "relative", ref: dropdownRef, width: "100%", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       designSystem.Box,
       {
-        padding: 3,
+        padding: 2,
         borderColor: isOpen ? "primary200" : "neutral200",
         background: "neutral0",
         hasRadius: true,
@@ -5650,39 +5705,291 @@ const RegionsMultiSelect = ({
         width: "100%",
         children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, width: "100%", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { wrap: "wrap", gap: 2, flex: "1", width: "100%", children: [
-            selectedRegions.map((region) => {
-              const isPrimary = primaryRegionId === region.id;
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                designSystem.Flex,
-                {
-                  gap: 1,
-                  padding: 1,
-                  background: "primary100",
-                  borderColor: "primary200",
-                  hasRadius: true,
-                  alignItems: "center",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", textColor: "primary700", children: region.name || region.id }),
-                    isPrimary && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { background: "warning100", textColor: "warning700", children: "Primary" }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      designSystem.IconButton,
-                      {
-                        label: "Remove region",
-                        onClick: (e) => handleRemoveRegion(region.id, e),
-                        size: "S",
-                        variant: "ghost",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {})
-                      }
-                    )
-                  ]
-                },
-                region.id
-              );
-            }),
-            isOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "70%", children: /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.TextInput,
+            selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
               {
-                ref: inputRef,
+                gap: 1,
+                padding: 1,
+                hasRadius: true,
+                alignItems: "center",
+                style: {
+                  backgroundColor: `${tag.color}20`,
+                  border: `1px solid ${tag.color}40`
+                },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", style: { color: tag.color }, children: formatTitleToUppercase(tag.name) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.IconButton,
+                    {
+                      label: "Remove tag",
+                      onClick: (e) => handleRemoveTag(tag.id, e),
+                      size: "S",
+                      variant: "ghost",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {})
+                    }
+                  )
+                ]
+              },
+              tag.id
+            )),
+            isOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "70%", children: /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.TextInput,
+              {
+                ref: inputRef,
+                value: searchInput,
+                onChange: (e) => setSearchInput(e.target.value),
+                onKeyDown: handleKeyDown,
+                onFocus: () => setIsOpen(true),
+                placeholder: selectedTags.length === 0 ? placeholder : "",
+                disabled: isLoading,
+                startAction: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, {}),
+                size: "M"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.IconButton,
+            {
+              label: "Toggle dropdown",
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsOpen(!isOpen);
+              },
+              variant: "ghost",
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDown, {})
+            }
+          )
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        position: "absolute",
+        zIndex: 2,
+        width: "100%",
+        marginTop: 2,
+        background: "neutral0",
+        borderColor: "neutral200",
+        hasRadius: true,
+        shadow: "tableShadow",
+        maxHeight: "240px",
+        overflow: "auto",
+        children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textAlign: "center", textColor: "neutral500", children: "Loading tags…" }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          filteredTags.length > 0 ? filteredTags.map((tag) => {
+            const isSelected = selectedTagIds.includes(String(tag.id));
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
+              {
+                padding: 3,
+                gap: 3,
+                alignItems: "center",
+                background: isSelected ? "primary100" : "neutral0",
+                style: { cursor: "pointer" },
+                onClick: () => handleToggleTag(tag.id),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Checkbox,
+                    {
+                      checked: isSelected,
+                      onCheckedChange: () => handleToggleTag(tag.id)
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        width: "12px",
+                        height: "12px",
+                        borderRadius: "50%",
+                        backgroundColor: tag.color
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { flex: "1", children: formatTitleToUppercase(tag.name) })
+                ]
+              },
+              tag.id
+            );
+          }) : searchInput ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textAlign: "center", textColor: "neutral500", children: "No tags found" }) }) : null,
+          showCreateOption && /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Box,
+            {
+              style: {
+                borderTop: "1px solid #D0D3E0"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Button,
+                {
+                  variant: "ghost",
+                  fullWidth: true,
+                  onClick: handleCreateTag,
+                  disabled: isCreating,
+                  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
+                  style: {
+                    justifyContent: "flex-start",
+                    padding: "12px 16px"
+                  },
+                  children: isCreating ? "Creating..." : `Create "${searchInput}"`
+                }
+              )
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+};
+const RegionsMultiSelect = ({
+  selectedRegionIds,
+  onRegionsChange,
+  placeholder = "Select regions...",
+  primaryRegionId,
+  onPrimaryRegionChange
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [searchInput, setSearchInput] = React.useState("");
+  const [availableRegions, setAvailableRegions] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isTrialUser, setIsTrialUser] = React.useState(false);
+  const dropdownRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    fetchRegions();
+  }, []);
+  const fetchRegions = async () => {
+    setIsLoading(true);
+    try {
+      let userDetails = await getUserDetailsCached();
+      if (!userDetails) {
+        userDetails = await getUserDetails();
+      }
+      const isTrial = userDetails?.user?.subscription_type === PLAN_TYPES.TRIAL;
+      setIsTrialUser(isTrial);
+      const result = await request("/regions", {
+        method: "GET"
+      });
+      if (!result) return;
+      if (!result) {
+        throw new Error("Failed to fetch regions");
+      }
+      const regions = result.regionsData.data.slice();
+      const defaultIndex = regions.findIndex((r) => r.id === DEFAULT_REGION.id);
+      if (defaultIndex > 0) {
+        const [defaultRegion] = regions.splice(defaultIndex, 1);
+        regions.unshift(defaultRegion);
+      }
+      setAvailableRegions(regions);
+    } catch (error) {
+      console.error("Error fetching regions:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const selectedRegions = availableRegions.filter(
+    (region) => selectedRegionIds.includes(String(region.id))
+  );
+  const filteredRegions = availableRegions.filter(
+    (region) => region.name.toLowerCase().includes(searchInput.toLowerCase())
+  );
+  const handleSetPrimary = (regionId) => {
+    if (isTrialUser && regionId !== DEFAULT_REGION.id) {
+      return;
+    }
+    if (!selectedRegionIds.includes(regionId)) {
+      onRegionsChange([...selectedRegionIds, regionId]);
+    }
+    onPrimaryRegionChange?.(regionId);
+  };
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setSearchInput("");
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleToggleRegion = (regionId) => {
+    if (isTrialUser && regionId !== DEFAULT_REGION.id) {
+      return;
+    }
+    if (selectedRegionIds.includes(regionId)) {
+      const updated = selectedRegionIds.filter((id) => id !== regionId);
+      onRegionsChange(updated);
+      if (primaryRegionId === regionId) {
+        onPrimaryRegionChange?.(updated[0] ?? null);
+      }
+    } else {
+      onRegionsChange([...selectedRegionIds, regionId]);
+    }
+  };
+  const handleRemoveRegion = (regionId, e) => {
+    e?.stopPropagation();
+    const updated = selectedRegionIds.filter((id) => id !== regionId);
+    onRegionsChange(updated);
+    if (primaryRegionId === regionId) {
+      onPrimaryRegionChange?.(updated[0] ?? null);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && filteredRegions.length === 1) {
+      handleToggleRegion(filteredRegions[0].id);
+      setSearchInput("");
+    } else if (e.key === "Backspace" && !searchInput && selectedRegions.length > 0) {
+      handleRemoveRegion(selectedRegions[selectedRegions.length - 1].id);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { position: "relative", ref: dropdownRef, width: "100%", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        padding: 3,
+        borderColor: isOpen ? "primary200" : "neutral200",
+        background: "neutral0",
+        hasRadius: true,
+        style: { cursor: "text" },
+        onClick: () => {
+          setIsOpen(true);
+          inputRef.current?.focus();
+        },
+        width: "100%",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 2, width: "100%", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { wrap: "wrap", gap: 2, flex: "1", width: "100%", children: [
+            selectedRegions.map((region) => {
+              const isPrimary = primaryRegionId === region.id;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.Flex,
+                {
+                  gap: 1,
+                  padding: 1,
+                  background: "primary100",
+                  borderColor: "primary200",
+                  hasRadius: true,
+                  alignItems: "center",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", textColor: "primary700", children: region.name || region.id }),
+                    isPrimary && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { background: "warning100", textColor: "warning700", children: "Primary" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.IconButton,
+                      {
+                        label: "Remove region",
+                        onClick: (e) => handleRemoveRegion(region.id, e),
+                        size: "S",
+                        variant: "ghost",
+                        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {})
+                      }
+                    )
+                  ]
+                },
+                region.id
+              );
+            }),
+            isOpen && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "70%", children: /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.TextInput,
+              {
+                ref: inputRef,
                 value: searchInput,
                 onChange: (e) => setSearchInput(e.target.value),
                 onKeyDown: handleKeyDown,
@@ -5692,98 +5999,524 @@ const RegionsMultiSelect = ({
                 startAction: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, {}),
                 size: "M"
               }
-            ) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.IconButton,
-            {
-              label: "Toggle dropdown",
-              onClick: (e) => {
-                e.stopPropagation();
-                setIsOpen(!isOpen);
-              },
-              variant: "ghost",
-              children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDown, {})
-            }
-          )
-        ] })
+            ) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.IconButton,
+            {
+              label: "Toggle dropdown",
+              onClick: (e) => {
+                e.stopPropagation();
+                setIsOpen(!isOpen);
+              },
+              variant: "ghost",
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDown, {})
+            }
+          )
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        position: "absolute",
+        zIndex: 2,
+        width: "100%",
+        marginTop: 2,
+        background: "neutral0",
+        borderColor: "neutral200",
+        hasRadius: true,
+        shadow: "tableShadow",
+        maxHeight: "240px",
+        overflow: "auto",
+        children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textAlign: "center", textColor: "neutral500", children: "Loading regions…" }) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredRegions.length > 0 ? filteredRegions.map((region) => {
+          const isSelected = selectedRegionIds.includes(String(region.id));
+          const isPrimary = primaryRegionId === region.id;
+          const isDisabled = isTrialUser && region.id !== DEFAULT_REGION.id;
+          return isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Tooltip,
+            {
+              description: "Upgrade to a paid plan to enable global monitoring.",
+              children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.Flex,
+                {
+                  padding: 3,
+                  gap: 3,
+                  alignItems: "center",
+                  background: isSelected ? "primary100" : "neutral0",
+                  style: {
+                    cursor: "not-allowed",
+                    opacity: 0.5
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Checkbox, { checked: isSelected, disabled: true }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { flex: "1", children: region.name || region.id }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Checkbox, { checked: isPrimary, disabled: true, children: "Primary" })
+                  ]
+                }
+              ) })
+            },
+            region.id
+          ) : /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Flex,
+            {
+              padding: 3,
+              gap: 3,
+              alignItems: "center",
+              background: isSelected ? "primary100" : "neutral0",
+              style: { cursor: "pointer" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Checkbox,
+                  {
+                    checked: isSelected,
+                    onChange: () => handleToggleRegion(region.id)
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { flex: "1", children: region.name || region.id }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Checkbox, { checked: isPrimary, onChange: () => handleSetPrimary(region.id), children: "Primary" })
+              ]
+            },
+            region.id
+          );
+        }) : searchInput ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textAlign: "center", textColor: "neutral500", children: "No regions found" }) }) : null })
+      }
+    )
+  ] });
+};
+function PortAdvancedSettings({
+  timeout,
+  onTimeoutChange,
+  monitorInterval,
+  onMonitorIntervalChange
+}) {
+  const min = 5;
+  const max = 60;
+  const [minMonitoringInterval, setMinMonitoringInterval] = React.useState(60);
+  const [userPlan, setUserPlan] = React.useState(PLAN_TYPES.TRIAL);
+  React.useEffect(() => {
+    async function fetchUser() {
+      try {
+        const details = await getUserDetailsCached(true);
+        const userMinMonitoringIntervalInMins = details?.plan_limits?.min_monitoring_interval;
+        setMinMonitoringInterval(
+          userMinMonitoringIntervalInMins ? userMinMonitoringIntervalInMins * 60 : 60
+        );
+        setUserPlan(details?.user?.subscription_type || PLAN_TYPES.TRIAL);
+      } catch (error) {
+        console.error("Failed to fetch user details in PortAdvancedSettings", error);
+      }
+    }
+    fetchUser();
+  }, []);
+  const getPercent = (value) => (value - min) / (max - min) * 100;
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "port-advanced-settings", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Accordion.Trigger,
+      {
+        caretPosition: "right",
+        description: "Configure monitor interval and connection timeout",
+        children: "Advanced settings"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Flex,
+      {
+        paddingLeft: 6,
+        paddingTop: 4,
+        paddingBottom: 8,
+        direction: "column",
+        gap: 6,
+        width: "100%",
+        alignItems: "flex-start",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: { initial: "column", medium: "row" }, gap: 6, width: "100%", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: { initial: "100%", medium: "48%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            MonitorIntervalSlider,
+            {
+              value: monitorInterval,
+              onChange: onMonitorIntervalChange,
+              minSeconds: 60,
+              maxSeconds: 86400,
+              minMonitoringInterval,
+              userPlan
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: { initial: "100%", medium: "48%" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", children: "Connection timeout" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: [
+              "The connection timeout is ",
+              /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+                timeout,
+                " seconds"
+              ] }),
+              "."
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "range",
+                min,
+                max,
+                step: "1",
+                value: timeout,
+                onChange: (e) => onTimeoutChange(parseInt(e.target.value)),
+                style: {
+                  width: "100%",
+                  height: 6,
+                  borderRadius: 4,
+                  appearance: "none",
+                  cursor: "pointer",
+                  background: `linear-gradient(
+												to right,
+												#4945FF 0%,
+												#4945FF ${getPercent(timeout)}%,
+												#EAEAEA ${getPercent(timeout)}%,
+												#EAEAEA 100%
+											)`
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { position: "relative", paddingTop: 3, height: 20, children: [5, 15, 30, 45, 60].map((value) => /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Box,
+              {
+                position: "absolute",
+                style: {
+                  left: `${getPercent(value)}%`,
+                  transform: "translateX(-50%)",
+                  fontSize: 10,
+                  color: "#666687"
+                },
+                children: [
+                  value,
+                  "s"
+                ]
+              },
+              value
+            )) })
+          ] })
+        ] })
+      }
+    ) })
+  ] }) }) });
+}
+function KeywordInput({
+  keywords,
+  onKeywordsChange,
+  error,
+  matchAll,
+  onMatchAllChange
+}) {
+  const [keywordInput, setKeywordInput] = React.useState("");
+  const handleAddKeyword = () => {
+    const trimmedInput = keywordInput.trim();
+    if (!trimmedInput) return;
+    const newKeyword = {
+      text: trimmedInput,
+      type: "must_contain",
+      case_sensitive: false,
+      is_regex: false
+    };
+    onKeywordsChange([...keywords, newKeyword]);
+    setKeywordInput("");
+  };
+  const handleRemoveKeyword = (indexToRemove) => {
+    onKeywordsChange(keywords.filter((_, index) => index !== indexToRemove));
+  };
+  const handleKeywordChange = (index, field, value) => {
+    const updatedKeywords = [...keywords];
+    updatedKeywords[index] = {
+      ...updatedKeywords[index],
+      [field]: value
+    };
+    onKeywordsChange(updatedKeywords);
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleAddKeyword();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "100%", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { marginBottom: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", justifyContent: "space-between", marginBottom: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", fontWeight: "bold", children: "Keywords / Text" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Switch,
+            {
+              checked: matchAll,
+              onCheckedChange: (checked) => onMatchAllChange(checked)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "500", children: "Match All Keywords" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            type: "text",
+            placeholder: "Enter keyword",
+            value: keywordInput,
+            onChange: (e) => setKeywordInput(e.target.value),
+            onKeyDown: handleKeyPress
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { disabled: !keywordInput.trim(), onClick: handleAddKeyword, children: "Add" })
+      ] }),
+      error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "danger600", children: error }) })
+    ] }),
+    keywords.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "beta", fontWeight: "bold", marginBottom: 3, children: [
+        "Added Keywords (",
+        keywords.length,
+        ")"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, width: "800px", children: keywords.map((keyword, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Box,
+        {
+          padding: 4,
+          borderColor: "neutral200",
+          hasRadius: true,
+          borderRadius: 2,
+          width: "800px",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
+              {
+                alignItems: "flex-start",
+                justifyContent: "space-between",
+                gap: 3,
+                marginBottom: 4,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingBottom: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", marginBottom: 1, children: "Keyword" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.Box,
+                      {
+                        style: {
+                          fontFamily: "monospace",
+                          fontSize: "14px",
+                          backgroundColor: "#F2F4F7",
+                          padding: "6px 12px",
+                          borderRadius: "4px",
+                          color: "#32324D",
+                          wordBreak: "break-all"
+                        },
+                        children: keyword.text
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Button,
+                    {
+                      style: {
+                        padding: "0",
+                        minWidth: "32px",
+                        width: "32px",
+                        height: "32px"
+                      },
+                      variant: "tertiary",
+                      onClick: () => handleRemoveKeyword(index),
+                      title: "Remove keyword",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
+              {
+                direction: { initial: "column", medium: "row" },
+                gap: 5,
+                alignItems: "flex-end",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    designSystem.SingleSelect,
+                    {
+                      value: keyword.type,
+                      onChange: (value) => {
+                        handleKeywordChange(
+                          index,
+                          "type",
+                          value
+                        );
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "must_contain", children: "Start incident when keyword exists" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "must_not_contain", children: "Start incident when keyword does not exist" })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { flex: 1, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, marginBottom: 2, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.Switch,
+                        {
+                          checked: keyword.is_regex,
+                          onCheckedChange: (checked) => handleKeywordChange(index, "is_regex", checked)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "500", children: "Regex" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Use regular expression matching" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { flex: 1, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, marginBottom: 2, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        designSystem.Switch,
+                        {
+                          checked: keyword.case_sensitive,
+                          onCheckedChange: (checked) => handleKeywordChange(index, "case_sensitive", checked)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "500", children: "Case Sensitive" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Match exact letter case" })
+                  ] })
+                ]
+              }
+            )
+          ]
+        },
+        index
+      )) })
+    ] })
+  ] });
+}
+function KeywordAdvancedSettings({
+  timeout,
+  onTimeoutChange,
+  followRedirects,
+  onFollowRedirectsChange,
+  monitorInterval,
+  onMonitorIntervalChange
+}) {
+  const min = 5;
+  const max = 60;
+  const [minMonitoringInterval, setMinMonitoringInterval] = React.useState(60);
+  const [userPlan, setUserPlan] = React.useState(PLAN_TYPES.TRIAL);
+  React.useEffect(() => {
+    async function fetchUser() {
+      try {
+        const details = await getUserDetailsCached(true);
+        const userMinMonitoringIntervalInMins = details?.plan_limits?.min_monitoring_interval;
+        setMinMonitoringInterval(
+          userMinMonitoringIntervalInMins ? userMinMonitoringIntervalInMins * 60 : 60
+        );
+        setUserPlan(details?.user?.subscription_type || PLAN_TYPES.TRIAL);
+      } catch (error) {
+        console.error("Failed to fetch user details in KeywordAdvancedSettings", error);
       }
-    ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-      designSystem.Box,
+    }
+    fetchUser();
+  }, []);
+  const getPercent = (value) => (value - min) / (max - min) * 100;
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: "keyword-advanced-settings", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Accordion.Trigger,
       {
-        position: "absolute",
-        zIndex: 2,
+        caretPosition: "right",
+        description: "Configure monitor interval and request timeout",
+        children: "Advanced settings"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Flex,
+      {
+        paddingLeft: 6,
+        paddingBottom: 8,
+        paddingTop: 4,
+        direction: "column",
+        gap: 6,
         width: "100%",
-        marginTop: 2,
-        background: "neutral0",
-        borderColor: "neutral200",
-        hasRadius: true,
-        shadow: "tableShadow",
-        maxHeight: "240px",
-        overflow: "auto",
-        children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textAlign: "center", textColor: "neutral500", children: "Loading regions…" }) }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: filteredRegions.length > 0 ? filteredRegions.map((region) => {
-          const isSelected = selectedRegionIds.includes(String(region.id));
-          const isPrimary = primaryRegionId === region.id;
-          const isDisabled = isTrialUser && region.id !== DEFAULT_REGION.id;
-          return isDisabled ? /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.Tooltip,
-            {
-              description: "Upgrade to a paid plan to enable global monitoring.",
-              children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-                designSystem.Flex,
+        alignItems: "flex-start",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: { initial: "column", medium: "row" }, gap: 6, width: "100%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: { initial: "100%", medium: "48%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+              MonitorIntervalSlider,
+              {
+                value: monitorInterval,
+                onChange: onMonitorIntervalChange,
+                minSeconds: 60,
+                maxSeconds: 86400,
+                minMonitoringInterval,
+                userPlan
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: { initial: "100%", medium: "48%" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Request timeout" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: [
+                "The request timeout is ",
+                /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+                  timeout,
+                  " seconds"
+                ] }),
+                "."
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
                 {
-                  padding: 3,
-                  gap: 3,
-                  alignItems: "center",
-                  background: isSelected ? "primary100" : "neutral0",
+                  type: "range",
+                  min,
+                  max,
+                  step: "1",
+                  value: timeout,
+                  onChange: (e) => onTimeoutChange(parseInt(e.target.value)),
                   style: {
-                    cursor: "not-allowed",
-                    opacity: 0.5
+                    width: "100%",
+                    height: 6,
+                    borderRadius: 4,
+                    appearance: "none",
+                    cursor: "pointer",
+                    background: `linear-gradient(
+                        to right,
+                        #4945FF 0%,
+                        #4945FF ${getPercent(timeout)}%,
+                        #EAEAEA ${getPercent(timeout)}%,
+                        #EAEAEA 100%
+                      )`
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { position: "relative", paddingTop: 3, height: 20, children: [5, 15, 30, 45, 60].map((value) => /* @__PURE__ */ jsxRuntime.jsxs(
+                designSystem.Box,
+                {
+                  position: "absolute",
+                  style: {
+                    left: `${getPercent(value)}%`,
+                    transform: "translateX(-50%)",
+                    fontSize: 10,
+                    color: "#666687"
                   },
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Checkbox, { checked: isSelected, disabled: true }),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { flex: "1", children: region.name || region.id }),
-                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Checkbox, { checked: isPrimary, disabled: true, children: "Primary" })
+                    value,
+                    "s"
                   ]
+                },
+                value
+              )) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, marginBottom: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Switch,
+                {
+                  checked: followRedirects,
+                  onCheckedChange: (checked) => onFollowRedirectsChange(checked)
                 }
-              ) })
-            },
-            region.id
-          ) : /* @__PURE__ */ jsxRuntime.jsxs(
-            designSystem.Flex,
-            {
-              padding: 3,
-              gap: 3,
-              alignItems: "center",
-              background: isSelected ? "primary100" : "neutral0",
-              style: { cursor: "pointer" },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Checkbox,
-                  {
-                    checked: isSelected,
-                    onChange: () => handleToggleRegion(region.id)
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { flex: "1", children: region.name || region.id }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Checkbox,
-                  {
-                    checked: isPrimary,
-                    onChange: () => handleSetPrimary(region.id),
-                    children: "Primary"
-                  }
-                )
-              ]
-            },
-            region.id
-          );
-        }) : searchInput ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textAlign: "center", textColor: "neutral500", children: "No regions found" }) }) : null })
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Follow redirects" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral600", children: "Automatically follow HTTP redirects when checking the URL." })
+          ] })
+        ]
       }
-    )
-  ] });
-};
+    ) })
+  ] }) }) });
+}
 function MonitorForm({ monitor, mode, handleCancelEdit, load }) {
   const [monitorType, setMonitorType] = React.useState(MONITOR_TYPE.WEBSITE);
   const navigate = reactRouterDom.useNavigate();
@@ -6022,6 +6755,8 @@ function MonitorForm({ monitor, mode, handleCancelEdit, load }) {
     setIsSubmitting(true);
     try {
       let result;
+      let url = mode === "create" ? "/monitors" : `/monitors/${monitor?.id}`;
+      let method = mode === "create" ? "POST" : "PUT";
       if (monitorType === MONITOR_TYPE.PORT) {
         const portNumber = parseInt(portFormData.port, 10);
         const fieldErrors = {};
@@ -6064,8 +6799,8 @@ function MonitorForm({ monitor, mode, handleCancelEdit, load }) {
           tag_ids: selectedTagIds,
           ...mode === "create" ? { is_enabled: true } : { id: monitor?.id }
         };
-        result = await request("/monitors", {
-          method: mode === "create" ? "POST" : "PATCH",
+        result = await request(url, {
+          method,
           data: payload
         });
       } else if (monitorType === MONITOR_TYPE.KEYWORD) {
@@ -6112,8 +6847,8 @@ function MonitorForm({ monitor, mode, handleCancelEdit, load }) {
           tag_ids: selectedTagIds,
           ...mode === "create" ? { is_enabled: true } : { id: monitor?.id }
         };
-        result = await request("/monitors", {
-          method: mode === "create" ? "POST" : "PUT",
+        result = await request(url, {
+          method,
           data: payload
         });
       } else {
@@ -6135,8 +6870,8 @@ function MonitorForm({ monitor, mode, handleCancelEdit, load }) {
             regions: buildRegionsPayload(),
             is_enabled: true
           };
-          result = await request("/monitors", {
-            method: "POST",
+          result = await request(url, {
+            method,
             data: payload
           });
         } else {
@@ -6155,8 +6890,8 @@ function MonitorForm({ monitor, mode, handleCancelEdit, load }) {
             tag_ids: selectedTagIds,
             regions: buildRegionsPayload()
           };
-          result = await request(`/monitors/${monitor?.id}`, {
-            method: "PUT",
+          result = await request(url, {
+            method,
             data: payload
           });
         }
@@ -6239,6 +6974,21 @@ function MonitorForm({ monitor, mode, handleCancelEdit, load }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", marginBottom: 4, marginTop: 2, children: mode === "create" ? "Create Monitor" : "Edit Monitor" }),
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { marginTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardBody, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 6, width: "100%", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Monitor Type" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.SingleSelect,
+          {
+            value: monitorType,
+            onChange: (value) => {
+              setMonitorType(value);
+              setErrors({});
+            },
+            disabled: mode === "edit",
+            children: MONITOR_TYPE_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: option.value, children: option.label }, option.value))
+          }
+        )
+      ] }) }),
       monitorType === MONITOR_TYPE.WEBSITE && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, width: "100%", children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6316,53 +7066,362 @@ function MonitorForm({ monitor, mode, handleCancelEdit, load }) {
                         }
                       }
                     }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
-                ] }) })
-              ]
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+                ] }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 4, width: "100%", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, marginBottom: 2, alignItems: "start", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Monitoring regions" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "pi", children: "Choose the regions where this monitor should be active" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              RegionsMultiSelect,
+              {
+                selectedRegionIds,
+                onRegionsChange: setSelectedRegionIds,
+                primaryRegionId,
+                onPrimaryRegionChange: handlePrimaryRegionChange
+              }
+            ),
+            errors.primaryRegion && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", variant: "pi", children: errors.primaryRegion })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "100%", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, marginBottom: 2, alignItems: "start", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Add tags" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "pi", children: "Tags will enable you to organize your monitors in a better way" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TagMultiSelect,
+              {
+                selectedTagIds,
+                onTagsChange: setSelectedTagIds
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { width: "100%", direction: "column", gap: 2, alignItems: "start", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Notifications" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              NotificationChannelsIntegration,
+              {
+                value: formData.channel_ids,
+                onChange: (ids) => updateNotificationChannels(ids)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { width: "100%", direction: "column", gap: 2, alignItems: "start", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Advanced settings" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              AdvancedSettings,
+              {
+                services: formData.config.services,
+                onServiceChange: updateService,
+                meta: formData.config.meta,
+                updateMeta
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-mt-6" })
+      ] }),
+      monitorType === MONITOR_TYPE.PORT && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, width: "100%", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.Flex,
+          {
+            direction: { initial: "column", medium: "row" },
+            gap: 5,
+            marginBottom: 3,
+            width: "100%",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errors.name, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Monitor name" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Field.Input,
+                  {
+                    type: "text",
+                    size: "M",
+                    name: "portName",
+                    placeholder: "Monitor name",
+                    value: portFormData.name,
+                    onChange: (e) => {
+                      setPortFormData((prev) => ({
+                        ...prev,
+                        name: e.target.value
+                      }));
+                      if (errors.name) {
+                        setErrors((prev) => ({
+                          ...prev,
+                          name: void 0
+                        }));
+                      }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "100%", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errors.host, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Host / Address" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.Field.Input,
+                    {
+                      type: "text",
+                      size: "M",
+                      name: "host",
+                      placeholder: "example.com or 192.168.1.1",
+                      value: portFormData.host,
+                      onChange: (e) => {
+                        setPortFormData((prev) => ({
+                          ...prev,
+                          host: e.target.value.trim()
+                        }));
+                        if (errors.host) {
+                          setErrors((prev) => ({
+                            ...prev,
+                            host: void 0
+                          }));
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", marginTop: 1, children: "Enter domain or IP only (no protocol or paths)" })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.Flex,
+          {
+            direction: { initial: "column", medium: "row" },
+            gap: 5,
+            marginBottom: 3,
+            width: "100%",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errors.port, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Port" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", marginBottom: 2, children: "The network port to monitor (e.g. 80, 443, 3306). Port range: 1-65535" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Field.Input,
+                  {
+                    type: "number",
+                    size: "M",
+                    name: "port",
+                    min: 1,
+                    max: 65535,
+                    placeholder: "Port",
+                    value: portFormData.port,
+                    onChange: (e) => {
+                      setPortFormData((prev) => ({
+                        ...prev,
+                        port: e.target.value
+                      }));
+                      if (errors.port) {
+                        setErrors((prev) => ({
+                          ...prev,
+                          port: void 0
+                        }));
+                      }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "100%", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, marginBottom: 2, alignItems: "start", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Add tags" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "pi", children: "Tags will enable you to organize your monitors in a better way" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  TagMultiSelect,
+                  {
+                    selectedTagIds,
+                    onTagsChange: setSelectedTagIds
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { width: "100%", direction: "column", gap: 2, alignItems: "start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Notifications" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            NotificationChannelsIntegration,
+            {
+              value: formData.channel_ids,
+              onChange: (ids) => updateNotificationChannels(ids)
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 4, width: "100%", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, marginBottom: 2, alignItems: "start", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Monitoring regions" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "pi", children: "Choose the regions where this monitor should be active" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              RegionsMultiSelect,
-              {
-                selectedRegionIds,
-                onRegionsChange: setSelectedRegionIds,
-                primaryRegionId,
-                onPrimaryRegionChange: handlePrimaryRegionChange
-              }
-            ),
-            errors.primaryRegion && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "danger600", variant: "pi", children: errors.primaryRegion })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { width: "100%", direction: "column", gap: 2, alignItems: "start", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Notifications" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NotificationChannelsIntegration,
-              {
-                value: formData.channel_ids,
-                onChange: (ids) => updateNotificationChannels(ids)
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { width: "100%", direction: "column", gap: 2, alignItems: "start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Advanced settings" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PortAdvancedSettings,
+            {
+              timeout: portFormData.timeout,
+              onTimeoutChange: (value) => {
+                setPortFormData((prev) => ({
+                  ...prev,
+                  timeout: value
+                }));
+              },
+              monitorInterval: portFormData.monitor_interval,
+              onMonitorIntervalChange: (value) => {
+                setPortFormData((prev) => ({
+                  ...prev,
+                  monitor_interval: value
+                }));
               }
-            )
+            }
+          )
+        ] })
+      ] }) }),
+      monitorType === MONITOR_TYPE.KEYWORD && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, width: "100%", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.Flex,
+          {
+            direction: { initial: "column", medium: "row" },
+            gap: 5,
+            marginBottom: 3,
+            width: "100%",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errors.name, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Monitor name" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Field.Input,
+                  {
+                    type: "text",
+                    size: "M",
+                    name: "keywordName",
+                    placeholder: "Monitor name",
+                    value: keywordFormData.name,
+                    onChange: (e) => {
+                      setKeywordFormData((prev) => ({
+                        ...prev,
+                        name: e.target.value
+                      }));
+                      if (errors.name) {
+                        setErrors((prev) => ({
+                          ...prev,
+                          name: void 0
+                        }));
+                      }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error: errors.url, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "URL" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Field.Input,
+                  {
+                    type: "text",
+                    size: "M",
+                    name: "keywordUrl",
+                    placeholder: "https://example.com",
+                    value: keywordFormData.url,
+                    onChange: (e) => {
+                      setKeywordFormData((prev) => ({
+                        ...prev,
+                        url: e.target.value
+                      }));
+                      if (errors.url) {
+                        setErrors((prev) => ({
+                          ...prev,
+                          url: void 0
+                        }));
+                      }
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { width: "100%", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 1, marginBottom: 2, alignItems: "start", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Add tags" }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", variant: "pi", children: "Tags will enable you to organize your monitors in a better way" })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { width: "100%", direction: "column", gap: 2, alignItems: "start", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Advanced settings" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              AdvancedSettings,
-              {
-                services: formData.config.services,
-                onServiceChange: updateService,
-                meta: formData.config.meta,
-                updateMeta
+          /* @__PURE__ */ jsxRuntime.jsx(
+            TagMultiSelect,
+            {
+              selectedTagIds,
+              onTagsChange: setSelectedTagIds
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(
+          KeywordInput,
+          {
+            keywords: keywordFormData.keywords,
+            onKeywordsChange: (keywords) => {
+              setKeywordFormData((prev) => ({
+                ...prev,
+                keywords
+              }));
+              if (errors.keywords) {
+                setErrors((prev) => ({
+                  ...prev,
+                  keywords: void 0
+                }));
               }
-            )
-          ] })
+            },
+            error: errors.keywords,
+            matchAll: keywordFormData.matchAll,
+            onMatchAllChange: (value) => {
+              setKeywordFormData((prev) => ({
+                ...prev,
+                matchAll: value
+              }));
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { width: "100%", direction: "column", gap: 2, alignItems: "start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Notifications" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            NotificationChannelsIntegration,
+            {
+              value: formData.channel_ids,
+              onChange: (ids) => updateNotificationChannels(ids)
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-mt-6" })
-      ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { width: "100%", direction: "column", gap: 2, alignItems: "start", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "epsilon", children: "Advanced settings" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            KeywordAdvancedSettings,
+            {
+              timeout: keywordFormData.timeout,
+              onTimeoutChange: (value) => {
+                setKeywordFormData((prev) => ({
+                  ...prev,
+                  timeout: value
+                }));
+              },
+              followRedirects: keywordFormData.followRedirects,
+              onFollowRedirectsChange: (value) => {
+                setKeywordFormData((prev) => ({
+                  ...prev,
+                  followRedirects: value
+                }));
+              },
+              monitorInterval: keywordFormData.monitor_interval,
+              onMonitorIntervalChange: (value) => {
+                setKeywordFormData((prev) => ({
+                  ...prev,
+                  monitor_interval: value
+                }));
+              }
+            }
+          )
+        ] })
+      ] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "flex-end", gap: 3, marginTop: 2, width: "100%", marginBottom: 4, children: [
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "danger-light", size: "M", onClick: () => handleCancel(), children: "Cancel" }),
         /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { disabled: isSubmitting, size: "M", onClick: handleSubmit, children: isSubmitting ? "Saving..." : mode === "create" ? "Create Monitor" : "Update Monitor" })
@@ -6625,8 +7684,8 @@ const setNestedValue = (obj, path, value) => {
   const keys = path.split(".");
   const result = { ...obj };
   let current = result;
-  for (let i = 0; i < keys.length - 1; i++) {
-    const key = keys[i];
+  for (let index = 0; index < keys.length - 1; index++) {
+    const key = keys[index];
     current[key] = current[key] ? { ...current[key] } : {};
     current = current[key];
   }
@@ -6664,11 +7723,11 @@ function IntegrationFormModal({
       } else {
         const keys = field.name.split(".");
         let current = initialData;
-        for (let i = 0; i < keys.length - 1; i++) {
-          if (!current[keys[i]]) {
-            current[keys[i]] = {};
+        for (let index = 0; index < keys.length - 1; index++) {
+          if (!current[keys[index]]) {
+            current[keys[index]] = {};
           }
-          current = current[keys[i]];
+          current = current[keys[index]];
         }
         current[keys[keys.length - 1]] = "";
       }
@@ -6692,11 +7751,11 @@ function IntegrationFormModal({
       if (value !== void 0) {
         const keys = field.name.split(".");
         let current = populatedData;
-        for (let i = 0; i < keys.length - 1; i++) {
-          if (!current[keys[i]]) {
-            current[keys[i]] = {};
+        for (let index = 0; index < keys.length - 1; index++) {
+          if (!current[keys[index]]) {
+            current[keys[index]] = {};
           }
-          current = current[keys[i]];
+          current = current[keys[index]];
         }
         current[keys[keys.length - 1]] = value;
       }
@@ -6778,11 +7837,11 @@ function IntegrationFormModal({
       if (value !== void 0 && value !== "") {
         const keys = field.name.split(".");
         let current = config2;
-        for (let i = 0; i < keys.length - 1; i++) {
-          if (!current[keys[i]]) {
-            current[keys[i]] = {};
+        for (let index = 0; index < keys.length - 1; index++) {
+          if (!current[keys[index]]) {
+            current[keys[index]] = {};
           }
-          current = current[keys[i]];
+          current = current[keys[index]];
         }
         current[keys[keys.length - 1]] = value;
       }
@@ -6928,43 +7987,52 @@ function IntegrationFormModal({
       channel.config_schema.fields.map((field) => {
         const isDisabled = isFieldDisabled(field);
         const isPassword = field.type === "password";
-        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: field.name, error: errors[field.name], hint: field.description && !errors[field.name] ? field.description : void 0, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: field.label }),
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { position: "relative", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.Field.Input,
-              {
-                type: getInputType(field.type, field.name),
-                placeholder: field.placeholder,
-                value: getDisplayValue(field),
-                disabled: isDisabled,
-                onChange: (e) => {
-                  if (!isDisabled) {
-                    updateFieldValue(field.name, e.target.value);
+        return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.Field.Root,
+          {
+            name: field.name,
+            error: errors[field.name],
+            hint: field.description && !errors[field.name] ? field.description : void 0,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: field.label }),
+              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { position: "relative", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Field.Input,
+                  {
+                    type: getInputType(field.type, field.name),
+                    placeholder: field.placeholder,
+                    value: getDisplayValue(field),
+                    disabled: isDisabled,
+                    onChange: (e) => {
+                      if (!isDisabled) {
+                        updateFieldValue(field.name, e.target.value);
+                      }
+                    }
                   }
-                }
-              }
-            ),
-            isPassword && /* @__PURE__ */ jsxRuntime.jsx(
-              designSystem.Button,
-              {
-                variant: "ghost",
-                size: "S",
-                onClick: () => togglePasswordVisibility(field.name),
-                style: {
-                  position: "absolute",
-                  right: 8,
-                  top: "50%",
-                  transform: "translateY(-50%)"
-                },
-                "aria-label": showPassword[field.name] ? "Hide password" : "Show password",
-                children: showPassword[field.name] ? /* @__PURE__ */ jsxRuntime.jsx(icons.EyeStriked, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, {})
-              }
-            )
-          ] }),
-          field.description && !errors[field.name] && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
-          errors[field.name] && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
-        ] }, field.name) });
+                ),
+                isPassword && /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Button,
+                  {
+                    variant: "ghost",
+                    size: "S",
+                    onClick: () => togglePasswordVisibility(field.name),
+                    style: {
+                      position: "absolute",
+                      right: 8,
+                      top: "50%",
+                      transform: "translateY(-50%)"
+                    },
+                    "aria-label": showPassword[field.name] ? "Hide password" : "Show password",
+                    children: showPassword[field.name] ? /* @__PURE__ */ jsxRuntime.jsx(icons.EyeStriked, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, {})
+                  }
+                )
+              ] }),
+              field.description && !errors[field.name] && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+              errors[field.name] && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+            ]
+          },
+          field.name
+        ) });
       })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
@@ -7295,153 +8363,187 @@ const IntegrationsPage = () => {
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 2, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: { initial: "column", medium: "row" }, alignItems: "stretch", gap: 4, height: "100%", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 4, borderRadius: "8px", width: { initial: "100%", medium: "260px" }, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, alignItems: "stretch", children: filterCategories.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
-        designSystem.Button,
-        {
-          variant: activeFilter === filter.id ? "secondary" : "tertiary",
-          disabled: !filter.enabled,
-          justifyContent: "flex-start",
-          onClick: () => filter.enabled && setActiveFilter(filter.id),
-          children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: filter.name })
-        },
-        filter.id
-      )) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 4, borderRadius: "8px", flex: "1", overflow: "auto", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { maxWidth: { initial: "100%", medium: "900px" }, margin: "auto", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          designSystem.Flex,
-          {
-            direction: { initial: "column", medium: "row" },
-            justifyContent: "space-between",
-            alignItems: { initial: "stretch", medium: "center" },
-            gap: 4,
-            marginBottom: 6,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", children: "Integrations" }),
-                planLimits && /* @__PURE__ */ jsxRuntime.jsx(
-                  designSystem.Box,
-                  {
-                    background: "neutral100",
-                    paddingLeft: 3,
-                    paddingRight: 3,
-                    paddingTop: 1,
-                    paddingBottom: 1,
-                    borderRadius: "20px",
-                    children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
-                      planLimits.used_integrations,
-                      "/",
-                      planLimits.max_integrations,
-                      " used"
-                    ] })
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: { initial: "100%", medium: "280px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                designSystem.TextInput,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      designSystem.Flex,
+      {
+        direction: { initial: "column", medium: "row" },
+        alignItems: "stretch",
+        gap: 4,
+        height: "100%",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Box,
+            {
+              background: "neutral0",
+              padding: 4,
+              borderRadius: "8px",
+              width: { initial: "100%", medium: "260px" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 2, alignItems: "stretch", children: filterCategories.map((filter) => /* @__PURE__ */ jsxRuntime.jsx(
+                designSystem.Button,
                 {
-                  placeholder: "Search by integration type…",
-                  value: searchQuery,
-                  onChange: (e) => setSearchQuery(e.target.value),
-                  startAction: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, {})
-                }
-              ) })
-            ]
-          }
-        ),
-        channelsLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: { initial: 2, medium: 8 }, textAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral500", children: "Loading integrations…" }) }) : activeFilter === "my" ? integrations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: { initial: 2, medium: 8 }, textAlign: "center", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          designSystem.Flex,
-          {
-            direction: "column",
-            alignItems: "center",
-            gap: 3,
-            marginBottom: 4,
-            width: "100%",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", children: "No integrations found" }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "Please add an integration to get started" })
-            ]
-          }
-        ) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 3, width: "100%", children: integrations.map((integration) => /* @__PURE__ */ jsxRuntime.jsx(
-          IntegrationCard,
-          {
-            integration,
-            onEdit: handleEdit,
-            onDelete: handleDelete,
-            onTest: handleTest,
-            onToggle: handleToggleIntegration
-          },
-          integration.id
-        )) }) : filteredChannels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: { initial: 2, medium: 8 }, textAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 3, marginBottom: 4, width: "100%", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", children: "No integrations available" }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: searchQuery ? "Try a different search term" : "No integrations match this filter" })
-        ] }) }) : (
-          /* CATEGORY ACCORDIONS */
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { children: filteredChannels.map((channel) => {
-            const channelIntegrations = getIntegrationsByChannelType(channel.type);
-            return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: channel.type, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { caretPosition: "left", description: channel.description, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, width: { initial: "100%", medium: "542px" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: getIntegrationIcon(channel.icon) }),
-                /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { width: { initial: "100%", medium: "542px" }, gap: 3, justifyContent: "space-between", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: channel.label }),
-                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", children: !planLimits?.can_add_more ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: "Max integrations limit reached for your plan.", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.Button,
+                  variant: activeFilter === filter.id ? "secondary" : "tertiary",
+                  disabled: !filter.enabled,
+                  justifyContent: "flex-start",
+                  onClick: () => filter.enabled && setActiveFilter(filter.id),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: filter.name })
+                },
+                filter.id
+              )) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral0", padding: 4, borderRadius: "8px", flex: "1", overflow: "auto", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { maxWidth: { initial: "100%", medium: "900px" }, margin: "auto", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
+              {
+                direction: { initial: "column", medium: "row" },
+                justifyContent: "space-between",
+                alignItems: { initial: "stretch", medium: "center" },
+                gap: 4,
+                marginBottom: 6,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", gap: 3, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", children: "Integrations" }),
+                    planLimits && /* @__PURE__ */ jsxRuntime.jsx(
+                      designSystem.Box,
+                      {
+                        background: "neutral100",
+                        paddingLeft: 3,
+                        paddingRight: 3,
+                        paddingTop: 1,
+                        paddingBottom: 1,
+                        borderRadius: "20px",
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
+                          planLimits.used_integrations,
+                          "/",
+                          planLimits.max_integrations,
+                          " used"
+                        ] })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: { initial: "100%", medium: "280px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    designSystem.TextInput,
                     {
-                      startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
-                      disabled: !planLimits?.can_add_more,
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        handleAddClick(channel);
-                      },
-                      style: { cursor: "not-allowed" },
-                      children: "Add"
+                      placeholder: "Search by integration type…",
+                      value: searchQuery,
+                      onChange: (e) => setSearchQuery(e.target.value),
+                      startAction: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, {})
                     }
-                  ) }) : /* @__PURE__ */ jsxRuntime.jsx(
-                    designSystem.Button,
+                  ) })
+                ]
+              }
+            ),
+            channelsLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: { initial: 2, medium: 8 }, textAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral500", children: "Loading integrations…" }) }) : activeFilter === "my" ? integrations.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: { initial: 2, medium: 8 }, textAlign: "center", width: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
+              designSystem.Flex,
+              {
+                direction: "column",
+                alignItems: "center",
+                gap: 3,
+                marginBottom: 4,
+                width: "100%",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", children: "No integrations found" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "Please add an integration to get started" })
+                ]
+              }
+            ) }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", gap: 3, width: "100%", children: integrations.map((integration) => /* @__PURE__ */ jsxRuntime.jsx(
+              IntegrationCard,
+              {
+                integration,
+                onEdit: handleEdit,
+                onDelete: handleDelete,
+                onTest: handleTest,
+                onToggle: handleToggleIntegration
+              },
+              integration.id
+            )) }) : filteredChannels.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: { initial: 2, medium: 8 }, textAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 3, marginBottom: 4, width: "100%", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", children: "No integrations available" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: searchQuery ? "Try a different search term" : "No integrations match this filter" })
+            ] }) }) : (
+              /* CATEGORY ACCORDIONS */
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Root, { children: filteredChannels.map((channel) => {
+                const channelIntegrations = getIntegrationsByChannelType(channel.type);
+                return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Accordion.Item, { value: channel.type, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Trigger, { caretPosition: "left", description: channel.description, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    designSystem.Flex,
                     {
-                      startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
-                      disabled: !planLimits?.can_add_more,
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        handleAddClick(channel);
-                      },
-                      children: "Add"
+                      alignItems: "center",
+                      gap: 3,
+                      width: { initial: "100%", medium: "542px" },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { children: getIntegrationIcon(channel.icon) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(
+                          designSystem.Flex,
+                          {
+                            width: { initial: "100%", medium: "542px" },
+                            gap: 3,
+                            justifyContent: "space-between",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "semiBold", children: channel.label }),
+                              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "flex-end", children: !planLimits?.can_add_more ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tooltip, { label: "Max integrations limit reached for your plan.", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                designSystem.Button,
+                                {
+                                  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
+                                  disabled: !planLimits?.can_add_more,
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    handleAddClick(channel);
+                                  },
+                                  style: { cursor: "not-allowed" },
+                                  children: "Add"
+                                }
+                              ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+                                designSystem.Button,
+                                {
+                                  startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}),
+                                  disabled: !planLimits?.can_add_more,
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    handleAddClick(channel);
+                                  },
+                                  children: "Add"
+                                }
+                              ) })
+                            ]
+                          }
+                        )
+                      ]
                     }
-                  ) })
-                ] })
-              ] }) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, paddingTop: 4, children: [
-                channelIntegrations.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: { initial: 2, medium: 8 }, textAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  designSystem.Flex,
-                  {
-                    direction: "column",
-                    alignItems: "center",
-                    gap: 3,
-                    marginBottom: 4,
-                    width: "100%",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", children: "No integrations found" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: 'No integrations for this channel yet. Click "Add" to create one.' })
-                    ]
-                  }
-                ) }),
-                channelIntegrations.map((integration) => /* @__PURE__ */ jsxRuntime.jsx(
-                  IntegrationCard,
-                  {
-                    integration,
-                    onEdit: handleEdit,
-                    onDelete: handleDelete,
-                    onTest: handleTest,
-                    onToggle: handleToggleIntegration
-                  },
-                  integration.id
-                ))
-              ] }) })
-            ] }, channel.type);
-          }) })
-        )
-      ] }) })
-    ] }),
+                  ) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(designSystem.Accordion.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, paddingTop: 4, children: [
+                    channelIntegrations.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: { initial: 2, medium: 8 }, textAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      designSystem.Flex,
+                      {
+                        direction: "column",
+                        alignItems: "center",
+                        gap: 3,
+                        marginBottom: 4,
+                        width: "100%",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", children: "No integrations found" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: 'No integrations for this channel yet. Click "Add" to create one.' })
+                        ]
+                      }
+                    ) }),
+                    channelIntegrations.map((integration) => /* @__PURE__ */ jsxRuntime.jsx(
+                      IntegrationCard,
+                      {
+                        integration,
+                        onEdit: handleEdit,
+                        onDelete: handleDelete,
+                        onTest: handleTest,
+                        onToggle: handleToggleIntegration
+                      },
+                      integration.id
+                    ))
+                  ] }) })
+                ] }, channel.type);
+              }) })
+            )
+          ] }) })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(
       IntegrationFormModal,
       {
@@ -8914,7 +10016,7 @@ function Dashboard() {
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(HealthCards, { monitorData, isLoading }) })
+          monitorData?.monitor?.service_type === "website" && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { width: "100%", children: /* @__PURE__ */ jsxRuntime.jsx(HealthCards, { monitorData, isLoading }) })
         ]
       }
     ),
@@ -11108,7 +12210,7 @@ const fetchIncidentsFromBackend = async (params, timeout = 1e4) => {
         return null;
       }
       if (!result?.incidentsData) {
-        console.error("Failed to fetch incidents:", result.status);
+        console.error("Failed to fetch incidents: incidentsData missing in response", result);
         return null;
       }
       if (result?.incidentsData?.status === "success") {