From 274ba567e98595c05888b0e204cd6ae3fe1a5457 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 1 Aug 2024 21:30:06 +0100
Subject: [PATCH 001/117] design(frontend): added antd theme config tokens

---
 .../src/styles/tokens/antd-themeConfig.json   | 2238 +++++++++++++++++
 1 file changed, 2238 insertions(+)
 create mode 100644 agenta-web/src/styles/tokens/antd-themeConfig.json

diff --git a/agenta-web/src/styles/tokens/antd-themeConfig.json b/agenta-web/src/styles/tokens/antd-themeConfig.json
new file mode 100644
index 000000000..992bfcfb4
--- /dev/null
+++ b/agenta-web/src/styles/tokens/antd-themeConfig.json
@@ -0,0 +1,2238 @@
+{
+  "token": {
+    "blue.1": "#e6f4ff",
+    "blue.2": "#bae0ff",
+    "blue.3": "#91caff",
+    "blue.4": "#69b1ff",
+    "blue.5": "#4096ff",
+    "blue.6": "#1677ff",
+    "blue.7": "#0958d9",
+    "blue.8": "#003eb3",
+    "blue.9": "#002c8c",
+    "blue.10": "#001d66",
+    "cyan.1": "#e6fffb",
+    "cyan.2": "#b5f5ec",
+    "cyan.3": "#87e8de",
+    "cyan.4": "#5cdbd3",
+    "cyan.5": "#36cfc9",
+    "cyan.6": "#13c2c2",
+    "cyan.7": "#08979c",
+    "cyan.8": "#006d75",
+    "cyan.9": "#00474f",
+    "cyan.10": "#002329",
+    "geekblue.1": "#f0f5ff",
+    "geekblue.2": "#d6e4ff",
+    "geekblue.3": "#adc6ff",
+    "geekblue.4": "#85a5ff",
+    "geekblue.5": "#597ef7",
+    "geekblue.6": "#2f54eb",
+    "geekblue.7": "#1d39c4",
+    "geekblue.8": "#10239e",
+    "geekblue.9": "#061178",
+    "geekblue.10": "#030852",
+    "gold.1": "#fffbe6",
+    "gold.2": "#fff1b8",
+    "gold.3": "#ffe58f",
+    "gold.4": "#ffd666",
+    "gold.5": "#ffc53d",
+    "gold.6": "#faad14",
+    "gold.7": "#d48806",
+    "gold.8": "#ad6800",
+    "gold.9": "#874d00",
+    "gold.10": "#613400",
+    "green.1": "#f6ffed",
+    "green.2": "#d9f7be",
+    "green.3": "#b7eb8f",
+    "green.4": "#95de64",
+    "green.5": "#73d13d",
+    "green.6": "#52c41a",
+    "green.7": "#389e0d",
+    "green.8": "#237804",
+    "green.9": "#135200",
+    "green.10": "#092b00",
+    "lime.1": "#fcffe6",
+    "lime.2": "#f4ffb8",
+    "lime.3": "#eaff8f",
+    "lime.4": "#d3f261",
+    "lime.5": "#bae637",
+    "lime.6": "#a0d911",
+    "lime.7": "#7cb305",
+    "lime.8": "#5b8c00",
+    "lime.9": "#3f6600",
+    "lime.10": "#254000",
+    "magenta.1": "#fff0f6",
+    "magenta.2": "#ffd6e7",
+    "magenta.3": "#ffadd2",
+    "magenta.4": "#ff85c0",
+    "magenta.5": "#f759ab",
+    "magenta.6": "#eb2f96",
+    "magenta.7": "#c41d7f",
+    "magenta.8": "#9e1068",
+    "magenta.9": "#780650",
+    "magenta.10": "#520339",
+    "orange.1": "#fff7e6",
+    "orange.2": "#ffe7ba",
+    "orange.3": "#ffd591",
+    "orange.4": "#ffc069",
+    "colorText": "rgba(0, 0, 0, 0.88)",
+    "colorTextSecondary": "rgba(0, 0, 0, 0.65)",
+    "orange.5": "#ffa940",
+    "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+    "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+    "orange.6": "#fa8c16",
+    "orange.7": "#d46b08",
+    "colorTextLightSolid": "#ffffff",
+    "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+    "colorTextLabel": "rgba(0, 0, 0, 0.65)",
+    "orange.8": "#ad4e00",
+    "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+    "orange.9": "#873800",
+    "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+    "orange.10": "#612500",
+    "purple.1": "#f9f0ff",
+    "purple.2": "#efdbff",
+    "purple.3": "#d3adf7",
+    "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+    "colorIcon": "rgba(0, 0, 0, 0.45)",
+    "purple.4": "#b37feb",
+    "colorIconHover": "rgba(0, 0, 0, 0.88)",
+    "colorBgContainer": "#ffffff",
+    "purple.5": "#9254de",
+    "colorBgElevated": "#ffffff",
+    "purple.6": "#722ed1",
+    "colorBgLayout": "#f5f5f5",
+    "purple.7": "#531dab",
+    "colorBgMask": "rgba(0, 0, 0, 0.45)",
+    "purple.8": "#391085",
+    "colorBgSpotlight": "rgba(0, 0, 0, 0.85)",
+    "purple.9": "#22075e",
+    "colorBorder": "#d9d9d9",
+    "purple.10": "#120338",
+    "colorBorderSecondary": "#f0f0f0",
+    "red.1": "#fff1f0",
+    "colorFill": "rgba(0, 0, 0, 0.15)",
+    "red.2": "#ffccc7",
+    "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+    "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
+    "colorFillQuaternary": "rgba(0, 0, 0, 0.02)",
+    "red.3": "#ffa39e",
+    "red.4": "#ff7875",
+    "colorWhite": "#ffffff",
+    "red.5": "#ff4d4f",
+    "colorBgBase": "#ffffff",
+    "red.6": "#f5222d",
+    "colorTextBase": "#000000",
+    "red.7": "#cf1322",
+    "red.8": "#a8071a",
+    "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+    "red.9": "#820014",
+    "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
+    "red.10": "#5c0011",
+    "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
+    "volcano.1": "#fff2e8",
+    "colorBorderBg": "#ffffff",
+    "volcano.2": "#ffd8bf",
+    "colorFillContent": "rgba(0, 0, 0, 0.06)",
+    "volcano.3": "#ffbb96",
+    "colorFillContentHover": "rgba(0, 0, 0, 0.15)",
+    "volcano.4": "#ff9c6e",
+    "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+    "volcano.5": "#ff7a45",
+    "volcano.6": "#fa541c",
+    "volcano.7": "#d4380d",
+    "transparent": "rgba(0, 0, 0, 0)",
+    "colorSplit": "rgba(0, 0, 0, 0.06)",
+    "yellow.1": "#feffe6",
+    "volcano.8": "#ad2102",
+    "yellow.2": "#ffffb8",
+    "yellow.3": "#fffb8f",
+    "volcano.9": "#871400",
+    "yellow.4": "#fff566",
+    "volcano.10": "#610b00",
+    "yellow.5": "#ffec3d",
+    "yellow.6": "#fadb14",
+    "yellow.7": "#d4b106",
+    "yellow.8": "#ad8b00",
+    "yellow.9": "#876800",
+    "yellow.10": "#614700",
+    "colorPrimary": "#1677ff",
+    "colorSuccess": "#52c41a",
+    "colorWarning": "#faad14",
+    "colorInfo": "#1677ff",
+    "colorError": "#ff4d4f",
+    "colorLink": "#1677ff",
+    "colorErrorBg": "#fff2f0",
+    "colorErrorBgHover": "#fff1f0",
+    "colorErrorBorder": "#ffccc7",
+    "colorErrorBorderHover": "#ffa39e",
+    "colorErrorHover": "#ff7875",
+    "colorErrorActive": "#d9363e",
+    "colorErrorTextHover": "#ff7875",
+    "colorErrorText": "#ff4d4f",
+    "colorErrorTextActive": "#d9363e",
+    "colorLinkHover": "#4096ff",
+    "colorInfoBg": "#e6f4ff",
+    "colorInfoBgHover": "#bae0ff",
+    "colorInfoBorder": "#91caff",
+    "colorInfoBorderHover": "#69b1ff",
+    "colorInfoHover": "#4096ff",
+    "colorInfoActive": "#0958d9",
+    "colorInfoTextHover": "#4096ff",
+    "colorInfoText": "#1677ff",
+    "colorInfoTextActive": "#0958d9",
+    "colorLinkActive": "#0958d9",
+    "colorPrimaryBg": "#e6f4ff",
+    "colorPrimaryBgHover": "#bae0ff",
+    "colorPrimaryBorder": "#91caff",
+    "colorPrimaryBorderHover": "#69b1ff",
+    "colorPrimaryHover": "#4096ff",
+    "colorPrimaryActive": "#0958d9",
+    "colorPrimaryTextHover": "#4096ff",
+    "colorPrimaryText": "#1677ff",
+    "colorPrimaryTextActive": "#0958d9",
+    "colorSuccessBg": "#f6ffed",
+    "colorSuccessBgHover": "#d9f7be",
+    "colorSuccessBorder": "#b7eb8f",
+    "colorSuccessBorderHover": "#95de64",
+    "colorSuccessHover": "#95de64",
+    "colorSuccessActive": "#389e0d",
+    "colorSuccessTextHover": "#73d13d",
+    "colorSuccessText": "#52c41a",
+    "colorSuccessTextActive": "#389e0d",
+    "colorWarningBg": "#fffbe6",
+    "colorWarningBgHover": "#fff1b8",
+    "colorWarningBorder": "#ffe58f",
+    "colorWarningBorderHover": "#ffd666",
+    "colorWarningHover": "#ffd666",
+    "colorWarningActive": "#d48806",
+    "colorWarningTextHover": "#ffc53d",
+    "colorWarningText": "#faad14",
+    "colorWarningTextActive": "#d48806",
+    "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+    "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+    "controlItemBgActive": "#e6f4ff",
+    "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
+    "controlItemBgActiveHover": "#bae0ff",
+    "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+    "controlOutline": "rgba(5, 145, 255, 0.1)",
+    "controlTmpOutline": "rgba(0, 0, 0, 0.02)",
+    "borderRadius": 6,
+    "borderRadiusLG": 8,
+    "borderRadiusSM": 4,
+    "borderRadiusXS": 2,
+    "sizeStep": 4,
+    "sizeUnit": 4,
+    "controlInteractiveSize": 16,
+    "size": 16,
+    "sizeLG": 24,
+    "sizeMD": 20,
+    "sizeMS": 16,
+    "sizeSM": 12,
+    "sizeXL": 32,
+    "sizeXS": 8,
+    "sizeXXL": 48,
+    "controlHeight": 32,
+    "sizeXXS": 4,
+    "controlHeightLG": 40,
+    "controlHeightSM": 24,
+    "controlHeightXS": 16,
+    "lineWidth": 1,
+    "lineWidthBold": 2,
+    "lineWidthFocus": 4,
+    "controlOutlineWidth": 2,
+    "screenLG": 992,
+    "screenLGMax": 1199,
+    "screenLGMin": 992,
+    "screenMD": 768,
+    "screenMDMax": 991,
+    "screenMDMin": 768,
+    "screenSM": 576,
+    "screenSMMax": 767,
+    "screenSMMin": 576,
+    "screenXL": 1200,
+    "screenXLMax": 1599,
+    "screenXLMin": 1200,
+    "screenXS": 480,
+    "screenXSMax": 575,
+    "screenXSMin": 480,
+    "screenXXL": 1600,
+    "screenXXLMin": 1600,
+    "sizePopupArrow": 16,
+    "margin": 16,
+    "marginLG": 24,
+    "marginMD": 20,
+    "marginSM": 12,
+    "marginXL": 32,
+    "marginXS": 8,
+    "marginXXL": 48,
+    "marginXXS": 4,
+    "padding": 16,
+    "paddingLG": 24,
+    "paddingMD": 20,
+    "paddingSM": 12,
+    "paddingXL": 32,
+    "paddingXS": 8,
+    "paddingXXS": 4,
+    "paddingContentHorizontal": 16,
+    "paddingContentHorizontalLG": 24,
+    "paddingContentHorizontalSM": 16,
+    "paddingContentVertical": 12,
+    "paddingContentVerticalLG": 16,
+    "paddingContentVerticalSM": 8,
+    "controlPaddingHorizontal": 12,
+    "controlPaddingHorizontalSM": 8,
+    "fontFamily": "Inter",
+    "fontFamilyCode": "Courier Prime",
+    "fontSize": 12,
+    "fontSizeLG": 14,
+    "fontSizeSM": 10,
+    "fontSizeXL": 18,
+    "fontSizeHeading1": 32,
+    "fontSizeHeading2": 26,
+    "fontSizeHeading3": 20,
+    "fontSizeHeading4": 16,
+    "fontSizeHeading5": 14,
+    "lineHeight": 1.6666666666666667,
+    "lineHeightHeading1": 1.25,
+    "lineHeightHeading2": 1.3076923076923077,
+    "lineHeightHeading3": 1.4,
+    "lineHeightHeading4": 1.5,
+    "lineHeightHeading5": 1.5714285714285714,
+    "lineHeightLG": 1.5714285714285714,
+    "lineHeightSM": 1.8,
+    "fontSizeIcon": 12,
+    "fontWeightStrong": 600,
+    "colorFillAlterSolid": "#fafafa",
+    "fontWeightNormal": 400,
+    "base.1": "#fafafa",
+    "base.2": "#f4f4f5",
+    "base.3": "#e4e4e7",
+    "base.4": "#d4d4d8",
+    "base.5": "#a1a1aa",
+    "base.6": "#71717a",
+    "base.7": "#52525b",
+    "base.8": "#3f3f46",
+    "base.9": "#27272a",
+    "base.10": "#18181b",
+    "fontWeightMedium": 500
+  },
+  "components": {
+    "Input": {
+      "paddingInlineSM": 7,
+      "paddingInlineLG": 11,
+      "paddingInline": 11,
+      "paddingBlockSM": 0,
+      "paddingBlockLG": 7,
+      "paddingBlock": 4,
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "paddingLG": 24,
+      "lineWidth": 1,
+      "lineHeightLG": 1.5714285714285714,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSizeIcon": 12,
+      "fontSize": 12,
+      "controlPaddingHorizontalSM": 8,
+      "controlPaddingHorizontal": 12,
+      "controlOutlineWidth": 2,
+      "controlOutline": "rgba(5, 145, 255, 0.1)",
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+      "colorWarningBorderHover": "#ffd666",
+      "colorWarning": "#faad14",
+      "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimary": "#1677ff",
+      "colorIconHover": "rgba(0, 0, 0, 0.88)",
+      "colorIcon": "rgba(0, 0, 0, 0.45)",
+      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+      "colorErrorBorderHover": "#ffa39e",
+      "colorError": "#ff4d4f",
+      "colorBorder": "#d9d9d9",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "hoverBorderColor": "#4096ff",
+      "addonBg": "rgba(0, 0, 0, 0.02)",
+      "activeBorderColor": "#1677ff",
+      "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
+      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+      "colorErrorBgHover": "#fff1f0",
+      "colorErrorBg": "#fff2f0",
+      "colorWarningBg": "#fffbe6",
+      "colorWarningBgHover": "#fff1b8",
+      "colorWarningText": "#faad14",
+      "colorErrorText": "#ff4d4f",
+      "activeBg": "#ffffff",
+      "hoverBg": "#ffffff",
+      "inputFontSize": 12,
+      "inputFontSizeLG": 14,
+      "inputFontSizeSM": 10,
+      "fontFamily": "Inter"
+    },
+    "Transfer": {
+      "listWidthLG": 250,
+      "listWidth": 180,
+      "listHeight": 200,
+      "itemPaddingBlock": 5,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "margin": 16,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeIcon": 12,
+      "fontSize": 12,
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlItemBgActiveHover": "#bae0ff",
+      "controlItemBgActive": "#e6f4ff",
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusLG": 8,
+      "colorWarning": "#faad14",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorLinkHover": "#4096ff",
+      "colorError": "#ff4d4f",
+      "colorBorder": "#d9d9d9",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "itemHeight": 32,
+      "headerHeight": 40,
+      "fontFamily": "Inter"
+    },
+    "Segmented": {
+      "segmentedBgColorSelected": "#ffffff",
+      "paddingXXS": 4,
+      "marginSM": 12,
+      "lineWidthBold": 2,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlPaddingHorizontalSM": 8,
+      "controlPaddingHorizontal": 12,
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusXS": 2,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorTextLabel": "rgba(0, 0, 0, 0.65)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+      "colorFill": "rgba(0, 0, 0, 0.15)",
+      "colorBgLayout": "#f5f5f5",
+      "colorBgElevated": "#ffffff",
+      "segmentedGroupBg": "rgba(0, 0, 0, 0.04)",
+      "itemSelectedColor": "rgba(0, 0, 0, 0.88)",
+      "itemSelectedBg": "#ffffff",
+      "itemHoverColor": "rgba(0, 0, 0, 0.88)",
+      "itemHoverBg": "rgba(0, 0, 0, 0.06)",
+      "itemColor": "rgba(0, 0, 0, 0.65)",
+      "itemActiveBg": "rgba(0, 0, 0, 0.15)",
+      "trackPadding": 2,
+      "trackBg": "#f5f5f5",
+      "fontFamily": "Inter"
+    },
+    "Switch": {
+      "trackPadding": 2,
+      "trackMinWidthSM": 28,
+      "trackMinWidth": 44,
+      "trackHeightSM": 16,
+      "trackHeight": 22,
+      "handleSizeSM": 12,
+      "handleSize": 18,
+      "marginXXS": 4,
+      "lineWidthFocus": 4,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeSM": 10,
+      "fontSizeIcon": 12,
+      "fontSize": 12,
+      "controlHeight": 32,
+      "colorWhite": "#ffffff",
+      "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+      "colorTextLightSolid": "#ffffff",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimary": "#1677ff",
+      "handleBg": "#ffffff",
+      "fontFamily": "Inter"
+    },
+    "TimePicker": {
+      "timeColumnWidth": 56,
+      "timeColumnHeight": 224,
+      "timeCellHeight": 28,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "sizePopupArrow": 16,
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "padding": 16,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "lineWidthBold": 2,
+      "lineWidth": 1,
+      "lineHeightLG": 1.5714285714285714,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlPaddingHorizontalSM": 8,
+      "controlPaddingHorizontal": 12,
+      "controlOutlineWidth": 2,
+      "controlOutline": "rgba(5, 145, 255, 0.1)",
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlItemBgActive": "#e6f4ff",
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusXS": 2,
+      "borderRadius": 6,
+      "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+      "colorWarning": "#faad14",
+      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+      "colorTextLightSolid": "#ffffff",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimary": "#1677ff",
+      "colorLinkHover": "#4096ff",
+      "colorLinkActive": "#0958d9",
+      "colorLink": "#1677ff",
+      "colorIconHover": "rgba(0, 0, 0, 0.88)",
+      "colorIcon": "rgba(0, 0, 0, 0.45)",
+      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+      "colorError": "#ff4d4f",
+      "colorBorder": "#d9d9d9",
+      "colorBgElevated": "#ffffff",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "hoverBorderColor": "#4096ff",
+      "cellHoverBg": "rgba(0, 0, 0, 0.04)",
+      "cellHeight": 24,
+      "activeBorderColor": "#1677ff",
+      "paddingInline": 11,
+      "paddingInlineLG": 11,
+      "paddingInlineSM": 7,
+      "activeBg": "#ffffff",
+      "hoverBg": "#ffffff",
+      "cellBgDisabled": "rgba(0, 0, 0, 0.04)",
+      "cellActiveWithRangeBg": "#e6f4ff",
+      "cellHoverWithRangeBg": "#c8dfff",
+      "cellRangeBorderColor": "#7cb3ff",
+      "multipleItemBg": "rgba(0, 0, 0, 0.06)",
+      "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
+      "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
+      "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
+      "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
+      "cellWidth": 36,
+      "multipleItemHeight": 24,
+      "multipleItemHeightLG": 32,
+      "multipleItemHeightSM": 16,
+      "paddingBlock": 4,
+      "paddingBlockLG": 7,
+      "paddingBlockSM": 0,
+      "presetsMaxWidth": 200,
+      "presetsWidth": 120,
+      "textHeight": 40,
+      "withoutTimeCellHeight": 66,
+      "inputFontSize": 12,
+      "inputFontSizeLG": 14,
+      "inputFontSizeSM": 10,
+      "fontFamily": "Inter"
+    },
+    "Timeline": {
+      "itemPaddingBottom": 20,
+      "paddingXXS": 4,
+      "padding": 16,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "marginSM": 12,
+      "margin": 16,
+      "lineWidthBold": 2,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeSM": 10,
+      "fontSize": 12,
+      "controlHeightLG": 40,
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSuccess": "#52c41a",
+      "colorPrimary": "#1677ff",
+      "colorError": "#ff4d4f",
+      "colorBgContainer": "#ffffff",
+      "tailColor": "rgba(0, 0, 0, 0.06)",
+      "dotBg": "#ffffff",
+      "fontFamily": "Inter"
+    },
+    "Tabs": {
+      "horizontalItemGutter": 32,
+      "cardGutter": 2,
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "paddingLG": 24,
+      "padding": 16,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "marginSM": 12,
+      "margin": 16,
+      "lineWidthFocus": 4,
+      "lineWidthBold": 2,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeSM": 10,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimaryActive": "#0958d9",
+      "colorPrimary": "#1677ff",
+      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+      "colorBorderSecondary": "#f0f0f0",
+      "colorBorder": "#d9d9d9",
+      "colorBgContainer": "#ffffff",
+      "itemSelectedColor": "#1677ff",
+      "itemHoverColor": "#4096ff",
+      "itemColor": "rgba(0, 0, 0, 0.88)",
+      "itemActiveColor": "#0958d9",
+      "inkBarColor": "#1677ff",
+      "cardHeight": 40,
+      "cardBg": "rgba(0, 0, 0, 0.02)",
+      "titleFontSize": 12,
+      "titleFontSizeLG": 14,
+      "titleFontSizeSM": 12,
+      "fontFamily": "Inter"
+    },
+    "Table": {
+      "stickyScrollBarBorderRadius": 100,
+      "headerSplitColor": "#f0f0f0",
+      "headerBg": "rgba(0, 0, 0, 0.02)",
+      "footerBg": "rgba(0, 0, 0, 0.02)",
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "padding": 16,
+      "marginXXS": 4,
+      "margin": 16,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSizeSM": 10,
+      "fontSizeIcon": 12,
+      "fontSize": 12,
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlItemBgActiveHover": "#bae0ff",
+      "controlItemBgActive": "#e6f4ff",
+      "controlInteractiveSize": 16,
+      "controlHeight": 32,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorPrimary": "#1677ff",
+      "colorLinkHover": "#4096ff",
+      "colorLinkActive": "#0958d9",
+      "colorLink": "#1677ff",
+      "colorIconHover": "rgba(0, 0, 0, 0.88)",
+      "colorIcon": "rgba(0, 0, 0, 0.45)",
+      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+      "colorFillContent": "rgba(0, 0, 0, 0.06)",
+      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+      "colorBorderSecondary": "#f0f0f0",
+      "colorBgContainer": "#ffffff",
+      "rowSelectedHoverBg": "#bae0ff",
+      "headerFilterHoverBg": "rgba(0, 0, 0, 0.06)",
+      "headerColor": "rgba(0, 0, 0, 0.88)",
+      "headerBorderRadius": 8,
+      "footerColor": "rgba(0, 0, 0, 0.88)",
+      "filterDropdownMenuBg": "#ffffff",
+      "filterDropdownBg": "#ffffff",
+      "cellPaddingInlineSM": 8,
+      "cellPaddingInlineMD": 8,
+      "cellPaddingInline": 16,
+      "cellPaddingBlockSM": 8,
+      "cellPaddingBlockMD": 12,
+      "cellPaddingBlock": 16,
+      "borderColor": "#f0f0f0",
+      "rowHoverBg": "#fafafa",
+      "headerSortActiveBg": "rgba(0, 0, 0, 0.06)",
+      "bodySortBg": "#fafafa",
+      "headerSortHoverBg": "rgba(0, 0, 0, 0.06)",
+      "cellFontSize": 12,
+      "cellFontSizeMD": 12,
+      "cellFontSizeSM": 12,
+      "fontFamily": "Inter"
+    },
+    "Steps": {
+      "dotSize": 8,
+      "dotCurrentSize": 10,
+      "descriptionMaxWidth": 140,
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "paddingLG": 24,
+      "padding": 16,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "marginSM": 12,
+      "marginLG": 24,
+      "margin": 16,
+      "lineWidthFocus": 4,
+      "lineWidthBold": 2,
+      "lineWidth": 1,
+      "lineHeightSM": 1.8,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSizeSM": 10,
+      "fontSizeLG": 14,
+      "fontSizeIcon": 12,
+      "fontSizeHeading3": 20,
+      "fontSize": 12,
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlItemBgActive": "#e6f4ff",
+      "controlHeightLG": 40,
+      "borderRadiusSM": 4,
+      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+      "colorTextLightSolid": "#ffffff",
+      "colorTextLabel": "rgba(0, 0, 0, 0.65)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimary": "#1677ff",
+      "colorFillContent": "rgba(0, 0, 0, 0.06)",
+      "colorError": "#ff4d4f",
+      "colorBorderSecondary": "#f0f0f0",
+      "colorBorderBg": "#ffffff",
+      "colorBgContainer": "#ffffff",
+      "titleLineHeight": 32,
+      "iconSizeSM": 20,
+      "iconSize": 32,
+      "finishIconBorderColor": "#1677ff",
+      "customIconFontSize": 24,
+      "iconFontSize": 12,
+      "fontFamily": "Inter"
+    },
+    "Spin": {
+      "dotSizeSM": 14,
+      "dotSize": 20,
+      "contentHeight": 400,
+      "marginXXS": 4,
+      "lineHeight": 1.6666666666666667,
+      "fontSize": 12,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimary": "#1677ff",
+      "colorBgContainer": "#ffffff",
+      "dotSizeLG": 32,
+      "fontFamily": "Inter"
+    },
+    "Slider": {
+      "railSize": 4,
+      "handleSizeHover": 12,
+      "dotSize": 8,
+      "controlSize": 10,
+      "handleSize": 10,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSize": 12,
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusXS": 2,
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryBorderHover": "#69b1ff",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimary": "#1677ff",
+      "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
+      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+      "colorFillContentHover": "rgba(0, 0, 0, 0.15)",
+      "colorBorderSecondary": "#f0f0f0",
+      "colorBgElevated": "#ffffff",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "trackHoverBg": "#69b1ff",
+      "trackBgDisabled": "rgba(0, 0, 0, 0.04)",
+      "trackBg": "#91caff",
+      "railHoverBg": "rgba(0, 0, 0, 0.06)",
+      "railBg": "rgba(0, 0, 0, 0.04)",
+      "handleColor": "#91caff",
+      "handleActiveColor": "#1677ff",
+      "dotBorderColor": "#f0f0f0",
+      "dotActiveBorderColor": "#91caff",
+      "handleColorDisabled": "#bfbfbf",
+      "fontFamily": "Inter"
+    },
+    "Rate": {
+      "rateStarSize": 20,
+      "marginXS": 8,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSize": 12,
+      "controlHeightLG": 40,
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorFillContent": "rgba(0, 0, 0, 0.06)",
+      "fontFamily": "Inter"
+    },
+    "Radio": {
+      "radioSize": 16,
+      "dotSize": 8,
+      "buttonPaddingInline": 15,
+      "paddingXS": 8,
+      "padding": 16,
+      "marginXS": 8,
+      "lineWidthFocus": 4,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlOutlineWidth": 2,
+      "controlOutline": "rgba(5, 145, 255, 0.1)",
+      "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorWhite": "#ffffff",
+      "colorTextLightSolid": "#ffffff",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimaryActive": "#0958d9",
+      "colorPrimary": "#1677ff",
+      "colorBorder": "#d9d9d9",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "wrapperMarginInlineEnd": 8,
+      "dotColorDisabled": "rgba(0, 0, 0, 0.25)",
+      "buttonSolidCheckedHoverBg": "#4096ff",
+      "buttonSolidCheckedColor": "#ffffff",
+      "buttonSolidCheckedBg": "#1677ff",
+      "buttonSolidCheckedActiveBg": "#0958d9",
+      "buttonColor": "rgba(0, 0, 0, 0.88)",
+      "buttonCheckedColorDisabled": "rgba(0, 0, 0, 0.25)",
+      "buttonCheckedBgDisabled": "rgba(0, 0, 0, 0.15)",
+      "buttonCheckedBg": "#ffffff",
+      "buttonBg": "#ffffff",
+      "fontFamily": "Inter"
+    },
+    "Popover": {
+      "titleMinWidth": 177,
+      "sizePopupArrow": 16,
+      "paddingSM": 12,
+      "padding": 16,
+      "marginXS": 8,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSize": 12,
+      "controlHeight": 32,
+      "borderRadiusXS": 2,
+      "borderRadiusLG": 8,
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorBgElevated": "#ffffff",
+      "fontFamily": "Inter"
+    },
+    "Notification": {
+      "width": 384,
+      "paddingMD": 20,
+      "paddingLG": 24,
+      "paddingContentHorizontalLG": 24,
+      "marginXS": 8,
+      "marginSM": 12,
+      "marginLG": 24,
+      "margin": 16,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlHeightLG": 40,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "colorWarning": "#faad14",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSuccess": "#52c41a",
+      "colorInfo": "#1677ff",
+      "colorIconHover": "rgba(0, 0, 0, 0.88)",
+      "colorIcon": "rgba(0, 0, 0, 0.45)",
+      "colorError": "#ff4d4f",
+      "colorBgElevated": "#ffffff",
+      "lineHeightLG": 1.5714285714285714,
+      "lineWidthFocus": 4,
+      "fontFamily": "Inter"
+    },
+    "Tooltip": {
+      "paddingSM": 12,
+      "sizePopupArrow": 16,
+      "paddingXS": 8,
+      "lineHeight": 1.6666666666666667,
+      "fontSize": 12,
+      "controlHeight": 32,
+      "borderRadiusXS": 2,
+      "borderRadius": 6,
+      "colorTextLightSolid": "#ffffff",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorBgSpotlight": "rgba(0, 0, 0, 0.85)",
+      "fontFamily": "Inter"
+    },
+    "Menu": {
+      "subMenuItemBg": "rgba(0, 0, 0, 0)",
+      "darkSubMenuItemBg": "#000c17",
+      "darkItemDisabledColor": "rgba(255, 255, 255, 0.25)",
+      "darkItemColor": "rgba(255, 255, 255, 0.65)",
+      "darkGroupTitleColor": "rgba(255, 255, 255, 0.65)",
+      "darkItemBg": "#001529",
+      "paddingXS": 8,
+      "paddingXL": 32,
+      "padding": 16,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "margin": 16,
+      "lineWidthFocus": 4,
+      "lineWidthBold": 2,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlItemBgActive": "#e6f4ff",
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "borderRadius": 6,
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimary": "#1677ff",
+      "colorFillContent": "rgba(0, 0, 0, 0.06)",
+      "colorErrorHover": "#ff7875",
+      "colorErrorBg": "#fff2f0",
+      "colorError": "#ff4d4f",
+      "colorBgElevated": "#ffffff",
+      "colorBgContainer": "#ffffff",
+      "subMenuItemBorderRadius": 4,
+      "popupBg": "#ffffff",
+      "itemSelectedColor": "#1677ff",
+      "itemSelectedBg": "#e6f4ff",
+      "itemHoverColor": "rgba(0, 0, 0, 0.88)",
+      "itemHoverBg": "rgba(0, 0, 0, 0.06)",
+      "itemHeight": 28,
+      "itemDisabledColor": "rgba(0, 0, 0, 0.25)",
+      "itemColor": "rgba(0, 0, 0, 0.65)",
+      "itemBorderRadius": 8,
+      "itemBg": "#ffffff",
+      "iconSize": 12,
+      "horizontalItemSelectedColor": "#1677ff",
+      "horizontalItemSelectedBg": "rgba(0, 0, 0, 0)",
+      "horizontalItemHoverColor": "#1677ff",
+      "horizontalItemHoverBg": "rgba(0, 0, 0, 0)",
+      "groupTitleColor": "rgba(0, 0, 0, 0.45)",
+      "darkItemSelectedColor": "#ffffff",
+      "darkItemSelectedBg": "#1677ff",
+      "darkItemHoverColor": "#ffffff",
+      "darkItemHoverBg": "rgba(0, 0, 0, 0)",
+      "collapsedIconSize": 14,
+      "darkPopupBg": "#001529",
+      "activeBarBorderWidth": 1,
+      "collapsedWidth": 80,
+      "dropdownWidth": 160,
+      "itemMarginBlock": 4,
+      "itemMarginInline": 4,
+      "iconMarginInlineEnd": 10,
+      "groupTitleFontSize": 12,
+      "groupTitleLineHeight": 1.6666666666666667,
+      "fontFamily": "Inter"
+    },
+    "InputNumber": {
+      "paddingInlineSM": 7,
+      "paddingInlineLG": 11,
+      "paddingInline": 11,
+      "paddingBlockSM": 0,
+      "paddingBlockLG": 7,
+      "paddingBlock": 4,
+      "handleWidth": 22,
+      "controlWidth": 90,
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "lineWidth": 1,
+      "lineHeightLG": 1.5714285714285714,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlPaddingHorizontalSM": 8,
+      "controlPaddingHorizontal": 12,
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorWarningBorderHover": "#ffd666",
+      "colorWarning": "#faad14",
+      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimary": "#1677ff",
+      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+      "colorErrorBorderHover": "#ffa39e",
+      "colorError": "#ff4d4f",
+      "colorBorder": "#d9d9d9",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "hoverBorderColor": "#4096ff",
+      "handleHoverColor": "#1677ff",
+      "handleBorderColor": "#d9d9d9",
+      "handleBg": "#ffffff",
+      "handleActiveBg": "rgba(0, 0, 0, 0.02)",
+      "addonBg": "rgba(0, 0, 0, 0.02)",
+      "activeBorderColor": "#1677ff",
+      "activeBg": "#ffffff",
+      "hoverBg": "#ffffff",
+      "inputFontSize": 12,
+      "inputFontSizeLG": 14,
+      "inputFontSizeSM": 10,
+      "fontFamily": "Inter"
+    },
+    "Image": {
+      "previewOperationSize": 18,
+      "previewOperationHoverColor": "rgba(255, 255, 255, 0.85)",
+      "previewOperationColorDisabled": "rgba(255, 255, 255, 0.25)",
+      "previewOperationColor": "rgba(255, 255, 255, 0.65)",
+      "paddingXXS": 4,
+      "paddingSM": 12,
+      "paddingLG": 24,
+      "marginXXS": 4,
+      "marginXL": 32,
+      "marginSM": 12,
+      "margin": 16,
+      "fontSizeIcon": 12,
+      "controlHeightLG": 40,
+      "colorTextLightSolid": "#ffffff",
+      "colorBgMask": "rgba(0, 0, 0, 0.45)",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)"
+    },
+    "Card": {
+      "headerHeightSM": 38,
+      "headerHeight": 56,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "paddingLG": 24,
+      "padding": 16,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "lineWidth": 1,
+      "lineHeightLG": 1.5714285714285714,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSize": 12,
+      "borderRadiusLG": 8,
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimary": "#1677ff",
+      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+      "colorBorderSecondary": "#f0f0f0",
+      "colorBgContainer": "#ffffff",
+      "headerBg": "rgba(0, 0, 0, 0)",
+      "headerFontSize": 14,
+      "headerFontSizeSM": 12,
+      "fontHeight": 22,
+      "fontSizeLG": 14,
+      "fontFamily": "Inter"
+    },
+    "Carousel": {
+      "dotWidth": 16,
+      "dotHeight": 3,
+      "dotActiveWidth": 24,
+      "marginXXS": 4,
+      "lineHeight": 1.6666666666666667,
+      "fontSize": 12,
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorBgContainer": "#ffffff",
+      "fontFamily": "Inter"
+    },
+    "Cascader": {
+      "dropdownHeight": 180,
+      "controlWidth": 184,
+      "controlItemWidth": 111,
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "marginXS": 8,
+      "lineWidthFocus": 4,
+      "lineWidthBold": 2,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSizeLG": 14,
+      "fontSizeIcon": 12,
+      "fontSize": 12,
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlItemBgActive": "#e6f4ff",
+      "controlInteractiveSize": 16,
+      "controlHeight": 32,
+      "borderRadiusSM": 4,
+      "colorWhite": "#ffffff",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimary": "#1677ff",
+      "colorBorder": "#d9d9d9",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "optionSelectedBg": "#e6f4ff",
+      "menuPadding": 4,
+      "optionSelectedFontWeight": 600,
+      "fontFamily": "Inter"
+    },
+    "Calendar": {
+      "yearControlWidth": 80,
+      "monthControlWidth": 70,
+      "controlHeight": 32,
+      "screenXS": 480,
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "padding": 16,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "lineWidthBold": 2,
+      "lineWidth": 1,
+      "lineHeightSM": 1.8,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSizeSM": 10,
+      "fontSize": 12,
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlItemBgActive": "#e6f4ff",
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "colorTextLightSolid": "#ffffff",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorPrimary": "#1677ff",
+      "colorLinkHover": "#4096ff",
+      "colorLinkActive": "#0958d9",
+      "colorLink": "#1677ff",
+      "colorIconHover": "rgba(0, 0, 0, 0.88)",
+      "colorIcon": "rgba(0, 0, 0, 0.45)",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "itemActiveBg": "#e6f4ff",
+      "fullPanelBg": "#ffffff",
+      "fullBg": "#ffffff",
+      "fontHeightSM": 20,
+      "fontFamily": "Inter"
+    },
+    "Button": {
+      "paddingInlineSM": 7,
+      "paddingInlineLG": 15,
+      "paddingInline": 15,
+      "onlyIconSizeSM": 14,
+      "onlyIconSizeLG": 18,
+      "paddingXS": 8,
+      "paddingContentHorizontal": 16,
+      "marginXS": 8,
+      "lineWidthFocus": 4,
+      "lineWidth": 1,
+      "contentLineHeight": 1.6666666666666667,
+      "contentFontSizeLG": 14,
+      "contentFontSize": 12,
+      "controlOutlineWidth": 2,
+      "controlOutline": "rgba(5, 145, 255, 0.1)",
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorTextLightSolid": "#ffffff",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimaryActive": "#0958d9",
+      "colorPrimary": "#1677ff",
+      "colorLinkHover": "#4096ff",
+      "colorLinkActive": "#0958d9",
+      "colorLink": "#1677ff",
+      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+      "colorErrorHover": "#ff7875",
+      "colorErrorBorderHover": "#ffa39e",
+      "colorErrorBg": "#fff2f0",
+      "colorErrorActive": "#d9363e",
+      "colorError": "#ff4d4f",
+      "colorBorder": "#d9d9d9",
+      "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "textHoverBg": "rgba(0, 0, 0, 0.06)",
+      "primaryColor": "#ffffff",
+      "onlyIconSize": 14,
+      "linkHoverBg": "rgba(0, 0, 0, 0)",
+      "groupBorderColor": "#4096ff",
+      "ghostBg": "rgba(0, 0, 0, 0)",
+      "defaultGhostColor": "#ffffff",
+      "defaultGhostBorderColor": "#ffffff",
+      "defaultColor": "rgba(0, 0, 0, 0.88)",
+      "defaultBorderColor": "#d9d9d9",
+      "defaultBg": "#ffffff",
+      "dangerColor": "#ffffff",
+      "borderColorDisabled": "#d9d9d9",
+      "defaultHoverBg": "#ffffff",
+      "defaultHoverColor": "#4096ff",
+      "defaultHoverBorderColor": "#4096ff",
+      "defaultActiveBg": "#ffffff",
+      "defaultActiveColor": "#0958d9",
+      "defaultActiveBorderColor": "#0958d9",
+      "fontWeight": 400,
+      "contentFontSizeSM": 12,
+      "contentLineHeightLG": 1.5714285714285714,
+      "contentLineHeightSM": 1.6666666666666667
+    },
+    "Badge": {
+      "statusSize": 6,
+      "indicatorHeight": 20,
+      "dotSize": 6,
+      "paddingXS": 8,
+      "marginXS": 8,
+      "lineWidth": 1,
+      "borderRadiusSM": 4,
+      "fontSizeSM": 10,
+      "fontSize": 12,
+      "colorWarning": "#faad14",
+      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+      "colorTextLightSolid": "#ffffff",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSuccess": "#52c41a",
+      "colorPrimary": "#1677ff",
+      "colorErrorHover": "#ff7875",
+      "colorError": "#ff4d4f",
+      "colorBorderBg": "#ffffff",
+      "colorBgContainer": "#ffffff",
+      "indicatorHeightSM": 12,
+      "textFontSize": 10,
+      "textFontSizeSM": 10,
+      "fontHeight": 22,
+      "lineHeight": 1.6666666666666667,
+      "fontFamily": "Inter"
+    },
+    "Form": {
+      "screenXSMax": 575,
+      "screenSMMax": 767,
+      "screenMDMax": 991,
+      "screenLGMax": 1199,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "marginLG": 24,
+      "margin": 16,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlOutlineWidth": 2,
+      "controlOutline": "rgba(5, 145, 255, 0.1)",
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "colorWarning": "#faad14",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSuccess": "#52c41a",
+      "colorPrimary": "#1677ff",
+      "colorError": "#ff4d4f",
+      "colorBorder": "#d9d9d9",
+      "labelRequiredMarkColor": "#ff4d4f",
+      "labelColor": "rgba(0, 0, 0, 0.88)",
+      "itemMarginBottom": 24,
+      "labelColonMarginInlineEnd": 8,
+      "labelColonMarginInlineStart": 2,
+      "labelHeight": 32,
+      "labelFontSize": 12,
+      "fontFamily": "Inter"
+    },
+    "Avatar": {
+      "marginXXS": 4,
+      "marginXS": 8,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeXL": 18,
+      "fontSizeLG": 14,
+      "fontSizeHeading3": 20,
+      "fontSize": 12,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+      "colorTextLightSolid": "#ffffff",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorBorderBg": "#ffffff",
+      "containerSizeSM": 24,
+      "containerSizeLG": 40,
+      "containerSize": 32,
+      "textFontSize": 18,
+      "textFontSizeLG": 20,
+      "textFontSizeSM": 12,
+      "fontFamily": "Inter"
+    },
+    "Tour": {
+      "sizePopupArrow": 16,
+      "paddingXS": 8,
+      "padding": 16,
+      "marginXS": 8,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSize": 12,
+      "borderRadiusXS": 2,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorWhite": "#ffffff",
+      "colorTextLightSolid": "#ffffff",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimary": "#1677ff",
+      "colorIconHover": "rgba(0, 0, 0, 0.88)",
+      "colorIcon": "rgba(0, 0, 0, 0.45)",
+      "colorFill": "rgba(0, 0, 0, 0.15)",
+      "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
+      "colorBgElevated": "#ffffff",
+      "closeBtnSize": 22,
+      "primaryNextBtnHoverBg": "#f0f0f0",
+      "primaryPrevBtnBg": "rgba(255, 255, 255, 0.15)",
+      "fontFamily": "Inter",
+      "lineWidthFocus": 4
+    },
+    "QRCode": {
+      "paddingSM": 12,
+      "marginXS": 8,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSize": 12,
+      "controlHeight": 32,
+      "borderRadiusLG": 8,
+      "colorWhite": "#ffffff",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "fontFamily": "Inter"
+    },
+    "Upload": {
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "padding": 16,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "marginXL": 32,
+      "margin": 16,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSizeHeading3": 20,
+      "fontSizeHeading2": 26,
+      "fontSize": 12,
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlHeightLG": 40,
+      "borderRadiusLG": 8,
+      "colorTextLightSolid": "#ffffff",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimary": "#1677ff",
+      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+      "colorErrorBg": "#fff2f0",
+      "colorError": "#ff4d4f",
+      "colorBorder": "#d9d9d9",
+      "colorBgMask": "rgba(0, 0, 0, 0.45)",
+      "fontHeight": 22,
+      "fontHeightSM": 20,
+      "lineWidthFocus": 4,
+      "fontFamily": "Inter"
+    },
+    "Typography": {
+      "paddingSM": 12,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "lineWidth": 1,
+      "lineHeightHeading5": 1.5714285714285714,
+      "lineHeightHeading4": 1.5,
+      "lineHeightHeading3": 1.4,
+      "lineHeightHeading2": 1.3076923076923077,
+      "lineHeightHeading1": 1.25,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSizeHeading5": 14,
+      "fontSizeHeading4": 16,
+      "fontSizeHeading3": 20,
+      "fontSizeHeading2": 26,
+      "fontSizeHeading1": 32,
+      "fontSize": 12,
+      "colorWarning": "#faad14",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSuccess": "#52c41a",
+      "colorLinkHover": "#4096ff",
+      "colorLinkActive": "#0958d9",
+      "colorLink": "#1677ff",
+      "colorErrorHover": "#ff7875",
+      "colorErrorActive": "#d9363e",
+      "colorError": "#ff4d4f",
+      "fontFamilyCode": "Courier Prime"
+    },
+    "TreeSelect": {
+      "paddingXS": 8,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "lineWidthFocus": 4,
+      "lineWidthBold": 2,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlItemBgActive": "#e6f4ff",
+      "controlInteractiveSize": 16,
+      "controlHeightSM": 24,
+      "borderRadiusSM": 4,
+      "borderRadius": 6,
+      "colorWhite": "#ffffff",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimary": "#1677ff",
+      "colorBorder": "#d9d9d9",
+      "colorBgElevated": "#ffffff",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "titleHeight": 24,
+      "nodeSelectedBg": "#e6f4ff",
+      "nodeHoverBg": "rgba(0, 0, 0, 0.04)",
+      "fontFamily": "Inter"
+    },
+    "Tree": {
+      "paddingSM": 12,
+      "borderRadiusLG": 8,
+      "paddingXS": 8,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "lineWidthFocus": 4,
+      "lineWidthBold": 2,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlItemBgActive": "#e6f4ff",
+      "controlInteractiveSize": 16,
+      "controlHeightSM": 24,
+      "borderRadiusSM": 4,
+      "borderRadius": 6,
+      "colorWhite": "#ffffff",
+      "colorTextLightSolid": "#ffffff",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimary": "#1677ff",
+      "colorBorder": "#d9d9d9",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "titleHeight": 24,
+      "nodeSelectedBg": "#e6f4ff",
+      "nodeHoverBg": "rgba(0, 0, 0, 0.04)",
+      "directoryNodeSelectedColor": "#ffffff",
+      "directoryNodeSelectedBg": "#1677ff",
+      "fontFamily": "Inter"
+    },
+    "Tag": {
+      "paddingXXS": 4,
+      "marginXS": 8,
+      "lineWidth": 1,
+      "lineHeightSM": 1.8,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeSM": 10,
+      "fontSizeIcon": 12,
+      "fontSize": 12,
+      "borderRadiusSM": 4,
+      "colorTextLightSolid": "#ffffff",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimaryActive": "#0958d9",
+      "colorPrimary": "#1677ff",
+      "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
+      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+      "colorFillQuaternary": "rgba(0, 0, 0, 0.02)",
+      "colorBorder": "#d9d9d9",
+      "colorWarningBorder": "#ffe58f",
+      "colorWarningBg": "#fffbe6",
+      "colorSuccessBorder": "#b7eb8f",
+      "colorSuccessBg": "#f6ffed",
+      "colorInfoBorder": "#91caff",
+      "colorInfoBg": "#e6f4ff",
+      "colorErrorBorder": "#ffccc7",
+      "colorErrorBg": "#fff2f0",
+      "defaultColor": "rgba(0, 0, 0, 0.88)",
+      "defaultBg": "rgba(0, 0, 0, 0.02)",
+      "fontFamily": "Inter"
+    },
+    "Statistic": {
+      "padding": 16,
+      "marginXXS": 4,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeHeading3": 20,
+      "fontSize": 12,
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "contentFontSize": 20,
+      "titleFontSize": 12,
+      "fontFamily": "Inter"
+    },
+    "Skeleton": {
+      "padding": 16,
+      "marginXXS": 4,
+      "marginSM": 12,
+      "marginLG": 24,
+      "controlHeightXS": 16,
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusSM": 4,
+      "colorFillContent": "rgba(0, 0, 0, 0.06)",
+      "colorFill": "rgba(0, 0, 0, 0.15)"
+    },
+    "Select": {
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSizeSM": 10,
+      "fontSizeLG": 14,
+      "fontSizeIcon": 12,
+      "fontSize": 12,
+      "controlPaddingHorizontalSM": 8,
+      "controlPaddingHorizontal": 12,
+      "controlOutlineWidth": 2,
+      "controlOutline": "rgba(5, 145, 255, 0.1)",
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlItemBgActive": "#e6f4ff",
+      "controlHeightXS": 16,
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusXS": 2,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+      "colorWarningHover": "#ffd666",
+      "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimary": "#1677ff",
+      "colorIconHover": "rgba(0, 0, 0, 0.88)",
+      "colorIcon": "rgba(0, 0, 0, 0.45)",
+      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+      "colorErrorHover": "#ff7875",
+      "colorBorder": "#d9d9d9",
+      "colorBgElevated": "#ffffff",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "singleItemHeightLG": 40,
+      "selectorBg": "#ffffff",
+      "optionSelectedColor": "rgba(0, 0, 0, 0.88)",
+      "optionSelectedBg": "#e6f4ff",
+      "optionLineHeight": null,
+      "optionHeight": 32,
+      "optionActiveBg": "rgba(0, 0, 0, 0.04)",
+      "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
+      "multipleItemHeightLG": 32,
+      "multipleItemHeight": 24,
+      "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
+      "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
+      "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
+      "multipleItemBg": "rgba(0, 0, 0, 0.06)",
+      "clearBg": "#ffffff",
+      "optionFontSize": "Inter",
+      "optionSelectedFontWeight": 600,
+      "fontFamily": "Inter"
+    },
+    "Result": {
+      "paddingXS": 8,
+      "paddingXL": 32,
+      "paddingLG": 24,
+      "padding": 16,
+      "marginXS": 8,
+      "lineHeightHeading3": 1.4,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeHeading3": 20,
+      "fontSize": 12,
+      "colorWarning": "#faad14",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorSuccess": "#52c41a",
+      "colorInfo": "#1677ff",
+      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+      "colorError": "#ff4d4f",
+      "iconFontSize": 72,
+      "subtitleFontSize": 12,
+      "titleFontSize": 20
+    },
+    "Progress": {
+      "paddingXS": 8,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeSM": 10,
+      "fontSize": 12,
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSuccess": "#52c41a",
+      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+      "colorError": "#ff4d4f",
+      "colorBgContainer": "#ffffff",
+      "remainingColor": "rgba(0, 0, 0, 0.06)",
+      "defaultColor": "#1677ff",
+      "circleTextColor": "rgba(0, 0, 0, 0.88)",
+      "fontFamily": "Inter"
+    },
+    "Popconfirm": {
+      "marginXXS": 4,
+      "marginXS": 8,
+      "fontWeightStrong": 600,
+      "fontSize": 12,
+      "colorWarning": "#faad14",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorText": "rgba(0, 0, 0, 0.88)"
+    },
+    "Pagination": {
+      "screenSM": 576,
+      "screenLG": 992,
+      "paddingXXS": 4,
+      "paddingSM": 12,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "marginSM": 12,
+      "margin": 16,
+      "lineWidthFocus": 4,
+      "lineWidth": 1,
+      "lineHeightLG": 1.5714285714285714,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSizeSM": 10,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlPaddingHorizontalSM": 8,
+      "controlPaddingHorizontal": 12,
+      "controlOutlineWidth": 2,
+      "controlOutline": "rgba(5, 145, 255, 0.1)",
+      "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimary": "#1677ff",
+      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+      "colorBorder": "#d9d9d9",
+      "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
+      "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "itemSizeSM": 24,
+      "itemSize": 32,
+      "itemLinkBg": "#ffffff",
+      "itemInputBg": "#ffffff",
+      "itemBg": "#ffffff",
+      "itemActiveColorDisabled": "rgba(0, 0, 0, 0.25)",
+      "itemActiveBgDisabled": "rgba(0, 0, 0, 0.15)",
+      "itemActiveBg": "#ffffff",
+      "fontFamily": "Inter"
+    },
+    "Modal": {
+      "screenSMMax": 767,
+      "paddingXS": 8,
+      "paddingMD": 20,
+      "paddingLG": 24,
+      "paddingContentHorizontalLG": 24,
+      "padding": 16,
+      "marginXS": 8,
+      "marginSM": 12,
+      "marginLG": 24,
+      "margin": 16,
+      "lineWidthFocus": 4,
+      "lineWidth": 1,
+      "lineHeightHeading5": 1.5714285714285714,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSizeLG": 14,
+      "fontSizeHeading5": 14,
+      "fontSize": 12,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "colorWarning": "#faad14",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSuccess": "#52c41a",
+      "colorPrimaryBorder": "#91caff",
+      "colorIconHover": "rgba(0, 0, 0, 0.88)",
+      "colorIcon": "rgba(0, 0, 0, 0.45)",
+      "colorBgMask": "rgba(0, 0, 0, 0.45)",
+      "titleColor": "rgba(0, 0, 0, 0.88)",
+      "headerBg": "#ffffff",
+      "footerBg": "rgba(0, 0, 0, 0)",
+      "contentBg": "#ffffff",
+      "titleFontSize": 16,
+      "titleLineHeight": 1.25,
+      "fontHeight": 22,
+      "fontFamily": "Inter"
+    },
+    "Message": {
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "marginXS": 8,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlHeightLG": 40,
+      "borderRadiusLG": 8,
+      "colorWarning": "#faad14",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSuccess": "#52c41a",
+      "colorInfo": "#1677ff",
+      "colorError": "#ff4d4f",
+      "contentBg": "#ffffff",
+      "fontFamily": "Inter"
+    },
+    "List": {
+      "screenSM": 576,
+      "screenMD": 768,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "paddingLG": 24,
+      "paddingContentVerticalSM": 8,
+      "paddingContentVerticalLG": 16,
+      "paddingContentVertical": 12,
+      "paddingContentHorizontalLG": 24,
+      "paddingContentHorizontal": 16,
+      "padding": 16,
+      "marginXXS": 4,
+      "marginXXL": 48,
+      "marginSM": 12,
+      "marginLG": 24,
+      "margin": 16,
+      "lineWidth": 1,
+      "lineHeightLG": 1.5714285714285714,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeSM": 10,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusLG": 8,
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorPrimary": "#1677ff",
+      "colorBorder": "#d9d9d9",
+      "headerBg": "rgba(0, 0, 0, 0)",
+      "footerBg": "rgba(0, 0, 0, 0)",
+      "avatarMarginRight": 16,
+      "descriptionFontSize": 12,
+      "fontFamily": "Inter"
+    },
+    "FloatButton": {
+      "paddingXXS": 4,
+      "marginXXL": 48,
+      "marginLG": 24,
+      "margin": 16,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeSM": 10,
+      "fontSizeLG": 14,
+      "fontSizeIcon": 12,
+      "fontSize": 12,
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlHeightLG": 40,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "colorTextLightSolid": "#ffffff",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimary": "#1677ff",
+      "colorFillContent": "rgba(0, 0, 0, 0.06)",
+      "colorBgElevated": "#ffffff",
+      "fontFamily": "Inter"
+    },
+    "Empty": {
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "fontSize": 12,
+      "lineHeight": 1.6666666666666667
+    },
+    "Dropdown": {
+      "sizePopupArrow": 16,
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "lineWidthFocus": 4,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeSM": 10,
+      "fontSizeIcon": 12,
+      "fontSize": 12,
+      "controlPaddingHorizontal": 12,
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlItemBgActiveHover": "#bae0ff",
+      "controlItemBgActive": "#e6f4ff",
+      "controlHeight": 32,
+      "borderRadiusXS": 2,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "colorTextLightSolid": "#ffffff",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimary": "#1677ff",
+      "colorError": "#ff4d4f",
+      "colorBgElevated": "#ffffff",
+      "paddingBlock": 5,
+      "fontFamily": "Inter"
+    },
+    "Drawer": {
+      "paddingXS": 8,
+      "paddingLG": 24,
+      "padding": 16,
+      "marginSM": 12,
+      "lineWidth": 1,
+      "lineHeightLG": 1.5714285714285714,
+      "fontWeightStrong": 600,
+      "fontSizeLG": 14,
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorIconHover": "rgba(0, 0, 0, 0.88)",
+      "colorIcon": "rgba(0, 0, 0, 0.45)",
+      "colorBgMask": "rgba(0, 0, 0, 0.45)",
+      "colorBgElevated": "#ffffff",
+      "lineWidthFocus": 4
+    },
+    "Divider": {
+      "marginXS": 8,
+      "marginLG": 24,
+      "margin": 16,
+      "lineWidth": 1,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "lineHeight": 1.6666666666666667,
+      "fontFamily": "Inter"
+    },
+    "Descriptions": {
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "paddingLG": 24,
+      "padding": 16,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "lineWidth": 1,
+      "lineHeightSM": 1.8,
+      "lineHeightLG": 1.5714285714285714,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSizeSM": 10,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "borderRadiusLG": 8,
+      "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+      "colorTextSecondary": "rgba(0, 0, 0, 0.65)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+      "titleColor": "rgba(0, 0, 0, 0.88)",
+      "labelBg": "rgba(0, 0, 0, 0.02)",
+      "contentColor": "rgba(0, 0, 0, 0.88)",
+      "fontFamily": "Inter"
+    },
+    "DatePicker": {
+      "sizePopupArrow": 16,
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "padding": 16,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "lineWidthBold": 2,
+      "lineWidth": 1,
+      "lineHeightLG": 1.5714285714285714,
+      "lineHeight": 1.6666666666666667,
+      "fontWeightStrong": 600,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlPaddingHorizontalSM": 8,
+      "controlPaddingHorizontal": 12,
+      "controlOutlineWidth": 2,
+      "controlOutline": "rgba(5, 145, 255, 0.1)",
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlItemBgActive": "#e6f4ff",
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusXS": 2,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+      "colorWarningHover": "#ffd666",
+      "colorWarning": "#faad14",
+      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+      "colorTextLightSolid": "#ffffff",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimary": "#1677ff",
+      "colorLinkHover": "#4096ff",
+      "colorLinkActive": "#0958d9",
+      "colorLink": "#1677ff",
+      "colorIconHover": "rgba(0, 0, 0, 0.88)",
+      "colorIcon": "rgba(0, 0, 0, 0.45)",
+      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+      "colorErrorHover": "#ff7875",
+      "colorError": "#ff4d4f",
+      "colorBorder": "#d9d9d9",
+      "colorBgElevated": "#ffffff",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "hoverBorderColor": "#4096ff",
+      "cellHoverBg": "rgba(0, 0, 0, 0.04)",
+      "cellHeight": 24,
+      "activeBorderColor": "#1677ff",
+      "paddingInline": 11,
+      "paddingInlineSM": 7,
+      "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
+      "colorErrorBg": "#fff2f0",
+      "colorWarningBg": "#fffbe6",
+      "colorWarningText": "#faad14",
+      "colorErrorText": "#ff4d4f",
+      "colorWarningBgHover": "#fff1b8",
+      "colorErrorBgHover": "#fff1f0",
+      "activeBg": "#ffffff",
+      "hoverBg": "#ffffff",
+      "cellBgDisabled": "rgba(0, 0, 0, 0.04)",
+      "cellActiveWithRangeBg": "#e6f4ff",
+      "cellHoverWithRangeBg": "#c8dfff",
+      "cellRangeBorderColor": "#7cb3ff",
+      "multipleItemBg": "rgba(0, 0, 0, 0.06)",
+      "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
+      "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
+      "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
+      "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
+      "cellWidth": 36,
+      "multipleItemHeight": 24,
+      "multipleItemHeightLG": 32,
+      "multipleItemHeightSM": 16,
+      "paddingBlock": 4,
+      "paddingBlockLG": 7,
+      "paddingBlockSM": 0,
+      "paddingInline 2": 11,
+      "presetsMaxWidth": 200,
+      "presetsWidth": 120,
+      "textHeight": 40,
+      "timeCellHeight": 28,
+      "timeColumnHeight": 224,
+      "timeColumnWidth": 56,
+      "withoutTimeCellHeight": 66,
+      "inputFontSize": 12,
+      "inputFontSizeLG": 14,
+      "inputFontSizeSM": 10,
+      "fontHeight": 22,
+      "fontHeightLG": 24,
+      "fontFamily": "Inter"
+    },
+    "Collapse": {
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "paddingLG": 24,
+      "padding": 16,
+      "marginSM": 12,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSizeIcon": 12,
+      "fontSize": 12,
+      "borderRadiusLG": 8,
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+      "colorBorder": "#d9d9d9",
+      "colorBgContainer": "#ffffff",
+      "headerBg": "rgba(0, 0, 0, 0.02)",
+      "contentBg": "#ffffff",
+      "fontHeight": 22,
+      "fontHeightLG": 24,
+      "lineHeightLG": 1.5714285714285714,
+      "fontFamily": "Inter"
+    },
+    "Checkbox": {
+      "paddingXS": 8,
+      "marginXS": 8,
+      "lineWidthFocus": 4,
+      "lineWidthBold": 2,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "controlInteractiveSize": 16,
+      "borderRadiusSM": 4,
+      "colorWhite": "#ffffff",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimaryBorder": "#91caff",
+      "colorPrimary": "#1677ff",
+      "colorBorder": "#d9d9d9",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "fontFamily": "Inter"
+    },
+    "Breadcrumb": {
+      "paddingXXS": 4,
+      "marginXXS": 4,
+      "marginXS": 8,
+      "lineWidthFocus": 4,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeIcon": 12,
+      "fontSize": 12,
+      "borderRadiusSM": 4,
+      "colorPrimaryBorder": "#91caff",
+      "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
+      "separatorColor": "rgba(0, 0, 0, 0.45)",
+      "linkHoverColor": "rgba(0, 0, 0, 0.88)",
+      "linkColor": "rgba(0, 0, 0, 0.45)",
+      "lastItemColor": "rgba(0, 0, 0, 0.88)",
+      "itemColor": "rgba(0, 0, 0, 0.45)",
+      "separatorMargin": 8,
+      "iconFontSize": 12,
+      "fontHeight": 22,
+      "fontFamily": "Inter"
+    },
+    "Anchor": {
+      "paddingXXS": 4,
+      "lineWidthBold": 2,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSize": 12,
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSplit": "rgba(0, 0, 0, 0.06)",
+      "colorPrimary": "#1677ff",
+      "linkPaddingInlineStart": 16,
+      "linkPaddingBlock": 4,
+      "fontFamily": "Inter"
+    },
+    "Alert": {
+      "paddingMD": 20,
+      "paddingContentVerticalSM": 8,
+      "paddingContentHorizontalLG": 24,
+      "marginXS": 8,
+      "marginSM": 12,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "fontSizeLG": 14,
+      "fontSizeIcon": 12,
+      "fontSizeHeading3": 20,
+      "fontSize": 12,
+      "borderRadiusLG": 8,
+      "colorWarningBorder": "#ffe58f",
+      "colorWarningBg": "#fffbe6",
+      "colorWarning": "#faad14",
+      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorSuccessBorder": "#b7eb8f",
+      "colorSuccessBg": "#f6ffed",
+      "colorSuccess": "#52c41a",
+      "colorInfoBorder": "#91caff",
+      "colorInfoBg": "#e6f4ff",
+      "colorInfo": "#1677ff",
+      "colorIconHover": "rgba(0, 0, 0, 0.88)",
+      "colorIcon": "rgba(0, 0, 0, 0.45)",
+      "colorErrorBorder": "#ffccc7",
+      "colorErrorBg": "#fff2f0",
+      "colorError": "#ff4d4f",
+      "withDescriptionIconSize": 20,
+      "fontFamily": "Inter"
+    },
+    "Space": {
+      "paddingXS": 8,
+      "paddingLG": 24,
+      "padding": 16
+    },
+    "AutoComplete": {
+      "paddingXXS": 4,
+      "paddingXS": 8,
+      "paddingSM": 12,
+      "lineWidth": 1,
+      "lineHeight": 1.6666666666666667,
+      "controlPaddingHorizontalSM": 8,
+      "controlPaddingHorizontal": 12,
+      "controlOutlineWidth": 2,
+      "controlOutline": "rgba(5, 145, 255, 0.1)",
+      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+      "controlItemBgActive": "#e6f4ff",
+      "controlHeightXS": 16,
+      "controlHeightSM": 24,
+      "controlHeightLG": 40,
+      "controlHeight": 32,
+      "borderRadiusXS": 2,
+      "borderRadiusSM": 4,
+      "borderRadiusLG": 8,
+      "borderRadius": 6,
+      "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+      "colorWarningHover": "#ffd666",
+      "colorWarning": "#faad14",
+      "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "colorPrimaryHover": "#4096ff",
+      "colorPrimary": "#1677ff",
+      "colorIconHover": "rgba(0, 0, 0, 0.88)",
+      "colorIcon": "rgba(0, 0, 0, 0.45)",
+      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+      "colorErrorHover": "#ff7875",
+      "colorError": "#ff4d4f",
+      "colorBorder": "#d9d9d9",
+      "colorBgElevated": "#ffffff",
+      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+      "colorBgContainer": "#ffffff",
+      "optionActiveBg": "rgba(0, 0, 0, 0.04)",
+      "optionHeight": 32,
+      "optionFontSize": 12,
+      "fontFamily": "Inter",
+      "fontSize": 12,
+      "fontSizeIcon": 12,
+      "fontSizeLG": 14,
+      "fontSizeSM": 10
+    },
+    "Layout": {
+      "bodyBg": "#f5f5f5",
+      "footerBg": "#f5f5f5",
+      "headerBg": "#001529",
+      "headerColor": "rgba(0, 0, 0, 0.88)",
+      "lightSiderBg": "#ffffff",
+      "lightTriggerBg": "#ffffff",
+      "lightTriggerColor": "rgba(0, 0, 0, 0.88)",
+      "siderBg": "#001529",
+      "triggerBg": "#002140",
+      "triggerColor": "#ffffff",
+      "colorText": "rgba(0, 0, 0, 0.88)",
+      "headerHeight": 64,
+      "triggerHeight": 48,
+      "zeroTriggerHeight": 40,
+      "zeroTriggerWidth": 40,
+      "borderRadius": 6,
+      "fontSize": 12,
+      "fontSizeXL": 18
+    },
+    "Mentions": {
+      "fontFamily": "Inter",
+      "fontSize": 12,
+      "lineHeight": 1.6666666666666667
+    }
+  }
+}
\ No newline at end of file

From 57ab4dae74390fc1725b3f7a58d40b0a9260b27f Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 1 Aug 2024 21:30:39 +0100
Subject: [PATCH 002/117] feat(frontend): installed phosphor-icons package

---
 agenta-web/package-lock.json | 14 ++++++++++++++
 agenta-web/package.json      |  1 +
 2 files changed, 15 insertions(+)

diff --git a/agenta-web/package-lock.json b/agenta-web/package-lock.json
index b462c5316..cd19174c3 100644
--- a/agenta-web/package-lock.json
+++ b/agenta-web/package-lock.json
@@ -20,6 +20,7 @@
                 "@mdx-js/react": "^2.3.0",
                 "@monaco-editor/react": "^4.5.2",
                 "@next/mdx": "^13.4.13",
+                "@phosphor-icons/react": "^2.1.7",
                 "@remixicon/react": "^4.1.1",
                 "@sentry/nextjs": "^8.18.0",
                 "@tailwindcss/forms": "^0.5.7",
@@ -1924,6 +1925,19 @@
                 "@opentelemetry/api": "^1.1.0"
             }
         },
+        "node_modules/@phosphor-icons/react": {
+            "version": "2.1.7",
+            "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.7.tgz",
+            "integrity": "sha512-g2e2eVAn1XG2a+LI09QU3IORLhnFNAFkNbo2iwbX6NOKSLOwvEMmTa7CgOzEbgNWR47z8i8kwjdvYZ5fkGx1mQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=10"
+            },
+            "peerDependencies": {
+                "react": ">= 16.8",
+                "react-dom": ">= 16.8"
+            }
+        },
         "node_modules/@pkgjs/parseargs": {
             "version": "0.11.0",
             "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
diff --git a/agenta-web/package.json b/agenta-web/package.json
index 445eb0189..b858a5935 100644
--- a/agenta-web/package.json
+++ b/agenta-web/package.json
@@ -31,6 +31,7 @@
         "@mdx-js/react": "^2.3.0",
         "@monaco-editor/react": "^4.5.2",
         "@next/mdx": "^13.4.13",
+        "@phosphor-icons/react": "^2.1.7",
         "@remixicon/react": "^4.1.1",
         "@sentry/nextjs": "^8.18.0",
         "@tailwindcss/forms": "^0.5.7",

From 657af2d2ac87518000ca3ff6517e712955fe369d Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 1 Aug 2024 21:32:02 +0100
Subject: [PATCH 003/117] feat(frontend): setup font family and antd tokens

---
 agenta-web/src/components/Layout/Layout.tsx         | 10 +++++++++-
 .../src/components/Layout/ThemeContextProvider.tsx  | 13 +++++--------
 agenta-web/src/pages/_app.tsx                       |  4 ++++
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index b741f8024..870be161d 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/agenta-web/src/components/Layout/Layout.tsx
@@ -19,6 +19,7 @@ import sunIcon from "@/media/sun.png"
 import {useProfileData} from "@/contexts/profile.context"
 import {ThemeProvider} from "react-jss"
 import {StyleProps as MainStyleProps} from "@/lib/Types"
+import {Lightning} from "@phosphor-icons/react"
 
 const {Content, Footer} = Layout
 
@@ -224,7 +225,14 @@ const App: React.FC<LayoutProps> = ({children}) => {
                                     <Breadcrumb
                                         className={classes.breadcrumb}
                                         items={[
-                                            {title: <Link href="/apps">Apps</Link>},
+                                            {
+                                                title: (
+                                                    <div className="flex items-center gap-1">
+                                                        <Lightning size={16} />
+                                                        <Link href="/apps">Apps</Link>
+                                                    </div>
+                                                ),
+                                            },
                                             {title: capitalizedAppName},
                                         ]}
                                     />
diff --git a/agenta-web/src/components/Layout/ThemeContextProvider.tsx b/agenta-web/src/components/Layout/ThemeContextProvider.tsx
index 701f8289a..a8173d6f2 100644
--- a/agenta-web/src/components/Layout/ThemeContextProvider.tsx
+++ b/agenta-web/src/components/Layout/ThemeContextProvider.tsx
@@ -1,18 +1,15 @@
-import {ConfigProvider, theme} from "antd"
+import {ConfigProvider, theme, ThemeConfig} from "antd"
 import {PropsWithChildren, createContext, useState, useContext, useEffect} from "react"
 import {useLocalStorage, useUpdateEffect} from "usehooks-ts"
+import antdTokens from "@/styles/tokens/antd-themeConfig.json"
 
-export const AntdThemeConfig = {
+export const AntdThemeConfig: ThemeConfig = {
     token: {
         // Seed Token
-        colorPrimary: "#4AA081",
-        borderRadius: 8,
+        ...antdTokens.token,
     },
     components: {
-        Button: {
-            colorPrimary: "#4AA081",
-            colorErrorText: "#ef4146",
-        },
+        ...antdTokens.components,
     },
 }
 
diff --git a/agenta-web/src/pages/_app.tsx b/agenta-web/src/pages/_app.tsx
index 570840e1e..760acc966 100644
--- a/agenta-web/src/pages/_app.tsx
+++ b/agenta-web/src/pages/_app.tsx
@@ -44,6 +44,10 @@ export default function App({Component, pageProps}: AppProps) {
             <Head>
                 <title>Agenta: The LLMOps platform.</title>
                 <link rel="shortcut icon" href="/assets/favicon.ico" />
+                <style>
+                    @import
+                    url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+                </style>
             </Head>
             <PostHogProvider client={posthog}>
                 <ThemeContextProvider>

From 47a8d02e033ad4b45b78e6ee42af203c565d2d46 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 1 Aug 2024 21:33:26 +0100
Subject: [PATCH 004/117] design(frontend): implement sidebar design

---
 agenta-web/src/components/Sidebar/Sidebar.tsx |  158 +-
 agenta-web/src/components/Sidebar/config.tsx  |  150 +-
 .../src/styles/tokens/antd-themeConfig.json   | 4470 ++++++++---------
 3 files changed, 2438 insertions(+), 2340 deletions(-)

diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
index 527042b49..dc2a427ad 100644
--- a/agenta-web/src/components/Sidebar/Sidebar.tsx
+++ b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -1,6 +1,6 @@
 import React, {useEffect, useMemo, useState} from "react"
 import {useRouter} from "next/router"
-import {Layout, Menu, Tag, Tooltip} from "antd"
+import {Avatar, Button, Divider, Dropdown, Layout, Menu, Space, Tag, Tooltip} from "antd"
 import Logo from "../Logo/Logo"
 import Link from "next/link"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
@@ -9,6 +9,13 @@ import {createUseStyles} from "react-jss"
 import {useLocalStorage} from "usehooks-ts"
 import {SidebarConfig, useSidebarConfig} from "./config"
 import {JSSTheme} from "@/lib/Types"
+import {getColorFromStr} from "@/lib/helpers/colors"
+import {getInitials, isDemo} from "@/lib/helpers/utils"
+import {useProfileData} from "@/contexts/profile.context"
+import {useSession} from "@/hooks/useSession"
+import {CaretDown, Gear, SignOut} from "@phosphor-icons/react"
+import AlertPopup from "../AlertPopup/AlertPopup"
+import {dynamicContext} from "@/lib/helpers/dynamic"
 
 const {Sider} = Layout
 
@@ -33,9 +40,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         height: "100%",
         padding: "0 10px",
         "& > div:nth-of-type(1)": {
-            marginTop: "20px",
-            marginBottom: "20px",
-            marginRight: "20px",
+            margin: `${theme.padding}px 0`,
             display: "flex",
             justifyContent: "center",
         },
@@ -46,6 +51,8 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             flex: 1,
         },
         "& .ant-menu-submenu-title": {
+            display: "flex",
+            alignItems: "center",
             paddingInlineEnd: "20px",
             "& .ant-menu-submenu-arrow": {
                 insetInlineEnd: "8px",
@@ -68,7 +75,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         borderRight: "0 !important",
     },
     menuLinks: {
-        display: "inline-block",
         width: "100%",
     },
 }))
@@ -77,11 +83,12 @@ const SidebarMenu: React.FC<{
     items: SidebarConfig[]
     collapsed: boolean
     menuProps?: React.ComponentProps<typeof Menu>
-}> = ({items, menuProps, collapsed}) => {
+    mode?: "horizontal" | "vertical" | "inline"
+}> = ({items, menuProps, collapsed, mode = "inline"}) => {
     const classes = useStyles()
 
     return (
-        <Menu mode="inline" {...menuProps}>
+        <Menu mode={mode} {...menuProps}>
             {items.map((item) => {
                 if (item.submenu) {
                     if (item.isCloudFeature) {
@@ -201,20 +208,23 @@ const SidebarMenu: React.FC<{
                         </Link>
                     )
                     return (
-                        <Menu.Item
-                            data-cy={item.key}
-                            icon={item.icon}
-                            key={item.key}
-                            onClick={item.onClick}
-                        >
-                            {collapsed ? (
-                                node
-                            ) : (
-                                <Tooltip title={item.tooltip} placement="right">
-                                    {node}
-                                </Tooltip>
-                            )}
-                        </Menu.Item>
+                        <>
+                            <Menu.Item
+                                data-cy={item.key}
+                                icon={item.icon}
+                                key={item.key}
+                                onClick={item.onClick}
+                            >
+                                {collapsed ? (
+                                    node
+                                ) : (
+                                    <Tooltip title={item.tooltip} placement="right">
+                                        {node}
+                                    </Tooltip>
+                                )}
+                            </Menu.Item>
+                            {item.divider && <Divider className="my-4" />}
+                        </>
                     )
                 }
             })}
@@ -227,10 +237,19 @@ const Sidebar: React.FC = () => {
     const router = useRouter()
     const classes = useStyles()
     const [openKey, setOpenKey] = useState<string>()
-
     const [collapsed, setCollapsed] = useLocalStorage("sidebarCollapsed", false)
-
     const menu = useSidebarConfig()
+    const {user} = useProfileData()
+    const {logout} = useSession()
+    const [useOrgData, setUseOrgData] = useState<Function>(() => () => "")
+    const {selectedOrg, orgs, changeSelectedOrg} = useOrgData()
+
+    useEffect(() => {
+        dynamicContext("org.context", {useOrgData}).then((context) => {
+            setUseOrgData(() => context.useOrgData)
+        })
+    }, [])
+
     const {topItems, bottomItems} = useMemo(() => {
         const topItems: SidebarConfig[] = []
         const bottomItems: SidebarConfig[] = []
@@ -290,9 +309,95 @@ const Sidebar: React.FC = () => {
             >
                 <div className={classes.sliderContainer}>
                     <div>
-                        <Link data-cy="app-management-link" href="/apps">
-                            <Logo isOnlyIconLogo={collapsed} />
-                        </Link>
+                        {!isDemo() && (
+                            <Link data-cy="app-management-link" href="/apps">
+                                <Logo isOnlyIconLogo={collapsed} />
+                            </Link>
+                        )}
+                        {selectedOrg?.id && user?.id && isDemo() && (
+                            <Dropdown
+                                trigger={["click"]}
+                                menu={{
+                                    items: [
+                                        ...orgs.map((org: any) => ({
+                                            key: org.id,
+                                            label: (
+                                                <Space>
+                                                    <Avatar
+                                                        size={"small"}
+                                                        style={{
+                                                            backgroundColor: getColorFromStr(
+                                                                org.id,
+                                                            ),
+                                                            color: "#fff",
+                                                        }}
+                                                    >
+                                                        {getInitials(org.name)}
+                                                    </Avatar>
+                                                    <div>{org.name}</div>
+                                                </Space>
+                                            ),
+                                        })),
+                                        {type: "divider"},
+                                        {
+                                            key: "settings",
+                                            label: (
+                                                <Link
+                                                    href={"/settings"}
+                                                    className="flex items-center gap-2"
+                                                >
+                                                    <Gear size={16} />
+                                                    <div>Settings</div>
+                                                </Link>
+                                            ),
+                                        },
+                                        {
+                                            key: "logout",
+                                            label: (
+                                                <div
+                                                    className="flex items-center gap-2"
+                                                    onClick={() => {
+                                                        AlertPopup({
+                                                            title: "Logout",
+                                                            message:
+                                                                "Are you sure you want to logout?",
+                                                            onOk: logout,
+                                                        })
+                                                    }}
+                                                >
+                                                    <SignOut size={16} />
+                                                    <div>Logout</div>
+                                                </div>
+                                            ),
+                                        },
+                                    ],
+                                    selectedKeys: [selectedOrg.id],
+                                    onClick: ({key}) => {
+                                        if (["settings", "logout"].includes(key)) return
+                                        changeSelectedOrg(key)
+                                    },
+                                }}
+                            >
+                                <Button className="flex w-full h-full items-center justify-between">
+                                    <div className="flex gap-2">
+                                        <Avatar
+                                            shape="square"
+                                            style={{
+                                                backgroundColor: getColorFromStr(selectedOrg.id),
+                                                color: "#fff",
+                                                fontSize: 18,
+                                            }}
+                                        >
+                                            {getInitials(selectedOrg.name)}
+                                        </Avatar>
+
+                                        <div>{selectedOrg.name}</div>
+                                    </div>
+
+                                    <CaretDown size={14} />
+                                </Button>
+                            </Dropdown>
+                        )}
                     </div>
                     <ErrorBoundary fallback={<div />}>
                         <div>
@@ -315,6 +420,7 @@ const Sidebar: React.FC = () => {
                                 }}
                                 items={bottomItems}
                                 collapsed={collapsed}
+                                mode="vertical"
                             />
                         </div>
                     </ErrorBoundary>
diff --git a/agenta-web/src/components/Sidebar/config.tsx b/agenta-web/src/components/Sidebar/config.tsx
index d6d07e3f8..ea9cd49ee 100644
--- a/agenta-web/src/components/Sidebar/config.tsx
+++ b/agenta-web/src/components/Sidebar/config.tsx
@@ -1,37 +1,38 @@
-import {useProfileData} from "@/contexts/profile.context"
 import {useAppId} from "@/hooks/useAppId"
 import {useSession} from "@/hooks/useSession"
-import {GenericObject, JSSTheme} from "@/lib/Types"
-import {getColorFromStr} from "@/lib/helpers/colors"
+import {JSSTheme} from "@/lib/Types"
 import {dynamicContext} from "@/lib/helpers/dynamic"
-import {getInitials, isDemo} from "@/lib/helpers/utils"
+import {isDemo} from "@/lib/helpers/utils"
 import {
-    ApartmentOutlined,
     ApiOutlined,
     AppstoreOutlined,
-    BarChartOutlined,
-    CloudUploadOutlined,
     DashboardOutlined,
     DatabaseOutlined,
-    FormOutlined,
-    LineChartOutlined,
-    LogoutOutlined,
     PartitionOutlined,
-    PhoneOutlined,
     PlayCircleOutlined,
-    ReadOutlined,
     RocketOutlined,
-    SettingOutlined,
     SlidersOutlined,
     SwapOutlined,
+    GithubFilled,
 } from "@ant-design/icons"
-import {Avatar} from "antd"
-import {use, useEffect, useState} from "react"
-import AlertPopup from "../AlertPopup/AlertPopup"
+import {useEffect, useState} from "react"
 import Image from "next/image"
 import abTesting from "@/media/testing.png"
 import singleModel from "@/media/score.png"
 import {createUseStyles} from "react-jss"
+import {
+    ChartDonut,
+    ChartLineUp,
+    CloudArrowUp,
+    Desktop,
+    GithubLogo,
+    PaperPlane,
+    PersonSimpleRun,
+    Phone,
+    Question,
+    Scroll,
+    SlackLogo,
+} from "@phosphor-icons/react"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     evaluationImg: {
@@ -46,7 +47,7 @@ export type SidebarConfig = {
     title: string
     tooltip?: string
     link?: string
-    icon: JSX.Element
+    icon?: JSX.Element
     isHidden?: boolean
     isBottom?: boolean
     submenu?: Omit<SidebarConfig, "submenu">[]
@@ -54,13 +55,13 @@ export type SidebarConfig = {
     tag?: string
     isCloudFeature?: boolean
     cloudFeatureTooltip?: string
+    divider?: boolean
 }
 
 export const useSidebarConfig = () => {
     const classes = useStyles()
     const appId = useAppId()
-    const {user} = useProfileData()
-    const {doesSessionExist, logout} = useSession()
+    const {doesSessionExist} = useSession()
     const isOss = !isDemo()
     const [useOrgData, setUseOrgData] = useState<Function>(() => () => "")
 
@@ -70,8 +71,6 @@ export const useSidebarConfig = () => {
         })
     }, [])
 
-    const {selectedOrg, orgs, changeSelectedOrg} = useOrgData()
-
     const sidebarConfig: SidebarConfig[] = [
         {
             key: "app-management-link",
@@ -79,6 +78,15 @@ export const useSidebarConfig = () => {
             tooltip: "Create new applications or switch between your existing projects.",
             link: "/apps",
             icon: <AppstoreOutlined />,
+            divider: true,
+        },
+        {
+            key: "overview-link",
+            title: "Overview",
+            tooltip: "Overview link",
+            link: "/apps",
+            icon: <Desktop size={16} />,
+            isHidden: !appId,
         },
         {
             key: "app-playground-link",
@@ -100,7 +108,7 @@ export const useSidebarConfig = () => {
         {
             key: "app-auto-evaluations-link",
             title: "Automatic Evaluation",
-            icon: <BarChartOutlined />,
+            icon: <ChartDonut size={16} />,
             isHidden: !appId,
             submenu: [
                 {
@@ -123,7 +131,7 @@ export const useSidebarConfig = () => {
         {
             key: "app-human-evaluations-link",
             title: "Human Evaluation",
-            icon: <FormOutlined />,
+            icon: <PersonSimpleRun size={16} />,
             isHidden: !appId,
             submenu: [
                 {
@@ -159,7 +167,7 @@ export const useSidebarConfig = () => {
         {
             key: "app-observability-link",
             title: "Observability",
-            icon: <LineChartOutlined />,
+            icon: <ChartLineUp size={16} />,
             isHidden: !appId,
             isCloudFeature: true && isOss,
             cloudFeatureTooltip: "Observability available in Cloud/Enterprise editions only",
@@ -191,7 +199,7 @@ export const useSidebarConfig = () => {
         {
             key: "app-deployment-link",
             title: "Deployment",
-            icon: <CloudUploadOutlined />,
+            icon: <CloudArrowUp size={16} />,
             isHidden: !appId,
             submenu: [
                 {
@@ -204,66 +212,50 @@ export const useSidebarConfig = () => {
             ],
         },
         {
-            key: "settings-link",
-            title: "Settings",
-            link: "/settings",
-            icon: <SettingOutlined />,
+            key: "invite-teammate-link",
+            title: "Invite Teammate",
+            link: "/settings?tab=workspace",
+            icon: <PaperPlane size={16} />,
             isBottom: true,
             isHidden: !doesSessionExist,
         },
         {
-            key: "docs-link",
-            title: "Docs",
-            link: "https://docs.agenta.ai",
-            icon: <ReadOutlined />,
+            key: "help-docs-link",
+            title: "Help & Docs",
+            icon: <Question size={16} />,
             isBottom: true,
-        },
-        {
-            key: "book-onboarding-call-link",
-            title: "Book Onboarding Call",
-            link: "https://cal.com/mahmoud-mabrouk-ogzgey/demo",
-            icon: <PhoneOutlined />,
-            isBottom: true,
-            isHidden: isOss,
-        },
-        {
-            key: "orgs-link",
-            title: selectedOrg?.name || "",
-            icon: <ApartmentOutlined />,
-            isHidden: !doesSessionExist || (true && !selectedOrg),
-            submenu: (orgs || []).map((org: GenericObject) => ({
-                key: `orgs-${org.id}-link`,
-                title: org.name,
-                onClick: () => {
-                    changeSelectedOrg?.(org.id)
+            submenu: [
+                {
+                    key: "docs",
+                    title: "Documentation",
+                    link: "https://docs.agenta.ai/",
+                    icon: <Scroll size={16} />,
                 },
-                icon: (
-                    <Avatar
-                        size="small"
-                        style={{
-                            backgroundColor: getColorFromStr(org.id),
-                            color: "#fff",
-                        }}
-                    >
-                        {getInitials(org.name)}
-                    </Avatar>
-                ),
-            })),
-            isBottom: true,
-        },
-        {
-            key: "logout-link",
-            title: "Logout",
-            icon: <LogoutOutlined />,
-            isBottom: true,
-            isHidden: !doesSessionExist || (isOss && !!user?.username),
-            onClick: () => {
-                AlertPopup({
-                    title: "Logout",
-                    message: "Are you sure you want to logout?",
-                    onOk: logout,
-                })
-            },
+                {
+                    key: "github-issues",
+                    title: "GitHub Issues",
+                    link: "https://github.com/Agenta-AI/agenta/issues",
+                    icon: <GithubLogo size={16} />,
+                },
+                {
+                    key: "github-support",
+                    title: "GitHub Support",
+                    link: "https://github.com/Agenta-AI/agenta",
+                    icon: <GithubFilled size={16} />,
+                },
+                {
+                    key: "slack-connect",
+                    title: "Slack connect",
+                    link: "https://join.slack.com/t/agenta-hq/shared_invite/zt-1zsafop5i-Y7~ZySbhRZvKVPV5DO_7IA",
+                    icon: <SlackLogo size={16} />,
+                },
+                {
+                    key: "book-call",
+                    title: "Book a call",
+                    link: "https://cal.com/mahmoud-mabrouk-ogzgey/demo",
+                    icon: <Phone size={16} />,
+                },
+            ],
         },
     ]
 
diff --git a/agenta-web/src/styles/tokens/antd-themeConfig.json b/agenta-web/src/styles/tokens/antd-themeConfig.json
index 992bfcfb4..d177f31a5 100644
--- a/agenta-web/src/styles/tokens/antd-themeConfig.json
+++ b/agenta-web/src/styles/tokens/antd-themeConfig.json
@@ -1,2238 +1,2238 @@
 {
-  "token": {
-    "blue.1": "#e6f4ff",
-    "blue.2": "#bae0ff",
-    "blue.3": "#91caff",
-    "blue.4": "#69b1ff",
-    "blue.5": "#4096ff",
-    "blue.6": "#1677ff",
-    "blue.7": "#0958d9",
-    "blue.8": "#003eb3",
-    "blue.9": "#002c8c",
-    "blue.10": "#001d66",
-    "cyan.1": "#e6fffb",
-    "cyan.2": "#b5f5ec",
-    "cyan.3": "#87e8de",
-    "cyan.4": "#5cdbd3",
-    "cyan.5": "#36cfc9",
-    "cyan.6": "#13c2c2",
-    "cyan.7": "#08979c",
-    "cyan.8": "#006d75",
-    "cyan.9": "#00474f",
-    "cyan.10": "#002329",
-    "geekblue.1": "#f0f5ff",
-    "geekblue.2": "#d6e4ff",
-    "geekblue.3": "#adc6ff",
-    "geekblue.4": "#85a5ff",
-    "geekblue.5": "#597ef7",
-    "geekblue.6": "#2f54eb",
-    "geekblue.7": "#1d39c4",
-    "geekblue.8": "#10239e",
-    "geekblue.9": "#061178",
-    "geekblue.10": "#030852",
-    "gold.1": "#fffbe6",
-    "gold.2": "#fff1b8",
-    "gold.3": "#ffe58f",
-    "gold.4": "#ffd666",
-    "gold.5": "#ffc53d",
-    "gold.6": "#faad14",
-    "gold.7": "#d48806",
-    "gold.8": "#ad6800",
-    "gold.9": "#874d00",
-    "gold.10": "#613400",
-    "green.1": "#f6ffed",
-    "green.2": "#d9f7be",
-    "green.3": "#b7eb8f",
-    "green.4": "#95de64",
-    "green.5": "#73d13d",
-    "green.6": "#52c41a",
-    "green.7": "#389e0d",
-    "green.8": "#237804",
-    "green.9": "#135200",
-    "green.10": "#092b00",
-    "lime.1": "#fcffe6",
-    "lime.2": "#f4ffb8",
-    "lime.3": "#eaff8f",
-    "lime.4": "#d3f261",
-    "lime.5": "#bae637",
-    "lime.6": "#a0d911",
-    "lime.7": "#7cb305",
-    "lime.8": "#5b8c00",
-    "lime.9": "#3f6600",
-    "lime.10": "#254000",
-    "magenta.1": "#fff0f6",
-    "magenta.2": "#ffd6e7",
-    "magenta.3": "#ffadd2",
-    "magenta.4": "#ff85c0",
-    "magenta.5": "#f759ab",
-    "magenta.6": "#eb2f96",
-    "magenta.7": "#c41d7f",
-    "magenta.8": "#9e1068",
-    "magenta.9": "#780650",
-    "magenta.10": "#520339",
-    "orange.1": "#fff7e6",
-    "orange.2": "#ffe7ba",
-    "orange.3": "#ffd591",
-    "orange.4": "#ffc069",
-    "colorText": "rgba(0, 0, 0, 0.88)",
-    "colorTextSecondary": "rgba(0, 0, 0, 0.65)",
-    "orange.5": "#ffa940",
-    "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
-    "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-    "orange.6": "#fa8c16",
-    "orange.7": "#d46b08",
-    "colorTextLightSolid": "#ffffff",
-    "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-    "colorTextLabel": "rgba(0, 0, 0, 0.65)",
-    "orange.8": "#ad4e00",
-    "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-    "orange.9": "#873800",
-    "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-    "orange.10": "#612500",
-    "purple.1": "#f9f0ff",
-    "purple.2": "#efdbff",
-    "purple.3": "#d3adf7",
-    "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-    "colorIcon": "rgba(0, 0, 0, 0.45)",
-    "purple.4": "#b37feb",
-    "colorIconHover": "rgba(0, 0, 0, 0.88)",
-    "colorBgContainer": "#ffffff",
-    "purple.5": "#9254de",
-    "colorBgElevated": "#ffffff",
-    "purple.6": "#722ed1",
-    "colorBgLayout": "#f5f5f5",
-    "purple.7": "#531dab",
-    "colorBgMask": "rgba(0, 0, 0, 0.45)",
-    "purple.8": "#391085",
-    "colorBgSpotlight": "rgba(0, 0, 0, 0.85)",
-    "purple.9": "#22075e",
-    "colorBorder": "#d9d9d9",
-    "purple.10": "#120338",
-    "colorBorderSecondary": "#f0f0f0",
-    "red.1": "#fff1f0",
-    "colorFill": "rgba(0, 0, 0, 0.15)",
-    "red.2": "#ffccc7",
-    "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-    "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
-    "colorFillQuaternary": "rgba(0, 0, 0, 0.02)",
-    "red.3": "#ffa39e",
-    "red.4": "#ff7875",
-    "colorWhite": "#ffffff",
-    "red.5": "#ff4d4f",
-    "colorBgBase": "#ffffff",
-    "red.6": "#f5222d",
-    "colorTextBase": "#000000",
-    "red.7": "#cf1322",
-    "red.8": "#a8071a",
-    "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-    "red.9": "#820014",
-    "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
-    "red.10": "#5c0011",
-    "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
-    "volcano.1": "#fff2e8",
-    "colorBorderBg": "#ffffff",
-    "volcano.2": "#ffd8bf",
-    "colorFillContent": "rgba(0, 0, 0, 0.06)",
-    "volcano.3": "#ffbb96",
-    "colorFillContentHover": "rgba(0, 0, 0, 0.15)",
-    "volcano.4": "#ff9c6e",
-    "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-    "volcano.5": "#ff7a45",
-    "volcano.6": "#fa541c",
-    "volcano.7": "#d4380d",
-    "transparent": "rgba(0, 0, 0, 0)",
-    "colorSplit": "rgba(0, 0, 0, 0.06)",
-    "yellow.1": "#feffe6",
-    "volcano.8": "#ad2102",
-    "yellow.2": "#ffffb8",
-    "yellow.3": "#fffb8f",
-    "volcano.9": "#871400",
-    "yellow.4": "#fff566",
-    "volcano.10": "#610b00",
-    "yellow.5": "#ffec3d",
-    "yellow.6": "#fadb14",
-    "yellow.7": "#d4b106",
-    "yellow.8": "#ad8b00",
-    "yellow.9": "#876800",
-    "yellow.10": "#614700",
-    "colorPrimary": "#1677ff",
-    "colorSuccess": "#52c41a",
-    "colorWarning": "#faad14",
-    "colorInfo": "#1677ff",
-    "colorError": "#ff4d4f",
-    "colorLink": "#1677ff",
-    "colorErrorBg": "#fff2f0",
-    "colorErrorBgHover": "#fff1f0",
-    "colorErrorBorder": "#ffccc7",
-    "colorErrorBorderHover": "#ffa39e",
-    "colorErrorHover": "#ff7875",
-    "colorErrorActive": "#d9363e",
-    "colorErrorTextHover": "#ff7875",
-    "colorErrorText": "#ff4d4f",
-    "colorErrorTextActive": "#d9363e",
-    "colorLinkHover": "#4096ff",
-    "colorInfoBg": "#e6f4ff",
-    "colorInfoBgHover": "#bae0ff",
-    "colorInfoBorder": "#91caff",
-    "colorInfoBorderHover": "#69b1ff",
-    "colorInfoHover": "#4096ff",
-    "colorInfoActive": "#0958d9",
-    "colorInfoTextHover": "#4096ff",
-    "colorInfoText": "#1677ff",
-    "colorInfoTextActive": "#0958d9",
-    "colorLinkActive": "#0958d9",
-    "colorPrimaryBg": "#e6f4ff",
-    "colorPrimaryBgHover": "#bae0ff",
-    "colorPrimaryBorder": "#91caff",
-    "colorPrimaryBorderHover": "#69b1ff",
-    "colorPrimaryHover": "#4096ff",
-    "colorPrimaryActive": "#0958d9",
-    "colorPrimaryTextHover": "#4096ff",
-    "colorPrimaryText": "#1677ff",
-    "colorPrimaryTextActive": "#0958d9",
-    "colorSuccessBg": "#f6ffed",
-    "colorSuccessBgHover": "#d9f7be",
-    "colorSuccessBorder": "#b7eb8f",
-    "colorSuccessBorderHover": "#95de64",
-    "colorSuccessHover": "#95de64",
-    "colorSuccessActive": "#389e0d",
-    "colorSuccessTextHover": "#73d13d",
-    "colorSuccessText": "#52c41a",
-    "colorSuccessTextActive": "#389e0d",
-    "colorWarningBg": "#fffbe6",
-    "colorWarningBgHover": "#fff1b8",
-    "colorWarningBorder": "#ffe58f",
-    "colorWarningBorderHover": "#ffd666",
-    "colorWarningHover": "#ffd666",
-    "colorWarningActive": "#d48806",
-    "colorWarningTextHover": "#ffc53d",
-    "colorWarningText": "#faad14",
-    "colorWarningTextActive": "#d48806",
-    "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-    "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
-    "controlItemBgActive": "#e6f4ff",
-    "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
-    "controlItemBgActiveHover": "#bae0ff",
-    "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-    "controlOutline": "rgba(5, 145, 255, 0.1)",
-    "controlTmpOutline": "rgba(0, 0, 0, 0.02)",
-    "borderRadius": 6,
-    "borderRadiusLG": 8,
-    "borderRadiusSM": 4,
-    "borderRadiusXS": 2,
-    "sizeStep": 4,
-    "sizeUnit": 4,
-    "controlInteractiveSize": 16,
-    "size": 16,
-    "sizeLG": 24,
-    "sizeMD": 20,
-    "sizeMS": 16,
-    "sizeSM": 12,
-    "sizeXL": 32,
-    "sizeXS": 8,
-    "sizeXXL": 48,
-    "controlHeight": 32,
-    "sizeXXS": 4,
-    "controlHeightLG": 40,
-    "controlHeightSM": 24,
-    "controlHeightXS": 16,
-    "lineWidth": 1,
-    "lineWidthBold": 2,
-    "lineWidthFocus": 4,
-    "controlOutlineWidth": 2,
-    "screenLG": 992,
-    "screenLGMax": 1199,
-    "screenLGMin": 992,
-    "screenMD": 768,
-    "screenMDMax": 991,
-    "screenMDMin": 768,
-    "screenSM": 576,
-    "screenSMMax": 767,
-    "screenSMMin": 576,
-    "screenXL": 1200,
-    "screenXLMax": 1599,
-    "screenXLMin": 1200,
-    "screenXS": 480,
-    "screenXSMax": 575,
-    "screenXSMin": 480,
-    "screenXXL": 1600,
-    "screenXXLMin": 1600,
-    "sizePopupArrow": 16,
-    "margin": 16,
-    "marginLG": 24,
-    "marginMD": 20,
-    "marginSM": 12,
-    "marginXL": 32,
-    "marginXS": 8,
-    "marginXXL": 48,
-    "marginXXS": 4,
-    "padding": 16,
-    "paddingLG": 24,
-    "paddingMD": 20,
-    "paddingSM": 12,
-    "paddingXL": 32,
-    "paddingXS": 8,
-    "paddingXXS": 4,
-    "paddingContentHorizontal": 16,
-    "paddingContentHorizontalLG": 24,
-    "paddingContentHorizontalSM": 16,
-    "paddingContentVertical": 12,
-    "paddingContentVerticalLG": 16,
-    "paddingContentVerticalSM": 8,
-    "controlPaddingHorizontal": 12,
-    "controlPaddingHorizontalSM": 8,
-    "fontFamily": "Inter",
-    "fontFamilyCode": "Courier Prime",
-    "fontSize": 12,
-    "fontSizeLG": 14,
-    "fontSizeSM": 10,
-    "fontSizeXL": 18,
-    "fontSizeHeading1": 32,
-    "fontSizeHeading2": 26,
-    "fontSizeHeading3": 20,
-    "fontSizeHeading4": 16,
-    "fontSizeHeading5": 14,
-    "lineHeight": 1.6666666666666667,
-    "lineHeightHeading1": 1.25,
-    "lineHeightHeading2": 1.3076923076923077,
-    "lineHeightHeading3": 1.4,
-    "lineHeightHeading4": 1.5,
-    "lineHeightHeading5": 1.5714285714285714,
-    "lineHeightLG": 1.5714285714285714,
-    "lineHeightSM": 1.8,
-    "fontSizeIcon": 12,
-    "fontWeightStrong": 600,
-    "colorFillAlterSolid": "#fafafa",
-    "fontWeightNormal": 400,
-    "base.1": "#fafafa",
-    "base.2": "#f4f4f5",
-    "base.3": "#e4e4e7",
-    "base.4": "#d4d4d8",
-    "base.5": "#a1a1aa",
-    "base.6": "#71717a",
-    "base.7": "#52525b",
-    "base.8": "#3f3f46",
-    "base.9": "#27272a",
-    "base.10": "#18181b",
-    "fontWeightMedium": 500
-  },
-  "components": {
-    "Input": {
-      "paddingInlineSM": 7,
-      "paddingInlineLG": 11,
-      "paddingInline": 11,
-      "paddingBlockSM": 0,
-      "paddingBlockLG": 7,
-      "paddingBlock": 4,
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "paddingLG": 24,
-      "lineWidth": 1,
-      "lineHeightLG": 1.5714285714285714,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSizeIcon": 12,
-      "fontSize": 12,
-      "controlPaddingHorizontalSM": 8,
-      "controlPaddingHorizontal": 12,
-      "controlOutlineWidth": 2,
-      "controlOutline": "rgba(5, 145, 255, 0.1)",
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
-      "colorWarningBorderHover": "#ffd666",
-      "colorWarning": "#faad14",
-      "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
-      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimary": "#1677ff",
-      "colorIconHover": "rgba(0, 0, 0, 0.88)",
-      "colorIcon": "rgba(0, 0, 0, 0.45)",
-      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-      "colorErrorBorderHover": "#ffa39e",
-      "colorError": "#ff4d4f",
-      "colorBorder": "#d9d9d9",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "hoverBorderColor": "#4096ff",
-      "addonBg": "rgba(0, 0, 0, 0.02)",
-      "activeBorderColor": "#1677ff",
-      "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
-      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-      "colorErrorBgHover": "#fff1f0",
-      "colorErrorBg": "#fff2f0",
-      "colorWarningBg": "#fffbe6",
-      "colorWarningBgHover": "#fff1b8",
-      "colorWarningText": "#faad14",
-      "colorErrorText": "#ff4d4f",
-      "activeBg": "#ffffff",
-      "hoverBg": "#ffffff",
-      "inputFontSize": 12,
-      "inputFontSizeLG": 14,
-      "inputFontSizeSM": 10,
-      "fontFamily": "Inter"
+    "token": {
+        "blue.1": "#e6f4ff",
+        "blue.2": "#bae0ff",
+        "blue.3": "#91caff",
+        "blue.4": "#69b1ff",
+        "blue.5": "#4096ff",
+        "blue.6": "#1677ff",
+        "blue.7": "#0958d9",
+        "blue.8": "#003eb3",
+        "blue.9": "#002c8c",
+        "blue.10": "#001d66",
+        "cyan.1": "#e6fffb",
+        "cyan.2": "#b5f5ec",
+        "cyan.3": "#87e8de",
+        "cyan.4": "#5cdbd3",
+        "cyan.5": "#36cfc9",
+        "cyan.6": "#13c2c2",
+        "cyan.7": "#08979c",
+        "cyan.8": "#006d75",
+        "cyan.9": "#00474f",
+        "cyan.10": "#002329",
+        "geekblue.1": "#f0f5ff",
+        "geekblue.2": "#d6e4ff",
+        "geekblue.3": "#adc6ff",
+        "geekblue.4": "#85a5ff",
+        "geekblue.5": "#597ef7",
+        "geekblue.6": "#2f54eb",
+        "geekblue.7": "#1d39c4",
+        "geekblue.8": "#10239e",
+        "geekblue.9": "#061178",
+        "geekblue.10": "#030852",
+        "gold.1": "#fffbe6",
+        "gold.2": "#fff1b8",
+        "gold.3": "#ffe58f",
+        "gold.4": "#ffd666",
+        "gold.5": "#ffc53d",
+        "gold.6": "#faad14",
+        "gold.7": "#d48806",
+        "gold.8": "#ad6800",
+        "gold.9": "#874d00",
+        "gold.10": "#613400",
+        "green.1": "#f6ffed",
+        "green.2": "#d9f7be",
+        "green.3": "#b7eb8f",
+        "green.4": "#95de64",
+        "green.5": "#73d13d",
+        "green.6": "#52c41a",
+        "green.7": "#389e0d",
+        "green.8": "#237804",
+        "green.9": "#135200",
+        "green.10": "#092b00",
+        "lime.1": "#fcffe6",
+        "lime.2": "#f4ffb8",
+        "lime.3": "#eaff8f",
+        "lime.4": "#d3f261",
+        "lime.5": "#bae637",
+        "lime.6": "#a0d911",
+        "lime.7": "#7cb305",
+        "lime.8": "#5b8c00",
+        "lime.9": "#3f6600",
+        "lime.10": "#254000",
+        "magenta.1": "#fff0f6",
+        "magenta.2": "#ffd6e7",
+        "magenta.3": "#ffadd2",
+        "magenta.4": "#ff85c0",
+        "magenta.5": "#f759ab",
+        "magenta.6": "#eb2f96",
+        "magenta.7": "#c41d7f",
+        "magenta.8": "#9e1068",
+        "magenta.9": "#780650",
+        "magenta.10": "#520339",
+        "orange.1": "#fff7e6",
+        "orange.2": "#ffe7ba",
+        "orange.3": "#ffd591",
+        "orange.4": "#ffc069",
+        "colorText": "rgba(0, 0, 0, 0.88)",
+        "colorTextSecondary": "rgba(0, 0, 0, 0.65)",
+        "orange.5": "#ffa940",
+        "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+        "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+        "orange.6": "#fa8c16",
+        "orange.7": "#d46b08",
+        "colorTextLightSolid": "#ffffff",
+        "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+        "colorTextLabel": "rgba(0, 0, 0, 0.65)",
+        "orange.8": "#ad4e00",
+        "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+        "orange.9": "#873800",
+        "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+        "orange.10": "#612500",
+        "purple.1": "#f9f0ff",
+        "purple.2": "#efdbff",
+        "purple.3": "#d3adf7",
+        "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+        "colorIcon": "rgba(0, 0, 0, 0.45)",
+        "purple.4": "#b37feb",
+        "colorIconHover": "rgba(0, 0, 0, 0.88)",
+        "colorBgContainer": "#ffffff",
+        "purple.5": "#9254de",
+        "colorBgElevated": "#ffffff",
+        "purple.6": "#722ed1",
+        "colorBgLayout": "#f5f5f5",
+        "purple.7": "#531dab",
+        "colorBgMask": "rgba(0, 0, 0, 0.45)",
+        "purple.8": "#391085",
+        "colorBgSpotlight": "rgba(0, 0, 0, 0.85)",
+        "purple.9": "#22075e",
+        "colorBorder": "#d9d9d9",
+        "purple.10": "#120338",
+        "colorBorderSecondary": "#f0f0f0",
+        "red.1": "#fff1f0",
+        "colorFill": "rgba(0, 0, 0, 0.15)",
+        "red.2": "#ffccc7",
+        "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+        "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
+        "colorFillQuaternary": "rgba(0, 0, 0, 0.02)",
+        "red.3": "#ffa39e",
+        "red.4": "#ff7875",
+        "colorWhite": "#ffffff",
+        "red.5": "#ff4d4f",
+        "colorBgBase": "#ffffff",
+        "red.6": "#f5222d",
+        "colorTextBase": "#000000",
+        "red.7": "#cf1322",
+        "red.8": "#a8071a",
+        "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+        "red.9": "#820014",
+        "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
+        "red.10": "#5c0011",
+        "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
+        "volcano.1": "#fff2e8",
+        "colorBorderBg": "#ffffff",
+        "volcano.2": "#ffd8bf",
+        "colorFillContent": "rgba(0, 0, 0, 0.06)",
+        "volcano.3": "#ffbb96",
+        "colorFillContentHover": "rgba(0, 0, 0, 0.15)",
+        "volcano.4": "#ff9c6e",
+        "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+        "volcano.5": "#ff7a45",
+        "volcano.6": "#fa541c",
+        "volcano.7": "#d4380d",
+        "transparent": "rgba(0, 0, 0, 0)",
+        "colorSplit": "rgba(0, 0, 0, 0.06)",
+        "yellow.1": "#feffe6",
+        "volcano.8": "#ad2102",
+        "yellow.2": "#ffffb8",
+        "yellow.3": "#fffb8f",
+        "volcano.9": "#871400",
+        "yellow.4": "#fff566",
+        "volcano.10": "#610b00",
+        "yellow.5": "#ffec3d",
+        "yellow.6": "#fadb14",
+        "yellow.7": "#d4b106",
+        "yellow.8": "#ad8b00",
+        "yellow.9": "#876800",
+        "yellow.10": "#614700",
+        "colorPrimary": "#1677ff",
+        "colorSuccess": "#52c41a",
+        "colorWarning": "#faad14",
+        "colorInfo": "#1677ff",
+        "colorError": "#ff4d4f",
+        "colorLink": "#1677ff",
+        "colorErrorBg": "#fff2f0",
+        "colorErrorBgHover": "#fff1f0",
+        "colorErrorBorder": "#ffccc7",
+        "colorErrorBorderHover": "#ffa39e",
+        "colorErrorHover": "#ff7875",
+        "colorErrorActive": "#d9363e",
+        "colorErrorTextHover": "#ff7875",
+        "colorErrorText": "#ff4d4f",
+        "colorErrorTextActive": "#d9363e",
+        "colorLinkHover": "#4096ff",
+        "colorInfoBg": "#e6f4ff",
+        "colorInfoBgHover": "#bae0ff",
+        "colorInfoBorder": "#91caff",
+        "colorInfoBorderHover": "#69b1ff",
+        "colorInfoHover": "#4096ff",
+        "colorInfoActive": "#0958d9",
+        "colorInfoTextHover": "#4096ff",
+        "colorInfoText": "#1677ff",
+        "colorInfoTextActive": "#0958d9",
+        "colorLinkActive": "#0958d9",
+        "colorPrimaryBg": "#e6f4ff",
+        "colorPrimaryBgHover": "#bae0ff",
+        "colorPrimaryBorder": "#91caff",
+        "colorPrimaryBorderHover": "#69b1ff",
+        "colorPrimaryHover": "#4096ff",
+        "colorPrimaryActive": "#0958d9",
+        "colorPrimaryTextHover": "#4096ff",
+        "colorPrimaryText": "#1677ff",
+        "colorPrimaryTextActive": "#0958d9",
+        "colorSuccessBg": "#f6ffed",
+        "colorSuccessBgHover": "#d9f7be",
+        "colorSuccessBorder": "#b7eb8f",
+        "colorSuccessBorderHover": "#95de64",
+        "colorSuccessHover": "#95de64",
+        "colorSuccessActive": "#389e0d",
+        "colorSuccessTextHover": "#73d13d",
+        "colorSuccessText": "#52c41a",
+        "colorSuccessTextActive": "#389e0d",
+        "colorWarningBg": "#fffbe6",
+        "colorWarningBgHover": "#fff1b8",
+        "colorWarningBorder": "#ffe58f",
+        "colorWarningBorderHover": "#ffd666",
+        "colorWarningHover": "#ffd666",
+        "colorWarningActive": "#d48806",
+        "colorWarningTextHover": "#ffc53d",
+        "colorWarningText": "#faad14",
+        "colorWarningTextActive": "#d48806",
+        "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+        "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+        "controlItemBgActive": "#e6f4ff",
+        "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
+        "controlItemBgActiveHover": "#bae0ff",
+        "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+        "controlOutline": "rgba(5, 145, 255, 0.1)",
+        "controlTmpOutline": "rgba(0, 0, 0, 0.02)",
+        "borderRadius": 6,
+        "borderRadiusLG": 8,
+        "borderRadiusSM": 4,
+        "borderRadiusXS": 2,
+        "sizeStep": 4,
+        "sizeUnit": 4,
+        "controlInteractiveSize": 16,
+        "size": 16,
+        "sizeLG": 24,
+        "sizeMD": 20,
+        "sizeMS": 16,
+        "sizeSM": 12,
+        "sizeXL": 32,
+        "sizeXS": 8,
+        "sizeXXL": 48,
+        "controlHeight": 32,
+        "sizeXXS": 4,
+        "controlHeightLG": 40,
+        "controlHeightSM": 24,
+        "controlHeightXS": 16,
+        "lineWidth": 1,
+        "lineWidthBold": 2,
+        "lineWidthFocus": 4,
+        "controlOutlineWidth": 2,
+        "screenLG": 992,
+        "screenLGMax": 1199,
+        "screenLGMin": 992,
+        "screenMD": 768,
+        "screenMDMax": 991,
+        "screenMDMin": 768,
+        "screenSM": 576,
+        "screenSMMax": 767,
+        "screenSMMin": 576,
+        "screenXL": 1200,
+        "screenXLMax": 1599,
+        "screenXLMin": 1200,
+        "screenXS": 480,
+        "screenXSMax": 575,
+        "screenXSMin": 480,
+        "screenXXL": 1600,
+        "screenXXLMin": 1600,
+        "sizePopupArrow": 16,
+        "margin": 16,
+        "marginLG": 24,
+        "marginMD": 20,
+        "marginSM": 12,
+        "marginXL": 32,
+        "marginXS": 8,
+        "marginXXL": 48,
+        "marginXXS": 4,
+        "padding": 16,
+        "paddingLG": 24,
+        "paddingMD": 20,
+        "paddingSM": 12,
+        "paddingXL": 32,
+        "paddingXS": 8,
+        "paddingXXS": 4,
+        "paddingContentHorizontal": 16,
+        "paddingContentHorizontalLG": 24,
+        "paddingContentHorizontalSM": 16,
+        "paddingContentVertical": 12,
+        "paddingContentVerticalLG": 16,
+        "paddingContentVerticalSM": 8,
+        "controlPaddingHorizontal": 12,
+        "controlPaddingHorizontalSM": 8,
+        "fontFamily": "Inter",
+        "fontFamilyCode": "Courier Prime",
+        "fontSize": 12,
+        "fontSizeLG": 14,
+        "fontSizeSM": 10,
+        "fontSizeXL": 18,
+        "fontSizeHeading1": 32,
+        "fontSizeHeading2": 26,
+        "fontSizeHeading3": 20,
+        "fontSizeHeading4": 16,
+        "fontSizeHeading5": 14,
+        "lineHeight": 1.6666666666666667,
+        "lineHeightHeading1": 1.25,
+        "lineHeightHeading2": 1.3076923076923077,
+        "lineHeightHeading3": 1.4,
+        "lineHeightHeading4": 1.5,
+        "lineHeightHeading5": 1.5714285714285714,
+        "lineHeightLG": 1.5714285714285714,
+        "lineHeightSM": 1.8,
+        "fontSizeIcon": 12,
+        "fontWeightStrong": 600,
+        "colorFillAlterSolid": "#fafafa",
+        "fontWeightNormal": 400,
+        "base.1": "#fafafa",
+        "base.2": "#f4f4f5",
+        "base.3": "#e4e4e7",
+        "base.4": "#d4d4d8",
+        "base.5": "#a1a1aa",
+        "base.6": "#71717a",
+        "base.7": "#52525b",
+        "base.8": "#3f3f46",
+        "base.9": "#27272a",
+        "base.10": "#18181b",
+        "fontWeightMedium": 500
     },
-    "Transfer": {
-      "listWidthLG": 250,
-      "listWidth": 180,
-      "listHeight": 200,
-      "itemPaddingBlock": 5,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "margin": 16,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeIcon": 12,
-      "fontSize": 12,
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlItemBgActiveHover": "#bae0ff",
-      "controlItemBgActive": "#e6f4ff",
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusLG": 8,
-      "colorWarning": "#faad14",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorLinkHover": "#4096ff",
-      "colorError": "#ff4d4f",
-      "colorBorder": "#d9d9d9",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "itemHeight": 32,
-      "headerHeight": 40,
-      "fontFamily": "Inter"
-    },
-    "Segmented": {
-      "segmentedBgColorSelected": "#ffffff",
-      "paddingXXS": 4,
-      "marginSM": 12,
-      "lineWidthBold": 2,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlPaddingHorizontalSM": 8,
-      "controlPaddingHorizontal": 12,
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusXS": 2,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorTextLabel": "rgba(0, 0, 0, 0.65)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-      "colorFill": "rgba(0, 0, 0, 0.15)",
-      "colorBgLayout": "#f5f5f5",
-      "colorBgElevated": "#ffffff",
-      "segmentedGroupBg": "rgba(0, 0, 0, 0.04)",
-      "itemSelectedColor": "rgba(0, 0, 0, 0.88)",
-      "itemSelectedBg": "#ffffff",
-      "itemHoverColor": "rgba(0, 0, 0, 0.88)",
-      "itemHoverBg": "rgba(0, 0, 0, 0.06)",
-      "itemColor": "rgba(0, 0, 0, 0.65)",
-      "itemActiveBg": "rgba(0, 0, 0, 0.15)",
-      "trackPadding": 2,
-      "trackBg": "#f5f5f5",
-      "fontFamily": "Inter"
-    },
-    "Switch": {
-      "trackPadding": 2,
-      "trackMinWidthSM": 28,
-      "trackMinWidth": 44,
-      "trackHeightSM": 16,
-      "trackHeight": 22,
-      "handleSizeSM": 12,
-      "handleSize": 18,
-      "marginXXS": 4,
-      "lineWidthFocus": 4,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeSM": 10,
-      "fontSizeIcon": 12,
-      "fontSize": 12,
-      "controlHeight": 32,
-      "colorWhite": "#ffffff",
-      "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
-      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-      "colorTextLightSolid": "#ffffff",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimary": "#1677ff",
-      "handleBg": "#ffffff",
-      "fontFamily": "Inter"
-    },
-    "TimePicker": {
-      "timeColumnWidth": 56,
-      "timeColumnHeight": 224,
-      "timeCellHeight": 28,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "sizePopupArrow": 16,
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "padding": 16,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "lineWidthBold": 2,
-      "lineWidth": 1,
-      "lineHeightLG": 1.5714285714285714,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlPaddingHorizontalSM": 8,
-      "controlPaddingHorizontal": 12,
-      "controlOutlineWidth": 2,
-      "controlOutline": "rgba(5, 145, 255, 0.1)",
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlItemBgActive": "#e6f4ff",
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusXS": 2,
-      "borderRadius": 6,
-      "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
-      "colorWarning": "#faad14",
-      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-      "colorTextLightSolid": "#ffffff",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimary": "#1677ff",
-      "colorLinkHover": "#4096ff",
-      "colorLinkActive": "#0958d9",
-      "colorLink": "#1677ff",
-      "colorIconHover": "rgba(0, 0, 0, 0.88)",
-      "colorIcon": "rgba(0, 0, 0, 0.45)",
-      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-      "colorError": "#ff4d4f",
-      "colorBorder": "#d9d9d9",
-      "colorBgElevated": "#ffffff",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "hoverBorderColor": "#4096ff",
-      "cellHoverBg": "rgba(0, 0, 0, 0.04)",
-      "cellHeight": 24,
-      "activeBorderColor": "#1677ff",
-      "paddingInline": 11,
-      "paddingInlineLG": 11,
-      "paddingInlineSM": 7,
-      "activeBg": "#ffffff",
-      "hoverBg": "#ffffff",
-      "cellBgDisabled": "rgba(0, 0, 0, 0.04)",
-      "cellActiveWithRangeBg": "#e6f4ff",
-      "cellHoverWithRangeBg": "#c8dfff",
-      "cellRangeBorderColor": "#7cb3ff",
-      "multipleItemBg": "rgba(0, 0, 0, 0.06)",
-      "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
-      "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
-      "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
-      "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
-      "cellWidth": 36,
-      "multipleItemHeight": 24,
-      "multipleItemHeightLG": 32,
-      "multipleItemHeightSM": 16,
-      "paddingBlock": 4,
-      "paddingBlockLG": 7,
-      "paddingBlockSM": 0,
-      "presetsMaxWidth": 200,
-      "presetsWidth": 120,
-      "textHeight": 40,
-      "withoutTimeCellHeight": 66,
-      "inputFontSize": 12,
-      "inputFontSizeLG": 14,
-      "inputFontSizeSM": 10,
-      "fontFamily": "Inter"
-    },
-    "Timeline": {
-      "itemPaddingBottom": 20,
-      "paddingXXS": 4,
-      "padding": 16,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "marginSM": 12,
-      "margin": 16,
-      "lineWidthBold": 2,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeSM": 10,
-      "fontSize": 12,
-      "controlHeightLG": 40,
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSuccess": "#52c41a",
-      "colorPrimary": "#1677ff",
-      "colorError": "#ff4d4f",
-      "colorBgContainer": "#ffffff",
-      "tailColor": "rgba(0, 0, 0, 0.06)",
-      "dotBg": "#ffffff",
-      "fontFamily": "Inter"
-    },
-    "Tabs": {
-      "horizontalItemGutter": 32,
-      "cardGutter": 2,
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "paddingLG": 24,
-      "padding": 16,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "marginSM": 12,
-      "margin": 16,
-      "lineWidthFocus": 4,
-      "lineWidthBold": 2,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeSM": 10,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimaryActive": "#0958d9",
-      "colorPrimary": "#1677ff",
-      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-      "colorBorderSecondary": "#f0f0f0",
-      "colorBorder": "#d9d9d9",
-      "colorBgContainer": "#ffffff",
-      "itemSelectedColor": "#1677ff",
-      "itemHoverColor": "#4096ff",
-      "itemColor": "rgba(0, 0, 0, 0.88)",
-      "itemActiveColor": "#0958d9",
-      "inkBarColor": "#1677ff",
-      "cardHeight": 40,
-      "cardBg": "rgba(0, 0, 0, 0.02)",
-      "titleFontSize": 12,
-      "titleFontSizeLG": 14,
-      "titleFontSizeSM": 12,
-      "fontFamily": "Inter"
-    },
-    "Table": {
-      "stickyScrollBarBorderRadius": 100,
-      "headerSplitColor": "#f0f0f0",
-      "headerBg": "rgba(0, 0, 0, 0.02)",
-      "footerBg": "rgba(0, 0, 0, 0.02)",
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "padding": 16,
-      "marginXXS": 4,
-      "margin": 16,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSizeSM": 10,
-      "fontSizeIcon": 12,
-      "fontSize": 12,
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlItemBgActiveHover": "#bae0ff",
-      "controlItemBgActive": "#e6f4ff",
-      "controlInteractiveSize": 16,
-      "controlHeight": 32,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorPrimary": "#1677ff",
-      "colorLinkHover": "#4096ff",
-      "colorLinkActive": "#0958d9",
-      "colorLink": "#1677ff",
-      "colorIconHover": "rgba(0, 0, 0, 0.88)",
-      "colorIcon": "rgba(0, 0, 0, 0.45)",
-      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-      "colorFillContent": "rgba(0, 0, 0, 0.06)",
-      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-      "colorBorderSecondary": "#f0f0f0",
-      "colorBgContainer": "#ffffff",
-      "rowSelectedHoverBg": "#bae0ff",
-      "headerFilterHoverBg": "rgba(0, 0, 0, 0.06)",
-      "headerColor": "rgba(0, 0, 0, 0.88)",
-      "headerBorderRadius": 8,
-      "footerColor": "rgba(0, 0, 0, 0.88)",
-      "filterDropdownMenuBg": "#ffffff",
-      "filterDropdownBg": "#ffffff",
-      "cellPaddingInlineSM": 8,
-      "cellPaddingInlineMD": 8,
-      "cellPaddingInline": 16,
-      "cellPaddingBlockSM": 8,
-      "cellPaddingBlockMD": 12,
-      "cellPaddingBlock": 16,
-      "borderColor": "#f0f0f0",
-      "rowHoverBg": "#fafafa",
-      "headerSortActiveBg": "rgba(0, 0, 0, 0.06)",
-      "bodySortBg": "#fafafa",
-      "headerSortHoverBg": "rgba(0, 0, 0, 0.06)",
-      "cellFontSize": 12,
-      "cellFontSizeMD": 12,
-      "cellFontSizeSM": 12,
-      "fontFamily": "Inter"
-    },
-    "Steps": {
-      "dotSize": 8,
-      "dotCurrentSize": 10,
-      "descriptionMaxWidth": 140,
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "paddingLG": 24,
-      "padding": 16,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "marginSM": 12,
-      "marginLG": 24,
-      "margin": 16,
-      "lineWidthFocus": 4,
-      "lineWidthBold": 2,
-      "lineWidth": 1,
-      "lineHeightSM": 1.8,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSizeSM": 10,
-      "fontSizeLG": 14,
-      "fontSizeIcon": 12,
-      "fontSizeHeading3": 20,
-      "fontSize": 12,
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlItemBgActive": "#e6f4ff",
-      "controlHeightLG": 40,
-      "borderRadiusSM": 4,
-      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-      "colorTextLightSolid": "#ffffff",
-      "colorTextLabel": "rgba(0, 0, 0, 0.65)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimary": "#1677ff",
-      "colorFillContent": "rgba(0, 0, 0, 0.06)",
-      "colorError": "#ff4d4f",
-      "colorBorderSecondary": "#f0f0f0",
-      "colorBorderBg": "#ffffff",
-      "colorBgContainer": "#ffffff",
-      "titleLineHeight": 32,
-      "iconSizeSM": 20,
-      "iconSize": 32,
-      "finishIconBorderColor": "#1677ff",
-      "customIconFontSize": 24,
-      "iconFontSize": 12,
-      "fontFamily": "Inter"
-    },
-    "Spin": {
-      "dotSizeSM": 14,
-      "dotSize": 20,
-      "contentHeight": 400,
-      "marginXXS": 4,
-      "lineHeight": 1.6666666666666667,
-      "fontSize": 12,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimary": "#1677ff",
-      "colorBgContainer": "#ffffff",
-      "dotSizeLG": 32,
-      "fontFamily": "Inter"
-    },
-    "Slider": {
-      "railSize": 4,
-      "handleSizeHover": 12,
-      "dotSize": 8,
-      "controlSize": 10,
-      "handleSize": 10,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSize": 12,
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusXS": 2,
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryBorderHover": "#69b1ff",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimary": "#1677ff",
-      "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
-      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-      "colorFillContentHover": "rgba(0, 0, 0, 0.15)",
-      "colorBorderSecondary": "#f0f0f0",
-      "colorBgElevated": "#ffffff",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "trackHoverBg": "#69b1ff",
-      "trackBgDisabled": "rgba(0, 0, 0, 0.04)",
-      "trackBg": "#91caff",
-      "railHoverBg": "rgba(0, 0, 0, 0.06)",
-      "railBg": "rgba(0, 0, 0, 0.04)",
-      "handleColor": "#91caff",
-      "handleActiveColor": "#1677ff",
-      "dotBorderColor": "#f0f0f0",
-      "dotActiveBorderColor": "#91caff",
-      "handleColorDisabled": "#bfbfbf",
-      "fontFamily": "Inter"
-    },
-    "Rate": {
-      "rateStarSize": 20,
-      "marginXS": 8,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSize": 12,
-      "controlHeightLG": 40,
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorFillContent": "rgba(0, 0, 0, 0.06)",
-      "fontFamily": "Inter"
-    },
-    "Radio": {
-      "radioSize": 16,
-      "dotSize": 8,
-      "buttonPaddingInline": 15,
-      "paddingXS": 8,
-      "padding": 16,
-      "marginXS": 8,
-      "lineWidthFocus": 4,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlOutlineWidth": 2,
-      "controlOutline": "rgba(5, 145, 255, 0.1)",
-      "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorWhite": "#ffffff",
-      "colorTextLightSolid": "#ffffff",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimaryActive": "#0958d9",
-      "colorPrimary": "#1677ff",
-      "colorBorder": "#d9d9d9",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "wrapperMarginInlineEnd": 8,
-      "dotColorDisabled": "rgba(0, 0, 0, 0.25)",
-      "buttonSolidCheckedHoverBg": "#4096ff",
-      "buttonSolidCheckedColor": "#ffffff",
-      "buttonSolidCheckedBg": "#1677ff",
-      "buttonSolidCheckedActiveBg": "#0958d9",
-      "buttonColor": "rgba(0, 0, 0, 0.88)",
-      "buttonCheckedColorDisabled": "rgba(0, 0, 0, 0.25)",
-      "buttonCheckedBgDisabled": "rgba(0, 0, 0, 0.15)",
-      "buttonCheckedBg": "#ffffff",
-      "buttonBg": "#ffffff",
-      "fontFamily": "Inter"
-    },
-    "Popover": {
-      "titleMinWidth": 177,
-      "sizePopupArrow": 16,
-      "paddingSM": 12,
-      "padding": 16,
-      "marginXS": 8,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSize": 12,
-      "controlHeight": 32,
-      "borderRadiusXS": 2,
-      "borderRadiusLG": 8,
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorBgElevated": "#ffffff",
-      "fontFamily": "Inter"
-    },
-    "Notification": {
-      "width": 384,
-      "paddingMD": 20,
-      "paddingLG": 24,
-      "paddingContentHorizontalLG": 24,
-      "marginXS": 8,
-      "marginSM": 12,
-      "marginLG": 24,
-      "margin": 16,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlHeightLG": 40,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "colorWarning": "#faad14",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSuccess": "#52c41a",
-      "colorInfo": "#1677ff",
-      "colorIconHover": "rgba(0, 0, 0, 0.88)",
-      "colorIcon": "rgba(0, 0, 0, 0.45)",
-      "colorError": "#ff4d4f",
-      "colorBgElevated": "#ffffff",
-      "lineHeightLG": 1.5714285714285714,
-      "lineWidthFocus": 4,
-      "fontFamily": "Inter"
-    },
-    "Tooltip": {
-      "paddingSM": 12,
-      "sizePopupArrow": 16,
-      "paddingXS": 8,
-      "lineHeight": 1.6666666666666667,
-      "fontSize": 12,
-      "controlHeight": 32,
-      "borderRadiusXS": 2,
-      "borderRadius": 6,
-      "colorTextLightSolid": "#ffffff",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorBgSpotlight": "rgba(0, 0, 0, 0.85)",
-      "fontFamily": "Inter"
-    },
-    "Menu": {
-      "subMenuItemBg": "rgba(0, 0, 0, 0)",
-      "darkSubMenuItemBg": "#000c17",
-      "darkItemDisabledColor": "rgba(255, 255, 255, 0.25)",
-      "darkItemColor": "rgba(255, 255, 255, 0.65)",
-      "darkGroupTitleColor": "rgba(255, 255, 255, 0.65)",
-      "darkItemBg": "#001529",
-      "paddingXS": 8,
-      "paddingXL": 32,
-      "padding": 16,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "margin": 16,
-      "lineWidthFocus": 4,
-      "lineWidthBold": 2,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlItemBgActive": "#e6f4ff",
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "borderRadius": 6,
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimary": "#1677ff",
-      "colorFillContent": "rgba(0, 0, 0, 0.06)",
-      "colorErrorHover": "#ff7875",
-      "colorErrorBg": "#fff2f0",
-      "colorError": "#ff4d4f",
-      "colorBgElevated": "#ffffff",
-      "colorBgContainer": "#ffffff",
-      "subMenuItemBorderRadius": 4,
-      "popupBg": "#ffffff",
-      "itemSelectedColor": "#1677ff",
-      "itemSelectedBg": "#e6f4ff",
-      "itemHoverColor": "rgba(0, 0, 0, 0.88)",
-      "itemHoverBg": "rgba(0, 0, 0, 0.06)",
-      "itemHeight": 28,
-      "itemDisabledColor": "rgba(0, 0, 0, 0.25)",
-      "itemColor": "rgba(0, 0, 0, 0.65)",
-      "itemBorderRadius": 8,
-      "itemBg": "#ffffff",
-      "iconSize": 12,
-      "horizontalItemSelectedColor": "#1677ff",
-      "horizontalItemSelectedBg": "rgba(0, 0, 0, 0)",
-      "horizontalItemHoverColor": "#1677ff",
-      "horizontalItemHoverBg": "rgba(0, 0, 0, 0)",
-      "groupTitleColor": "rgba(0, 0, 0, 0.45)",
-      "darkItemSelectedColor": "#ffffff",
-      "darkItemSelectedBg": "#1677ff",
-      "darkItemHoverColor": "#ffffff",
-      "darkItemHoverBg": "rgba(0, 0, 0, 0)",
-      "collapsedIconSize": 14,
-      "darkPopupBg": "#001529",
-      "activeBarBorderWidth": 1,
-      "collapsedWidth": 80,
-      "dropdownWidth": 160,
-      "itemMarginBlock": 4,
-      "itemMarginInline": 4,
-      "iconMarginInlineEnd": 10,
-      "groupTitleFontSize": 12,
-      "groupTitleLineHeight": 1.6666666666666667,
-      "fontFamily": "Inter"
-    },
-    "InputNumber": {
-      "paddingInlineSM": 7,
-      "paddingInlineLG": 11,
-      "paddingInline": 11,
-      "paddingBlockSM": 0,
-      "paddingBlockLG": 7,
-      "paddingBlock": 4,
-      "handleWidth": 22,
-      "controlWidth": 90,
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "lineWidth": 1,
-      "lineHeightLG": 1.5714285714285714,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlPaddingHorizontalSM": 8,
-      "controlPaddingHorizontal": 12,
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorWarningBorderHover": "#ffd666",
-      "colorWarning": "#faad14",
-      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimary": "#1677ff",
-      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-      "colorErrorBorderHover": "#ffa39e",
-      "colorError": "#ff4d4f",
-      "colorBorder": "#d9d9d9",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "hoverBorderColor": "#4096ff",
-      "handleHoverColor": "#1677ff",
-      "handleBorderColor": "#d9d9d9",
-      "handleBg": "#ffffff",
-      "handleActiveBg": "rgba(0, 0, 0, 0.02)",
-      "addonBg": "rgba(0, 0, 0, 0.02)",
-      "activeBorderColor": "#1677ff",
-      "activeBg": "#ffffff",
-      "hoverBg": "#ffffff",
-      "inputFontSize": 12,
-      "inputFontSizeLG": 14,
-      "inputFontSizeSM": 10,
-      "fontFamily": "Inter"
-    },
-    "Image": {
-      "previewOperationSize": 18,
-      "previewOperationHoverColor": "rgba(255, 255, 255, 0.85)",
-      "previewOperationColorDisabled": "rgba(255, 255, 255, 0.25)",
-      "previewOperationColor": "rgba(255, 255, 255, 0.65)",
-      "paddingXXS": 4,
-      "paddingSM": 12,
-      "paddingLG": 24,
-      "marginXXS": 4,
-      "marginXL": 32,
-      "marginSM": 12,
-      "margin": 16,
-      "fontSizeIcon": 12,
-      "controlHeightLG": 40,
-      "colorTextLightSolid": "#ffffff",
-      "colorBgMask": "rgba(0, 0, 0, 0.45)",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)"
-    },
-    "Card": {
-      "headerHeightSM": 38,
-      "headerHeight": 56,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "paddingLG": 24,
-      "padding": 16,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "lineWidth": 1,
-      "lineHeightLG": 1.5714285714285714,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSize": 12,
-      "borderRadiusLG": 8,
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimary": "#1677ff",
-      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-      "colorBorderSecondary": "#f0f0f0",
-      "colorBgContainer": "#ffffff",
-      "headerBg": "rgba(0, 0, 0, 0)",
-      "headerFontSize": 14,
-      "headerFontSizeSM": 12,
-      "fontHeight": 22,
-      "fontSizeLG": 14,
-      "fontFamily": "Inter"
-    },
-    "Carousel": {
-      "dotWidth": 16,
-      "dotHeight": 3,
-      "dotActiveWidth": 24,
-      "marginXXS": 4,
-      "lineHeight": 1.6666666666666667,
-      "fontSize": 12,
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorBgContainer": "#ffffff",
-      "fontFamily": "Inter"
-    },
-    "Cascader": {
-      "dropdownHeight": 180,
-      "controlWidth": 184,
-      "controlItemWidth": 111,
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "marginXS": 8,
-      "lineWidthFocus": 4,
-      "lineWidthBold": 2,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSizeLG": 14,
-      "fontSizeIcon": 12,
-      "fontSize": 12,
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlItemBgActive": "#e6f4ff",
-      "controlInteractiveSize": 16,
-      "controlHeight": 32,
-      "borderRadiusSM": 4,
-      "colorWhite": "#ffffff",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimary": "#1677ff",
-      "colorBorder": "#d9d9d9",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "optionSelectedBg": "#e6f4ff",
-      "menuPadding": 4,
-      "optionSelectedFontWeight": 600,
-      "fontFamily": "Inter"
-    },
-    "Calendar": {
-      "yearControlWidth": 80,
-      "monthControlWidth": 70,
-      "controlHeight": 32,
-      "screenXS": 480,
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "padding": 16,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "lineWidthBold": 2,
-      "lineWidth": 1,
-      "lineHeightSM": 1.8,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSizeSM": 10,
-      "fontSize": 12,
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlItemBgActive": "#e6f4ff",
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "colorTextLightSolid": "#ffffff",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorPrimary": "#1677ff",
-      "colorLinkHover": "#4096ff",
-      "colorLinkActive": "#0958d9",
-      "colorLink": "#1677ff",
-      "colorIconHover": "rgba(0, 0, 0, 0.88)",
-      "colorIcon": "rgba(0, 0, 0, 0.45)",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "itemActiveBg": "#e6f4ff",
-      "fullPanelBg": "#ffffff",
-      "fullBg": "#ffffff",
-      "fontHeightSM": 20,
-      "fontFamily": "Inter"
-    },
-    "Button": {
-      "paddingInlineSM": 7,
-      "paddingInlineLG": 15,
-      "paddingInline": 15,
-      "onlyIconSizeSM": 14,
-      "onlyIconSizeLG": 18,
-      "paddingXS": 8,
-      "paddingContentHorizontal": 16,
-      "marginXS": 8,
-      "lineWidthFocus": 4,
-      "lineWidth": 1,
-      "contentLineHeight": 1.6666666666666667,
-      "contentFontSizeLG": 14,
-      "contentFontSize": 12,
-      "controlOutlineWidth": 2,
-      "controlOutline": "rgba(5, 145, 255, 0.1)",
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorTextLightSolid": "#ffffff",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimaryActive": "#0958d9",
-      "colorPrimary": "#1677ff",
-      "colorLinkHover": "#4096ff",
-      "colorLinkActive": "#0958d9",
-      "colorLink": "#1677ff",
-      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-      "colorErrorHover": "#ff7875",
-      "colorErrorBorderHover": "#ffa39e",
-      "colorErrorBg": "#fff2f0",
-      "colorErrorActive": "#d9363e",
-      "colorError": "#ff4d4f",
-      "colorBorder": "#d9d9d9",
-      "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "textHoverBg": "rgba(0, 0, 0, 0.06)",
-      "primaryColor": "#ffffff",
-      "onlyIconSize": 14,
-      "linkHoverBg": "rgba(0, 0, 0, 0)",
-      "groupBorderColor": "#4096ff",
-      "ghostBg": "rgba(0, 0, 0, 0)",
-      "defaultGhostColor": "#ffffff",
-      "defaultGhostBorderColor": "#ffffff",
-      "defaultColor": "rgba(0, 0, 0, 0.88)",
-      "defaultBorderColor": "#d9d9d9",
-      "defaultBg": "#ffffff",
-      "dangerColor": "#ffffff",
-      "borderColorDisabled": "#d9d9d9",
-      "defaultHoverBg": "#ffffff",
-      "defaultHoverColor": "#4096ff",
-      "defaultHoverBorderColor": "#4096ff",
-      "defaultActiveBg": "#ffffff",
-      "defaultActiveColor": "#0958d9",
-      "defaultActiveBorderColor": "#0958d9",
-      "fontWeight": 400,
-      "contentFontSizeSM": 12,
-      "contentLineHeightLG": 1.5714285714285714,
-      "contentLineHeightSM": 1.6666666666666667
-    },
-    "Badge": {
-      "statusSize": 6,
-      "indicatorHeight": 20,
-      "dotSize": 6,
-      "paddingXS": 8,
-      "marginXS": 8,
-      "lineWidth": 1,
-      "borderRadiusSM": 4,
-      "fontSizeSM": 10,
-      "fontSize": 12,
-      "colorWarning": "#faad14",
-      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-      "colorTextLightSolid": "#ffffff",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSuccess": "#52c41a",
-      "colorPrimary": "#1677ff",
-      "colorErrorHover": "#ff7875",
-      "colorError": "#ff4d4f",
-      "colorBorderBg": "#ffffff",
-      "colorBgContainer": "#ffffff",
-      "indicatorHeightSM": 12,
-      "textFontSize": 10,
-      "textFontSizeSM": 10,
-      "fontHeight": 22,
-      "lineHeight": 1.6666666666666667,
-      "fontFamily": "Inter"
-    },
-    "Form": {
-      "screenXSMax": 575,
-      "screenSMMax": 767,
-      "screenMDMax": 991,
-      "screenLGMax": 1199,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "marginLG": 24,
-      "margin": 16,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlOutlineWidth": 2,
-      "controlOutline": "rgba(5, 145, 255, 0.1)",
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "colorWarning": "#faad14",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSuccess": "#52c41a",
-      "colorPrimary": "#1677ff",
-      "colorError": "#ff4d4f",
-      "colorBorder": "#d9d9d9",
-      "labelRequiredMarkColor": "#ff4d4f",
-      "labelColor": "rgba(0, 0, 0, 0.88)",
-      "itemMarginBottom": 24,
-      "labelColonMarginInlineEnd": 8,
-      "labelColonMarginInlineStart": 2,
-      "labelHeight": 32,
-      "labelFontSize": 12,
-      "fontFamily": "Inter"
-    },
-    "Avatar": {
-      "marginXXS": 4,
-      "marginXS": 8,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeXL": 18,
-      "fontSizeLG": 14,
-      "fontSizeHeading3": 20,
-      "fontSize": 12,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-      "colorTextLightSolid": "#ffffff",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorBorderBg": "#ffffff",
-      "containerSizeSM": 24,
-      "containerSizeLG": 40,
-      "containerSize": 32,
-      "textFontSize": 18,
-      "textFontSizeLG": 20,
-      "textFontSizeSM": 12,
-      "fontFamily": "Inter"
-    },
-    "Tour": {
-      "sizePopupArrow": 16,
-      "paddingXS": 8,
-      "padding": 16,
-      "marginXS": 8,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSize": 12,
-      "borderRadiusXS": 2,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorWhite": "#ffffff",
-      "colorTextLightSolid": "#ffffff",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimary": "#1677ff",
-      "colorIconHover": "rgba(0, 0, 0, 0.88)",
-      "colorIcon": "rgba(0, 0, 0, 0.45)",
-      "colorFill": "rgba(0, 0, 0, 0.15)",
-      "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
-      "colorBgElevated": "#ffffff",
-      "closeBtnSize": 22,
-      "primaryNextBtnHoverBg": "#f0f0f0",
-      "primaryPrevBtnBg": "rgba(255, 255, 255, 0.15)",
-      "fontFamily": "Inter",
-      "lineWidthFocus": 4
-    },
-    "QRCode": {
-      "paddingSM": 12,
-      "marginXS": 8,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSize": 12,
-      "controlHeight": 32,
-      "borderRadiusLG": 8,
-      "colorWhite": "#ffffff",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "fontFamily": "Inter"
-    },
-    "Upload": {
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "padding": 16,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "marginXL": 32,
-      "margin": 16,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSizeHeading3": 20,
-      "fontSizeHeading2": 26,
-      "fontSize": 12,
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlHeightLG": 40,
-      "borderRadiusLG": 8,
-      "colorTextLightSolid": "#ffffff",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimary": "#1677ff",
-      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-      "colorErrorBg": "#fff2f0",
-      "colorError": "#ff4d4f",
-      "colorBorder": "#d9d9d9",
-      "colorBgMask": "rgba(0, 0, 0, 0.45)",
-      "fontHeight": 22,
-      "fontHeightSM": 20,
-      "lineWidthFocus": 4,
-      "fontFamily": "Inter"
-    },
-    "Typography": {
-      "paddingSM": 12,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "lineWidth": 1,
-      "lineHeightHeading5": 1.5714285714285714,
-      "lineHeightHeading4": 1.5,
-      "lineHeightHeading3": 1.4,
-      "lineHeightHeading2": 1.3076923076923077,
-      "lineHeightHeading1": 1.25,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSizeHeading5": 14,
-      "fontSizeHeading4": 16,
-      "fontSizeHeading3": 20,
-      "fontSizeHeading2": 26,
-      "fontSizeHeading1": 32,
-      "fontSize": 12,
-      "colorWarning": "#faad14",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSuccess": "#52c41a",
-      "colorLinkHover": "#4096ff",
-      "colorLinkActive": "#0958d9",
-      "colorLink": "#1677ff",
-      "colorErrorHover": "#ff7875",
-      "colorErrorActive": "#d9363e",
-      "colorError": "#ff4d4f",
-      "fontFamilyCode": "Courier Prime"
-    },
-    "TreeSelect": {
-      "paddingXS": 8,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "lineWidthFocus": 4,
-      "lineWidthBold": 2,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlItemBgActive": "#e6f4ff",
-      "controlInteractiveSize": 16,
-      "controlHeightSM": 24,
-      "borderRadiusSM": 4,
-      "borderRadius": 6,
-      "colorWhite": "#ffffff",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimary": "#1677ff",
-      "colorBorder": "#d9d9d9",
-      "colorBgElevated": "#ffffff",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "titleHeight": 24,
-      "nodeSelectedBg": "#e6f4ff",
-      "nodeHoverBg": "rgba(0, 0, 0, 0.04)",
-      "fontFamily": "Inter"
-    },
-    "Tree": {
-      "paddingSM": 12,
-      "borderRadiusLG": 8,
-      "paddingXS": 8,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "lineWidthFocus": 4,
-      "lineWidthBold": 2,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlItemBgActive": "#e6f4ff",
-      "controlInteractiveSize": 16,
-      "controlHeightSM": 24,
-      "borderRadiusSM": 4,
-      "borderRadius": 6,
-      "colorWhite": "#ffffff",
-      "colorTextLightSolid": "#ffffff",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimary": "#1677ff",
-      "colorBorder": "#d9d9d9",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "titleHeight": 24,
-      "nodeSelectedBg": "#e6f4ff",
-      "nodeHoverBg": "rgba(0, 0, 0, 0.04)",
-      "directoryNodeSelectedColor": "#ffffff",
-      "directoryNodeSelectedBg": "#1677ff",
-      "fontFamily": "Inter"
-    },
-    "Tag": {
-      "paddingXXS": 4,
-      "marginXS": 8,
-      "lineWidth": 1,
-      "lineHeightSM": 1.8,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeSM": 10,
-      "fontSizeIcon": 12,
-      "fontSize": 12,
-      "borderRadiusSM": 4,
-      "colorTextLightSolid": "#ffffff",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimaryActive": "#0958d9",
-      "colorPrimary": "#1677ff",
-      "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
-      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-      "colorFillQuaternary": "rgba(0, 0, 0, 0.02)",
-      "colorBorder": "#d9d9d9",
-      "colorWarningBorder": "#ffe58f",
-      "colorWarningBg": "#fffbe6",
-      "colorSuccessBorder": "#b7eb8f",
-      "colorSuccessBg": "#f6ffed",
-      "colorInfoBorder": "#91caff",
-      "colorInfoBg": "#e6f4ff",
-      "colorErrorBorder": "#ffccc7",
-      "colorErrorBg": "#fff2f0",
-      "defaultColor": "rgba(0, 0, 0, 0.88)",
-      "defaultBg": "rgba(0, 0, 0, 0.02)",
-      "fontFamily": "Inter"
-    },
-    "Statistic": {
-      "padding": 16,
-      "marginXXS": 4,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeHeading3": 20,
-      "fontSize": 12,
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "contentFontSize": 20,
-      "titleFontSize": 12,
-      "fontFamily": "Inter"
-    },
-    "Skeleton": {
-      "padding": 16,
-      "marginXXS": 4,
-      "marginSM": 12,
-      "marginLG": 24,
-      "controlHeightXS": 16,
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusSM": 4,
-      "colorFillContent": "rgba(0, 0, 0, 0.06)",
-      "colorFill": "rgba(0, 0, 0, 0.15)"
-    },
-    "Select": {
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSizeSM": 10,
-      "fontSizeLG": 14,
-      "fontSizeIcon": 12,
-      "fontSize": 12,
-      "controlPaddingHorizontalSM": 8,
-      "controlPaddingHorizontal": 12,
-      "controlOutlineWidth": 2,
-      "controlOutline": "rgba(5, 145, 255, 0.1)",
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlItemBgActive": "#e6f4ff",
-      "controlHeightXS": 16,
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusXS": 2,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
-      "colorWarningHover": "#ffd666",
-      "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
-      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimary": "#1677ff",
-      "colorIconHover": "rgba(0, 0, 0, 0.88)",
-      "colorIcon": "rgba(0, 0, 0, 0.45)",
-      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-      "colorErrorHover": "#ff7875",
-      "colorBorder": "#d9d9d9",
-      "colorBgElevated": "#ffffff",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "singleItemHeightLG": 40,
-      "selectorBg": "#ffffff",
-      "optionSelectedColor": "rgba(0, 0, 0, 0.88)",
-      "optionSelectedBg": "#e6f4ff",
-      "optionLineHeight": null,
-      "optionHeight": 32,
-      "optionActiveBg": "rgba(0, 0, 0, 0.04)",
-      "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
-      "multipleItemHeightLG": 32,
-      "multipleItemHeight": 24,
-      "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
-      "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
-      "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
-      "multipleItemBg": "rgba(0, 0, 0, 0.06)",
-      "clearBg": "#ffffff",
-      "optionFontSize": "Inter",
-      "optionSelectedFontWeight": 600,
-      "fontFamily": "Inter"
-    },
-    "Result": {
-      "paddingXS": 8,
-      "paddingXL": 32,
-      "paddingLG": 24,
-      "padding": 16,
-      "marginXS": 8,
-      "lineHeightHeading3": 1.4,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeHeading3": 20,
-      "fontSize": 12,
-      "colorWarning": "#faad14",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorSuccess": "#52c41a",
-      "colorInfo": "#1677ff",
-      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-      "colorError": "#ff4d4f",
-      "iconFontSize": 72,
-      "subtitleFontSize": 12,
-      "titleFontSize": 20
-    },
-    "Progress": {
-      "paddingXS": 8,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeSM": 10,
-      "fontSize": 12,
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSuccess": "#52c41a",
-      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-      "colorError": "#ff4d4f",
-      "colorBgContainer": "#ffffff",
-      "remainingColor": "rgba(0, 0, 0, 0.06)",
-      "defaultColor": "#1677ff",
-      "circleTextColor": "rgba(0, 0, 0, 0.88)",
-      "fontFamily": "Inter"
-    },
-    "Popconfirm": {
-      "marginXXS": 4,
-      "marginXS": 8,
-      "fontWeightStrong": 600,
-      "fontSize": 12,
-      "colorWarning": "#faad14",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorText": "rgba(0, 0, 0, 0.88)"
-    },
-    "Pagination": {
-      "screenSM": 576,
-      "screenLG": 992,
-      "paddingXXS": 4,
-      "paddingSM": 12,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "marginSM": 12,
-      "margin": 16,
-      "lineWidthFocus": 4,
-      "lineWidth": 1,
-      "lineHeightLG": 1.5714285714285714,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSizeSM": 10,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlPaddingHorizontalSM": 8,
-      "controlPaddingHorizontal": 12,
-      "controlOutlineWidth": 2,
-      "controlOutline": "rgba(5, 145, 255, 0.1)",
-      "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
-      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimary": "#1677ff",
-      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-      "colorBorder": "#d9d9d9",
-      "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
-      "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "itemSizeSM": 24,
-      "itemSize": 32,
-      "itemLinkBg": "#ffffff",
-      "itemInputBg": "#ffffff",
-      "itemBg": "#ffffff",
-      "itemActiveColorDisabled": "rgba(0, 0, 0, 0.25)",
-      "itemActiveBgDisabled": "rgba(0, 0, 0, 0.15)",
-      "itemActiveBg": "#ffffff",
-      "fontFamily": "Inter"
-    },
-    "Modal": {
-      "screenSMMax": 767,
-      "paddingXS": 8,
-      "paddingMD": 20,
-      "paddingLG": 24,
-      "paddingContentHorizontalLG": 24,
-      "padding": 16,
-      "marginXS": 8,
-      "marginSM": 12,
-      "marginLG": 24,
-      "margin": 16,
-      "lineWidthFocus": 4,
-      "lineWidth": 1,
-      "lineHeightHeading5": 1.5714285714285714,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSizeLG": 14,
-      "fontSizeHeading5": 14,
-      "fontSize": 12,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "colorWarning": "#faad14",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSuccess": "#52c41a",
-      "colorPrimaryBorder": "#91caff",
-      "colorIconHover": "rgba(0, 0, 0, 0.88)",
-      "colorIcon": "rgba(0, 0, 0, 0.45)",
-      "colorBgMask": "rgba(0, 0, 0, 0.45)",
-      "titleColor": "rgba(0, 0, 0, 0.88)",
-      "headerBg": "#ffffff",
-      "footerBg": "rgba(0, 0, 0, 0)",
-      "contentBg": "#ffffff",
-      "titleFontSize": 16,
-      "titleLineHeight": 1.25,
-      "fontHeight": 22,
-      "fontFamily": "Inter"
-    },
-    "Message": {
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "marginXS": 8,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlHeightLG": 40,
-      "borderRadiusLG": 8,
-      "colorWarning": "#faad14",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSuccess": "#52c41a",
-      "colorInfo": "#1677ff",
-      "colorError": "#ff4d4f",
-      "contentBg": "#ffffff",
-      "fontFamily": "Inter"
-    },
-    "List": {
-      "screenSM": 576,
-      "screenMD": 768,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "paddingLG": 24,
-      "paddingContentVerticalSM": 8,
-      "paddingContentVerticalLG": 16,
-      "paddingContentVertical": 12,
-      "paddingContentHorizontalLG": 24,
-      "paddingContentHorizontal": 16,
-      "padding": 16,
-      "marginXXS": 4,
-      "marginXXL": 48,
-      "marginSM": 12,
-      "marginLG": 24,
-      "margin": 16,
-      "lineWidth": 1,
-      "lineHeightLG": 1.5714285714285714,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeSM": 10,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusLG": 8,
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorPrimary": "#1677ff",
-      "colorBorder": "#d9d9d9",
-      "headerBg": "rgba(0, 0, 0, 0)",
-      "footerBg": "rgba(0, 0, 0, 0)",
-      "avatarMarginRight": 16,
-      "descriptionFontSize": 12,
-      "fontFamily": "Inter"
-    },
-    "FloatButton": {
-      "paddingXXS": 4,
-      "marginXXL": 48,
-      "marginLG": 24,
-      "margin": 16,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeSM": 10,
-      "fontSizeLG": 14,
-      "fontSizeIcon": 12,
-      "fontSize": 12,
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlHeightLG": 40,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "colorTextLightSolid": "#ffffff",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimary": "#1677ff",
-      "colorFillContent": "rgba(0, 0, 0, 0.06)",
-      "colorBgElevated": "#ffffff",
-      "fontFamily": "Inter"
-    },
-    "Empty": {
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "fontSize": 12,
-      "lineHeight": 1.6666666666666667
-    },
-    "Dropdown": {
-      "sizePopupArrow": 16,
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "lineWidthFocus": 4,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeSM": 10,
-      "fontSizeIcon": 12,
-      "fontSize": 12,
-      "controlPaddingHorizontal": 12,
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlItemBgActiveHover": "#bae0ff",
-      "controlItemBgActive": "#e6f4ff",
-      "controlHeight": 32,
-      "borderRadiusXS": 2,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "colorTextLightSolid": "#ffffff",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimary": "#1677ff",
-      "colorError": "#ff4d4f",
-      "colorBgElevated": "#ffffff",
-      "paddingBlock": 5,
-      "fontFamily": "Inter"
-    },
-    "Drawer": {
-      "paddingXS": 8,
-      "paddingLG": 24,
-      "padding": 16,
-      "marginSM": 12,
-      "lineWidth": 1,
-      "lineHeightLG": 1.5714285714285714,
-      "fontWeightStrong": 600,
-      "fontSizeLG": 14,
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorIconHover": "rgba(0, 0, 0, 0.88)",
-      "colorIcon": "rgba(0, 0, 0, 0.45)",
-      "colorBgMask": "rgba(0, 0, 0, 0.45)",
-      "colorBgElevated": "#ffffff",
-      "lineWidthFocus": 4
-    },
-    "Divider": {
-      "marginXS": 8,
-      "marginLG": 24,
-      "margin": 16,
-      "lineWidth": 1,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "lineHeight": 1.6666666666666667,
-      "fontFamily": "Inter"
-    },
-    "Descriptions": {
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "paddingLG": 24,
-      "padding": 16,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "lineWidth": 1,
-      "lineHeightSM": 1.8,
-      "lineHeightLG": 1.5714285714285714,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSizeSM": 10,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "borderRadiusLG": 8,
-      "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
-      "colorTextSecondary": "rgba(0, 0, 0, 0.65)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-      "titleColor": "rgba(0, 0, 0, 0.88)",
-      "labelBg": "rgba(0, 0, 0, 0.02)",
-      "contentColor": "rgba(0, 0, 0, 0.88)",
-      "fontFamily": "Inter"
-    },
-    "DatePicker": {
-      "sizePopupArrow": 16,
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "padding": 16,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "lineWidthBold": 2,
-      "lineWidth": 1,
-      "lineHeightLG": 1.5714285714285714,
-      "lineHeight": 1.6666666666666667,
-      "fontWeightStrong": 600,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlPaddingHorizontalSM": 8,
-      "controlPaddingHorizontal": 12,
-      "controlOutlineWidth": 2,
-      "controlOutline": "rgba(5, 145, 255, 0.1)",
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlItemBgActive": "#e6f4ff",
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusXS": 2,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
-      "colorWarningHover": "#ffd666",
-      "colorWarning": "#faad14",
-      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-      "colorTextLightSolid": "#ffffff",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimary": "#1677ff",
-      "colorLinkHover": "#4096ff",
-      "colorLinkActive": "#0958d9",
-      "colorLink": "#1677ff",
-      "colorIconHover": "rgba(0, 0, 0, 0.88)",
-      "colorIcon": "rgba(0, 0, 0, 0.45)",
-      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-      "colorErrorHover": "#ff7875",
-      "colorError": "#ff4d4f",
-      "colorBorder": "#d9d9d9",
-      "colorBgElevated": "#ffffff",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "hoverBorderColor": "#4096ff",
-      "cellHoverBg": "rgba(0, 0, 0, 0.04)",
-      "cellHeight": 24,
-      "activeBorderColor": "#1677ff",
-      "paddingInline": 11,
-      "paddingInlineSM": 7,
-      "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
-      "colorErrorBg": "#fff2f0",
-      "colorWarningBg": "#fffbe6",
-      "colorWarningText": "#faad14",
-      "colorErrorText": "#ff4d4f",
-      "colorWarningBgHover": "#fff1b8",
-      "colorErrorBgHover": "#fff1f0",
-      "activeBg": "#ffffff",
-      "hoverBg": "#ffffff",
-      "cellBgDisabled": "rgba(0, 0, 0, 0.04)",
-      "cellActiveWithRangeBg": "#e6f4ff",
-      "cellHoverWithRangeBg": "#c8dfff",
-      "cellRangeBorderColor": "#7cb3ff",
-      "multipleItemBg": "rgba(0, 0, 0, 0.06)",
-      "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
-      "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
-      "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
-      "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
-      "cellWidth": 36,
-      "multipleItemHeight": 24,
-      "multipleItemHeightLG": 32,
-      "multipleItemHeightSM": 16,
-      "paddingBlock": 4,
-      "paddingBlockLG": 7,
-      "paddingBlockSM": 0,
-      "paddingInline 2": 11,
-      "presetsMaxWidth": 200,
-      "presetsWidth": 120,
-      "textHeight": 40,
-      "timeCellHeight": 28,
-      "timeColumnHeight": 224,
-      "timeColumnWidth": 56,
-      "withoutTimeCellHeight": 66,
-      "inputFontSize": 12,
-      "inputFontSizeLG": 14,
-      "inputFontSizeSM": 10,
-      "fontHeight": 22,
-      "fontHeightLG": 24,
-      "fontFamily": "Inter"
-    },
-    "Collapse": {
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "paddingLG": 24,
-      "padding": 16,
-      "marginSM": 12,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSizeIcon": 12,
-      "fontSize": 12,
-      "borderRadiusLG": 8,
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-      "colorBorder": "#d9d9d9",
-      "colorBgContainer": "#ffffff",
-      "headerBg": "rgba(0, 0, 0, 0.02)",
-      "contentBg": "#ffffff",
-      "fontHeight": 22,
-      "fontHeightLG": 24,
-      "lineHeightLG": 1.5714285714285714,
-      "fontFamily": "Inter"
-    },
-    "Checkbox": {
-      "paddingXS": 8,
-      "marginXS": 8,
-      "lineWidthFocus": 4,
-      "lineWidthBold": 2,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "controlInteractiveSize": 16,
-      "borderRadiusSM": 4,
-      "colorWhite": "#ffffff",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimaryBorder": "#91caff",
-      "colorPrimary": "#1677ff",
-      "colorBorder": "#d9d9d9",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "fontFamily": "Inter"
-    },
-    "Breadcrumb": {
-      "paddingXXS": 4,
-      "marginXXS": 4,
-      "marginXS": 8,
-      "lineWidthFocus": 4,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeIcon": 12,
-      "fontSize": 12,
-      "borderRadiusSM": 4,
-      "colorPrimaryBorder": "#91caff",
-      "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
-      "separatorColor": "rgba(0, 0, 0, 0.45)",
-      "linkHoverColor": "rgba(0, 0, 0, 0.88)",
-      "linkColor": "rgba(0, 0, 0, 0.45)",
-      "lastItemColor": "rgba(0, 0, 0, 0.88)",
-      "itemColor": "rgba(0, 0, 0, 0.45)",
-      "separatorMargin": 8,
-      "iconFontSize": 12,
-      "fontHeight": 22,
-      "fontFamily": "Inter"
-    },
-    "Anchor": {
-      "paddingXXS": 4,
-      "lineWidthBold": 2,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSize": 12,
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSplit": "rgba(0, 0, 0, 0.06)",
-      "colorPrimary": "#1677ff",
-      "linkPaddingInlineStart": 16,
-      "linkPaddingBlock": 4,
-      "fontFamily": "Inter"
-    },
-    "Alert": {
-      "paddingMD": 20,
-      "paddingContentVerticalSM": 8,
-      "paddingContentHorizontalLG": 24,
-      "marginXS": 8,
-      "marginSM": 12,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "fontSizeLG": 14,
-      "fontSizeIcon": 12,
-      "fontSizeHeading3": 20,
-      "fontSize": 12,
-      "borderRadiusLG": 8,
-      "colorWarningBorder": "#ffe58f",
-      "colorWarningBg": "#fffbe6",
-      "colorWarning": "#faad14",
-      "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorSuccessBorder": "#b7eb8f",
-      "colorSuccessBg": "#f6ffed",
-      "colorSuccess": "#52c41a",
-      "colorInfoBorder": "#91caff",
-      "colorInfoBg": "#e6f4ff",
-      "colorInfo": "#1677ff",
-      "colorIconHover": "rgba(0, 0, 0, 0.88)",
-      "colorIcon": "rgba(0, 0, 0, 0.45)",
-      "colorErrorBorder": "#ffccc7",
-      "colorErrorBg": "#fff2f0",
-      "colorError": "#ff4d4f",
-      "withDescriptionIconSize": 20,
-      "fontFamily": "Inter"
-    },
-    "Space": {
-      "paddingXS": 8,
-      "paddingLG": 24,
-      "padding": 16
-    },
-    "AutoComplete": {
-      "paddingXXS": 4,
-      "paddingXS": 8,
-      "paddingSM": 12,
-      "lineWidth": 1,
-      "lineHeight": 1.6666666666666667,
-      "controlPaddingHorizontalSM": 8,
-      "controlPaddingHorizontal": 12,
-      "controlOutlineWidth": 2,
-      "controlOutline": "rgba(5, 145, 255, 0.1)",
-      "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-      "controlItemBgActive": "#e6f4ff",
-      "controlHeightXS": 16,
-      "controlHeightSM": 24,
-      "controlHeightLG": 40,
-      "controlHeight": 32,
-      "borderRadiusXS": 2,
-      "borderRadiusSM": 4,
-      "borderRadiusLG": 8,
-      "borderRadius": 6,
-      "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
-      "colorWarningHover": "#ffd666",
-      "colorWarning": "#faad14",
-      "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
-      "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-      "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-      "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-      "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "colorPrimaryHover": "#4096ff",
-      "colorPrimary": "#1677ff",
-      "colorIconHover": "rgba(0, 0, 0, 0.88)",
-      "colorIcon": "rgba(0, 0, 0, 0.45)",
-      "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-      "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-      "colorErrorHover": "#ff7875",
-      "colorError": "#ff4d4f",
-      "colorBorder": "#d9d9d9",
-      "colorBgElevated": "#ffffff",
-      "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-      "colorBgContainer": "#ffffff",
-      "optionActiveBg": "rgba(0, 0, 0, 0.04)",
-      "optionHeight": 32,
-      "optionFontSize": 12,
-      "fontFamily": "Inter",
-      "fontSize": 12,
-      "fontSizeIcon": 12,
-      "fontSizeLG": 14,
-      "fontSizeSM": 10
-    },
-    "Layout": {
-      "bodyBg": "#f5f5f5",
-      "footerBg": "#f5f5f5",
-      "headerBg": "#001529",
-      "headerColor": "rgba(0, 0, 0, 0.88)",
-      "lightSiderBg": "#ffffff",
-      "lightTriggerBg": "#ffffff",
-      "lightTriggerColor": "rgba(0, 0, 0, 0.88)",
-      "siderBg": "#001529",
-      "triggerBg": "#002140",
-      "triggerColor": "#ffffff",
-      "colorText": "rgba(0, 0, 0, 0.88)",
-      "headerHeight": 64,
-      "triggerHeight": 48,
-      "zeroTriggerHeight": 40,
-      "zeroTriggerWidth": 40,
-      "borderRadius": 6,
-      "fontSize": 12,
-      "fontSizeXL": 18
-    },
-    "Mentions": {
-      "fontFamily": "Inter",
-      "fontSize": 12,
-      "lineHeight": 1.6666666666666667
+    "components": {
+        "Input": {
+            "paddingInlineSM": 7,
+            "paddingInlineLG": 11,
+            "paddingInline": 11,
+            "paddingBlockSM": 0,
+            "paddingBlockLG": 7,
+            "paddingBlock": 4,
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "paddingLG": 24,
+            "lineWidth": 1,
+            "lineHeightLG": 1.5714285714285714,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSizeIcon": 12,
+            "fontSize": 12,
+            "controlPaddingHorizontalSM": 8,
+            "controlPaddingHorizontal": 12,
+            "controlOutlineWidth": 2,
+            "controlOutline": "rgba(5, 145, 255, 0.1)",
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+            "colorWarningBorderHover": "#ffd666",
+            "colorWarning": "#faad14",
+            "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimary": "#1677ff",
+            "colorIconHover": "rgba(0, 0, 0, 0.88)",
+            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+            "colorErrorBorderHover": "#ffa39e",
+            "colorError": "#ff4d4f",
+            "colorBorder": "#d9d9d9",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "hoverBorderColor": "#4096ff",
+            "addonBg": "rgba(0, 0, 0, 0.02)",
+            "activeBorderColor": "#1677ff",
+            "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
+            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+            "colorErrorBgHover": "#fff1f0",
+            "colorErrorBg": "#fff2f0",
+            "colorWarningBg": "#fffbe6",
+            "colorWarningBgHover": "#fff1b8",
+            "colorWarningText": "#faad14",
+            "colorErrorText": "#ff4d4f",
+            "activeBg": "#ffffff",
+            "hoverBg": "#ffffff",
+            "inputFontSize": 12,
+            "inputFontSizeLG": 14,
+            "inputFontSizeSM": 10,
+            "fontFamily": "Inter"
+        },
+        "Transfer": {
+            "listWidthLG": 250,
+            "listWidth": 180,
+            "listHeight": 200,
+            "itemPaddingBlock": 5,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "margin": 16,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeIcon": 12,
+            "fontSize": 12,
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgActiveHover": "#bae0ff",
+            "controlItemBgActive": "#e6f4ff",
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusLG": 8,
+            "colorWarning": "#faad14",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorLinkHover": "#4096ff",
+            "colorError": "#ff4d4f",
+            "colorBorder": "#d9d9d9",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "itemHeight": 32,
+            "headerHeight": 40,
+            "fontFamily": "Inter"
+        },
+        "Segmented": {
+            "segmentedBgColorSelected": "#ffffff",
+            "paddingXXS": 4,
+            "marginSM": 12,
+            "lineWidthBold": 2,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlPaddingHorizontalSM": 8,
+            "controlPaddingHorizontal": 12,
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusXS": 2,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorTextLabel": "rgba(0, 0, 0, 0.65)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+            "colorFill": "rgba(0, 0, 0, 0.15)",
+            "colorBgLayout": "#f5f5f5",
+            "colorBgElevated": "#ffffff",
+            "segmentedGroupBg": "rgba(0, 0, 0, 0.04)",
+            "itemSelectedColor": "rgba(0, 0, 0, 0.88)",
+            "itemSelectedBg": "#ffffff",
+            "itemHoverColor": "rgba(0, 0, 0, 0.88)",
+            "itemHoverBg": "rgba(0, 0, 0, 0.06)",
+            "itemColor": "rgba(0, 0, 0, 0.65)",
+            "itemActiveBg": "rgba(0, 0, 0, 0.15)",
+            "trackPadding": 2,
+            "trackBg": "#f5f5f5",
+            "fontFamily": "Inter"
+        },
+        "Switch": {
+            "trackPadding": 2,
+            "trackMinWidthSM": 28,
+            "trackMinWidth": 44,
+            "trackHeightSM": 16,
+            "trackHeight": 22,
+            "handleSizeSM": 12,
+            "handleSize": 18,
+            "marginXXS": 4,
+            "lineWidthFocus": 4,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeSM": 10,
+            "fontSizeIcon": 12,
+            "fontSize": 12,
+            "controlHeight": 32,
+            "colorWhite": "#ffffff",
+            "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+            "colorTextLightSolid": "#ffffff",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimary": "#1677ff",
+            "handleBg": "#ffffff",
+            "fontFamily": "Inter"
+        },
+        "TimePicker": {
+            "timeColumnWidth": 56,
+            "timeColumnHeight": 224,
+            "timeCellHeight": 28,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "sizePopupArrow": 16,
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "padding": 16,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "lineWidthBold": 2,
+            "lineWidth": 1,
+            "lineHeightLG": 1.5714285714285714,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlPaddingHorizontalSM": 8,
+            "controlPaddingHorizontal": 12,
+            "controlOutlineWidth": 2,
+            "controlOutline": "rgba(5, 145, 255, 0.1)",
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgActive": "#e6f4ff",
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusXS": 2,
+            "borderRadius": 6,
+            "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+            "colorWarning": "#faad14",
+            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextLightSolid": "#ffffff",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimary": "#1677ff",
+            "colorLinkHover": "#4096ff",
+            "colorLinkActive": "#0958d9",
+            "colorLink": "#1677ff",
+            "colorIconHover": "rgba(0, 0, 0, 0.88)",
+            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+            "colorError": "#ff4d4f",
+            "colorBorder": "#d9d9d9",
+            "colorBgElevated": "#ffffff",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "hoverBorderColor": "#4096ff",
+            "cellHoverBg": "rgba(0, 0, 0, 0.04)",
+            "cellHeight": 24,
+            "activeBorderColor": "#1677ff",
+            "paddingInline": 11,
+            "paddingInlineLG": 11,
+            "paddingInlineSM": 7,
+            "activeBg": "#ffffff",
+            "hoverBg": "#ffffff",
+            "cellBgDisabled": "rgba(0, 0, 0, 0.04)",
+            "cellActiveWithRangeBg": "#e6f4ff",
+            "cellHoverWithRangeBg": "#c8dfff",
+            "cellRangeBorderColor": "#7cb3ff",
+            "multipleItemBg": "rgba(0, 0, 0, 0.06)",
+            "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
+            "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
+            "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
+            "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
+            "cellWidth": 36,
+            "multipleItemHeight": 24,
+            "multipleItemHeightLG": 32,
+            "multipleItemHeightSM": 16,
+            "paddingBlock": 4,
+            "paddingBlockLG": 7,
+            "paddingBlockSM": 0,
+            "presetsMaxWidth": 200,
+            "presetsWidth": 120,
+            "textHeight": 40,
+            "withoutTimeCellHeight": 66,
+            "inputFontSize": 12,
+            "inputFontSizeLG": 14,
+            "inputFontSizeSM": 10,
+            "fontFamily": "Inter"
+        },
+        "Timeline": {
+            "itemPaddingBottom": 20,
+            "paddingXXS": 4,
+            "padding": 16,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "marginSM": 12,
+            "margin": 16,
+            "lineWidthBold": 2,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeSM": 10,
+            "fontSize": 12,
+            "controlHeightLG": 40,
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSuccess": "#52c41a",
+            "colorPrimary": "#1677ff",
+            "colorError": "#ff4d4f",
+            "colorBgContainer": "#ffffff",
+            "tailColor": "rgba(0, 0, 0, 0.06)",
+            "dotBg": "#ffffff",
+            "fontFamily": "Inter"
+        },
+        "Tabs": {
+            "horizontalItemGutter": 32,
+            "cardGutter": 2,
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "paddingLG": 24,
+            "padding": 16,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "marginSM": 12,
+            "margin": 16,
+            "lineWidthFocus": 4,
+            "lineWidthBold": 2,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeSM": 10,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimaryActive": "#0958d9",
+            "colorPrimary": "#1677ff",
+            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorBorderSecondary": "#f0f0f0",
+            "colorBorder": "#d9d9d9",
+            "colorBgContainer": "#ffffff",
+            "itemSelectedColor": "#1677ff",
+            "itemHoverColor": "#4096ff",
+            "itemColor": "rgba(0, 0, 0, 0.88)",
+            "itemActiveColor": "#0958d9",
+            "inkBarColor": "#1677ff",
+            "cardHeight": 40,
+            "cardBg": "rgba(0, 0, 0, 0.02)",
+            "titleFontSize": 12,
+            "titleFontSizeLG": 14,
+            "titleFontSizeSM": 12,
+            "fontFamily": "Inter"
+        },
+        "Table": {
+            "stickyScrollBarBorderRadius": 100,
+            "headerSplitColor": "#f0f0f0",
+            "headerBg": "rgba(0, 0, 0, 0.02)",
+            "footerBg": "rgba(0, 0, 0, 0.02)",
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "padding": 16,
+            "marginXXS": 4,
+            "margin": 16,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSizeSM": 10,
+            "fontSizeIcon": 12,
+            "fontSize": 12,
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgActiveHover": "#bae0ff",
+            "controlItemBgActive": "#e6f4ff",
+            "controlInteractiveSize": 16,
+            "controlHeight": 32,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorPrimary": "#1677ff",
+            "colorLinkHover": "#4096ff",
+            "colorLinkActive": "#0958d9",
+            "colorLink": "#1677ff",
+            "colorIconHover": "rgba(0, 0, 0, 0.88)",
+            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+            "colorFillContent": "rgba(0, 0, 0, 0.06)",
+            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorBorderSecondary": "#f0f0f0",
+            "colorBgContainer": "#ffffff",
+            "rowSelectedHoverBg": "#bae0ff",
+            "headerFilterHoverBg": "rgba(0, 0, 0, 0.06)",
+            "headerColor": "rgba(0, 0, 0, 0.88)",
+            "headerBorderRadius": 8,
+            "footerColor": "rgba(0, 0, 0, 0.88)",
+            "filterDropdownMenuBg": "#ffffff",
+            "filterDropdownBg": "#ffffff",
+            "cellPaddingInlineSM": 8,
+            "cellPaddingInlineMD": 8,
+            "cellPaddingInline": 16,
+            "cellPaddingBlockSM": 8,
+            "cellPaddingBlockMD": 12,
+            "cellPaddingBlock": 16,
+            "borderColor": "#f0f0f0",
+            "rowHoverBg": "#fafafa",
+            "headerSortActiveBg": "rgba(0, 0, 0, 0.06)",
+            "bodySortBg": "#fafafa",
+            "headerSortHoverBg": "rgba(0, 0, 0, 0.06)",
+            "cellFontSize": 12,
+            "cellFontSizeMD": 12,
+            "cellFontSizeSM": 12,
+            "fontFamily": "Inter"
+        },
+        "Steps": {
+            "dotSize": 8,
+            "dotCurrentSize": 10,
+            "descriptionMaxWidth": 140,
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "paddingLG": 24,
+            "padding": 16,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "marginSM": 12,
+            "marginLG": 24,
+            "margin": 16,
+            "lineWidthFocus": 4,
+            "lineWidthBold": 2,
+            "lineWidth": 1,
+            "lineHeightSM": 1.8,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSizeSM": 10,
+            "fontSizeLG": 14,
+            "fontSizeIcon": 12,
+            "fontSizeHeading3": 20,
+            "fontSize": 12,
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgActive": "#e6f4ff",
+            "controlHeightLG": 40,
+            "borderRadiusSM": 4,
+            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+            "colorTextLightSolid": "#ffffff",
+            "colorTextLabel": "rgba(0, 0, 0, 0.65)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimary": "#1677ff",
+            "colorFillContent": "rgba(0, 0, 0, 0.06)",
+            "colorError": "#ff4d4f",
+            "colorBorderSecondary": "#f0f0f0",
+            "colorBorderBg": "#ffffff",
+            "colorBgContainer": "#ffffff",
+            "titleLineHeight": 32,
+            "iconSizeSM": 20,
+            "iconSize": 32,
+            "finishIconBorderColor": "#1677ff",
+            "customIconFontSize": 24,
+            "iconFontSize": 12,
+            "fontFamily": "Inter"
+        },
+        "Spin": {
+            "dotSizeSM": 14,
+            "dotSize": 20,
+            "contentHeight": 400,
+            "marginXXS": 4,
+            "lineHeight": 1.6666666666666667,
+            "fontSize": 12,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimary": "#1677ff",
+            "colorBgContainer": "#ffffff",
+            "dotSizeLG": 32,
+            "fontFamily": "Inter"
+        },
+        "Slider": {
+            "railSize": 4,
+            "handleSizeHover": 12,
+            "dotSize": 8,
+            "controlSize": 10,
+            "handleSize": 10,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSize": 12,
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusXS": 2,
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryBorderHover": "#69b1ff",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimary": "#1677ff",
+            "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
+            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+            "colorFillContentHover": "rgba(0, 0, 0, 0.15)",
+            "colorBorderSecondary": "#f0f0f0",
+            "colorBgElevated": "#ffffff",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "trackHoverBg": "#69b1ff",
+            "trackBgDisabled": "rgba(0, 0, 0, 0.04)",
+            "trackBg": "#91caff",
+            "railHoverBg": "rgba(0, 0, 0, 0.06)",
+            "railBg": "rgba(0, 0, 0, 0.04)",
+            "handleColor": "#91caff",
+            "handleActiveColor": "#1677ff",
+            "dotBorderColor": "#f0f0f0",
+            "dotActiveBorderColor": "#91caff",
+            "handleColorDisabled": "#bfbfbf",
+            "fontFamily": "Inter"
+        },
+        "Rate": {
+            "rateStarSize": 20,
+            "marginXS": 8,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSize": 12,
+            "controlHeightLG": 40,
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorFillContent": "rgba(0, 0, 0, 0.06)",
+            "fontFamily": "Inter"
+        },
+        "Radio": {
+            "radioSize": 16,
+            "dotSize": 8,
+            "buttonPaddingInline": 15,
+            "paddingXS": 8,
+            "padding": 16,
+            "marginXS": 8,
+            "lineWidthFocus": 4,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlOutlineWidth": 2,
+            "controlOutline": "rgba(5, 145, 255, 0.1)",
+            "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorWhite": "#ffffff",
+            "colorTextLightSolid": "#ffffff",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimaryActive": "#0958d9",
+            "colorPrimary": "#1677ff",
+            "colorBorder": "#d9d9d9",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "wrapperMarginInlineEnd": 8,
+            "dotColorDisabled": "rgba(0, 0, 0, 0.25)",
+            "buttonSolidCheckedHoverBg": "#4096ff",
+            "buttonSolidCheckedColor": "#ffffff",
+            "buttonSolidCheckedBg": "#1677ff",
+            "buttonSolidCheckedActiveBg": "#0958d9",
+            "buttonColor": "rgba(0, 0, 0, 0.88)",
+            "buttonCheckedColorDisabled": "rgba(0, 0, 0, 0.25)",
+            "buttonCheckedBgDisabled": "rgba(0, 0, 0, 0.15)",
+            "buttonCheckedBg": "#ffffff",
+            "buttonBg": "#ffffff",
+            "fontFamily": "Inter"
+        },
+        "Popover": {
+            "titleMinWidth": 177,
+            "sizePopupArrow": 16,
+            "paddingSM": 12,
+            "padding": 16,
+            "marginXS": 8,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSize": 12,
+            "controlHeight": 32,
+            "borderRadiusXS": 2,
+            "borderRadiusLG": 8,
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorBgElevated": "#ffffff",
+            "fontFamily": "Inter"
+        },
+        "Notification": {
+            "width": 384,
+            "paddingMD": 20,
+            "paddingLG": 24,
+            "paddingContentHorizontalLG": 24,
+            "marginXS": 8,
+            "marginSM": 12,
+            "marginLG": 24,
+            "margin": 16,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlHeightLG": 40,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "colorWarning": "#faad14",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSuccess": "#52c41a",
+            "colorInfo": "#1677ff",
+            "colorIconHover": "rgba(0, 0, 0, 0.88)",
+            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorError": "#ff4d4f",
+            "colorBgElevated": "#ffffff",
+            "lineHeightLG": 1.5714285714285714,
+            "lineWidthFocus": 4,
+            "fontFamily": "Inter"
+        },
+        "Tooltip": {
+            "paddingSM": 12,
+            "sizePopupArrow": 16,
+            "paddingXS": 8,
+            "lineHeight": 1.6666666666666667,
+            "fontSize": 12,
+            "controlHeight": 32,
+            "borderRadiusXS": 2,
+            "borderRadius": 6,
+            "colorTextLightSolid": "#ffffff",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorBgSpotlight": "rgba(0, 0, 0, 0.85)",
+            "fontFamily": "Inter"
+        },
+        "Menu": {
+            "subMenuItemBg": "rgba(0, 0, 0, 0)",
+            "darkSubMenuItemBg": "#000c17",
+            "darkItemDisabledColor": "rgba(255, 255, 255, 0.25)",
+            "darkItemColor": "rgba(255, 255, 255, 0.65)",
+            "darkGroupTitleColor": "rgba(255, 255, 255, 0.65)",
+            "darkItemBg": "#001529",
+            "paddingXS": 8,
+            "paddingXL": 32,
+            "padding": 16,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "margin": 16,
+            "lineWidthFocus": 4,
+            "lineWidthBold": 2,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlItemBgActive": "#e6f4ff",
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "borderRadius": 6,
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimary": "#1677ff",
+            "colorFillContent": "rgba(0, 0, 0, 0.06)",
+            "colorErrorHover": "#ff7875",
+            "colorErrorBg": "#fff2f0",
+            "colorError": "#ff4d4f",
+            "colorBgElevated": "#ffffff",
+            "colorBgContainer": "#ffffff",
+            "subMenuItemBorderRadius": 4,
+            "popupBg": "#ffffff",
+            "itemSelectedColor": "#1677ff",
+            "itemSelectedBg": "#e6f4ff",
+            "itemHoverColor": "rgba(0, 0, 0, 0.88)",
+            "itemHoverBg": "rgba(0, 0, 0, 0.06)",
+            "itemHeight": 28,
+            "itemDisabledColor": "rgba(0, 0, 0, 0.25)",
+            "itemColor": "rgba(0, 0, 0, 0.65)",
+            "itemBorderRadius": 8,
+            "itemBg": "#ffffff",
+            "iconSize": 12,
+            "horizontalItemSelectedColor": "#1677ff",
+            "horizontalItemSelectedBg": "rgba(0, 0, 0, 0)",
+            "horizontalItemHoverColor": "#1677ff",
+            "horizontalItemHoverBg": "rgba(0, 0, 0, 0)",
+            "groupTitleColor": "rgba(0, 0, 0, 0.45)",
+            "darkItemSelectedColor": "#ffffff",
+            "darkItemSelectedBg": "#1677ff",
+            "darkItemHoverColor": "#ffffff",
+            "darkItemHoverBg": "rgba(0, 0, 0, 0)",
+            "collapsedIconSize": 14,
+            "darkPopupBg": "#001529",
+            "activeBarBorderWidth": 1,
+            "collapsedWidth": 80,
+            "dropdownWidth": 160,
+            "itemMarginBlock": 4,
+            "itemMarginInline": 4,
+            "iconMarginInlineEnd": 10,
+            "groupTitleFontSize": 12,
+            "groupTitleLineHeight": 1.6666666666666667,
+            "fontFamily": "Inter"
+        },
+        "InputNumber": {
+            "paddingInlineSM": 7,
+            "paddingInlineLG": 11,
+            "paddingInline": 11,
+            "paddingBlockSM": 0,
+            "paddingBlockLG": 7,
+            "paddingBlock": 4,
+            "handleWidth": 22,
+            "controlWidth": 90,
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "lineWidth": 1,
+            "lineHeightLG": 1.5714285714285714,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlPaddingHorizontalSM": 8,
+            "controlPaddingHorizontal": 12,
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorWarningBorderHover": "#ffd666",
+            "colorWarning": "#faad14",
+            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimary": "#1677ff",
+            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorErrorBorderHover": "#ffa39e",
+            "colorError": "#ff4d4f",
+            "colorBorder": "#d9d9d9",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "hoverBorderColor": "#4096ff",
+            "handleHoverColor": "#1677ff",
+            "handleBorderColor": "#d9d9d9",
+            "handleBg": "#ffffff",
+            "handleActiveBg": "rgba(0, 0, 0, 0.02)",
+            "addonBg": "rgba(0, 0, 0, 0.02)",
+            "activeBorderColor": "#1677ff",
+            "activeBg": "#ffffff",
+            "hoverBg": "#ffffff",
+            "inputFontSize": 12,
+            "inputFontSizeLG": 14,
+            "inputFontSizeSM": 10,
+            "fontFamily": "Inter"
+        },
+        "Image": {
+            "previewOperationSize": 18,
+            "previewOperationHoverColor": "rgba(255, 255, 255, 0.85)",
+            "previewOperationColorDisabled": "rgba(255, 255, 255, 0.25)",
+            "previewOperationColor": "rgba(255, 255, 255, 0.65)",
+            "paddingXXS": 4,
+            "paddingSM": 12,
+            "paddingLG": 24,
+            "marginXXS": 4,
+            "marginXL": 32,
+            "marginSM": 12,
+            "margin": 16,
+            "fontSizeIcon": 12,
+            "controlHeightLG": 40,
+            "colorTextLightSolid": "#ffffff",
+            "colorBgMask": "rgba(0, 0, 0, 0.45)",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)"
+        },
+        "Card": {
+            "headerHeightSM": 38,
+            "headerHeight": 56,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "paddingLG": 24,
+            "padding": 16,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "lineWidth": 1,
+            "lineHeightLG": 1.5714285714285714,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSize": 12,
+            "borderRadiusLG": 8,
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimary": "#1677ff",
+            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorBorderSecondary": "#f0f0f0",
+            "colorBgContainer": "#ffffff",
+            "headerBg": "rgba(0, 0, 0, 0)",
+            "headerFontSize": 14,
+            "headerFontSizeSM": 12,
+            "fontHeight": 22,
+            "fontSizeLG": 14,
+            "fontFamily": "Inter"
+        },
+        "Carousel": {
+            "dotWidth": 16,
+            "dotHeight": 3,
+            "dotActiveWidth": 24,
+            "marginXXS": 4,
+            "lineHeight": 1.6666666666666667,
+            "fontSize": 12,
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorBgContainer": "#ffffff",
+            "fontFamily": "Inter"
+        },
+        "Cascader": {
+            "dropdownHeight": 180,
+            "controlWidth": 184,
+            "controlItemWidth": 111,
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "marginXS": 8,
+            "lineWidthFocus": 4,
+            "lineWidthBold": 2,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSizeLG": 14,
+            "fontSizeIcon": 12,
+            "fontSize": 12,
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgActive": "#e6f4ff",
+            "controlInteractiveSize": 16,
+            "controlHeight": 32,
+            "borderRadiusSM": 4,
+            "colorWhite": "#ffffff",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimary": "#1677ff",
+            "colorBorder": "#d9d9d9",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "optionSelectedBg": "#e6f4ff",
+            "menuPadding": 4,
+            "optionSelectedFontWeight": 600,
+            "fontFamily": "Inter"
+        },
+        "Calendar": {
+            "yearControlWidth": 80,
+            "monthControlWidth": 70,
+            "controlHeight": 32,
+            "screenXS": 480,
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "padding": 16,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "lineWidthBold": 2,
+            "lineWidth": 1,
+            "lineHeightSM": 1.8,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSizeSM": 10,
+            "fontSize": 12,
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgActive": "#e6f4ff",
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "colorTextLightSolid": "#ffffff",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorPrimary": "#1677ff",
+            "colorLinkHover": "#4096ff",
+            "colorLinkActive": "#0958d9",
+            "colorLink": "#1677ff",
+            "colorIconHover": "rgba(0, 0, 0, 0.88)",
+            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "itemActiveBg": "#e6f4ff",
+            "fullPanelBg": "#ffffff",
+            "fullBg": "#ffffff",
+            "fontHeightSM": 20,
+            "fontFamily": "Inter"
+        },
+        "Button": {
+            "paddingInlineSM": 7,
+            "paddingInlineLG": 15,
+            "paddingInline": 15,
+            "onlyIconSizeSM": 14,
+            "onlyIconSizeLG": 18,
+            "paddingXS": 8,
+            "paddingContentHorizontal": 16,
+            "marginXS": 8,
+            "lineWidthFocus": 4,
+            "lineWidth": 1,
+            "contentLineHeight": 1.6666666666666667,
+            "contentFontSizeLG": 14,
+            "contentFontSize": 12,
+            "controlOutlineWidth": 2,
+            "controlOutline": "rgba(5, 145, 255, 0.1)",
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorTextLightSolid": "#ffffff",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimaryActive": "#0958d9",
+            "colorPrimary": "#1677ff",
+            "colorLinkHover": "#4096ff",
+            "colorLinkActive": "#0958d9",
+            "colorLink": "#1677ff",
+            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+            "colorErrorHover": "#ff7875",
+            "colorErrorBorderHover": "#ffa39e",
+            "colorErrorBg": "#fff2f0",
+            "colorErrorActive": "#d9363e",
+            "colorError": "#ff4d4f",
+            "colorBorder": "#d9d9d9",
+            "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "textHoverBg": "rgba(0, 0, 0, 0.06)",
+            "primaryColor": "#ffffff",
+            "onlyIconSize": 14,
+            "linkHoverBg": "rgba(0, 0, 0, 0)",
+            "groupBorderColor": "#4096ff",
+            "ghostBg": "rgba(0, 0, 0, 0)",
+            "defaultGhostColor": "#ffffff",
+            "defaultGhostBorderColor": "#ffffff",
+            "defaultColor": "rgba(0, 0, 0, 0.88)",
+            "defaultBorderColor": "#d9d9d9",
+            "defaultBg": "#ffffff",
+            "dangerColor": "#ffffff",
+            "borderColorDisabled": "#d9d9d9",
+            "defaultHoverBg": "#ffffff",
+            "defaultHoverColor": "#4096ff",
+            "defaultHoverBorderColor": "#4096ff",
+            "defaultActiveBg": "#ffffff",
+            "defaultActiveColor": "#0958d9",
+            "defaultActiveBorderColor": "#0958d9",
+            "fontWeight": 400,
+            "contentFontSizeSM": 12,
+            "contentLineHeightLG": 1.5714285714285714,
+            "contentLineHeightSM": 1.6666666666666667
+        },
+        "Badge": {
+            "statusSize": 6,
+            "indicatorHeight": 20,
+            "dotSize": 6,
+            "paddingXS": 8,
+            "marginXS": 8,
+            "lineWidth": 1,
+            "borderRadiusSM": 4,
+            "fontSizeSM": 10,
+            "fontSize": 12,
+            "colorWarning": "#faad14",
+            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextLightSolid": "#ffffff",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSuccess": "#52c41a",
+            "colorPrimary": "#1677ff",
+            "colorErrorHover": "#ff7875",
+            "colorError": "#ff4d4f",
+            "colorBorderBg": "#ffffff",
+            "colorBgContainer": "#ffffff",
+            "indicatorHeightSM": 12,
+            "textFontSize": 10,
+            "textFontSizeSM": 10,
+            "fontHeight": 22,
+            "lineHeight": 1.6666666666666667,
+            "fontFamily": "Inter"
+        },
+        "Form": {
+            "screenXSMax": 575,
+            "screenSMMax": 767,
+            "screenMDMax": 991,
+            "screenLGMax": 1199,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "marginLG": 24,
+            "margin": 16,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlOutlineWidth": 2,
+            "controlOutline": "rgba(5, 145, 255, 0.1)",
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "colorWarning": "#faad14",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSuccess": "#52c41a",
+            "colorPrimary": "#1677ff",
+            "colorError": "#ff4d4f",
+            "colorBorder": "#d9d9d9",
+            "labelRequiredMarkColor": "#ff4d4f",
+            "labelColor": "rgba(0, 0, 0, 0.88)",
+            "itemMarginBottom": 24,
+            "labelColonMarginInlineEnd": 8,
+            "labelColonMarginInlineStart": 2,
+            "labelHeight": 32,
+            "labelFontSize": 12,
+            "fontFamily": "Inter"
+        },
+        "Avatar": {
+            "marginXXS": 4,
+            "marginXS": 8,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeXL": 18,
+            "fontSizeLG": 14,
+            "fontSizeHeading3": 20,
+            "fontSize": 12,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextLightSolid": "#ffffff",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorBorderBg": "#ffffff",
+            "containerSizeSM": 24,
+            "containerSizeLG": 40,
+            "containerSize": 32,
+            "textFontSize": 18,
+            "textFontSizeLG": 20,
+            "textFontSizeSM": 12,
+            "fontFamily": "Inter"
+        },
+        "Tour": {
+            "sizePopupArrow": 16,
+            "paddingXS": 8,
+            "padding": 16,
+            "marginXS": 8,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSize": 12,
+            "borderRadiusXS": 2,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorWhite": "#ffffff",
+            "colorTextLightSolid": "#ffffff",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimary": "#1677ff",
+            "colorIconHover": "rgba(0, 0, 0, 0.88)",
+            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorFill": "rgba(0, 0, 0, 0.15)",
+            "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
+            "colorBgElevated": "#ffffff",
+            "closeBtnSize": 22,
+            "primaryNextBtnHoverBg": "#f0f0f0",
+            "primaryPrevBtnBg": "rgba(255, 255, 255, 0.15)",
+            "fontFamily": "Inter",
+            "lineWidthFocus": 4
+        },
+        "QRCode": {
+            "paddingSM": 12,
+            "marginXS": 8,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSize": 12,
+            "controlHeight": 32,
+            "borderRadiusLG": 8,
+            "colorWhite": "#ffffff",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "fontFamily": "Inter"
+        },
+        "Upload": {
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "padding": 16,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "marginXL": 32,
+            "margin": 16,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSizeHeading3": 20,
+            "fontSizeHeading2": 26,
+            "fontSize": 12,
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlHeightLG": 40,
+            "borderRadiusLG": 8,
+            "colorTextLightSolid": "#ffffff",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimary": "#1677ff",
+            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorErrorBg": "#fff2f0",
+            "colorError": "#ff4d4f",
+            "colorBorder": "#d9d9d9",
+            "colorBgMask": "rgba(0, 0, 0, 0.45)",
+            "fontHeight": 22,
+            "fontHeightSM": 20,
+            "lineWidthFocus": 4,
+            "fontFamily": "Inter"
+        },
+        "Typography": {
+            "paddingSM": 12,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "lineWidth": 1,
+            "lineHeightHeading5": 1.5714285714285714,
+            "lineHeightHeading4": 1.5,
+            "lineHeightHeading3": 1.4,
+            "lineHeightHeading2": 1.3076923076923077,
+            "lineHeightHeading1": 1.25,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSizeHeading5": 14,
+            "fontSizeHeading4": 16,
+            "fontSizeHeading3": 20,
+            "fontSizeHeading2": 26,
+            "fontSizeHeading1": 32,
+            "fontSize": 12,
+            "colorWarning": "#faad14",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSuccess": "#52c41a",
+            "colorLinkHover": "#4096ff",
+            "colorLinkActive": "#0958d9",
+            "colorLink": "#1677ff",
+            "colorErrorHover": "#ff7875",
+            "colorErrorActive": "#d9363e",
+            "colorError": "#ff4d4f",
+            "fontFamilyCode": "Courier Prime"
+        },
+        "TreeSelect": {
+            "paddingXS": 8,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "lineWidthFocus": 4,
+            "lineWidthBold": 2,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgActive": "#e6f4ff",
+            "controlInteractiveSize": 16,
+            "controlHeightSM": 24,
+            "borderRadiusSM": 4,
+            "borderRadius": 6,
+            "colorWhite": "#ffffff",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimary": "#1677ff",
+            "colorBorder": "#d9d9d9",
+            "colorBgElevated": "#ffffff",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "titleHeight": 24,
+            "nodeSelectedBg": "#e6f4ff",
+            "nodeHoverBg": "rgba(0, 0, 0, 0.04)",
+            "fontFamily": "Inter"
+        },
+        "Tree": {
+            "paddingSM": 12,
+            "borderRadiusLG": 8,
+            "paddingXS": 8,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "lineWidthFocus": 4,
+            "lineWidthBold": 2,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgActive": "#e6f4ff",
+            "controlInteractiveSize": 16,
+            "controlHeightSM": 24,
+            "borderRadiusSM": 4,
+            "borderRadius": 6,
+            "colorWhite": "#ffffff",
+            "colorTextLightSolid": "#ffffff",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimary": "#1677ff",
+            "colorBorder": "#d9d9d9",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "titleHeight": 24,
+            "nodeSelectedBg": "#e6f4ff",
+            "nodeHoverBg": "rgba(0, 0, 0, 0.04)",
+            "directoryNodeSelectedColor": "#ffffff",
+            "directoryNodeSelectedBg": "#1677ff",
+            "fontFamily": "Inter"
+        },
+        "Tag": {
+            "paddingXXS": 4,
+            "marginXS": 8,
+            "lineWidth": 1,
+            "lineHeightSM": 1.8,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeSM": 10,
+            "fontSizeIcon": 12,
+            "fontSize": 12,
+            "borderRadiusSM": 4,
+            "colorTextLightSolid": "#ffffff",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimaryActive": "#0958d9",
+            "colorPrimary": "#1677ff",
+            "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
+            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+            "colorFillQuaternary": "rgba(0, 0, 0, 0.02)",
+            "colorBorder": "#d9d9d9",
+            "colorWarningBorder": "#ffe58f",
+            "colorWarningBg": "#fffbe6",
+            "colorSuccessBorder": "#b7eb8f",
+            "colorSuccessBg": "#f6ffed",
+            "colorInfoBorder": "#91caff",
+            "colorInfoBg": "#e6f4ff",
+            "colorErrorBorder": "#ffccc7",
+            "colorErrorBg": "#fff2f0",
+            "defaultColor": "rgba(0, 0, 0, 0.88)",
+            "defaultBg": "rgba(0, 0, 0, 0.02)",
+            "fontFamily": "Inter"
+        },
+        "Statistic": {
+            "padding": 16,
+            "marginXXS": 4,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeHeading3": 20,
+            "fontSize": 12,
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "contentFontSize": 20,
+            "titleFontSize": 12,
+            "fontFamily": "Inter"
+        },
+        "Skeleton": {
+            "padding": 16,
+            "marginXXS": 4,
+            "marginSM": 12,
+            "marginLG": 24,
+            "controlHeightXS": 16,
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusSM": 4,
+            "colorFillContent": "rgba(0, 0, 0, 0.06)",
+            "colorFill": "rgba(0, 0, 0, 0.15)"
+        },
+        "Select": {
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSizeSM": 10,
+            "fontSizeLG": 14,
+            "fontSizeIcon": 12,
+            "fontSize": 12,
+            "controlPaddingHorizontalSM": 8,
+            "controlPaddingHorizontal": 12,
+            "controlOutlineWidth": 2,
+            "controlOutline": "rgba(5, 145, 255, 0.1)",
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgActive": "#e6f4ff",
+            "controlHeightXS": 16,
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusXS": 2,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+            "colorWarningHover": "#ffd666",
+            "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimary": "#1677ff",
+            "colorIconHover": "rgba(0, 0, 0, 0.88)",
+            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+            "colorErrorHover": "#ff7875",
+            "colorBorder": "#d9d9d9",
+            "colorBgElevated": "#ffffff",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "singleItemHeightLG": 40,
+            "selectorBg": "#ffffff",
+            "optionSelectedColor": "rgba(0, 0, 0, 0.88)",
+            "optionSelectedBg": "#e6f4ff",
+            "optionLineHeight": null,
+            "optionHeight": 32,
+            "optionActiveBg": "rgba(0, 0, 0, 0.04)",
+            "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
+            "multipleItemHeightLG": 32,
+            "multipleItemHeight": 24,
+            "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
+            "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
+            "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
+            "multipleItemBg": "rgba(0, 0, 0, 0.06)",
+            "clearBg": "#ffffff",
+            "optionFontSize": "Inter",
+            "optionSelectedFontWeight": 600,
+            "fontFamily": "Inter"
+        },
+        "Result": {
+            "paddingXS": 8,
+            "paddingXL": 32,
+            "paddingLG": 24,
+            "padding": 16,
+            "marginXS": 8,
+            "lineHeightHeading3": 1.4,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeHeading3": 20,
+            "fontSize": 12,
+            "colorWarning": "#faad14",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorSuccess": "#52c41a",
+            "colorInfo": "#1677ff",
+            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorError": "#ff4d4f",
+            "iconFontSize": 72,
+            "subtitleFontSize": 12,
+            "titleFontSize": 20
+        },
+        "Progress": {
+            "paddingXS": 8,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeSM": 10,
+            "fontSize": 12,
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSuccess": "#52c41a",
+            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+            "colorError": "#ff4d4f",
+            "colorBgContainer": "#ffffff",
+            "remainingColor": "rgba(0, 0, 0, 0.06)",
+            "defaultColor": "#1677ff",
+            "circleTextColor": "rgba(0, 0, 0, 0.88)",
+            "fontFamily": "Inter"
+        },
+        "Popconfirm": {
+            "marginXXS": 4,
+            "marginXS": 8,
+            "fontWeightStrong": 600,
+            "fontSize": 12,
+            "colorWarning": "#faad14",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorText": "rgba(0, 0, 0, 0.88)"
+        },
+        "Pagination": {
+            "screenSM": 576,
+            "screenLG": 992,
+            "paddingXXS": 4,
+            "paddingSM": 12,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "marginSM": 12,
+            "margin": 16,
+            "lineWidthFocus": 4,
+            "lineWidth": 1,
+            "lineHeightLG": 1.5714285714285714,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSizeSM": 10,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlPaddingHorizontalSM": 8,
+            "controlPaddingHorizontal": 12,
+            "controlOutlineWidth": 2,
+            "controlOutline": "rgba(5, 145, 255, 0.1)",
+            "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimary": "#1677ff",
+            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+            "colorBorder": "#d9d9d9",
+            "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
+            "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "itemSizeSM": 24,
+            "itemSize": 32,
+            "itemLinkBg": "#ffffff",
+            "itemInputBg": "#ffffff",
+            "itemBg": "#ffffff",
+            "itemActiveColorDisabled": "rgba(0, 0, 0, 0.25)",
+            "itemActiveBgDisabled": "rgba(0, 0, 0, 0.15)",
+            "itemActiveBg": "#ffffff",
+            "fontFamily": "Inter"
+        },
+        "Modal": {
+            "screenSMMax": 767,
+            "paddingXS": 8,
+            "paddingMD": 20,
+            "paddingLG": 24,
+            "paddingContentHorizontalLG": 24,
+            "padding": 16,
+            "marginXS": 8,
+            "marginSM": 12,
+            "marginLG": 24,
+            "margin": 16,
+            "lineWidthFocus": 4,
+            "lineWidth": 1,
+            "lineHeightHeading5": 1.5714285714285714,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSizeLG": 14,
+            "fontSizeHeading5": 14,
+            "fontSize": 12,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "colorWarning": "#faad14",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSuccess": "#52c41a",
+            "colorPrimaryBorder": "#91caff",
+            "colorIconHover": "rgba(0, 0, 0, 0.88)",
+            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorBgMask": "rgba(0, 0, 0, 0.45)",
+            "titleColor": "rgba(0, 0, 0, 0.88)",
+            "headerBg": "#ffffff",
+            "footerBg": "rgba(0, 0, 0, 0)",
+            "contentBg": "#ffffff",
+            "titleFontSize": 16,
+            "titleLineHeight": 1.25,
+            "fontHeight": 22,
+            "fontFamily": "Inter"
+        },
+        "Message": {
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "marginXS": 8,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlHeightLG": 40,
+            "borderRadiusLG": 8,
+            "colorWarning": "#faad14",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSuccess": "#52c41a",
+            "colorInfo": "#1677ff",
+            "colorError": "#ff4d4f",
+            "contentBg": "#ffffff",
+            "fontFamily": "Inter"
+        },
+        "List": {
+            "screenSM": 576,
+            "screenMD": 768,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "paddingLG": 24,
+            "paddingContentVerticalSM": 8,
+            "paddingContentVerticalLG": 16,
+            "paddingContentVertical": 12,
+            "paddingContentHorizontalLG": 24,
+            "paddingContentHorizontal": 16,
+            "padding": 16,
+            "marginXXS": 4,
+            "marginXXL": 48,
+            "marginSM": 12,
+            "marginLG": 24,
+            "margin": 16,
+            "lineWidth": 1,
+            "lineHeightLG": 1.5714285714285714,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeSM": 10,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusLG": 8,
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorPrimary": "#1677ff",
+            "colorBorder": "#d9d9d9",
+            "headerBg": "rgba(0, 0, 0, 0)",
+            "footerBg": "rgba(0, 0, 0, 0)",
+            "avatarMarginRight": 16,
+            "descriptionFontSize": 12,
+            "fontFamily": "Inter"
+        },
+        "FloatButton": {
+            "paddingXXS": 4,
+            "marginXXL": 48,
+            "marginLG": 24,
+            "margin": 16,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeSM": 10,
+            "fontSizeLG": 14,
+            "fontSizeIcon": 12,
+            "fontSize": 12,
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlHeightLG": 40,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "colorTextLightSolid": "#ffffff",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimary": "#1677ff",
+            "colorFillContent": "rgba(0, 0, 0, 0.06)",
+            "colorBgElevated": "#ffffff",
+            "fontFamily": "Inter"
+        },
+        "Empty": {
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "fontSize": 12,
+            "lineHeight": 1.6666666666666667
+        },
+        "Dropdown": {
+            "sizePopupArrow": 16,
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "lineWidthFocus": 4,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeSM": 10,
+            "fontSizeIcon": 12,
+            "fontSize": 12,
+            "controlPaddingHorizontal": 12,
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgActiveHover": "#bae0ff",
+            "controlItemBgActive": "#e6f4ff",
+            "controlHeight": 32,
+            "borderRadiusXS": 2,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "colorTextLightSolid": "#ffffff",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimary": "#1677ff",
+            "colorError": "#ff4d4f",
+            "colorBgElevated": "#ffffff",
+            "paddingBlock": 5,
+            "fontFamily": "Inter"
+        },
+        "Drawer": {
+            "paddingXS": 8,
+            "paddingLG": 24,
+            "padding": 16,
+            "marginSM": 12,
+            "lineWidth": 1,
+            "lineHeightLG": 1.5714285714285714,
+            "fontWeightStrong": 600,
+            "fontSizeLG": 14,
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorIconHover": "rgba(0, 0, 0, 0.88)",
+            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorBgMask": "rgba(0, 0, 0, 0.45)",
+            "colorBgElevated": "#ffffff",
+            "lineWidthFocus": 4
+        },
+        "Divider": {
+            "marginXS": 8,
+            "marginLG": 24,
+            "margin": 16,
+            "lineWidth": 1,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "lineHeight": 1.6666666666666667,
+            "fontFamily": "Inter"
+        },
+        "Descriptions": {
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "paddingLG": 24,
+            "padding": 16,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "lineWidth": 1,
+            "lineHeightSM": 1.8,
+            "lineHeightLG": 1.5714285714285714,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSizeSM": 10,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "borderRadiusLG": 8,
+            "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+            "colorTextSecondary": "rgba(0, 0, 0, 0.65)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "titleColor": "rgba(0, 0, 0, 0.88)",
+            "labelBg": "rgba(0, 0, 0, 0.02)",
+            "contentColor": "rgba(0, 0, 0, 0.88)",
+            "fontFamily": "Inter"
+        },
+        "DatePicker": {
+            "sizePopupArrow": 16,
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "padding": 16,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "lineWidthBold": 2,
+            "lineWidth": 1,
+            "lineHeightLG": 1.5714285714285714,
+            "lineHeight": 1.6666666666666667,
+            "fontWeightStrong": 600,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlPaddingHorizontalSM": 8,
+            "controlPaddingHorizontal": 12,
+            "controlOutlineWidth": 2,
+            "controlOutline": "rgba(5, 145, 255, 0.1)",
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgActive": "#e6f4ff",
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusXS": 2,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+            "colorWarningHover": "#ffd666",
+            "colorWarning": "#faad14",
+            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextLightSolid": "#ffffff",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimary": "#1677ff",
+            "colorLinkHover": "#4096ff",
+            "colorLinkActive": "#0958d9",
+            "colorLink": "#1677ff",
+            "colorIconHover": "rgba(0, 0, 0, 0.88)",
+            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+            "colorErrorHover": "#ff7875",
+            "colorError": "#ff4d4f",
+            "colorBorder": "#d9d9d9",
+            "colorBgElevated": "#ffffff",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "hoverBorderColor": "#4096ff",
+            "cellHoverBg": "rgba(0, 0, 0, 0.04)",
+            "cellHeight": 24,
+            "activeBorderColor": "#1677ff",
+            "paddingInline": 11,
+            "paddingInlineSM": 7,
+            "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
+            "colorErrorBg": "#fff2f0",
+            "colorWarningBg": "#fffbe6",
+            "colorWarningText": "#faad14",
+            "colorErrorText": "#ff4d4f",
+            "colorWarningBgHover": "#fff1b8",
+            "colorErrorBgHover": "#fff1f0",
+            "activeBg": "#ffffff",
+            "hoverBg": "#ffffff",
+            "cellBgDisabled": "rgba(0, 0, 0, 0.04)",
+            "cellActiveWithRangeBg": "#e6f4ff",
+            "cellHoverWithRangeBg": "#c8dfff",
+            "cellRangeBorderColor": "#7cb3ff",
+            "multipleItemBg": "rgba(0, 0, 0, 0.06)",
+            "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
+            "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
+            "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
+            "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
+            "cellWidth": 36,
+            "multipleItemHeight": 24,
+            "multipleItemHeightLG": 32,
+            "multipleItemHeightSM": 16,
+            "paddingBlock": 4,
+            "paddingBlockLG": 7,
+            "paddingBlockSM": 0,
+            "paddingInline 2": 11,
+            "presetsMaxWidth": 200,
+            "presetsWidth": 120,
+            "textHeight": 40,
+            "timeCellHeight": 28,
+            "timeColumnHeight": 224,
+            "timeColumnWidth": 56,
+            "withoutTimeCellHeight": 66,
+            "inputFontSize": 12,
+            "inputFontSizeLG": 14,
+            "inputFontSizeSM": 10,
+            "fontHeight": 22,
+            "fontHeightLG": 24,
+            "fontFamily": "Inter"
+        },
+        "Collapse": {
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "paddingLG": 24,
+            "padding": 16,
+            "marginSM": 12,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSizeIcon": 12,
+            "fontSize": 12,
+            "borderRadiusLG": 8,
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorBorder": "#d9d9d9",
+            "colorBgContainer": "#ffffff",
+            "headerBg": "rgba(0, 0, 0, 0.02)",
+            "contentBg": "#ffffff",
+            "fontHeight": 22,
+            "fontHeightLG": 24,
+            "lineHeightLG": 1.5714285714285714,
+            "fontFamily": "Inter"
+        },
+        "Checkbox": {
+            "paddingXS": 8,
+            "marginXS": 8,
+            "lineWidthFocus": 4,
+            "lineWidthBold": 2,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "controlInteractiveSize": 16,
+            "borderRadiusSM": 4,
+            "colorWhite": "#ffffff",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimaryBorder": "#91caff",
+            "colorPrimary": "#1677ff",
+            "colorBorder": "#d9d9d9",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "fontFamily": "Inter"
+        },
+        "Breadcrumb": {
+            "paddingXXS": 4,
+            "marginXXS": 4,
+            "marginXS": 8,
+            "lineWidthFocus": 4,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeIcon": 12,
+            "fontSize": 12,
+            "borderRadiusSM": 4,
+            "colorPrimaryBorder": "#91caff",
+            "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
+            "separatorColor": "rgba(0, 0, 0, 0.45)",
+            "linkHoverColor": "rgba(0, 0, 0, 0.88)",
+            "linkColor": "rgba(0, 0, 0, 0.45)",
+            "lastItemColor": "rgba(0, 0, 0, 0.88)",
+            "itemColor": "rgba(0, 0, 0, 0.45)",
+            "separatorMargin": 8,
+            "iconFontSize": 12,
+            "fontHeight": 22,
+            "fontFamily": "Inter"
+        },
+        "Anchor": {
+            "paddingXXS": 4,
+            "lineWidthBold": 2,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSize": 12,
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorPrimary": "#1677ff",
+            "linkPaddingInlineStart": 16,
+            "linkPaddingBlock": 4,
+            "fontFamily": "Inter"
+        },
+        "Alert": {
+            "paddingMD": 20,
+            "paddingContentVerticalSM": 8,
+            "paddingContentHorizontalLG": 24,
+            "marginXS": 8,
+            "marginSM": 12,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "fontSizeLG": 14,
+            "fontSizeIcon": 12,
+            "fontSizeHeading3": 20,
+            "fontSize": 12,
+            "borderRadiusLG": 8,
+            "colorWarningBorder": "#ffe58f",
+            "colorWarningBg": "#fffbe6",
+            "colorWarning": "#faad14",
+            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorSuccessBorder": "#b7eb8f",
+            "colorSuccessBg": "#f6ffed",
+            "colorSuccess": "#52c41a",
+            "colorInfoBorder": "#91caff",
+            "colorInfoBg": "#e6f4ff",
+            "colorInfo": "#1677ff",
+            "colorIconHover": "rgba(0, 0, 0, 0.88)",
+            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorErrorBorder": "#ffccc7",
+            "colorErrorBg": "#fff2f0",
+            "colorError": "#ff4d4f",
+            "withDescriptionIconSize": 20,
+            "fontFamily": "Inter"
+        },
+        "Space": {
+            "paddingXS": 8,
+            "paddingLG": 24,
+            "padding": 16
+        },
+        "AutoComplete": {
+            "paddingXXS": 4,
+            "paddingXS": 8,
+            "paddingSM": 12,
+            "lineWidth": 1,
+            "lineHeight": 1.6666666666666667,
+            "controlPaddingHorizontalSM": 8,
+            "controlPaddingHorizontal": 12,
+            "controlOutlineWidth": 2,
+            "controlOutline": "rgba(5, 145, 255, 0.1)",
+            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgActive": "#e6f4ff",
+            "controlHeightXS": 16,
+            "controlHeightSM": 24,
+            "controlHeightLG": 40,
+            "controlHeight": 32,
+            "borderRadiusXS": 2,
+            "borderRadiusSM": 4,
+            "borderRadiusLG": 8,
+            "borderRadius": 6,
+            "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
+            "colorWarningHover": "#ffd666",
+            "colorWarning": "#faad14",
+            "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
+            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryHover": "#4096ff",
+            "colorPrimary": "#1677ff",
+            "colorIconHover": "rgba(0, 0, 0, 0.88)",
+            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+            "colorErrorHover": "#ff7875",
+            "colorError": "#ff4d4f",
+            "colorBorder": "#d9d9d9",
+            "colorBgElevated": "#ffffff",
+            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainer": "#ffffff",
+            "optionActiveBg": "rgba(0, 0, 0, 0.04)",
+            "optionHeight": 32,
+            "optionFontSize": 12,
+            "fontFamily": "Inter",
+            "fontSize": 12,
+            "fontSizeIcon": 12,
+            "fontSizeLG": 14,
+            "fontSizeSM": 10
+        },
+        "Layout": {
+            "bodyBg": "#f5f5f5",
+            "footerBg": "#f5f5f5",
+            "headerBg": "#001529",
+            "headerColor": "rgba(0, 0, 0, 0.88)",
+            "lightSiderBg": "#ffffff",
+            "lightTriggerBg": "#ffffff",
+            "lightTriggerColor": "rgba(0, 0, 0, 0.88)",
+            "siderBg": "#001529",
+            "triggerBg": "#002140",
+            "triggerColor": "#ffffff",
+            "colorText": "rgba(0, 0, 0, 0.88)",
+            "headerHeight": 64,
+            "triggerHeight": 48,
+            "zeroTriggerHeight": 40,
+            "zeroTriggerWidth": 40,
+            "borderRadius": 6,
+            "fontSize": 12,
+            "fontSizeXL": 18
+        },
+        "Mentions": {
+            "fontFamily": "Inter",
+            "fontSize": 12,
+            "lineHeight": 1.6666666666666667
+        }
     }
-  }
-}
\ No newline at end of file
+}

From d6fd55d0cb9c9c4d39df77e53a5aa46d68bee9ed Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 1 Aug 2024 22:19:54 +0100
Subject: [PATCH 005/117] fix(frontend): modified logo size and improved
 sidebar in oss

---
 agenta-web/src/components/Logo/Logo.tsx       |  2 +-
 agenta-web/src/components/Sidebar/Sidebar.tsx | 30 +++++++++++++++++--
 agenta-web/src/components/Sidebar/config.tsx  | 13 +++++++-
 3 files changed, 41 insertions(+), 4 deletions(-)

diff --git a/agenta-web/src/components/Logo/Logo.tsx b/agenta-web/src/components/Logo/Logo.tsx
index c0c77cd4d..82d55bdc9 100644
--- a/agenta-web/src/components/Logo/Logo.tsx
+++ b/agenta-web/src/components/Logo/Logo.tsx
@@ -30,7 +30,7 @@ const Logo: React.FC<Partial<React.ComponentProps<typeof Image>> & {isOnlyIconLo
             alt="Agenta Logo"
         />
     ) : (
-        <Image width={154.8} height={51} {...imageProps} src={logoSrc.complete} alt="Agenta Logo" />
+        <Image width={137} height={46} {...imageProps} src={logoSrc.complete} alt="Agenta Logo" />
     )
 }
 
diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
index dc2a427ad..608ee943a 100644
--- a/agenta-web/src/components/Sidebar/Sidebar.tsx
+++ b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -1,6 +1,17 @@
 import React, {useEffect, useMemo, useState} from "react"
 import {useRouter} from "next/router"
-import {Avatar, Button, Divider, Dropdown, Layout, Menu, Space, Tag, Tooltip} from "antd"
+import {
+    Avatar,
+    Button,
+    Divider,
+    Dropdown,
+    Layout,
+    Menu,
+    Space,
+    Tag,
+    Tooltip,
+    Typography,
+} from "antd"
 import Logo from "../Logo/Logo"
 import Link from "next/link"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
@@ -18,6 +29,7 @@ import AlertPopup from "../AlertPopup/AlertPopup"
 import {dynamicContext} from "@/lib/helpers/dynamic"
 
 const {Sider} = Layout
+const {Text} = Typography
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     sidebar: {
@@ -31,6 +43,15 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             background: `${theme.colorBgContainer} !important`,
         },
     },
+    sidebarLogo: {
+        display: "flex",
+        gap: 4,
+        alignItems: "center",
+        "& > .ant-typography": {
+            fontSize: `${theme.sizeSM}px`,
+            color: theme.colorTextDescription,
+        },
+    },
     siderWrapper: {
         border: `0.01px solid ${theme.isDark ? "#222" : "#ddd"}`,
     },
@@ -310,8 +331,13 @@ const Sidebar: React.FC = () => {
                 <div className={classes.sliderContainer}>
                     <div>
                         {!isDemo() && (
-                            <Link data-cy="app-management-link" href="/apps">
+                            <Link
+                                data-cy="app-management-link"
+                                href="/apps"
+                                className={classes.sidebarLogo}
+                            >
                                 <Logo isOnlyIconLogo={collapsed} />
+                                <Text className="text-xs">Open source</Text>
                             </Link>
                         )}
                         {selectedOrg?.id && user?.id && isDemo() && (
diff --git a/agenta-web/src/components/Sidebar/config.tsx b/agenta-web/src/components/Sidebar/config.tsx
index ea9cd49ee..2a192df7c 100644
--- a/agenta-web/src/components/Sidebar/config.tsx
+++ b/agenta-web/src/components/Sidebar/config.tsx
@@ -32,6 +32,7 @@ import {
     Question,
     Scroll,
     SlackLogo,
+    Gear,
 } from "@phosphor-icons/react"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
@@ -71,6 +72,8 @@ export const useSidebarConfig = () => {
         })
     }, [])
 
+    const {selectedOrg} = useOrgData()
+
     const sidebarConfig: SidebarConfig[] = [
         {
             key: "app-management-link",
@@ -217,7 +220,15 @@ export const useSidebarConfig = () => {
             link: "/settings?tab=workspace",
             icon: <PaperPlane size={16} />,
             isBottom: true,
-            isHidden: !doesSessionExist,
+            isHidden: !doesSessionExist || (true && !selectedOrg),
+        },
+        {
+            key: "settings-link",
+            title: "Settings",
+            link: "/settings",
+            icon: <Gear size={16} />,
+            isBottom: true,
+            isHidden: !isOss,
         },
         {
             key: "help-docs-link",

From f8727957592ce99e8a8d3ced47d5388aa0dd38dc Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 1 Aug 2024 23:14:15 +0100
Subject: [PATCH 006/117] minor improvements

---
 agenta-web/public/assets/slack.png            | Bin 17355 -> 0 bytes
 agenta-web/src/components/Layout/Layout.tsx   |  13 -------------
 agenta-web/src/components/Sidebar/Sidebar.tsx |  10 +++++-----
 3 files changed, 5 insertions(+), 18 deletions(-)
 delete mode 100644 agenta-web/public/assets/slack.png

diff --git a/agenta-web/public/assets/slack.png b/agenta-web/public/assets/slack.png
deleted file mode 100644
index 9ded7efaae5b0e635f2f7ba16095d85386da9d22..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 17355
zcmd74XE<Ho6F<5UC5YZ@91_u6w4;WDBU+RMK@h#SgAg@(cM#D<Ckaua2M5ujx9Ghc
z(M$Alx9{(NpZn&%zt{8RiM{tKGqYyRnwj+(5iiu09^ljA0|4+q84l9|08H>#OaKoD
z{O|bP*ai6CJvTXJ9X#;I2hThle7^4t*LMQ|qF;CaFg|h-(St8(5ej+;Z6`~Fr>Uz2
z;OXhfYvX9=W@hSa!RzE|mA)%U2LKNNW!N*FcNyDrUMYqanI{K(dpZSG?p7EW*o>3{
z7_^k#)B25xB(SkzFWjz>hbvp3S>qRReixJLQcx#9Y!_Pz=l&b;{S!W2&!5Z!2^IE5
zK@+kLMhjB8k<5@?>5bDH<h?3H(bvYWf5nUb-WclgCa8O6N@RT5nEf{<z99hP>|TxW
z^GR^_9-!SDco!$un(^ARGewgi`d%o&h$F!`-9Nc=UxL5J;8%@d-^m}FD<&c0t3l*j
zn+EgA?pd@;vPx%Qj3`aq498+#Ak>6SZzoWu7OSyU0_E|cHhsnnRm1kyjyJYu;#cNO
zw*AinR&<N9c|11)Kn6mOSiYAySP9;Do3%!HQ9An|nf&6~Uzs=z=v6y0+xd-H4^nJa
z6#V)t^2Xz*=LS8*Czk!`+i2Weh|~H6O@FAc`}?1^gVE`?I;&mO92}HDPZ9_H6&u<7
zUuS9l%<DaLFAENnv)<BxsHjHmEzhV&fo%2Gyk{Y)vH3n-n6Bm(mY;DAlsj(UX*aFH
zTt2myXT*sUNboMY?hcD(?DcV@0-VfmDg3O7S7vwR&lG3O-*Y2UY=ymdTB6lxTv;rs
zgEWXUH%Mms&TEj3z8ig8{*2IQxP}hER$ci0D6uh`*yPIC1c8=pLW`UQvKuzqggOv0
z7QT+QZd%?pw4X4!V%&TZ+@#F#YH_%lQOL=fh*5F%1xNyP^z~JT%dgA1b1Rc~Xvq*k
zYvt&{+VPpDoGP6!4SzyLouxmxVd&GhWW3rRtRB>JWe!#6|F~HB4>KWB#3Cqr^?o)s
zRs61}yRW`{8}3uq7m|4sM$!VU&A=ZLXs=2AIhJ^w^iQ|Wm|l4+<ljQfhfDQJi4$(5
z`xcR&RQ}fYovFp=Yi%N>D50vaVr&{*RXyirOxHhQ)DL+@{;uQO^O%aI6}^#0P?V^1
z0%T)j|NPXKXE9apXBNP+M9#W9y>GNnDbcuHilqiWQ2pPr)bSaMf<4lYI*hs)PxS{3
zXKA6)I@FZF{r0)XwXT$%R>eO&J){~%aX)>_w$unCO7LJ6<%V)h?07=^2r>%{XRiW_
zXXY#IPSjcmGZnss;RhtmP1#)qvv}<S17L%188U37PIHD%JUMy!FL$Q7==%~H0}|z}
z?th+}U1+jfPjCt$f{Z`Imi=w}*V_r6;e^SDm-#5(F=Nm^t&?3qMJ`PFLD%0uMlO_=
z<ASVX5-YI{IhXTCMG?kx<j_bR5lVm~U3u%8%<YD}J8Xa~!%bH*$$wgKxIs?o{!Vb=
z>7U*Hjb<~;abZ@3y+K0R?!=DcPX*D`gal2D_{x;oWnDAFs4Taz*WzqTYCJ;Uq!95h
z6sw!}#55ZAu)Y#!J__+O6WG}N32;z8=+t_>D`J6V?7V>mGNWUlD@rXX)|*Ahm_OV3
z!|-Hz((M#$MczueqAQQhduKpjRFVW5uEPXUn0Y;My3lz;e+l378y@f9w&ldAwkvxV
zqEJI9_6U(oIJp+ll4JHKVLT@YZozSCtFNW-`1?i_deJysD0KB)Q$BGblt_!HUDWVE
z4q^~VbQ3~nft-`@-f6pk*8^lFA?4@%cZ_*zs8XovtWeTk_6aL99Td(nF6_JLb?#{3
zxG$PhWv*)U_NvZt4&rMFQOLu5s32O<LA~e$MZ^-O33+hWF1<m1?@bgnhJIkllmXO1
z?(?#6n-Ra#xW4`)d(BZ9$zaWv!LjA@h2B_x;}c=HxKrxbZ{Zv_in%%Jb&nm!3!}^(
z8Ed|NrJgwTd7sVjp=WHDIzYblUxRD0xHFNdH$8k}Lec^y;~Sv^nyPtk_CLgJLT{Iy
z#lHIPm8Z*Z#BXb3#4kJ7I&N&CqU4oI0A#CCqR9D?JT6D*bhWNX-NEpXIA`R6hWi#(
zGb@6y=Wg{QdrA#0I_c#$iXXD;i+UQptF^kQsjKGM6CdV2e?0E@eqrS7`A!<w8&YVn
z`6v7U!s(<3H~7&SAp@F$>sKcf^Ni460pg((v&#R<E??NP@+>>1@zPR3!_5=H#<7j{
zZbBEcEo^;t9&L1ks~A7ZES5TO?iiTb?we+D*9}o;naam}7$oQ=Mc_;)zfo+G=jtU*
z4Tbr~%=v6uFHR4Me+e|57%OeEH$*ceNO1y!CfXurPrBz@IfAHE^*2&E^$(htCUQ$|
zU1|TqL_>&JrogqqS{Jwt#W{E7A9Ru0O|7eKLst{9i}~508ODG04SY3d+*iwSgVz)T
z-2tle=q@wscs}Zlac$B4iy;AgWQsp&=09UU((H|0f`7M0_@E)d8tuOf{G#{sG0*Jz
z#1QR;pzR!`b}Jnyx90=BN|`=~GNG|7Q#qIquR%K%*Y?f{oT=0FFzG?o->Scv=#?BH
z9U;%#C(U{*4HPg9icL{ZUfj;$0nHdm<vngxcQV%?roS4R;bp&AUd>vG=-ptS!NFD>
z#rE(S^CJ7RhW?fqs_`kgK6rhPQ>>lSNq~dnJ|(dEiG$}U!1o|CFKsOYJ4cA2q-ITu
zy&=ytYm?vfIE`!YKBL@-2Da=)SDhFl_>0v~tW%vP4_4+w5rk;>SU9VOk#f?p^7uo@
zrif`(ob$?U@BmAOU_r=KjywZr#c}_09igDwigPVWLGj0+w&;~5wqX60+aTEwkCL+z
zEB5H8{LU|`CSDYoE%tXR=SaRN9sw%hhtxcbM~@h^+-jN>3O#RalJsn!=jMY7LD8oc
zb(0^`+LI{i%}EtdLGh9FoJ(|lD+_St_I8Cod;H_9H-I{9fF%r`LJpOi>+Fs7eD@N~
zFp{^T_}zE?+Yk#|6SyTFk}eU8xCT>jw{OpBveGGOaYc|dITq-8FFk*j8?K)t)U8P;
zhZ|nL_y`uOe5vGJfcX&HWy49{Dn2hm%(O~|&m7P|1Sr?*Kjj$+BVySE70`F4h3MKQ
z$E<t!Thu|T$ULHlKUyav{7KW7(q0)aTQo@mcp{7x-RJp<$8(+j97%3(6o8bsGbXaW
zJ|Bx}`v_AO23JE{nt9)-@c7YWbA{Na-wF|{cvNL<&l^er_yU>QQK25nH?f$;@`H_x
zavaD8Nmm%r!=`=b%T86?<me&41SYUyHrd>*OjEQbMy=m-l!MCB8wzN^o#>8xbbt}=
z)#m&9()rHNKwWQ;=#Uo}a4zBor{ka9IF!Ph$h%fXdk?jGKQIOV``I1Ja)pk}$&rU&
z6ocdTl@HP8>$2c_^aJLwxqZ4FF7ZfkMRKJOfN}vc2McbRi`J(E{(C8hE$f|oz{+)4
z==(@%I8p9ml@owKD3w4(q9_5v!*v+$m|eblguo#s<>0-0NLu-nBNQGEce&#sA-wee
zd6<5Dp!As)K?Jr0t@&npDpm_VqdW{22@Z$<w(~Z0;2{Lk0d87sWwJlP|IdTTOEe(_
zq9w@*XvOo4?vO5e=D6KW05a3sXM>;l3>-opq-f=42m=Po7Xu|~f;{jwu|hLIAcF6}
zZsq?*?Z4A6JjeuR!@1i9k0R????|SV1PS>RGirn5M-B}O4=0QTMHiQ9cBPA^0sD%9
zOYLMiODOrjj~U>{na+|Lf{o-MaTv^eQ3o(LIrO3BA?1c7=z|vNVS3@DwwUq%=266!
z#p!eP!8~)jqhrMX&SKFQP4l{y5#7;o0n&kEv4UvC;-Lh)i-Vu7sa&v!DDUW?PzOIc
ztmwR_S;_m4*(H#vCn9QV1gKN_4H8mh8_2v%ikDiS3`Pq9qXIY_XqyzO91C~g(Y07}
zIaT4|-4);pXgZYDQhDCo-yhNkMdJy|0^u;aqaNh{AC2Bcm=7OSxTF~o7&6~Yd#s8r
z``l7niuvivz#WIH)?f#yWlv{`Vf4}3kS6%X8GQ5Fve~A=7uaY=|B@v|j=ca~fXSzG
z(tDi}!;d~dASIx|vKW2kRIAWgPvnoEsQ}BL21(I(D6U=KbsWIlCBA!=2ELk-0uTOK
zoxyY50fKP(4N}q)MbO>qyh+58$wsk7Kgd}DRg4~Vqim0!zIPtgDa6`CovWZFA&_xU
zGuwnzMAWKgj+`Iw3xDQ9u#qC4gZz{XL+7$4pZ3pFvS(O!s-fnGQeiO8kN5%k1Ie@}
zmofipp6sq$;O;`|gb<IxE}*`ZR9hrpdyOJ4QKN&-3G`0D?lWd$a1j)wK`*}f>TmT4
zw=<vf-VZ973WE8!o#!Z36Z1&~1afy^rH+8p0gjlCY2{O4tBt90Z49Dx&Tp_8n8k9#
z;g7*(vUEtbHbOOEwMgIR_sV0=X3NNO>ueO7XI1Af`eX8qzFN#3wI5%v02`6TmgW3i
z$Z<k3<hu9?Tn#yPj7U%bER+B#DUuVM4BQ1FIsgm?`x1{I0B!+FEesM+XmWR(67mv`
zEeozO{@uR(|GLu)X+*%=FHZlKGKHg~PXsv;RLVu>VvV-YsV2X)od@9hv*q_u1l&*e
z?T+VFSIHQ4=`@YT8UWOB6fyGNcCSGL4Tp*o-qx#!2lkXQVKow6c~eYARxz3x5E_&$
zA$iD4xvcd_kz~&uFzWUl2d{6O#G-;}iAFcg{V?+|%27-CWUB!cxPDDEDIWV?AF<Hp
zgGsNP+^s^^tTzX$G(%)zoXTJDQGuT48|(uLEkSO|H001kol;VwBmQ+S%zE{#)Y-qi
zb9Jn=ZE-JgU~F4jn!w}IBO#tHOlUn@V4~ax>1Hd<qMRFVpL?a5*4G7ch1m+1FQo*G
zs<22@MFmgPn<UiPq%T9K%la6ZKxgLbAmn9B%$y}6V8{7%u1;!=ZN`p!y4kEVriJ)=
z5FO{7xVbx=^lCndW`ZVzoI9-hp_pXAL26Bj4{;S6BFpuQLG2KDY_-AGi*_=aSCK>F
zBj$)+N<NiYy1*$SE4t_v)H6R4kH&M6cBVE5_f^f&fz*lH20Ry)+$(I9RNBw1TP$vz
zH<~9qQAwSwI1>;2lW!dzf9wvK{(gr2P(lY-T<!l9i=LD?-kaT)3{wnh;TSFS53Bmk
zn(VH(d#TzeEv)<SV>O`a_>UlP5ThvBtr22z98RxWJwD?JI+nte0o%pXn2S+)4atn7
z{Kf%CuRilS=Qdf+QnTNT&k4mEhwu<V?evl{`ExpqlSPxoGK^z)BJxpRXn1D?`)feI
zoRbrn(saN!*<M#s@|2R;cFj=fJyUOK@x#4R@|$cn@KC+_J3xZ*{59~`!1vv@VT_9~
z|F@(WGUXig=q;sfGZ(kK9RkL}Ngbdv?=`-x(I{?~)p=R(oL={hici(&xw+=uIirbP
z$DeBzu8wu)*d}scvzc1waK3Yoi@+*TCU*Cn-pKU(F+o)XN&s`E0_p$(HQm^Vqn<AQ
z`Tj+XRRRmq_1bl)Tee@}L8#U5iq?d0*!=b5d;_hPj8_V%rDGZqb(?<*py|~~o34)H
zjSgco5SZ8SAie=uT`pxM*`}bjJGoH@BmOYsu?Gw(hb{M4j5>S_k@&7%&B&|X!8Z<#
z^0>6z;IXXqXaKnLbTbTgErZ<TtvHav>bp&hLS_ENI`mJb2~o%Hey*bSW39%kDO7|r
z^1Z>rHy?(c!329M8j?eFP3vz<7lUL_+^l||9p~DJlWj#lKfyK`c`Z}T^|re3N&$cI
zC-hU1`=KH;H8c{QJm&Co`>Y{Z;dI%DiG~cSK|2N*7uy+~1vSKcVl>{yWkz76RJO9~
z#r{LtD0H)G@w|~!-AZzo7DkXDxoO6|JIotg(_6uSvtT=8VmS3uc`mKDi2BGB_a*SS
z`odnr8dIHHiwSA#`csKJee7?QJT9qnRYSGz&rxzaj5lOZ75+|wh}^=4WG-HgKk`I%
zfa=uZcfm8JrM+)#2^Q`+GARx7)l8vqV#QLUI=re|$fKwUY>|7lw@lR@OUrL1Cj;<N
z!BqaK?6btL%XIVc6dw)5xvK|svoL%$sNE-UoR#ek*&6AZJ*%B|Cva+`Cbp$&S&)$|
z?a=6>RSDc6wrq#ErjUp0Lv0eb+#fB2I{YVO0g$GFK7UPXs5x;sHi4^+dGRmkU#axZ
znKOa?!$8LuFmLxS?ru)<iCZ;OTI03`9zOT2o}n2wt*GN{r(BL?{Tqz29|}0$8(>0r
z!tyo9Pl;Aka^%B<wHh6lx(HhY5wYK#uZ;ix;c2jZC}ZG^k@91HVS7M^*qjxjCFVIV
zVbjzig&;z@-i0VyK^mb0NU59626uu>U-IS;__DrVvn>bwPh^t934_IJ)eSdRK(~P7
z6Vi@qprh^)A~srZalvll&D2mf^WQ2!b#hz&Z5=L+Fv<jUM5;A^89h)dQ_0R>j+re-
z=Ra8{dPogb30><?aEjA&vuLfQ-Kzptq4i{9b}uSm<_{llGyYx!iBC%6i~TmU2mFxk
zT+B?0N@%RRZ2J&7CP07!V?nva6@`dLkn8pRo{Lv9k3ibBXsdTO<8;q*rPu!GU4Gc`
z&yRPKw8YpC-U^(~g^?ixi?>9YX`sPyj%Zu`r#&%oU^HmcXMb=Pq8<P9ZK4Y3DfMI8
zCst4chqW9qcwBnw1v*0%ANgV>57LJ>ZVKX6`W$z*9zW~4=pCdGj}Iq|7oS)vo5^|J
zK{H;t(nOO8#*v276<{D`_NHOM3<FG5Py@c|%;E5<3@IC_4KPU5BD~AQ^c>s;vYUjB
zHDK7(RQ6}a41+)KGdUhC-$#{w^?68m!`15_DTd<F)#lwr?=O4v@KLK&*(>}_KT=`l
zz+d+2i|rv67>?QT-(KU$P3c<;GmoB><lZ;4qsELc0S0Nq3m8O@1P7~OqZa;}t$ubq
zz|r}ow0wiqUze91?f9r4RQ?sTZoP@hFr3BNlCA4UptK2p-87D!OMsE3NNAJYuZCU?
z>BFrs$^hP#W!9F*kdn9efAS#kkb&Wl7W^UCi8WDfrQKpmDq@LAdTVS!<PVi0i6=c-
zg({)6e#&T?m)lye7eudy_#}0K$F=XIK96_7Mh0j^OFGy?Vp&F*^A6pe<g9LRSM%(e
zE<eb(98S;zqd#)tmMNB7YzDL2%R{tZGS8QEjTtUT1E|bMdhmF%Ao_x??YW7-+yGSU
z{Z61S2E!9zbmF|n`ofq^Wgw-zv)bp2xg5pi%y5CfP5hv{+fu6x447*;)?l;a{!}CY
zQZJX{=7%P%%w8GXiNbpr@iac%Ja)^Si*|o#IqhB{NZDX&$GS=wDiG5|U4BRm)Lzif
z-PFAt)BcCUDz_28G4{uuDE%IZ@KZ0I{e;ghpth<@?O#wTmv*Zv2wO;=hy%m(OVPML
z2I}A^le={41dMX4dXgiAZqqP5EZNnFfg9?cZ}9KN%HkUzb6C5VX16~A$gM*eWM8Bq
z`1bpB@@WPh12r^^p+|#Z{GxdU677<c7v7C3MyaHw5)U5<l_u=EAjOq<NS{DxP0^OJ
z32zHA<Fy<!m@wRPg2KCj`Zp~Jww!>?nus(ef))w)03F}R^N1XBIA1imFxJBahdeo4
zlFiJ`vji<1chHraDxCP9pS*dV`g-@0096j!b#qiG?yLuy^UMhI9Fw_mJ-%$DzR|ty
z`(X5hWAFLV(cpqbIkX0M`Uk$Ot(Va%$=?VTND%emzpoXntkb6+q0_qZSPr@u$#H#~
zc$soAoX$3;U||n)dFt;*hxTAd3*8|tq~c33ZNzjmFjEo<_KAf*p9;kM%pL|;#J<7P
z0N)iC_h>TAP%d2wAV^4QY20o|99QTh1R=9-Fs;5B)@X+uGf*gO7{)EJow0W@Y@S#R
zYb8vB2>Gq@b5Nt*b~nxryLj4B?~@V20Jx<-g)<IH2M}zn&R(_NZRVl7;BL9MJY)*X
zUsx{6T1UR1U%0jp>x@-}>j0}ylw+Kt(&!zS%cT%Bq?@(Ipi54*d$HR&bCR>U_QTF;
zPkLzr3~&E#&r4YJ<dFu@s^yG^!*5e6IN#ws^~g^z&2e$@L{lV)oDdMk0q|o8RS(_i
z{`Z+*-0yJ2Ln$Pc*h0AVACO?Y%X<8y@)JDym$1NB`LJ;AkxArR7vB5QDr}o>&g;CG
zlTSOcF#V{WBEyfng0?KDV~1Eg)EaMWMkkT4H1<klZi?=xKy0{u3&Fw$P>WqlhvD!R
zvD2_v=lJ%KA=*{zb?$a5I}gR!MF$NHqe=oI4gfYw${iPetYQ!5jN6}Oy|b<CW`XQb
zi>H}#5#8L>W0t#oks`Fep8$v9TbA4OKAoY1c0FUPO19pHGroU2F=X`#Or32e#$RR!
zwZsu!6UbKq5StASpUku(K5h4-#+0-1vLOyO_i3o5;q6eX48tn`+Iar>GkXl&+r2~B
zM*<Pf`e>I<LW?cdFhn)>t;ah}nQy>dM)qE_?jIOLi{Gue(IWR6JXBcS`(7XBr*_67
z%KP6J@_6wh@Rc)n#jHG;FGA48P7&vXi)+u>AlPnEb-al1`Ck!s+wh=Y(&W$&`SC|h
zbJ|Wmp#1^up-BIaY)lzWgD0dMW5gn3GgvwD$Cjskk7Te%CrSUb?+A5WJw)IsXLlzI
zGXJa2YC&pzl#UHQj&d6#5Oe4g_6T0>EJEzGF!cM?xpnrZ$6eXRVVlS|IRx($#DsUd
zB|D@!ZpnwCd&^Qq9q)ldcAms4-TG*NiY}+@<Dg-@TLA#D&ak1^3lJNUMmKjfNk}9a
z*e=*NTy!DtcF*;m!MOC+dUDoH;RI%R&ODQIT{R*HmQO;YGF>>MA-C~l>@F>BLMQQi
zr)x*Zam?!0HD4??f%xR)Qxg>s@MM{8aZn+S4HDwbU1I8jCb|AN*w`6+I7RQZTM4GF
zd}r&<^*#kNRRQ)HwvF8K+Hnv{^tHj`>471Zi>=KPm8Tv_5sm&H|GRJr%O5a1AFw{C
zXkJRe2256-?%qRa*dPUk^crl^e7O*@fz!e(g%U<)N)c0o64U2$prT8!-`rTyIlWug
zTNt&%K=mCBV1~(1@}!0zuMH14&XYoaeWr<Z=an^6D%n2CxMuy&4m?Z{Twj<Gc2mxF
zV!Gf3WVaCSG2hWct90`j-eyD*&!$O?LJJozg4xR|^6vHRG%@}Yy@DW!l&QlO5;f*u
zcArw|0KjzNlx>g(kz{f>McblTdZF$>^)aZe-#iS>lw5orCi>`|h#BRyih8-dRW6gh
zOTO$Dr8Wcrkv~T^K?PX7k097}o@TxmduJ2IjH7Y4Pg6Q$A<jp*e?xZ+XrN*Fai+Sp
z8Z9}C^r8R00w&3biG5;OJO7}F?h0D_Y0-q*x39cvU8_5k=gOOI1MIeG@{QkH`Lt#~
z_H)-jKTLowObTCj(q9~5U2_4b<cOLu1}ETnDiMAl$<TT(^S*kAh%sO1=IO!L_r(zl
zcl|%JADmsy#neiIne6<S>++_pI#1JUgP5uXa4AM9-v5TIW3@1M4@PyHGWAP*H<Ibk
z0*4rzF7jC`*=3Pl5cW9MeV+vTZj*ifaR<C)_$`*MxXpAJ_mp>ccQ1~p7`Rgb|LEum
zz@Gta7LEu0>Sj<hvnPkk@u^As(-qS2m=2VjseMs;ljFuWdaXu^ANP*<g%9kQW%i=5
z(!?2@F@VVzPAxPE{2fahL0$|<&VNy2rWc{!UmG|MVlU|ZNDTzBRn598q^OjX&AN{1
zCxVF}C8O&Rq7>ep{u($h0pPXeWOit0pCUU>Bt@Tzwqg4>@CwJasO_|`?py=uIq)YU
zu<4>&p+2>%;ZvgyyW1-wi^<toeH9${@A1#5fdF?Q2QY%^!}ZgP?jkR7KJ}Ows{7Ak
z#1DB4T%9tqo{aV3j!wGNiPR2U7>$<Qz695Tm&kL6u6ggOrLV5cw>-|G1Mir@Grck^
zgvb~OrTAB&P|4SMeq3ndQwibwM^AWn)mAs8W`^6zxRd-|bhK=N9{Ss4ywu=~YtbUd
zO()#3+}|$SZ>9QLYNkcBg9pG>wLQ?MSr8Pfr-<WAcox^_qG`}nipR*-Z)-r+FL>&t
znQ7L=D>^?Xa9!vWMx@2f2`C)BTlO2?O;w46`cbU02C!DE)e6gJR0UqD9GpS)-<JRQ
zny&kIaiKPLQ?$%wOLAuJtNnI)Kk{7sBVzy4GQX9@$hhyT3gVj=xwHZDYOnXci*8UY
zh7`;v!+%TS7&et;N$_+1PBIcMF?ipx)#}*F>AgJ}b6GUq7<W4&TehMu(GL**CJM6y
zx7jgsN7|u`ma-*4H2%uzv{U%1lvXr{vNa#dMr0ggC+0i)w9yFnHqa)!es%t8-`9W3
z@uRp0&8d6WxzMx~@43$-rYj2+!wOODz^H`fEW)mY=;lS}9a;AOs@$A2+kd(`>gGo$
zle&!;rk;!rJ>%>N|HCyf!2XKEOewv6oKeWp79Z5)r&vQWM8tH>#lD>h)oYV)^a)VU
z5?^0&3zcEqu;}0*-wNuPb}EUE&2$dwb57meU;IWIu4Hvow7=e8J=zgUp4I*B>27mw
zDv<ksV*zq8U(f_)vpHt(q`0hj{yv|@yTF9LxF?PIGs3pzSgEqOH)GGct=hZG_zkN;
znIzXnkCNoInbPuZZ$$3ktChJc9pGZQKjJ7=D`QbNT<0m8*3Q>nH<lnUim?!xU<he?
zN3(Gv>C@!iAVmsQ6{c@GG46a!SWi+F)jImr!(Mp9KYDgY!s^ZK){v>3CI&k2NU5uN
zi|w}Q{d&S@Cx(&3w_XF_jjv*YGij$6YAR_7rht_Gg$fco?dr@lD4hB;6u4?#z4cwP
zefbPh{=%%Q9d&JaQff5nWY2X}qpgf>BGZ1mIC;H0Y{V$k`K^_zXj##ugbN5utN7F9
zv2G2lGn@%Cbz?txH2x5$X8Bv2-b?Z-?>W^OQfLyzE~-y9D1A`i8--a|kPPM@``xe0
zyLC36D?D+O2M1hol+*!T4_>jKeR)#zve9zkxOXVfJK-;;bN;B`s(e@M@{evYMzf6e
zcR|_=otV|AZme5Ia*>k!Ng>&=XJLD{dqQIVs?iQKGZ9lYR@^N<Xw@x3Mx98sk}hE>
z<42hXD(a%AE)3!xVyqP#ov|LDvGTC2CT`Z=c`<0z$o=T=uZdx5u)6%uo(}nI<LH=R
zpzlE^WnzB>xd+^0+e?%`m{ipDvwOet>5E?`G3oy&KP6ODP}v-xn=A5zGNFBQ2FH~^
z7t|3-39~vSro)#_Pi?Wd<2bz3UYZ9H{^KY#^mSjSS&vxsXlo}HyXhE4o{McDQkJot
z91SeQ=u7NMRG>98N*8BXYBST)9BL4oRV=q^T88t#_!R|s)m>KznTexCPqk-rhZo&x
zScxSy6vGBMORC91$%*PUdR310Ghx?2Yow?<W@tM^-ixQwN@y7XKJ(v%_N|GA@cMAF
zsKvDKI031Bw?V1YIyYX;v2gaPR&}03Dzb716lY)Be(}_+GM_JXGx1u7F$~N~^*BP=
zL8EveP-Lh+fB6wg#N?xyT0NU%4M)DmHe3y3zXSFyQ;K?f2jzu2lDB$}K^cJM^QK*A
zaYt;U(x0Di;}3ax_R<witwd?bX3n9bG5%7zm=H??-ik2l>kx)<n@RxqSqxG?`Z)1R
z1?xMEeXpv405r49JjPEj8JSe_7jyB!13tFpos<@G@H$q~e~oy>Ln67cA0$%}k!HIt
zV`hJ7zbh9O^&p!G8rLmAON>>kG}q%G@^R5jsT_0Bjs6XmAyyyZM;5FvmB88TRE!BT
zMm9n6x~Gd#iZAie;Pl~ob}*5)+RvCO#>UQy7Oc?V0oD->Bb)^x4Qac?`yw7m)qog{
zn`H~pN}fq#Z~ad6moJ!$M|A5;K4itjnHIpS0RP!nWp9|F@JB~#s&3n?jvg2sDXkQ=
z-0ix0%gnVLNxs`pW(d%z#s>O8-DJCT%Fmqm0fTmu#HWK8Rv`m|@0#%keY;<kdOt)Y
zJYS|yrBOP;Zl{y8BIUq#GqynbcR$vusmNQ!M$yw{Y0Q_kU+22oe{a)4VBD=E?cNQ;
zE`gjC2d_psnpe_0yNrp3!9QL=S@-yUbZ-DCGsvT4z*9l_u-Vm6>P6+CuCD-c(55bf
z!GM@>A9_Xr%n!w%)<1}XH`KhEZ)Ha1Uf-6zOCPlRIreXMPt@~UBaf%c2%|%XUO3T>
z79+&u8JWV&a?NbPZULjj^TS2In?7=M-yG4;LW($J1x`mC)W!fK?!oN~($Q;dL1V?I
zh(I2L6Bzo5{vy3tkDEu4*%8Ru{hob`S1SbD<4NY*Pc8@pvS-B72hi;3MLwl{uNZ&g
z1H~_!i^Pi}*=JMPm$OqFp|J@bMh;Ke>d_c?DbR}Zo~q%&#_7XHv=Wi803VPehbys&
z@Ao9?_2RguHXb}^_u1X1ce(XPr3`tsm6Nw7U;GU1@LLK=8<74WLFE)%790Kwpp$_S
z393iKlRF)T-?lW?F^5pDu>vjoZFC-2Ya+7?ucNyXH_UHX0U4)t0`$N&iI@Z;nL_`0
z*}9xTjlC!Oq0J((=2qj5grmnBG&jV?@=WXN0m05Vg~c|_F=4=9woF1%_Ej^{jVoKW
z%vJ$n<5gbJEpmW;*Z%OxDvJaPx1Rs)a*#DE2=a8XK6&n9Ro27&`H5NAXZ(O{&v}<$
znZ3gs*RJ=nMYlfwsv&ykh34iEj<9mG^O^tIa-Wfn!asnTT|W0!d)2!YcH~3C?4)1A
zbPIi-yJ9h@0VnHsOml-}tm&Q(iDZXv^j0f1>Kh-9Tg4dn9H&~C6x|OV{DdgyQvGf&
zPlPLoNgWh-)bbZsn8{+JjBhVUSFbMl>ta;a4&3M;C!95z<jGm}gi|lqw9(UniBx#~
z8P1!O)!YKHqTm5Yf+?SBf_2Du<}--*H7_7-+D3Bn!yngvT2_?vV-G!@I_r}3XI@0I
zeMMqV)$GQgi~u4*>!@FnuScQRbbs^{q^(C;`t`1i1sEo@;0FW=6z*=J&atLaba-V>
zXA^rW7{oXb$*QjEth+x4>FI3cl{hFD`obsO{sX-z<bTMZ@?76N3PYbx4!6(-)W<Mm
z&d)Ezz%A}<ZbBJzJE|!6UV!rISq&fW98ZJ%L1T~C+lBG_{*Vr<Gqwe@1&_UjNzHxH
z_hu^;aOv?|Ypny<8_FNQ%_<C04WV{&VNYsS3x>N8CE4&zF^^}JkN!?fYQDhOrxofX
zJFjiE#i3H;{5a@v)?xx82{bilWtKKX1|Bfx=`~DS1JZQRFnEWX^l&wY@&4qn6^1i^
z=(>~AXrt>rCwocqt3nVW6Q{uD_eu1rqzodV^)TD@E$mqBM_M*q9EN=4dHxumPU0d9
zBW1=}V85ZYFyZ&|zklr!S4`!kAcn0tvD?KU`4gE(*U!=2dv8dfQE*D}o{AZK{pV*X
z*r<(u`Ui#vKlHT36$vl#8i-*fnO(D?wIM_TFAkDtJ7R6HVMsx@s-xu^!)(xVw*nH*
zUXRVM;mr>@)18HZ89_4R!_d&a($DC0T8CZlqlaYSss268k|%$^g7K%5eMZ1}K}X!9
z)K91Mfu=cTIuVKC+lgS1t(yS5Yy3x9*%Q%Mk#|ZP(EVMBeYcy`=gmsG%X<e9chYgy
zB<=Ld@|Dgpk1A>?9T&Mjzva;My>r?OV_)3O5<^IZN?8z8p2K&!Hgku)OT+Ft@)Vrv
z+fnHLAUNGB!<PFt+6(7l<ZZRN3tQviiAcG&d{?p7k<UQJ*!PwtgA`jmdGJ2GGTZFP
zhg>R_QHc@&_mRD!)$Z>l9|6)`T`&(j&VBBT#`8V+CCvm43TGJT_hyiY&BB0h=b4{P
zn{gnkANUhz&_WeIzHbs0QO9G<6>W~FVt5b2W+1L&U2pab#B8_4z5!=f=j?A!LJvC<
zw)f+L)gJ~tD#;9Si7I>M#01mgI6xOytnAYU)NMf?8kfl?JdpN0VJmk7F)gU=J>T8g
zF`oKunKf9LXy^b7q{;baUX-EP@RF1n<Lra$Ix>16J{Wb}Z8qmb#JCJswmKFufrHbJ
zeDz6)Bchkc;sP$IJ(j*zDkbO~-6szXXaN)A;=u-V1p0JB5#20T;T0?2g@ASHk5V!D
zppt*@5Mx0QiudJXg-B8QV0{OUNs;j1w9-AI*Z<6STc`r?j4s%vyxyaMk)VtgVMK6H
z0-TvN!d&6)u$!6EJ@7O(b5^_UUAk%`a9cbA^P)@z8?F*6npC8l?Z$lLb23=*wNvOn
znXdUo*<!d>_Gp?BtkbINpGUC-OlGWISl{tMNCN(v)qAe4)>h2Ld77tj`H3?bL!|kl
zRKwLy9%u@eB)k0Y799#~YPn*c(jN>qIU5n&b`KL$w(CTF*kcxI@*?S>i#lm>WHna3
zm%$_!m*02Odz(TECQgIA&S>d$l_`2Yivy%~>p$`AVd$p`f@VrtIMIZR^0Au;Cu<ri
z+ZE8GGBGUPiRuo>+*Kot3OL9~gyVbVZzx=>b+5JY3>tRz4)?S}^pniQiWFfLINsuE
zn`Swx<!qCFkv*H@kOWPaBnhcDaUKMTGRs8Yi^uQC>}6=nHp1bGw9?X;1b#df`3X3u
zs^!j?%8xYJdOMY5jlf)qqTh4$JuN(c&0?PPELKRW#aR@@8H9xd#^7hl;%m{{wyWpg
zjq!+TT=5=*EZaDUvcV+QA3I)u#`cwv8N?JR9b8;2$x0)LI0CS*!E9+5{1vS`siQK8
zS0b=-ir<Otu`?Nr{=C<Am+gJ2ZWKJs1Pwcej5SB7fp@QRyIgb6bl4gd6;r+f`7euo
zM>8k>I;NVkoQ^jK%upd)r|6f!jPffmz2WHX7im6GhSwB6+H0?i#)CACbcI3m|1g<K
zGC@O*JG1dJW%G5_mB258{IS(aCNuK5$Tw`wJcxV9d9jP|=WJgg2`Aw+jOJQgMZT;h
z7H8S=RwT$kms%Mm*zljBXZh5YAUfBQP6AeGXJF2yD~&Bl35{S_<HJ3Pfpdy;7DM#c
zCjSIYklb=xlWhjtWy8O$algVK=_$_WnjxY9?1<7}-XjdqfNp^Yru2(oP8i-IF78*~
z0;GJ$XHbkyf=#n0*q+#WV71%_HSS`EG`&0P8ocwppB^x0deqGVovgOgMw39WL8!1S
z?4rjSGaT5?dJheBe}>hQ^JhAl#|XR{IqsNClLHCA5kG5?La-nU0xP?bebszy<gS`O
z1wmlXCiS3~4-BJw+=pPOabUmU;A#%+M$z{8&}yjv7ff)~G`-Kv8IDnI(VGP%V@I*!
z@>GB1s+JBikLY}W+}88k7gZ{I<foJx)Qz02CT7#leR6IIqL8#wo+$5n@1BNTtM#1*
zTK#5(XH_LOWuAf;Nh8c6fe+9%D2V<(L3-PIkUwaF^xTf57ws(K*e+>rZMG)%9x%%1
zFGM$9+&m_||C=~_P3Djl2tS8>4tjCE(;f<9aDuyKVVbVE@gVvR()1jXAVGZHriqP8
zOJ{E1si{;*2x_+M{dCK5ckNT|c9yxs1)3{lR_di|dLJ{<_4Ke10BG*IEoNFMKLU(!
zE#JTdxoT!N?nISEdo#t_^2ZFLoRZ6rxUg!tw_``d&hf?p1Udx?n7{Q*G;7E!2J=&Y
zY!mg}Rwv$PVF2CZhCvm1`6c(F8CS!6o+1d5ka`gWKq{V*?wecm{q!|pKUK-@JQ`Rs
zmJ!ELcRvxnzQ*1m<7)4=u)qPaIF$91J3Y+0$vve70#em#-`aC4vtdm3^{w9$GRozr
zFf={}muiZy0v%-ePQ%}`57Q({nV%PTIf3n~qd-Jc7uD7XM+vw5V|Tu;A#W;3j`#wD
zU`68ur9_+*7BG3Z-fxo4?a0}xXRoGaAlF605%NTt3PS?C2rYTrnCo+xW9BQLjeR$D
zcBdhMAB6_FnZ{6$mR5zmV4SHBCwN2o#loj=U@7G^nWGq(d`p&_Lx6J6OKW|fky1M)
zb&58lEV0&n@5;I_3!3)v&We8ULB)7Mcajho<e~N<9g<2hd09rk!t-bLN)P=IQeYW_
zP|`e%LzRJOt1s~Pyb%kIF}}=S33vgZ#?_sCcP}_=@JW)H>!MUmZoN2od+u6s|LXVL
zjW|e)?b2kU1O5!b`Me(`02owX5Di^pTnyfhzY?)4P$+?(_Z-Zj{6WRg!gd_ch-`U@
z7CmhQfXUy5gUf{<xA50a_G(<K)h`miP`b0}e%Sm%jU;pV#zU9rQ!XPT^cfRCeJdpX
zupqsd{hi9vlmF}H;gA4Ku2S(tq5jP0iM_2B>|zaR$j~zXW}xc&JO^}D4OH8HkADjA
zHT@i?c`%#IpSMXix2<$<n;|P2K7flL`v$KN(}20SHmj{2+}xm1Rseui`%z67LpPTk
zi+GJDyZogZf%`u7Iam6x@2o28Sc9Nbs)ga9ko>c=@US=VYX37n>RC<YxnhPVrcuYc
zpV3>GH$AVO@)0q@*kbG<GI5e#tV2wo?-aTdDe2Xuw%i&hEvtzS1eDq~Kk$L>r@xi5
z#JLXqMdx5~Bq|4j3WU=8{yuq5=kkNB5PmDgq(5Svs4tX)%kdfmDF66%ru=FO<r#Ti
zN9)3Oo@1r2t*rtsn!XA7B$<~WCH>@a0sP~I8U?$M!}8)@rT!QuV8Zok+uY(PJ&^c=
zC)MS_XqQB*H0t+yOV#C`KNLZS<gVbjdi*>=AEf~XPdx#+xnd>EXsa6~PH&8WAa-04
z|A_8es=5}68926;ureaH)c&G!lMRl<sOXWTa%cM|CK>{|>2Ez@!ad&tGj<l}x&B}=
zMh&K3d-pYC{w!vg;R@>FZ%m_9^VC@mT-fOIqD{U6^_C;L)SkC@tB#>z#+88Z*3-ls
z40AXtCi<z?**kAvZsYRy5TcOw<A2{*TyeF2$AbQ@=qK9*T4K|dRvZ*YcRs$`r@qf2
z!_mxIX%5-10+m&3k(#t;Rg2*&M->}5$)-2q(lu7=-`94QCd?`r?41#iCa(W9`FmV<
zW~AWtoN7MI9%8_%@_5<s{x(sj5?eqMiaj@Wl_CAtZL%$EYa!9~)sfP0^=XsX9?lyw
zP9<i)r~_s~T0a$G#^ZmavNbv*N`TU#h`Rgs<1SvjOoe=gzH4bWV{7f_{>r|bI7FZa
zE1P6Uc;c~mhH~+EdxEt;qd)w!lCJ3dB~V$A0Hz@4=-r$uyTQT>0<br%M#AHzpVrm2
zs{{W_tgwj*Vyk!kTl^BlKS{U81Rc&NOujlBE51E_?RM0BXfK)xB7_RS>Zbq+&DrEe
zR3A0g2AEvXVj~v!Fe+ocDHI+t8hB9Ty|^D5`YFCv{GA|um5@s(R&|iiq(}5lolNkk
z>RUB%%g;c5mC}HqB`qH8#m`s@i!qjlSkf#ACS;(qy-=r>EBW$XdPu6xz$|JB%$Ask
z$8;sSuz4_$x{H}j8WR#F2N8Y7TA?MIj<~Yno>u?lRJFb?6RMK^;BH6<?8O(&5kllq
zRKO>I9XpnF<Wo`L9xQp*lw6-0sya@@Fd{)2U|+J1=^QVLj8j^DV}@*DOd$qusuR00
zG%$K+x62IQ`}o%voyR?5h6aRpo9r;_tXu|M&PG_TME`OfeUQE3%*+26p;$uK_`rD2
zk_)2p%9)5bt-wwH9SArqd4h{G6ZX&#@9c{x(&}DOr{*qUdl$wEBfZlZ$2K31yES)G
zn|sBr**fFyN%7JQe~m;9&!=AoQ|;eRsYi~DWeeGx!gYRNX_w8g%+Jr9z9Vlh&ZDx@
zq0LiHX4_sBgKn=$(nFtD6a(S#@hZg=jLU$QJM+M6(MVYi0vPkb8kqk-BOL$V0GLni
z1Z}Q8OC?1Hl}GNle`AH%;CeI|;C7Nb)<{_$h(woq5NU)Gaok-tKm=bDg%Z864_%pT
zmD#?HlZe>M=8l<pH(ilUKTqK`@(V69nTo)P<Pv;x2k#7#7}%deZU4&c*f!M|S?7u6
ziIF@{R$H$a!cf33a05Z1IF7+)8<@uG+}=-Zs@CQl>Z7iUK>u1bpYN`J2dTKo;Jy=E
z=5U^i!LfxuSUeO)wiyEo8GaChGymz=u+wr4+G7FLE00Sio^bbma||FzFg$)SOXb@y
z>a2y9h2Y*{OOxhF7BiK3r|Fy`sm|wC<#5R~K@=)Swg8PN8(++{4}rFP*nc%w5G_9|
zcI7d$T7~RU`+(qF5Wh;Mc+YT$uX?RHl{%P+bsPkK!`L2n(Iv87C{L_kT@C5yH-HKe
z9&DLG<8_!<$K&mZexfCH2YDS~!JVZ8M<QT^eF?gwuECJ8RzbAU&L??fgj^NI=F6)h
zqEuUQ56-dK^9YilPLRMeoG`?a?|Mgb{>P*FcW%c^Ljw7N|2?N3P3_jq-hvJpXWW0I
zr7qQa(~pAg^6xu36a3DD(KF4dAVLW85yY0m*y!J&9T%Lt<iG|Xycv=}8rvjd6D3Uo
z4b#B^w+oV6KzhYM?5>(d`tH%bBqDLP^x}yuj>=tcGs0|2r=BKZ1kqiw4JndP@RaW|
zC>r#EEC2hRuKv6s56o!9Z{Hz$d&*A#&I5vAp&W=Y78Yb_fFSUCz_JT)7B{L*Lx2|V
zzbWW55em0tU^&iz9Q>i(`{Rp|-*P9c%Ds*s0zzOXs=J2x@gzKWna?T}KuYq-Xq-;^
zqwyH!EAQCK7mSYVF(LuSxZ7^<kn&#}VFM5E%2yy-9MR%AtZ<LJ_0Wmc_LbrTOGqlg
z3Nu*#hhOIzmKgaD@93lawLg_31Q+?Q8HI!p0<-5oc|<O+xEq*o1m6v7QDPy*epg=s
z!m}Y-rVU~1UEnPL=LrIq6Xt8&4fS#3YzTwx`i=q47;S10HIRMRy8x`q!UPL+h7aeI
z(Rf-<CYlrSQb8oX8n$d~@=+`pqnb?Xx>B^i{BIc7A65<SFM0^=i0cjp?!u>MS{U(p
zlNbNq2ks7u=L729n4fb~w3upWo-2ajY^SGnR)Obb0R|J#9+$RJ$@hSw-BcLDilX=(
z)I2&0zEr(byu;QvotvQnEntN>N2JtdodPUw0cnB{a!*r1KTx3XYO)~-Ey2?@$I4)H
z5UDMtVu<~a0CSh!bB4)w#?}5l=l+N&IJ7>>GkJtKnOGO#mr~N=WOlb(fM<gOuu8TD
zlv`5L(v;*JB$d8xz@gP{BK}1GE86j{F+2S}R1mPae$|%D>nk#OLf%hSfHa%w+aD6Y
z6Ii}djfDzzIWL%Fz&U#POjPD$S0KB*Wqe-hrTqUEr&~Zz8-34}d+9W8=_?2%ZWk}~
zg<yk{omVhjF#RpiAvwe7^VyTwSZ>w1UhI!F@&m}-UT4Ps!_HW6(<l*7H@LT+swJr)
z%9TGUeal)11?#K8jnGv2em6qd#|sQ~vB3HZQotUw1@-PJNC;}^TP6iqPY~Om*C?kH
z&jbVUEp041WZG?W$szyKv99$S*2RM%fz=nyJ;}mO4>FfO|H^X$%RqqbKKBk8Fi5yl
z(%7D~^v2d(_PYei3}X%}1E);I`$xeBNpK?m-5Q&1a1Y-#yPzuA3ea9_fS-AwNx}qK
zF`g2T=$S{nDH;Lo-w3<G{7+gl6*L1T%Cody+?}gQ!Nv7Gn($@+8P5i~(`ZBntZR7K
zD1yLjJwP`Mv3S4L_L{5!i}G|T4BRh`H~GM#r@qL-z2z$>5KFg<TVp$Zhg#`my|f1h
zv9*G^+JW#AuqsW91gq=J2Q2#P*S@~>?+)I*WV9p5%)_5EA)liC-(IEQU7wLHU$gp}
zb}nd8@9m4G@fCbZ@ZwD)tBNDI;+4u^IgDk0|6Ga@BUFhpvg+_wN|fbB8g$gezjXJD
zAjdK(IR7gOd&`w}!~8itCMmJvSF-3W8zNdRWl1y1kO<0BO2`z&J={|-XaX|t&%}dy
z5)!NVh$-l58AW^1@wl8y%l+$e<m%+*@l*?8D7c%_OJDyBSI6TfKRum^q)eq>%@aE(
zv3}H}CE%mrr<L)AUQYQ0+=M8^k@#ZHkO1eb78s%!<j4~StF5_Y+(9>UvV^Y=L39gP
zt7tC!t=@}y^@hosII}=b>bcq#h?K%%O-q`!-7V3pscZB3^|%5AFW%WoT7H9iSBc#y
zFsmsmz+_~vG9gV1?KVk4>djLFVD(6W7R^n&^;=gkYp6vF4*df3YrkVH;AQ4jo^{!e
ze|edsO%asYo`__3!deFJpi#`+2cGEUmb)`n@LhdcZ$NfvtR~B@#roe!XzR%1DmpV4
zGz0Afr9w}-1HQ)pG4MG3$viV^WtP(Wy+ity{i4XPUSD}0-_OjS%)Q@Z<=jv4Aii;?
z(E*eG?f?K!2nEyLWT`-<4Xn73fdsW1{&UlfnM#XBd3KHvEK$4*tM*T!0}0{-FTtp7
zLcS~hw;5PhWpPmNW{iDcYodzgragSZq*nX#s~<HKUUF`!_$$l6@$AQtzToouZ2oE_
zcy0;W;K)Y)epPlwi)<qG(FMC4C~=F|(h=PNB1oy*mZr=5$jaCiv74K#tf>cm9t6RW
zf3=p9af8x6!gZ~>`s4ZU3&!Ucs|2qO^Gl*3I$ENe36CtpexXNN^};eW2@yuQa$}`I
z!_4ppB6d?RPS1TCxpm?dph7LFnR^5{mb`;UOewU@LW6s$?Apy#E}ZTvy+S9UZ)cOB
z?fpj5KwZOV&R<hO9&A6=xshe{yf&?uu^H-&BdVN-Zs^!vLf_<uf{-2j>jP}#gFU()
zTwsEPt|XH!3hV4O<Haf%D)Qg`U4S;!*Kz^Z<gZ%iyza{QulvjkeLnKHl#eaYmP>8L
z@u|2u2^8D$fU|`TcO$Ff9{?*Q2Cw_r`?hFxO8*Rha(Rig$*itMHG*$pj)l}!H+4Mj
z;ah~wctgS&rEh$(J{5U>fL_0|jGb()oZdH-9N&ALn)41~FSmWKLHm@=G$Rh5zTv`(
zs6gE%vmK=I>8m#fY$NXx>$I2~B=kBZFSWvca7w5PgqAbcNw}*B_1No73cX$~8fsWS
z#6Ssu{P_G-Yf(NrOsn?k@Uw=ajp^%_>-5&nO<{sPnr|v|BlpD1St(Y^nfE+7&Va?V
zf#(I7wDhf^&!kG;)1le(b&GXQ?;H1D`}aj#*s;B*uM=`t3G!hI=PSvs7-K1OI|mjM
zD!OnS+4+73PT{PN*$qR=>D?V(6}Sqxt2I`-c$*QnhsVe!Hx#Kq7N`kxTH%%2p@zHK
z^yd&8O_Xg9w|<1ZXM9rVSnpU#dRVSM{>7M~MBP3ExBs{>r*({HVo9)^{fXmCWUTaM
zdo>X=VAxxpGa?9?A>q=lH4MVnG<aFcq`@etJ4F*mGyQgC<;S4a#3K`@@;Z5yGimo|
zH~(>7C&<Jz`(ho;nGXW@Y}anT)M5Ilj@jMBw0K$ilfD}tBA3<uoAov2o=2Eub3vH+
zCunEA|1ws9o&GD{g}`NP@M0dT<o%6#5r30L&ign;#et%-O`Q|U+FvSD&>*W29<@2F
z)wVClaz5=FWTa{lk?ZaPD9Py$AA42sT%;_&%0{LAykt1Q-scD;eySxgx_aGsYtp4h
zA+P6T4X=c}upTM%C-?X@)cUz@A#ShH<8E$=SDbT-&n)_Whf~s=zF3%WCCX@h8fl-T
zA{6F+j5cSi-J|P{9ZuvjC^NB;$7<Wfb^JEE&WCq7@`C4=*zc$8PrFq!YjzB^!R49G
zD%BT?Ti`n}HDxI#c44M+Quy0}##kSmcf|C=DC93B(XNW~2QKMC?z=wLD_^8%6mu3|
z(sp&XG@BL9lQS-_BSFj0a@$J}k>78sI{i+QhX0FWNFm5rfR`q%yYh<ANYz?E8m~co
bg_wv`=;M6(gg^L)HvnY?by%64$%p?77+OM=

diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index 870be161d..22de9f5d6 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/agenta-web/src/components/Layout/Layout.tsx
@@ -273,19 +273,6 @@ const App: React.FC<LayoutProps> = ({children}) => {
                                                 </Tooltip>
                                             </a>
                                         </Dropdown>
-                                        <Button
-                                            href="https://join.slack.com/t/agenta-hq/shared_invite/zt-1zsafop5i-Y7~ZySbhRZvKVPV5DO_7IA"
-                                            target="_blank"
-                                            className={classes.joinBtn}
-                                        >
-                                            <Image
-                                                src="/assets/slack.png"
-                                                alt="Slack Image"
-                                                width={15}
-                                                height={15}
-                                            />
-                                            <span>Join us</span>
-                                        </Button>
                                         <Button
                                             className={classes.star}
                                             href="https://github.com/Agenta-AI/agenta"
diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
index 608ee943a..2858761e6 100644
--- a/agenta-web/src/components/Sidebar/Sidebar.tsx
+++ b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -342,7 +342,7 @@ const Sidebar: React.FC = () => {
                         )}
                         {selectedOrg?.id && user?.id && isDemo() && (
                             <Dropdown
-                                trigger={["click"]}
+                                trigger={["hover"]}
                                 menu={{
                                     items: [
                                         ...orgs.map((org: any) => ({
@@ -360,7 +360,7 @@ const Sidebar: React.FC = () => {
                                                     >
                                                         {getInitials(org.name)}
                                                     </Avatar>
-                                                    <div>{org.name}</div>
+                                                    <Text>{org.name}</Text>
                                                 </Space>
                                             ),
                                         })),
@@ -373,7 +373,7 @@ const Sidebar: React.FC = () => {
                                                     className="flex items-center gap-2"
                                                 >
                                                     <Gear size={16} />
-                                                    <div>Settings</div>
+                                                    <Text>Settings</Text>
                                                 </Link>
                                             ),
                                         },
@@ -392,7 +392,7 @@ const Sidebar: React.FC = () => {
                                                     }}
                                                 >
                                                     <SignOut size={16} />
-                                                    <div>Logout</div>
+                                                    <Text>Logout</Text>
                                                 </div>
                                             ),
                                         },
@@ -417,7 +417,7 @@ const Sidebar: React.FC = () => {
                                             {getInitials(selectedOrg.name)}
                                         </Avatar>
 
-                                        <div>{selectedOrg.name}</div>
+                                        <Text>{selectedOrg.name}</Text>
                                     </div>
 
                                     <CaretDown size={14} />

From c87473be0281f335643cb6d1620137b58576442e Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 2 Aug 2024 03:39:22 +0100
Subject: [PATCH 007/117] design(frontend): added menu item header

---
 agenta-web/src/components/Sidebar/Sidebar.tsx | 38 ++++++++++++++++++-
 agenta-web/src/components/Sidebar/config.tsx  | 14 ++++++-
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
index 2858761e6..54f57df1e 100644
--- a/agenta-web/src/components/Sidebar/Sidebar.tsx
+++ b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -96,8 +96,29 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         borderRight: "0 !important",
     },
     menuLinks: {
+        display: "inline-block",
         width: "100%",
     },
+    menuItem: {
+        textOverflow: "initial !important",
+    },
+    avatarContainer: {
+        display: "flex",
+        alignItems: "center",
+        gap: theme.paddingSM,
+        "& > div": {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            "& .ant-typography:nth-of-type(2)": {
+                color: theme.colorTextDescription,
+            },
+        },
+    },
+    menuHeader: {
+        padding: `${theme.paddingXS}px ${theme.padding}px`,
+        color: theme.colorTextDescription,
+    },
 }))
 
 const SidebarMenu: React.FC<{
@@ -204,6 +225,7 @@ const SidebarMenu: React.FC<{
                                             key={subitem.key}
                                             onClick={subitem.onClick}
                                             data-cy={subitem.key}
+                                            className={classes.menuItem}
                                         >
                                             {collapsed ? (
                                                 node
@@ -218,6 +240,12 @@ const SidebarMenu: React.FC<{
                             </Menu.SubMenu>
                         )
                     }
+                } else if (item.header) {
+                    return (
+                        <div key={item.key} className={classes.menuHeader}>
+                            {item.title}
+                        </div>
+                    )
                 } else {
                     const node = (
                         <Link
@@ -235,6 +263,7 @@ const SidebarMenu: React.FC<{
                                 icon={item.icon}
                                 key={item.key}
                                 onClick={item.onClick}
+                                className={classes.menuItem}
                             >
                                 {collapsed ? (
                                     node
@@ -405,7 +434,7 @@ const Sidebar: React.FC = () => {
                                 }}
                             >
                                 <Button className="flex w-full h-full items-center justify-between">
-                                    <div className="flex gap-2">
+                                    <div className={classes.avatarContainer}>
                                         <Avatar
                                             shape="square"
                                             style={{
@@ -417,7 +446,12 @@ const Sidebar: React.FC = () => {
                                             {getInitials(selectedOrg.name)}
                                         </Avatar>
 
-                                        <Text>{selectedOrg.name}</Text>
+                                        {!collapsed && (
+                                            <div>
+                                                <Text>{selectedOrg.name}</Text>
+                                                <Text>{selectedOrg.type}</Text>
+                                            </div>
+                                        )}
                                     </div>
 
                                     <CaretDown size={14} />
diff --git a/agenta-web/src/components/Sidebar/config.tsx b/agenta-web/src/components/Sidebar/config.tsx
index 2a192df7c..8d00e5512 100644
--- a/agenta-web/src/components/Sidebar/config.tsx
+++ b/agenta-web/src/components/Sidebar/config.tsx
@@ -2,7 +2,7 @@ import {useAppId} from "@/hooks/useAppId"
 import {useSession} from "@/hooks/useSession"
 import {JSSTheme} from "@/lib/Types"
 import {dynamicContext} from "@/lib/helpers/dynamic"
-import {isDemo} from "@/lib/helpers/utils"
+import {isDemo, renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
 import {
     ApiOutlined,
     AppstoreOutlined,
@@ -34,6 +34,7 @@ import {
     SlackLogo,
     Gear,
 } from "@phosphor-icons/react"
+import {useAppsData} from "@/contexts/app.context"
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     evaluationImg: {
@@ -48,7 +49,7 @@ export type SidebarConfig = {
     title: string
     tooltip?: string
     link?: string
-    icon?: JSX.Element
+    icon: JSX.Element
     isHidden?: boolean
     isBottom?: boolean
     submenu?: Omit<SidebarConfig, "submenu">[]
@@ -57,12 +58,15 @@ export type SidebarConfig = {
     isCloudFeature?: boolean
     cloudFeatureTooltip?: string
     divider?: boolean
+    header?: boolean
 }
 
 export const useSidebarConfig = () => {
     const classes = useStyles()
     const appId = useAppId()
     const {doesSessionExist} = useSession()
+    const {currentApp} = useAppsData()
+    const capitalizedAppName = renameVariablesCapitalizeAll(currentApp?.app_name || "")
     const isOss = !isDemo()
     const [useOrgData, setUseOrgData] = useState<Function>(() => () => "")
 
@@ -83,6 +87,12 @@ export const useSidebarConfig = () => {
             icon: <AppstoreOutlined />,
             divider: true,
         },
+        {
+            key: `${currentApp?.app_name || ""}_key`,
+            title: capitalizedAppName,
+            icon: <></>,
+            header: true,
+        },
         {
             key: "overview-link",
             title: "Overview",

From 034e46091c7e114708a9bb5087d435a9e71cc795 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 2 Aug 2024 16:34:35 +0100
Subject: [PATCH 008/117] fix(frontend): changed submenu icons

---
 agenta-web/src/components/Sidebar/Sidebar.tsx |  3 --
 agenta-web/src/components/Sidebar/config.tsx  | 31 ++++++-------------
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
index 54f57df1e..7c41c11e9 100644
--- a/agenta-web/src/components/Sidebar/Sidebar.tsx
+++ b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -82,9 +82,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         "& .ant-menu-item,.ant-menu-submenu-title": {
             padding: "0 16px !important",
         },
-        "& .ant-menu-sub > .ant-menu-item": {
-            paddingLeft: "24px !important",
-        },
     },
     menuContainer: {
         borderRight: "0 !important",
diff --git a/agenta-web/src/components/Sidebar/config.tsx b/agenta-web/src/components/Sidebar/config.tsx
index 8d00e5512..02ac6e385 100644
--- a/agenta-web/src/components/Sidebar/config.tsx
+++ b/agenta-web/src/components/Sidebar/config.tsx
@@ -33,6 +33,7 @@ import {
     Scroll,
     SlackLogo,
     Gear,
+    Dot,
 } from "@phosphor-icons/react"
 import {useAppsData} from "@/contexts/app.context"
 
@@ -130,14 +131,14 @@ export const useSidebarConfig = () => {
                     tooltip:
                         "Select and customize evaluators such as custom code or regex evaluators.",
                     link: `/apps/${appId}/evaluations/new-evaluator`,
-                    icon: <SlidersOutlined />,
+                    icon: <Dot size={16} />,
                 },
                 {
                     key: "app-evaluations-results-link",
                     title: "Results",
                     tooltip: "Choose your variants and evaluators to start the evaluation process.",
                     link: `/apps/${appId}/evaluations/results`,
-                    icon: <PlayCircleOutlined />,
+                    icon: <Dot size={16} />,
                 },
             ],
         },
@@ -153,13 +154,7 @@ export const useSidebarConfig = () => {
                     tooltip:
                         "A/B tests allow you to compare the performance of two different variants manually.",
                     link: `/apps/${appId}/annotations/human_a_b_testing`,
-                    icon: (
-                        <Image
-                            src={abTesting}
-                            alt="A/B Evaluation"
-                            className={classes.evaluationImg}
-                        />
-                    ),
+                    icon: <Dot size={16} />,
                 },
                 {
                     key: "app-single-model-test-link",
@@ -167,13 +162,7 @@ export const useSidebarConfig = () => {
                     tooltip:
                         "Single model test allows you to score the performance of a single LLM app manually.",
                     link: `/apps/${appId}/annotations/single_model_test`,
-                    icon: (
-                        <Image
-                            src={singleModel}
-                            alt="Single Model Evaluation"
-                            className={classes.evaluationImg}
-                        />
-                    ),
+                    icon: <Dot size={16} />,
                 },
             ],
         },
@@ -191,21 +180,21 @@ export const useSidebarConfig = () => {
                     title: "Dashboard",
                     tooltip: "Dashboard view of traces and generations",
                     link: `/apps/${appId}/observability`,
-                    icon: <DashboardOutlined />,
+                    icon: <Dot size={16} />,
                 },
                 {
                     key: "app-observability-traces-link",
                     title: "Traces",
                     tooltip: "Traces and their details",
                     link: `/apps/${appId}/observability/traces`,
-                    icon: <PartitionOutlined />,
+                    icon: <Dot size={16} />,
                 },
                 {
                     key: "app-observability-generations-link",
                     title: "Generations",
                     tooltip: "Generations and their details",
                     link: `/apps/${appId}/observability/generations`,
-                    icon: <SwapOutlined style={{transform: "rotate(90deg)"}} />,
+                    icon: <Dot size={16} />,
                 },
             ],
         },
@@ -220,14 +209,14 @@ export const useSidebarConfig = () => {
                     title: "Endpoints",
                     tooltip: "Deploy your applications to different environments.",
                     link: `/apps/${appId}/endpoints`,
-                    icon: <ApiOutlined />,
+                    icon: <Dot size={16} />,
                 },
             ],
         },
         {
             key: "invite-teammate-link",
             title: "Invite Teammate",
-            link: "/settings?tab=workspace",
+            link: "/settings?tab=workspace&inviteModal=true",
             icon: <PaperPlane size={16} />,
             isBottom: true,
             isHidden: !doesSessionExist || (true && !selectedOrg),

From c8b0c6c96df258286e62446e245fc7120976396c Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sat, 3 Aug 2024 18:08:44 +0100
Subject: [PATCH 009/117] design(frontend): added overview route

---
 .../pages/apps/[app_id]/overview/index.tsx    | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 agenta-web/src/pages/apps/[app_id]/overview/index.tsx

diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
new file mode 100644
index 000000000..ab0bcac3b
--- /dev/null
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -0,0 +1,38 @@
+import DeploymentOverview from "@/components/pages/overview/deployments/DeploymentOverview"
+import {JSSTheme} from "@/lib/Types"
+import {Typography} from "antd"
+import {createUseStyles} from "react-jss"
+
+const {Title} = Typography
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.paddingLG,
+    },
+    section: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.paddingXS,
+        "& > h1.ant-typography": {
+            fontSize: theme.fontSize,
+        },
+    },
+}))
+
+export default function Overview() {
+    const classes = useStyles()
+    return (
+        <div className={classes.container}>
+            <Title level={3}>Overview</Title>
+
+            <div>Observability Cards</div>
+
+            <DeploymentOverview />
+
+            <div>hello</div>
+            <div>hello</div>
+        </div>
+    )
+}

From 00cda03a71a6f3e02122cb97b069d9ff398c0b05 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sat, 3 Aug 2024 18:13:38 +0100
Subject: [PATCH 010/117] fix(frontend): revert logo image width and height

---
 agenta-web/src/components/Logo/Logo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/agenta-web/src/components/Logo/Logo.tsx b/agenta-web/src/components/Logo/Logo.tsx
index 82d55bdc9..c0c77cd4d 100644
--- a/agenta-web/src/components/Logo/Logo.tsx
+++ b/agenta-web/src/components/Logo/Logo.tsx
@@ -30,7 +30,7 @@ const Logo: React.FC<Partial<React.ComponentProps<typeof Image>> & {isOnlyIconLo
             alt="Agenta Logo"
         />
     ) : (
-        <Image width={137} height={46} {...imageProps} src={logoSrc.complete} alt="Agenta Logo" />
+        <Image width={154.8} height={51} {...imageProps} src={logoSrc.complete} alt="Agenta Logo" />
     )
 }
 

From 63bfd00c7040d7361fcd0a526d455a153192d565 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sat, 3 Aug 2024 18:15:21 +0100
Subject: [PATCH 011/117] fix(frontend): modified endpoint from apps page to
 overview

---
 .../src/components/AppSelector/AppCard.tsx       |  2 +-
 .../AppSelector/modals/CreateAppStatusModal.tsx  |  4 ++--
 agenta-web/src/components/Sidebar/Sidebar.tsx    | 16 +---------------
 agenta-web/src/components/Sidebar/config.tsx     |  3 +--
 4 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/agenta-web/src/components/AppSelector/AppCard.tsx b/agenta-web/src/components/AppSelector/AppCard.tsx
index 23ece4e7a..5b518e1ff 100644
--- a/agenta-web/src/components/AppSelector/AppCard.tsx
+++ b/agenta-web/src/components/AppSelector/AppCard.tsx
@@ -109,7 +109,7 @@ const AppCard: React.FC<{
                 className={classes.card}
                 actions={[<DeleteOutlined key="delete" onClick={showDeleteModal} />]}
             >
-                <Link data-cy="app-card-link" href={`/apps/${app.app_id}/playground`}>
+                <Link data-cy="app-card-link" href={`/apps/${app.app_id}/overview`}>
                     <Card.Meta
                         title={<div>{renameVariablesCapitalizeAll(app.app_name)}</div>}
                         avatar={
diff --git a/agenta-web/src/components/AppSelector/modals/CreateAppStatusModal.tsx b/agenta-web/src/components/AppSelector/modals/CreateAppStatusModal.tsx
index 3a7d65540..b4c2124d5 100644
--- a/agenta-web/src/components/AppSelector/modals/CreateAppStatusModal.tsx
+++ b/agenta-web/src/components/AppSelector/modals/CreateAppStatusModal.tsx
@@ -75,7 +75,7 @@ const CreateAppStatusModal: React.FC<Props & React.ComponentProps<typeof Modal>>
             onTimeoutRetry?.()
         } else if (isSuccess) {
             props.onCancel?.(e)
-            if (appId) router.push(`/apps/${appId}/playground`)
+            if (appId) router.push(`/apps/${appId}/overview`)
         }
     }
 
@@ -112,7 +112,7 @@ const CreateAppStatusModal: React.FC<Props & React.ComponentProps<typeof Modal>>
                         },
                     }
                     if (obj.starting_app?.type === "loading") obj.starting_app.type = "success"
-                    if (appId) router.push(`/apps/${appId}/playground`)
+                    if (appId) router.push(`/apps/${appId}/overview`)
                     return obj
                 case "bad_request":
                 case "error":
diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
index 7c41c11e9..bdf933e87 100644
--- a/agenta-web/src/components/Sidebar/Sidebar.tsx
+++ b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -43,15 +43,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             background: `${theme.colorBgContainer} !important`,
         },
     },
-    sidebarLogo: {
-        display: "flex",
-        gap: 4,
-        alignItems: "center",
-        "& > .ant-typography": {
-            fontSize: `${theme.sizeSM}px`,
-            color: theme.colorTextDescription,
-        },
-    },
     siderWrapper: {
         border: `0.01px solid ${theme.isDark ? "#222" : "#ddd"}`,
     },
@@ -357,13 +348,8 @@ const Sidebar: React.FC = () => {
                 <div className={classes.sliderContainer}>
                     <div>
                         {!isDemo() && (
-                            <Link
-                                data-cy="app-management-link"
-                                href="/apps"
-                                className={classes.sidebarLogo}
-                            >
+                            <Link data-cy="app-management-link" href="/apps">
                                 <Logo isOnlyIconLogo={collapsed} />
-                                <Text className="text-xs">Open source</Text>
                             </Link>
                         )}
                         {selectedOrg?.id && user?.id && isDemo() && (
diff --git a/agenta-web/src/components/Sidebar/config.tsx b/agenta-web/src/components/Sidebar/config.tsx
index 02ac6e385..5bd130d51 100644
--- a/agenta-web/src/components/Sidebar/config.tsx
+++ b/agenta-web/src/components/Sidebar/config.tsx
@@ -97,8 +97,7 @@ export const useSidebarConfig = () => {
         {
             key: "overview-link",
             title: "Overview",
-            tooltip: "Overview link",
-            link: "/apps",
+            link: `/apps/${appId}/overview`,
             icon: <Desktop size={16} />,
             isHidden: !appId,
         },

From 594f38adebeb9c51910380fd7680aaf96b64acea Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sat, 3 Aug 2024 18:18:54 +0100
Subject: [PATCH 012/117] fix(frontend): export createParams Func for
 reusability

---
 .../pages/apps/[app_id]/endpoints/index.tsx   | 69 ++++++++++---------
 1 file changed, 38 insertions(+), 31 deletions(-)

diff --git a/agenta-web/src/pages/apps/[app_id]/endpoints/index.tsx b/agenta-web/src/pages/apps/[app_id]/endpoints/index.tsx
index 4dc3815ea..345dba706 100644
--- a/agenta-web/src/pages/apps/[app_id]/endpoints/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/endpoints/index.tsx
@@ -40,6 +40,38 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
 }))
 
+export const createParams = (
+    inputParams: Parameter[] | null,
+    environmentName: string,
+    value: string | number,
+    isChatVariant: boolean | null,
+) => {
+    let mainParams: GenericObject = {}
+    let secondaryParams: GenericObject = {}
+
+    inputParams?.forEach((item) => {
+        if (item.input) {
+            mainParams[item.name] = item.default || value
+        } else {
+            secondaryParams[item.name] = item.default || value
+        }
+    })
+    if (isChatVariant) {
+        mainParams["inputs"] = [
+            {
+                role: "user",
+                content: "Example message",
+            },
+        ]
+    } else if (Object.keys(secondaryParams).length > 0) {
+        mainParams["inputs"] = secondaryParams
+    }
+
+    mainParams["environment"] = environmentName
+
+    return JSON.stringify(mainParams, null, 2)
+}
+
 export default function VariantEndpoint() {
     const classes = useStyles()
     const router = useRouter()
@@ -124,36 +156,6 @@ export default function VariantEndpoint() {
     }, [variants, appId])
 
     const {inputParams, isChatVariant, isLoading, isError, error} = useVariant(appId, variant!)
-    const createParams = (
-        inputParams: Parameter[] | null,
-        environmentName: string,
-        value: string | number,
-    ) => {
-        let mainParams: GenericObject = {}
-        let secondaryParams: GenericObject = {}
-
-        inputParams?.forEach((item) => {
-            if (item.input) {
-                mainParams[item.name] = item.default || value
-            } else {
-                secondaryParams[item.name] = item.default || value
-            }
-        })
-        if (isChatVariant) {
-            mainParams["inputs"] = [
-                {
-                    role: "user",
-                    content: "Example message",
-                },
-            ]
-        } else if (Object.keys(secondaryParams).length > 0) {
-            mainParams["inputs"] = secondaryParams
-        }
-
-        mainParams["environment"] = environmentName
-
-        return JSON.stringify(mainParams, null, 2)
-    }
 
     if (isVariantsError) {
         return <ResultComponent status={"error"} title="Failed to load variants" />
@@ -173,7 +175,12 @@ export default function VariantEndpoint() {
         )
     }
 
-    const params = createParams(inputParams, selectedEnvironment?.name || "none", "add_a_value")
+    const params = createParams(
+        inputParams,
+        selectedEnvironment?.name || "none",
+        "add_a_value",
+        isChatVariant,
+    )
     const invokeLlmAppCodeSnippet: Record<string, string> = {
         Python: invokeLlmApppythonCode(uri!, params),
         cURL: invokeLlmAppcURLCode(uri!, params),

From 5a4e839912337e07e5e83dac8429786c981404da Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sat, 3 Aug 2024 18:19:47 +0100
Subject: [PATCH 013/117] design(frontend): minor layout

---
 agenta-web/src/components/Layout/Layout.tsx | 64 +++------------------
 1 file changed, 8 insertions(+), 56 deletions(-)

diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index 22de9f5d6..b84fe5c7a 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/agenta-web/src/components/Layout/Layout.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useMemo, useState} from "react"
-import {Breadcrumb, Button, Dropdown, Layout, Modal, Space, Tooltip, theme} from "antd"
+import {Breadcrumb, Layout, Modal, Space, Typography, theme} from "antd"
 import Sidebar from "../Sidebar/Sidebar"
 import {GithubFilled, LinkedinFilled, TwitterOutlined} from "@ant-design/icons"
 import Link from "next/link"
@@ -13,21 +13,19 @@ import ErrorFallback from "./ErrorFallback"
 import {fetchData} from "@/services/api"
 import {useAppsData} from "@/contexts/app.context"
 import {useRouter} from "next/router"
-import Image from "next/image"
-import moonIcon from "@/media/night.png"
-import sunIcon from "@/media/sun.png"
 import {useProfileData} from "@/contexts/profile.context"
 import {ThemeProvider} from "react-jss"
-import {StyleProps as MainStyleProps} from "@/lib/Types"
+import {JSSTheme, StyleProps as MainStyleProps} from "@/lib/Types"
 import {Lightning} from "@phosphor-icons/react"
 
 const {Content, Footer} = Layout
+const {Text} = Typography
 
 interface StyleProps extends MainStyleProps {
     footerHeight: number
 }
 
-const useStyles = createUseStyles({
+const useStyles = createUseStyles((theme: JSSTheme) => ({
     layout: ({themeMode}: StyleProps) => ({
         display: "flex",
         background: themeMode === "dark" ? "#141414" : "#ffffff",
@@ -104,12 +102,11 @@ const useStyles = createUseStyles({
         display: "flex",
         alignItems: "center",
         gap: "1rem",
-        "& >span": {
-            cursor: "pointer",
-            marginTop: 3,
+        "& span.ant-typography": {
+            color: "rgba(0, 0, 0, 0.45)",
         },
     },
-})
+}))
 
 type LayoutProps = {
     children: React.ReactNode
@@ -237,52 +234,7 @@ const App: React.FC<LayoutProps> = ({children}) => {
                                         ]}
                                     />
                                     <div className={classes.topRightBar}>
-                                        <Dropdown
-                                            trigger={["click"]}
-                                            menu={{
-                                                items: [
-                                                    {
-                                                        key: "system",
-                                                        label: "System",
-                                                        onClick: () => toggleAppTheme("system"),
-                                                    },
-                                                    {
-                                                        key: "light",
-                                                        label: "Light",
-                                                        onClick: () => toggleAppTheme("light"),
-                                                    },
-                                                    {
-                                                        key: "dark",
-                                                        label: "Dark",
-                                                        onClick: () => toggleAppTheme("dark"),
-                                                    },
-                                                ],
-                                                selectedKeys: [themeMode],
-                                            }}
-                                        >
-                                            <a onClick={(e) => e.preventDefault()}>
-                                                <Tooltip title="Change theme" placement="left">
-                                                    <Image
-                                                        alt={`Curren Theme: ${
-                                                            isDarkTheme ? "dark" : "light"
-                                                        }`}
-                                                        src={isDarkTheme ? sunIcon : moonIcon}
-                                                        width={24}
-                                                        height={24}
-                                                    />
-                                                </Tooltip>
-                                            </a>
-                                        </Dropdown>
-                                        <Button
-                                            className={classes.star}
-                                            href="https://github.com/Agenta-AI/agenta"
-                                        >
-                                            <div>
-                                                <GithubFilled style={{fontSize: 18}} />
-                                                <p>Star</p>
-                                            </div>
-                                            <div>{starCount || 0}</div>
-                                        </Button>
+                                        <Text>agenta</Text>
                                     </div>
                                 </Space>
                                 <ErrorBoundary FallbackComponent={ErrorFallback}>

From b6501d0d22559b75117e13ccd24fbbe4c1f5edb7 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sat, 3 Aug 2024 18:20:26 +0100
Subject: [PATCH 014/117] design(frontend): style deployment section in
 overview page

---
 .../overview/deployments/DeploymentDrawer.tsx | 256 ++++++++++++++++++
 .../deployments/DeploymentOverview.tsx        | 124 +++++++++
 2 files changed, 380 insertions(+)
 create mode 100644 agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
 create mode 100644 agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
new file mode 100644
index 000000000..50c0b21dc
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -0,0 +1,256 @@
+import CopyButton from "@/components/CopyButton/CopyButton"
+import DynamicCodeBlock from "@/components/DynamicCodeBlock/DynamicCodeBlock"
+import {Environment, JSSTheme} from "@/lib/Types"
+import {createParams} from "@/pages/apps/[app_id]/endpoints"
+import {MoreOutlined, PythonOutlined} from "@ant-design/icons"
+import {FileCode, FileTs} from "@phosphor-icons/react"
+import {Button, Drawer, DrawerProps, Dropdown, Space, Tabs, Tag, Typography} from "antd"
+import React, {useState} from "react"
+import {createUseStyles} from "react-jss"
+import fetchConfigcURLCode from "@/code_snippets/endpoints/fetch_config/curl"
+import fetchConfigpythonCode from "@/code_snippets/endpoints/fetch_config/python"
+import fetchConfigtsCode from "@/code_snippets/endpoints/fetch_config/typescript"
+import CodeBlock from "@/components/DynamicCodeBlock/CodeBlock"
+
+interface DeploymentDrawerProps {
+    selectedEnvironment: Environment | undefined
+}
+
+const {Title, Text} = Typography
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    drawerTitleContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        "& h1.ant-typography": {
+            fontSize: 22,
+            fontWeight: 500,
+            textTransform: "capitalize",
+        },
+    },
+    drawerTabs: {
+        "& .ant-tabs-content-holder": {
+            maxHeight: 700,
+            overflowY: "scroll",
+        },
+    },
+}))
+
+const DeploymentDrawer = ({selectedEnvironment, ...props}: DeploymentDrawerProps & DrawerProps) => {
+    const classes = useStyles()
+    const [selectedLang, setSelectedLang] = useState("python")
+
+    // const params = createParams(inputParams, selectedEnvironment?.name || "none", "add_a_value")
+    // const invokeLlmAppCodeSnippet: Record<string, string> = {
+    //     Python: invokeLlmApppythonCode(uri!, params),
+    //     cURL: invokeLlmAppcURLCode(uri!, params),
+    //     TypeScript: invokeLlmApptsCode(uri!, params),
+    // }
+
+    // const fetchConfigCodeSnippet: Record<string, string> = {
+    //     Python: fetchConfigpythonCode(variant.baseId, selectedEnvironment?.name!),
+    //     cURL: fetchConfigcURLCode(variant.baseId, selectedEnvironment?.name!),
+    //     TypeScript: fetchConfigtsCode(variant.baseId, selectedEnvironment?.name!),
+    // }
+
+    const fetchConfigCodeSnippet: Record<string, string> = {
+        python: fetchConfigpythonCode("variant.baseId", selectedEnvironment?.name!),
+        bash: fetchConfigcURLCode("variant.baseId", selectedEnvironment?.name!),
+        typescript: fetchConfigtsCode("variant.baseId", selectedEnvironment?.name!),
+    }
+
+    return (
+        <Drawer
+            width={600}
+            {...props}
+            destroyOnClose
+            closeIcon={null}
+            title={
+                <Space className={classes.drawerTitleContainer}>
+                    <Title>{selectedEnvironment?.name} environment</Title>
+
+                    <Space direction="horizontal">
+                        <Button type="primary">Button1</Button>
+                        <Button>Button2</Button>
+                    </Space>
+                </Space>
+            }
+        >
+            <div className="flex flex-col gap-2">
+                <div className="flex justify-between">
+                    <div className="flex flex-col gap-1">
+                        <Text className="font-[500]">Variant Deployed</Text>
+                        <Tag color="blue" className="w-fit">
+                            {selectedEnvironment?.deployed_variant_name}
+                        </Tag>
+                    </div>
+
+                    <Dropdown
+                        trigger={["click"]}
+                        menu={{
+                            items: [
+                                {
+                                    key: "change_variant",
+                                    label: "Change Variant",
+                                },
+
+                                {
+                                    key: "open_playground",
+                                    label: "Open in playground",
+                                },
+                            ],
+                        }}
+                    >
+                        <Button type="text" icon={<MoreOutlined />} size="small" />
+                    </Dropdown>
+                </div>
+
+                <div>
+                    <Tabs
+                        destroyInactiveTabPane
+                        defaultActiveKey={selectedLang}
+                        className={classes.drawerTabs}
+                        items={[
+                            {
+                                key: "python",
+                                label: "Python",
+                                children: (
+                                    <div className="flex flex-col gap-6">
+                                        <div className="flex flex-col gap-2">
+                                            <div className="flex items-center justify-between">
+                                                <Text className="font-[500]">
+                                                    Fetch Prompt/Config
+                                                </Text>
+                                                <CopyButton
+                                                    buttonText={null}
+                                                    text={"result"}
+                                                    icon={true}
+                                                />
+                                            </div>
+
+                                            <CodeBlock
+                                                key={selectedLang}
+                                                language={selectedLang}
+                                                value={fetchConfigCodeSnippet[selectedLang]}
+                                            />
+                                        </div>
+
+                                        <div className="flex flex-col gap-2">
+                                            <div className="flex items-center justify-between">
+                                                <Text className="font-[500]">Invoke LLM</Text>
+                                                <CopyButton
+                                                    buttonText={null}
+                                                    text={"result"}
+                                                    icon={true}
+                                                />
+                                            </div>
+
+                                            <CodeBlock
+                                                key={selectedLang}
+                                                language={selectedLang}
+                                                value={fetchConfigCodeSnippet[selectedLang]}
+                                            />
+                                        </div>
+                                    </div>
+                                ),
+                                icon: <PythonOutlined />,
+                            },
+                            {
+                                key: "typescript",
+                                label: "TypeScript",
+                                children: (
+                                    <div className="flex flex-col gap-6">
+                                        <div className="flex flex-col gap-2">
+                                            <div className="flex items-center justify-between">
+                                                <Text className="font-[500]">
+                                                    Fetch Prompt/Config
+                                                </Text>
+                                                <CopyButton
+                                                    buttonText={null}
+                                                    text={"result"}
+                                                    icon={true}
+                                                />
+                                            </div>
+
+                                            <CodeBlock
+                                                key={selectedLang}
+                                                language={selectedLang}
+                                                value={fetchConfigCodeSnippet[selectedLang]}
+                                            />
+                                        </div>
+
+                                        <div className="flex flex-col gap-2">
+                                            <div className="flex items-center justify-between">
+                                                <Text className="font-[500]">Invoke LLM</Text>
+                                                <CopyButton
+                                                    buttonText={null}
+                                                    text={"result"}
+                                                    icon={true}
+                                                />
+                                            </div>
+
+                                            <CodeBlock
+                                                key={selectedLang}
+                                                language={selectedLang}
+                                                value={fetchConfigCodeSnippet[selectedLang]}
+                                            />
+                                        </div>
+                                    </div>
+                                ),
+                                icon: <FileTs size={14} />,
+                            },
+                            {
+                                key: "bash",
+                                label: "cURL",
+                                children: (
+                                    <div className="flex flex-col gap-6">
+                                        <div className="flex flex-col gap-2">
+                                            <div className="flex items-center justify-between">
+                                                <Text className="font-[500]">
+                                                    Fetch Prompt/Config
+                                                </Text>
+                                                <CopyButton
+                                                    buttonText={null}
+                                                    text={"result"}
+                                                    icon={true}
+                                                />
+                                            </div>
+
+                                            <CodeBlock
+                                                key={selectedLang}
+                                                language={selectedLang}
+                                                value={fetchConfigCodeSnippet[selectedLang]}
+                                            />
+                                        </div>
+
+                                        <div className="flex flex-col gap-2">
+                                            <div className="flex items-center justify-between">
+                                                <Text className="font-[500]">Invoke LLM</Text>
+                                                <CopyButton
+                                                    buttonText={null}
+                                                    text={"result"}
+                                                    icon={true}
+                                                />
+                                            </div>
+
+                                            <CodeBlock
+                                                key={selectedLang}
+                                                language={selectedLang}
+                                                value={fetchConfigCodeSnippet[selectedLang]}
+                                            />
+                                        </div>
+                                    </div>
+                                ),
+                                icon: <FileCode size={14} />,
+                            },
+                        ]}
+                        onChange={setSelectedLang}
+                    />
+                </div>
+            </div>
+        </Drawer>
+    )
+}
+
+export default DeploymentDrawer
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
new file mode 100644
index 000000000..42d6a7aa9
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -0,0 +1,124 @@
+import {Environment, JSSTheme} from "@/lib/Types"
+import {fetchEnvironments} from "@/services/deployment/api"
+import {MoreOutlined} from "@ant-design/icons"
+import {Button, Card, Dropdown, Tag, Typography} from "antd"
+import {useRouter} from "next/router"
+import {useEffect, useState} from "react"
+import {createUseStyles} from "react-jss"
+import DeploymentDrawer from "./DeploymentDrawer"
+import {useQueryParam} from "@/hooks/useQuery"
+
+const {Title, Text} = Typography
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.paddingXS,
+        "& > h1.ant-typography": {
+            fontSize: theme.fontSize,
+        },
+    },
+    cardContainer: {
+        display: "flex",
+        gap: theme.paddingXS,
+        "& .ant-card": {
+            width: "100%",
+            position: "relative",
+            "& .ant-card-body": {
+                padding: theme.padding,
+                display: "flex",
+                flexDirection: "column",
+                gap: theme.paddingXS,
+                "& > span.ant-typography:first-of-type": {
+                    textTransform: "capitalize",
+                },
+            },
+        },
+    },
+}))
+
+const DeploymentOverview = () => {
+    const classes = useStyles()
+    const router = useRouter()
+    const [queryEnv, setQueryEnv] = useQueryParam("environment")
+    const appId = router.query.app_id as string
+    const [environments, setEnvironments] = useState<Environment[]>([])
+    const [selectedEnvironment, setSelectedEnvironment] = useState<Environment>()
+
+    const loadEnvironments = async () => {
+        try {
+            const response = await fetchEnvironments(appId)
+            setEnvironments(response)
+        } catch (error) {
+            console.error(error)
+        }
+    }
+
+    useEffect(() => {
+        if (appId) {
+            loadEnvironments()
+        }
+    }, [appId])
+
+    return (
+        <div className={classes.container}>
+            <Title>Deployment</Title>
+
+            <div className={classes.cardContainer}>
+                {environments.map((env, index) => (
+                    <Card key={index}>
+                        <Dropdown
+                            trigger={["click"]}
+                            menu={{
+                                items: [
+                                    {
+                                        key: "view-details",
+                                        label: "View Details",
+                                        onClick: () => {
+                                            setQueryEnv(env.name)
+                                            setSelectedEnvironment(env)
+                                        },
+                                        disabled: !env.deployed_app_variant_id,
+                                    },
+                                    {
+                                        key: "change_variant",
+                                        label: "Change Variant",
+                                    },
+                                    {type: "divider"},
+                                    {
+                                        key: "open_playground",
+                                        label: "Open in playground",
+                                    },
+                                ],
+                            }}
+                        >
+                            <Button
+                                type="text"
+                                icon={<MoreOutlined />}
+                                size="small"
+                                className="absolute right-2"
+                            />
+                        </Dropdown>
+                        <Text>{env.name}</Text>
+                        {env.deployed_variant_name ? (
+                            <Tag className="w-fit" color="green">
+                                {env.deployed_variant_name}
+                            </Tag>
+                        ) : (
+                            <Tag className="w-fit">No deployment</Tag>
+                        )}
+                    </Card>
+                ))}
+            </div>
+
+            <DeploymentDrawer
+                selectedEnvironment={selectedEnvironment}
+                open={!!queryEnv}
+                onClose={() => setQueryEnv("")}
+            />
+        </div>
+    )
+}
+
+export default DeploymentOverview

From 67e7adf7df87c58e8e17ea89776403d2bd2508cb Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sat, 3 Aug 2024 20:03:19 +0100
Subject: [PATCH 015/117] fix(frontend): implemented api logic and minor
 improvements

---
 .../overview/deployments/DeploymentDrawer.tsx | 260 +++++++++---------
 .../deployments/DeploymentOverview.tsx        |  12 +-
 2 files changed, 136 insertions(+), 136 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
index 50c0b21dc..98f9ff030 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -1,19 +1,30 @@
 import CopyButton from "@/components/CopyButton/CopyButton"
-import DynamicCodeBlock from "@/components/DynamicCodeBlock/DynamicCodeBlock"
-import {Environment, JSSTheme} from "@/lib/Types"
+import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {createParams} from "@/pages/apps/[app_id]/endpoints"
 import {MoreOutlined, PythonOutlined} from "@ant-design/icons"
 import {FileCode, FileTs} from "@phosphor-icons/react"
 import {Button, Drawer, DrawerProps, Dropdown, Space, Tabs, Tag, Typography} from "antd"
-import React, {useState} from "react"
+import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 import fetchConfigcURLCode from "@/code_snippets/endpoints/fetch_config/curl"
 import fetchConfigpythonCode from "@/code_snippets/endpoints/fetch_config/python"
 import fetchConfigtsCode from "@/code_snippets/endpoints/fetch_config/typescript"
+import invokeLlmAppcURLCode from "@/code_snippets/endpoints/invoke_llm_app/curl"
+import invokeLlmApppythonCode from "@/code_snippets/endpoints/invoke_llm_app/python"
+import invokeLlmApptsCode from "@/code_snippets/endpoints/invoke_llm_app/typescript"
 import CodeBlock from "@/components/DynamicCodeBlock/CodeBlock"
+import {useRouter} from "next/router"
+import {fetchAppContainerURL, fetchVariants} from "@/services/api"
+import {useVariant} from "@/lib/hooks/useVariant"
 
 interface DeploymentDrawerProps {
-    selectedEnvironment: Environment | undefined
+    selectedEnvironment: Environment
+}
+
+interface LanguageCodeBlockProps {
+    selectedLang: string
+    fetchConfigCodeSnippet: Record<string, string>
+    invokeLlmAppCodeSnippet: Record<string, string>
 }
 
 const {Title, Text} = Typography
@@ -37,27 +48,110 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
 }))
 
+const LanguageCodeBlock = ({
+    selectedLang,
+    fetchConfigCodeSnippet,
+    invokeLlmAppCodeSnippet,
+}: LanguageCodeBlockProps) => {
+    return (
+        <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                    <Text className="font-[500]">Fetch Prompt/Config</Text>
+                    <CopyButton
+                        buttonText={null}
+                        text={fetchConfigCodeSnippet[selectedLang]}
+                        icon={true}
+                    />
+                </div>
+
+                <CodeBlock
+                    key={selectedLang}
+                    language={selectedLang}
+                    value={fetchConfigCodeSnippet[selectedLang]}
+                />
+            </div>
+
+            <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                    <Text className="font-[500]">Invoke LLM</Text>
+                    <CopyButton
+                        buttonText={null}
+                        text={invokeLlmAppCodeSnippet[selectedLang]}
+                        icon={true}
+                    />
+                </div>
+
+                <CodeBlock
+                    key={selectedLang}
+                    language={selectedLang}
+                    value={invokeLlmAppCodeSnippet[selectedLang]}
+                />
+            </div>
+        </div>
+    )
+}
+
 const DeploymentDrawer = ({selectedEnvironment, ...props}: DeploymentDrawerProps & DrawerProps) => {
     const classes = useStyles()
+    const router = useRouter()
+    const appId = router.query.app_id as string
     const [selectedLang, setSelectedLang] = useState("python")
+    const [uri, setURI] = useState<string | null>(null)
+    const [variants, setVariants] = useState<Variant[]>([])
+    const [variant, setVariant] = useState<Variant | null>(null)
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const backendVariants = await fetchVariants(appId)
+                setVariants(backendVariants)
+            } catch (error) {
+                console.error(error)
+            }
+        }
+        fetchData()
+    }, [appId])
+
+    useEffect(() => {
+        loadURL(selectedEnvironment)
+    }, [selectedEnvironment, appId])
+
+    useEffect(() => {
+        const variant = variants.find(
+            (variant) => variant.variantId === selectedEnvironment.deployed_app_variant_id,
+        )
+        if (!variant) return
+
+        setVariant(variant)
+    }, [selectedEnvironment, variants])
+
+    const loadURL = async (environment: Environment) => {
+        if (environment.deployed_app_variant_id) {
+            const url = await fetchAppContainerURL(appId, environment.deployed_app_variant_id)
+            setURI(`${url}/generate_deployed`)
+        }
+    }
+
+    const {inputParams, isChatVariant} = useVariant(appId, variant!)
 
-    // const params = createParams(inputParams, selectedEnvironment?.name || "none", "add_a_value")
-    // const invokeLlmAppCodeSnippet: Record<string, string> = {
-    //     Python: invokeLlmApppythonCode(uri!, params),
-    //     cURL: invokeLlmAppcURLCode(uri!, params),
-    //     TypeScript: invokeLlmApptsCode(uri!, params),
-    // }
+    const params = createParams(
+        inputParams,
+        selectedEnvironment?.name || "none",
+        "add_a_value",
+        isChatVariant,
+    )
 
-    // const fetchConfigCodeSnippet: Record<string, string> = {
-    //     Python: fetchConfigpythonCode(variant.baseId, selectedEnvironment?.name!),
-    //     cURL: fetchConfigcURLCode(variant.baseId, selectedEnvironment?.name!),
-    //     TypeScript: fetchConfigtsCode(variant.baseId, selectedEnvironment?.name!),
-    // }
+    const invokeLlmAppCodeSnippet: Record<string, string> = {
+        python: invokeLlmApppythonCode(uri!, params),
+        bash: invokeLlmAppcURLCode(uri!, params),
+        typescript: invokeLlmApptsCode(uri!, params),
+    }
 
     const fetchConfigCodeSnippet: Record<string, string> = {
-        python: fetchConfigpythonCode("variant.baseId", selectedEnvironment?.name!),
-        bash: fetchConfigcURLCode("variant.baseId", selectedEnvironment?.name!),
-        typescript: fetchConfigtsCode("variant.baseId", selectedEnvironment?.name!),
+        python: fetchConfigpythonCode(variant?.baseId!, selectedEnvironment?.name!),
+        bash: fetchConfigcURLCode(variant?.baseId!, selectedEnvironment?.name!),
+        typescript: fetchConfigtsCode(variant?.baseId!, selectedEnvironment?.name!),
     }
 
     return (
@@ -71,8 +165,8 @@ const DeploymentDrawer = ({selectedEnvironment, ...props}: DeploymentDrawerProps
                     <Title>{selectedEnvironment?.name} environment</Title>
 
                     <Space direction="horizontal">
-                        <Button type="primary">Button1</Button>
-                        <Button>Button2</Button>
+                        <Button>Button1</Button>
+                        <Button type="primary">Button2</Button>
                     </Space>
                 </Space>
             }
@@ -116,43 +210,11 @@ const DeploymentDrawer = ({selectedEnvironment, ...props}: DeploymentDrawerProps
                                 key: "python",
                                 label: "Python",
                                 children: (
-                                    <div className="flex flex-col gap-6">
-                                        <div className="flex flex-col gap-2">
-                                            <div className="flex items-center justify-between">
-                                                <Text className="font-[500]">
-                                                    Fetch Prompt/Config
-                                                </Text>
-                                                <CopyButton
-                                                    buttonText={null}
-                                                    text={"result"}
-                                                    icon={true}
-                                                />
-                                            </div>
-
-                                            <CodeBlock
-                                                key={selectedLang}
-                                                language={selectedLang}
-                                                value={fetchConfigCodeSnippet[selectedLang]}
-                                            />
-                                        </div>
-
-                                        <div className="flex flex-col gap-2">
-                                            <div className="flex items-center justify-between">
-                                                <Text className="font-[500]">Invoke LLM</Text>
-                                                <CopyButton
-                                                    buttonText={null}
-                                                    text={"result"}
-                                                    icon={true}
-                                                />
-                                            </div>
-
-                                            <CodeBlock
-                                                key={selectedLang}
-                                                language={selectedLang}
-                                                value={fetchConfigCodeSnippet[selectedLang]}
-                                            />
-                                        </div>
-                                    </div>
+                                    <LanguageCodeBlock
+                                        fetchConfigCodeSnippet={fetchConfigCodeSnippet}
+                                        invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
+                                        selectedLang={selectedLang}
+                                    />
                                 ),
                                 icon: <PythonOutlined />,
                             },
@@ -160,43 +222,11 @@ const DeploymentDrawer = ({selectedEnvironment, ...props}: DeploymentDrawerProps
                                 key: "typescript",
                                 label: "TypeScript",
                                 children: (
-                                    <div className="flex flex-col gap-6">
-                                        <div className="flex flex-col gap-2">
-                                            <div className="flex items-center justify-between">
-                                                <Text className="font-[500]">
-                                                    Fetch Prompt/Config
-                                                </Text>
-                                                <CopyButton
-                                                    buttonText={null}
-                                                    text={"result"}
-                                                    icon={true}
-                                                />
-                                            </div>
-
-                                            <CodeBlock
-                                                key={selectedLang}
-                                                language={selectedLang}
-                                                value={fetchConfigCodeSnippet[selectedLang]}
-                                            />
-                                        </div>
-
-                                        <div className="flex flex-col gap-2">
-                                            <div className="flex items-center justify-between">
-                                                <Text className="font-[500]">Invoke LLM</Text>
-                                                <CopyButton
-                                                    buttonText={null}
-                                                    text={"result"}
-                                                    icon={true}
-                                                />
-                                            </div>
-
-                                            <CodeBlock
-                                                key={selectedLang}
-                                                language={selectedLang}
-                                                value={fetchConfigCodeSnippet[selectedLang]}
-                                            />
-                                        </div>
-                                    </div>
+                                    <LanguageCodeBlock
+                                        fetchConfigCodeSnippet={fetchConfigCodeSnippet}
+                                        invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
+                                        selectedLang={selectedLang}
+                                    />
                                 ),
                                 icon: <FileTs size={14} />,
                             },
@@ -204,43 +234,11 @@ const DeploymentDrawer = ({selectedEnvironment, ...props}: DeploymentDrawerProps
                                 key: "bash",
                                 label: "cURL",
                                 children: (
-                                    <div className="flex flex-col gap-6">
-                                        <div className="flex flex-col gap-2">
-                                            <div className="flex items-center justify-between">
-                                                <Text className="font-[500]">
-                                                    Fetch Prompt/Config
-                                                </Text>
-                                                <CopyButton
-                                                    buttonText={null}
-                                                    text={"result"}
-                                                    icon={true}
-                                                />
-                                            </div>
-
-                                            <CodeBlock
-                                                key={selectedLang}
-                                                language={selectedLang}
-                                                value={fetchConfigCodeSnippet[selectedLang]}
-                                            />
-                                        </div>
-
-                                        <div className="flex flex-col gap-2">
-                                            <div className="flex items-center justify-between">
-                                                <Text className="font-[500]">Invoke LLM</Text>
-                                                <CopyButton
-                                                    buttonText={null}
-                                                    text={"result"}
-                                                    icon={true}
-                                                />
-                                            </div>
-
-                                            <CodeBlock
-                                                key={selectedLang}
-                                                language={selectedLang}
-                                                value={fetchConfigCodeSnippet[selectedLang]}
-                                            />
-                                        </div>
-                                    </div>
+                                    <LanguageCodeBlock
+                                        fetchConfigCodeSnippet={fetchConfigCodeSnippet}
+                                        invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
+                                        selectedLang={selectedLang}
+                                    />
                                 ),
                                 icon: <FileCode size={14} />,
                             },
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
index 42d6a7aa9..cbb78135d 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -112,11 +112,13 @@ const DeploymentOverview = () => {
                 ))}
             </div>
 
-            <DeploymentDrawer
-                selectedEnvironment={selectedEnvironment}
-                open={!!queryEnv}
-                onClose={() => setQueryEnv("")}
-            />
+            {selectedEnvironment && (
+                <DeploymentDrawer
+                    selectedEnvironment={selectedEnvironment}
+                    open={!!queryEnv}
+                    onClose={() => setQueryEnv("")}
+                />
+            )}
         </div>
     )
 }

From 12b97acf1edc30236c35edae4db4ec1f6edeb7c9 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sat, 3 Aug 2024 22:40:42 +0100
Subject: [PATCH 016/117] design(frontend): added variants overview section

---
 .../overview/variants/VariantsOverview.tsx    | 56 +++++++++++++++++++
 .../pages/apps/[app_id]/overview/index.tsx    |  4 +-
 2 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx

diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
new file mode 100644
index 000000000..5ba8bfa16
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -0,0 +1,56 @@
+import {JSSTheme} from "@/lib/Types"
+import {Rocket} from "@phosphor-icons/react"
+import {Button, Typography} from "antd"
+import Link from "next/link"
+import {useRouter} from "next/router"
+import React from "react"
+import {createUseStyles} from "react-jss"
+
+const {Title, Text} = Typography
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.paddingXS,
+        "& > div h1.ant-typography": {
+            fontSize: theme.fontSize,
+        },
+    },
+    titleLink: {
+        display: "flex",
+        alignItems: "center",
+        gap: theme.paddingSM,
+        border: `1px solid ${theme.colorBorder}`,
+        padding: "5px 15px",
+        height: 32,
+        borderRadius: theme.borderRadius,
+        color: theme.colorText,
+        "&:hover": {
+            borderColor: theme.colorInfoBorderHover,
+            transition: "all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)",
+        },
+    },
+}))
+const VariantsOverview = () => {
+    const classes = useStyles()
+    const router = useRouter()
+    const appId = router.query.app_id as string
+
+    return (
+        <div className={classes.container}>
+            <div className="flex items-center justify-between">
+                <Title>Variants</Title>
+
+                <Link href={`/apps/${appId}/playground`} className={classes.titleLink}>
+                    <Rocket size={16} />
+                    Playground
+                </Link>
+            </div>
+
+            <div>hello</div>
+        </div>
+    )
+}
+
+export default VariantsOverview
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index ab0bcac3b..c67f52079 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -1,4 +1,5 @@
 import DeploymentOverview from "@/components/pages/overview/deployments/DeploymentOverview"
+import VariantsOverview from "@/components/pages/overview/variants/VariantsOverview"
 import {JSSTheme} from "@/lib/Types"
 import {Typography} from "antd"
 import {createUseStyles} from "react-jss"
@@ -31,8 +32,7 @@ export default function Overview() {
 
             <DeploymentOverview />
 
-            <div>hello</div>
-            <div>hello</div>
+            <VariantsOverview />
         </div>
     )
 }

From de4bc407e2d601f1f42b6b09eea416483c4fcc79 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 4 Aug 2024 11:11:26 +0100
Subject: [PATCH 017/117] fix(frontend): modified invite modal query param
 value

---
 agenta-web/src/components/Sidebar/config.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/agenta-web/src/components/Sidebar/config.tsx b/agenta-web/src/components/Sidebar/config.tsx
index 5bd130d51..375bb17ff 100644
--- a/agenta-web/src/components/Sidebar/config.tsx
+++ b/agenta-web/src/components/Sidebar/config.tsx
@@ -215,7 +215,7 @@ export const useSidebarConfig = () => {
         {
             key: "invite-teammate-link",
             title: "Invite Teammate",
-            link: "/settings?tab=workspace&inviteModal=true",
+            link: "/settings?tab=workspace&inviteModal=open",
             icon: <PaperPlane size={16} />,
             isBottom: true,
             isHidden: !doesSessionExist || (true && !selectedOrg),

From 588ba1fce2f33c01a88a1afd4a71899bd2d244aa Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 4 Aug 2024 11:45:38 +0100
Subject: [PATCH 018/117] design(frontend): added all overview sections

---
 .../AbTestingEvalOverview.tsx                 | 86 +++++++++++++++++++
 .../AutomaticEvalOverview.tsx                 | 85 ++++++++++++++++++
 .../observability/ObservabilityOverview.tsx   |  7 ++
 .../SingleModelEvalOverview.tsx               | 80 +++++++++++++++++
 .../pages/apps/[app_id]/overview/index.tsx    | 20 +++--
 5 files changed, 269 insertions(+), 9 deletions(-)
 create mode 100644 agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
 create mode 100644 agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
 create mode 100644 agenta-web/src/components/pages/overview/observability/ObservabilityOverview.tsx
 create mode 100644 agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx

diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
new file mode 100644
index 000000000..a9c738110
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -0,0 +1,86 @@
+import {JSSTheme} from "@/lib/Types"
+import {PlusOutlined} from "@ant-design/icons"
+import {GearSix} from "@phosphor-icons/react"
+import {Button, Space, Table, Typography} from "antd"
+import {ColumnsType} from "antd/es/table"
+import {useRouter} from "next/router"
+import React from "react"
+import {createUseStyles} from "react-jss"
+
+const {Title} = Typography
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.paddingXS,
+        "& > div h1.ant-typography": {
+            fontSize: theme.fontSize,
+        },
+    },
+}))
+
+const AbTestingEvalOverview = () => {
+    const classes = useStyles()
+    const router = useRouter()
+    const appId = router.query.app_id as string
+
+    const columns: ColumnsType<any> = [
+        {
+            title: "Test set",
+        },
+        {
+            title: "Variant 1",
+        },
+        {
+            title: "Variant 2",
+        },
+        {
+            title: "Both are good",
+        },
+        {
+            title: "flag",
+        },
+        {
+            title: "Created At",
+        },
+        {
+            title: <GearSix size={16} />,
+        },
+    ]
+
+    return (
+        <div className={classes.container}>
+            <div className="flex items-center justify-between">
+                <Title>A/B Testing Evaluations</Title>
+
+                <Space>
+                    <Button
+                        icon={<PlusOutlined />}
+                        size="small"
+                        onClick={() =>
+                            router.push(
+                                `/apps/${appId}/annotations/human_a_b_testing?openHumanEvalModal=open`,
+                            )
+                        }
+                    >
+                        Start New
+                    </Button>
+                    <Button
+                        type="text"
+                        size="small"
+                        href={`/apps/${appId}/annotations/human_a_b_testing`}
+                    >
+                        View All
+                    </Button>
+                </Space>
+            </div>
+
+            <div>
+                <Table className="ph-no-capture" columns={columns} dataSource={[]} />
+            </div>
+        </div>
+    )
+}
+
+export default AbTestingEvalOverview
diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
new file mode 100644
index 000000000..5eb57e1fa
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -0,0 +1,85 @@
+import {JSSTheme} from "@/lib/Types"
+import {PlusOutlined} from "@ant-design/icons"
+import {GearSix} from "@phosphor-icons/react"
+import {Button, Space, Table, Typography} from "antd"
+import {ColumnsType} from "antd/es/table"
+import {useRouter} from "next/router"
+import React from "react"
+import {createUseStyles} from "react-jss"
+
+const {Title} = Typography
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.paddingXS,
+        "& > div h1.ant-typography": {
+            fontSize: theme.fontSize,
+        },
+    },
+}))
+
+const AutomaticEvalOverview = () => {
+    const classes = useStyles()
+    const router = useRouter()
+    const appId = router.query.app_id as string
+
+    const columns: ColumnsType<any> = [
+        {
+            title: "Test set",
+        },
+        {
+            title: "Variant",
+        },
+        {
+            title: "Status",
+        },
+        {
+            title: "Tokens",
+        },
+        {
+            title: "Cost",
+        },
+        {
+            title: "Latency",
+        },
+        {
+            title: "Created At",
+        },
+        {
+            title: <GearSix size={16} />,
+        },
+    ]
+
+    return (
+        <div className={classes.container}>
+            <div className="flex items-center justify-between">
+                <Title>Automatic Evaluations</Title>
+
+                <Space>
+                    <Button
+                        icon={<PlusOutlined />}
+                        size="small"
+                        onClick={() =>
+                            router.push(
+                                `/apps/${appId}/evaluations/results?openNewEvaluationModal=open`,
+                            )
+                        }
+                    >
+                        Start New
+                    </Button>
+                    <Button type="text" size="small" href={`/apps/${appId}/evaluations/results`}>
+                        View All
+                    </Button>
+                </Space>
+            </div>
+
+            <div>
+                <Table className="ph-no-capture" columns={columns} dataSource={[]} />
+            </div>
+        </div>
+    )
+}
+
+export default AutomaticEvalOverview
diff --git a/agenta-web/src/components/pages/overview/observability/ObservabilityOverview.tsx b/agenta-web/src/components/pages/overview/observability/ObservabilityOverview.tsx
new file mode 100644
index 000000000..760237537
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/observability/ObservabilityOverview.tsx
@@ -0,0 +1,7 @@
+import React from "react"
+
+const ObservabilityOverview = () => {
+    return <div>Observability Cards</div>
+}
+
+export default ObservabilityOverview
diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
new file mode 100644
index 000000000..75a532ff2
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -0,0 +1,80 @@
+import {JSSTheme} from "@/lib/Types"
+import {PlusOutlined} from "@ant-design/icons"
+import {GearSix} from "@phosphor-icons/react"
+import {Button, Space, Table, Typography} from "antd"
+import {ColumnsType} from "antd/es/table"
+import {useRouter} from "next/router"
+import React from "react"
+import {createUseStyles} from "react-jss"
+
+const {Title} = Typography
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.paddingXS,
+        "& > div h1.ant-typography": {
+            fontSize: theme.fontSize,
+        },
+    },
+}))
+
+const SingleModelEvalOverview = () => {
+    const classes = useStyles()
+    const router = useRouter()
+    const appId = router.query.app_id as string
+
+    const columns: ColumnsType<any> = [
+        {
+            title: "Test set",
+        },
+        {
+            title: "Variant",
+        },
+        {
+            title: "Average Score",
+        },
+        {
+            title: "Created At",
+        },
+        {
+            title: <GearSix size={16} />,
+        },
+    ]
+
+    return (
+        <div className={classes.container}>
+            <div className="flex items-center justify-between">
+                <Title>Single Model Evaluations</Title>
+
+                <Space>
+                    <Button
+                        icon={<PlusOutlined />}
+                        size="small"
+                        onClick={() =>
+                            router.push(
+                                `/apps/${appId}/annotations/single_model_test?openHumanEvalModal=open`,
+                            )
+                        }
+                    >
+                        Start New
+                    </Button>
+                    <Button
+                        type="text"
+                        size="small"
+                        href={`/apps/${appId}/annotations/single_model_test`}
+                    >
+                        View All
+                    </Button>
+                </Space>
+            </div>
+
+            <div>
+                <Table className="ph-no-capture" columns={columns} dataSource={[]} />
+            </div>
+        </div>
+    )
+}
+
+export default SingleModelEvalOverview
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index c67f52079..1f18993f1 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -1,4 +1,8 @@
+import AbTestingEvalOverview from "@/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview"
+import AutomaticEvalOverview from "@/components/pages/overview/automaticEvaluation/AutomaticEvalOverview"
 import DeploymentOverview from "@/components/pages/overview/deployments/DeploymentOverview"
+import ObservabilityOverview from "@/components/pages/overview/observability/ObservabilityOverview"
+import SingleModelEvalOverview from "@/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview"
 import VariantsOverview from "@/components/pages/overview/variants/VariantsOverview"
 import {JSSTheme} from "@/lib/Types"
 import {Typography} from "antd"
@@ -12,14 +16,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         flexDirection: "column",
         gap: theme.paddingLG,
     },
-    section: {
-        display: "flex",
-        flexDirection: "column",
-        gap: theme.paddingXS,
-        "& > h1.ant-typography": {
-            fontSize: theme.fontSize,
-        },
-    },
 }))
 
 export default function Overview() {
@@ -28,11 +24,17 @@ export default function Overview() {
         <div className={classes.container}>
             <Title level={3}>Overview</Title>
 
-            <div>Observability Cards</div>
+            <ObservabilityOverview />
 
             <DeploymentOverview />
 
             <VariantsOverview />
+
+            <AutomaticEvalOverview />
+
+            <AbTestingEvalOverview />
+
+            <SingleModelEvalOverview />
         </div>
     )
 }

From e2b069a7afe56e51f57c43388dff9cc57f72cfbe Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 4 Aug 2024 11:47:07 +0100
Subject: [PATCH 019/117] design(frontend): added query param key value to open
 evaluation modals on navigate

---
 .../HumanEvaluationModal/HumanEvaluationModal.tsx      |  8 +++++++-
 .../evaluationResults/EvaluationResults.tsx            | 10 ++++++++--
 .../apps/[app_id]/annotations/human_a_b_testing.tsx    |  6 +++++-
 .../apps/[app_id]/annotations/single_model_test.tsx    |  5 ++++-
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx b/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
index 74396dab4..6342cd370 100644
--- a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
+++ b/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
@@ -117,12 +117,14 @@ interface HumanEvaluationModalProps {
     isEvalModalOpen: boolean
     setIsEvalModalOpen: React.Dispatch<React.SetStateAction<boolean>>
     evaluationType: "single_model_test" | "human_a_b_testing"
+    setIsQueryHumanEvalOpen: (val: string) => void
 }
 
 const HumanEvaluationModal = ({
     isEvalModalOpen,
     setIsEvalModalOpen,
     evaluationType,
+    setIsQueryHumanEvalOpen,
 }: HumanEvaluationModalProps) => {
     const router = useRouter()
     const {appTheme} = useAppTheme()
@@ -352,6 +354,7 @@ const HumanEvaluationModal = ({
                 open={isEvalModalOpen}
                 onCancel={() => {
                     setIsEvalModalOpen(false)
+                    setIsQueryHumanEvalOpen("")
                     setSelectedTestset({name: "Select a Test set"})
                     setSelectedVariants(new Array(1).fill({variantName: "Select a variant"}))
                 }}
@@ -403,7 +406,10 @@ const HumanEvaluationModal = ({
                                 <Button
                                     style={{marginRight: "auto"}}
                                     key="cancel"
-                                    onClick={() => setIsEvalModalOpen(false)}
+                                    onClick={() => {
+                                        setIsEvalModalOpen(false)
+                                        setIsQueryHumanEvalOpen("")
+                                    }}
                                 >
                                     Cancel
                                 </Button>
diff --git a/agenta-web/src/components/pages/evaluations/evaluationResults/EvaluationResults.tsx b/agenta-web/src/components/pages/evaluations/evaluationResults/EvaluationResults.tsx
index 427c743e4..68008feb4 100644
--- a/agenta-web/src/components/pages/evaluations/evaluationResults/EvaluationResults.tsx
+++ b/agenta-web/src/components/pages/evaluations/evaluationResults/EvaluationResults.tsx
@@ -45,6 +45,7 @@ import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 import {getAppValues} from "@/contexts/app.context"
 import {convertToCsv, downloadCsv} from "@/lib/helpers/fileManipulations"
 import {formatDate24} from "@/lib/helpers/dateTimeHelper"
+import {useQueryParam} from "@/hooks/useQuery"
 
 dayjs.extend(relativeTime)
 dayjs.extend(duration)
@@ -88,6 +89,8 @@ const EvaluationResults: React.FC<Props> = () => {
     const [evaluations, setEvaluations] = useState<_Evaluation[]>([])
     const [evaluators] = useAtom(evaluatorsAtom)
     const [newEvalModalOpen, setNewEvalModalOpen] = useState(false)
+    const [queryNewEvalModalOpen, setQueryNewEvalModalOpen] =
+        useQueryParam("openNewEvaluationModal")
     const [fetching, setFetching] = useState(false)
     const [selected, setSelected] = useState<_Evaluation[]>([])
     const stoppers = useRef<Function>()
@@ -519,8 +522,11 @@ const EvaluationResults: React.FC<Props> = () => {
                 </div>
             )}
             <NewEvaluationModal
-                open={newEvalModalOpen}
-                onCancel={() => setNewEvalModalOpen(false)}
+                open={queryNewEvalModalOpen === "open" || newEvalModalOpen}
+                onCancel={() => {
+                    setNewEvalModalOpen(false)
+                    setQueryNewEvalModalOpen("")
+                }}
                 onSuccess={() => {
                     setNewEvalModalOpen(false)
                     fetcher()
diff --git a/agenta-web/src/pages/apps/[app_id]/annotations/human_a_b_testing.tsx b/agenta-web/src/pages/apps/[app_id]/annotations/human_a_b_testing.tsx
index def899328..1225dcdff 100644
--- a/agenta-web/src/pages/apps/[app_id]/annotations/human_a_b_testing.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/annotations/human_a_b_testing.tsx
@@ -1,17 +1,21 @@
 import HumanEvaluationResult from "@/components/Evaluations/HumanEvaluationResult"
 import HumanEvaluationModal from "@/components/HumanEvaluationModal/HumanEvaluationModal"
+import {useQueryParam} from "@/hooks/useQuery"
 import React, {useState} from "react"
 
 const HumanABTestingEvaluation = () => {
     const [isEvalModalOpen, setIsEvalModalOpen] = useState(false)
+    const [isQueryHumanEvalOpen, setIsQueryHumanEvalOpen] = useQueryParam("openHumanEvalModal")
+
     return (
         <>
             <HumanEvaluationResult setIsEvalModalOpen={setIsEvalModalOpen} />
 
             <HumanEvaluationModal
                 evaluationType={"human_a_b_testing"}
-                isEvalModalOpen={isEvalModalOpen}
+                isEvalModalOpen={isQueryHumanEvalOpen === "open" || isEvalModalOpen}
                 setIsEvalModalOpen={setIsEvalModalOpen}
+                setIsQueryHumanEvalOpen={setIsQueryHumanEvalOpen}
             />
         </>
     )
diff --git a/agenta-web/src/pages/apps/[app_id]/annotations/single_model_test.tsx b/agenta-web/src/pages/apps/[app_id]/annotations/single_model_test.tsx
index 9487da1bc..5be2153a9 100644
--- a/agenta-web/src/pages/apps/[app_id]/annotations/single_model_test.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/annotations/single_model_test.tsx
@@ -1,9 +1,11 @@
 import React, {useState} from "react"
 import AutomaticEvaluationResult from "@/components/Evaluations/AutomaticEvaluationResult"
 import HumanEvaluationModal from "@/components/HumanEvaluationModal/HumanEvaluationModal"
+import {useQueryParam} from "@/hooks/useQuery"
 
 const SingleModelTestEvaluation = () => {
     const [isEvalModalOpen, setIsEvalModalOpen] = useState(false)
+    const [isQueryHumanEvalOpen, setIsQueryHumanEvalOpen] = useQueryParam("openHumanEvalModal")
 
     return (
         <>
@@ -11,8 +13,9 @@ const SingleModelTestEvaluation = () => {
 
             <HumanEvaluationModal
                 evaluationType={"single_model_test"}
-                isEvalModalOpen={isEvalModalOpen}
+                isEvalModalOpen={isQueryHumanEvalOpen === "open" || isEvalModalOpen}
                 setIsEvalModalOpen={setIsEvalModalOpen}
+                setIsQueryHumanEvalOpen={setIsQueryHumanEvalOpen}
             />
         </>
     )

From 193798e45a18a9bdb83218aba25789870efbd91a Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 4 Aug 2024 11:49:11 +0100
Subject: [PATCH 020/117] design(frontend): drafted variants overview

---
 .../overview/variants/VariantsOverview.tsx    | 40 +++++++++++++++----
 1 file changed, 32 insertions(+), 8 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 5ba8bfa16..abc15f61c 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -1,12 +1,13 @@
 import {JSSTheme} from "@/lib/Types"
-import {Rocket} from "@phosphor-icons/react"
-import {Button, Typography} from "antd"
+import {GearSix, Rocket} from "@phosphor-icons/react"
+import {Table, Typography} from "antd"
+import {ColumnsType} from "antd/es/table"
 import Link from "next/link"
 import {useRouter} from "next/router"
 import React from "react"
 import {createUseStyles} from "react-jss"
 
-const {Title, Text} = Typography
+const {Title} = Typography
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     container: {
@@ -20,10 +21,10 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     titleLink: {
         display: "flex",
         alignItems: "center",
-        gap: theme.paddingSM,
+        gap: theme.paddingXS,
         border: `1px solid ${theme.colorBorder}`,
-        padding: "5px 15px",
-        height: 32,
+        padding: "1px 7px",
+        height: 24,
         borderRadius: theme.borderRadius,
         color: theme.colorText,
         "&:hover": {
@@ -37,18 +38,41 @@ const VariantsOverview = () => {
     const router = useRouter()
     const appId = router.query.app_id as string
 
+    const columns: ColumnsType<any> = [
+        {
+            title: "Name",
+        },
+        {
+            title: "Tokens",
+        },
+        {
+            title: "Cost",
+        },
+        {
+            title: "Latency",
+        },
+        {
+            title: "Created At",
+        },
+        {
+            title: <GearSix size={16} />,
+        },
+    ]
+
     return (
         <div className={classes.container}>
             <div className="flex items-center justify-between">
                 <Title>Variants</Title>
 
                 <Link href={`/apps/${appId}/playground`} className={classes.titleLink}>
-                    <Rocket size={16} />
+                    <Rocket size={14} />
                     Playground
                 </Link>
             </div>
 
-            <div>hello</div>
+            <div>
+                <Table className="ph-no-capture" columns={columns} dataSource={[]} />
+            </div>
         </div>
     )
 }

From d59c7d179e1b719a05b702331cb5e523f410e190 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 4 Aug 2024 11:54:57 +0100
Subject: [PATCH 021/117] fix(frontend): dynamically imported Observability
 overview

---
 .../pages/overview/observability/ObservabilityOverview.tsx | 7 -------
 agenta-web/src/pages/apps/[app_id]/overview/index.tsx      | 4 +++-
 2 files changed, 3 insertions(+), 8 deletions(-)
 delete mode 100644 agenta-web/src/components/pages/overview/observability/ObservabilityOverview.tsx

diff --git a/agenta-web/src/components/pages/overview/observability/ObservabilityOverview.tsx b/agenta-web/src/components/pages/overview/observability/ObservabilityOverview.tsx
deleted file mode 100644
index 760237537..000000000
--- a/agenta-web/src/components/pages/overview/observability/ObservabilityOverview.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react"
-
-const ObservabilityOverview = () => {
-    return <div>Observability Cards</div>
-}
-
-export default ObservabilityOverview
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 1f18993f1..414ac32db 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -1,13 +1,15 @@
 import AbTestingEvalOverview from "@/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview"
 import AutomaticEvalOverview from "@/components/pages/overview/automaticEvaluation/AutomaticEvalOverview"
 import DeploymentOverview from "@/components/pages/overview/deployments/DeploymentOverview"
-import ObservabilityOverview from "@/components/pages/overview/observability/ObservabilityOverview"
 import SingleModelEvalOverview from "@/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview"
 import VariantsOverview from "@/components/pages/overview/variants/VariantsOverview"
+import {dynamicComponent} from "@/lib/helpers/dynamic"
 import {JSSTheme} from "@/lib/Types"
 import {Typography} from "antd"
 import {createUseStyles} from "react-jss"
 
+const ObservabilityOverview = dynamicComponent("pages/overview/observability/ObservabilityOverview")
+
 const {Title} = Typography
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({

From f9024f9b8c88c0b0de7d9f8617762490eca22040 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 4 Aug 2024 17:58:37 +0100
Subject: [PATCH 022/117] fix(frontend): added transformer function to human
 eval response

---
 .../Evaluations/AutomaticEvaluationResult.tsx | 20 ++------
 .../Evaluations/HumanEvaluationResult.tsx     | 37 ++++-----------
 agenta-web/src/lib/transformers.ts            | 47 +++++++++++++++++++
 3 files changed, 62 insertions(+), 42 deletions(-)

diff --git a/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx b/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx
index c7a00dac7..262fd5ab1 100644
--- a/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx
+++ b/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx
@@ -13,7 +13,10 @@ import {EvaluationFlow, EvaluationType} from "@/lib/enums"
 import {createUseStyles} from "react-jss"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 import {calculateResultsDataAvg} from "@/lib/helpers/evaluate"
-import {fromEvaluationResponseToEvaluation} from "@/lib/transformers"
+import {
+    fromEvaluationResponseToEvaluation,
+    singleModelTestEvaluationTransformer,
+} from "@/lib/transformers"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 
 interface EvaluationListTableDataType {
@@ -108,20 +111,7 @@ export default function AutomaticEvaluationResult({
                 const newEvals = results.map((result, ix) => {
                     const item = evals[ix]
                     if ([EvaluationType.single_model_test].includes(item.evaluationType)) {
-                        return {
-                            key: item.id,
-                            createdAt: item.createdAt,
-                            variants: item.variants,
-                            scoresData: result.scores_data,
-                            evaluationType: item.evaluationType,
-                            status: item.status,
-                            testset: item.testset,
-                            custom_code_eval_id: item.evaluationTypeSettings.customCodeEvaluationId,
-                            resultsData: result.results_data,
-                            avgScore: result.avg_score,
-                            revisions: item.revisions,
-                            variant_revision_ids: item.variant_revision_ids,
-                        }
+                        return singleModelTestEvaluationTransformer({item, result})
                     }
                 })
 
diff --git a/agenta-web/src/components/Evaluations/HumanEvaluationResult.tsx b/agenta-web/src/components/Evaluations/HumanEvaluationResult.tsx
index 811adf13c..e72c30c0e 100644
--- a/agenta-web/src/components/Evaluations/HumanEvaluationResult.tsx
+++ b/agenta-web/src/components/Evaluations/HumanEvaluationResult.tsx
@@ -1,5 +1,8 @@
-import {fetchData} from "@/services/api"
-import {deleteEvaluations} from "@/services/human-evaluations/api"
+import {
+    deleteEvaluations,
+    fetchAllLoadEvaluations,
+    fetchEvaluationResults,
+} from "@/services/human-evaluations/api"
 import {Button, Spin, Statistic, Table, Typography} from "antd"
 import {useRouter} from "next/router"
 import {useEffect, useState} from "react"
@@ -8,11 +11,11 @@ import {EvaluationResponseType, StyleProps} from "@/lib/Types"
 import {DeleteOutlined} from "@ant-design/icons"
 import {EvaluationFlow, EvaluationType} from "@/lib/enums"
 import {createUseStyles} from "react-jss"
-import {formatDate} from "@/lib/helpers/dateTimeHelper"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 import {getVotesPercentage} from "@/lib/helpers/evaluate"
-import {getAgentaApiUrl, isDemo} from "@/lib/helpers/utils"
+import {isDemo} from "@/lib/helpers/utils"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
+import {abTestingEvaluationTransformer} from "@/lib/transformers"
 
 interface VariantVotesData {
     number_of_votes: number
@@ -126,34 +129,14 @@ export default function HumanEvaluationResult({setIsEvalModalOpen}: HumanEvaluat
         const fetchEvaluations = async () => {
             try {
                 setFetchingEvaluations(true)
-                fetchData(`${getAgentaApiUrl()}/api/human-evaluations/?app_id=${app_id}`)
+                fetchAllLoadEvaluations(app_id)
                     .then((response) => {
                         const fetchPromises = response.map((item: EvaluationResponseType) => {
-                            return fetchData(
-                                `${getAgentaApiUrl()}/api/human-evaluations/${item.id}/results/`,
-                            )
+                            return fetchEvaluationResults(item.id)
                                 .then((results) => {
                                     if (item.evaluation_type === EvaluationType.human_a_b_testing) {
                                         if (Object.keys(results.votes_data).length > 0) {
-                                            return {
-                                                key: item.id,
-                                                createdAt: formatDate(item.created_at),
-                                                variants: item.variant_ids,
-                                                variantNames: item.variant_names,
-                                                votesData: results.votes_data,
-                                                evaluationType: item.evaluation_type,
-                                                status: item.status,
-                                                user: {
-                                                    id: item.user_id,
-                                                    username: item.user_username,
-                                                },
-                                                testset: {
-                                                    _id: item.testset_id,
-                                                    name: item.testset_name,
-                                                },
-                                                revisions: item.revisions,
-                                                variant_revision_ids: item.variants_revision_ids,
-                                            }
+                                            return abTestingEvaluationTransformer({item, results})
                                         }
                                     }
                                 })
diff --git a/agenta-web/src/lib/transformers.ts b/agenta-web/src/lib/transformers.ts
index 04ff89bc7..6d85179c9 100644
--- a/agenta-web/src/lib/transformers.ts
+++ b/agenta-web/src/lib/transformers.ts
@@ -74,3 +74,50 @@ export const fromEvaluationScenarioResponseToEvaluationScenario = (
     }
     return evaluationScenario
 }
+
+export const abTestingEvaluationTransformer = ({
+    item,
+    results,
+}: {
+    item: EvaluationResponseType
+    results: any
+}) => ({
+    key: item.id,
+    createdAt: formatDate(item.created_at),
+    variants: item.variant_ids,
+    variantNames: item.variant_names,
+    votesData: results.votes_data,
+    evaluationType: item.evaluation_type,
+    status: item.status,
+    user: {
+        id: item.user_id,
+        username: item.user_username,
+    },
+    testset: {
+        _id: item.testset_id,
+        name: item.testset_name,
+    },
+    revisions: item.revisions,
+    variant_revision_ids: item.variants_revision_ids,
+})
+
+export const singleModelTestEvaluationTransformer = ({
+    item,
+    result,
+}: {
+    item: Evaluation
+    result: any
+}) => ({
+    key: item.id,
+    createdAt: item.createdAt,
+    variants: item.variants,
+    scoresData: result.scores_data,
+    evaluationType: item.evaluationType,
+    status: item.status,
+    testset: item.testset,
+    custom_code_eval_id: item.evaluationTypeSettings.customCodeEvaluationId,
+    resultsData: result.results_data,
+    avgScore: result.avg_score,
+    revisions: item.revisions,
+    variant_revision_ids: item.variant_revision_ids,
+})

From a880b50a6466cda45d213ec9d8ea6bd93e67e0a2 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 4 Aug 2024 19:41:10 +0100
Subject: [PATCH 023/117] fix(frontend): added settings option in evaluation
 table

---
 .../AutomaticEvalOverview.tsx                 | 28 +++++++++++++++++--
 .../SingleModelEvalOverview.tsx               | 28 +++++++++++++++++--
 .../overview/variants/VariantsOverview.tsx    | 27 +++++++++++++++++-
 3 files changed, 78 insertions(+), 5 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index 5eb57e1fa..ac965e17b 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -1,7 +1,7 @@
 import {JSSTheme} from "@/lib/Types"
-import {PlusOutlined} from "@ant-design/icons"
+import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
 import {GearSix} from "@phosphor-icons/react"
-import {Button, Space, Table, Typography} from "antd"
+import {Button, Dropdown, Space, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
 import React from "react"
@@ -49,6 +49,30 @@ const AutomaticEvalOverview = () => {
         },
         {
             title: <GearSix size={16} />,
+            key: "settings",
+            width: 50,
+            render: () => {
+                return (
+                    <Dropdown
+                        trigger={["hover"]}
+                        menu={{
+                            items: [
+                                {
+                                    key: "change_variant",
+                                    label: "Change Variant",
+                                },
+
+                                {
+                                    key: "open_playground",
+                                    label: "Open in playground",
+                                },
+                            ],
+                        }}
+                    >
+                        <Button type="text" icon={<MoreOutlined />} size="small" />
+                    </Dropdown>
+                )
+            },
         },
     ]
 
diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
index 75a532ff2..64e8290ff 100644
--- a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -1,7 +1,7 @@
 import {JSSTheme} from "@/lib/Types"
-import {PlusOutlined} from "@ant-design/icons"
+import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
 import {GearSix} from "@phosphor-icons/react"
-import {Button, Space, Table, Typography} from "antd"
+import {Button, Dropdown, Space, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
 import React from "react"
@@ -40,6 +40,30 @@ const SingleModelEvalOverview = () => {
         },
         {
             title: <GearSix size={16} />,
+            key: "settings",
+            width: 50,
+            render: () => {
+                return (
+                    <Dropdown
+                        trigger={["hover"]}
+                        menu={{
+                            items: [
+                                {
+                                    key: "change_variant",
+                                    label: "Change Variant",
+                                },
+
+                                {
+                                    key: "open_playground",
+                                    label: "Open in playground",
+                                },
+                            ],
+                        }}
+                    >
+                        <Button type="text" icon={<MoreOutlined />} size="small" />
+                    </Dropdown>
+                )
+            },
         },
     ]
 
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index abc15f61c..2c97ea370 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -1,6 +1,7 @@
 import {JSSTheme} from "@/lib/Types"
+import {MoreOutlined} from "@ant-design/icons"
 import {GearSix, Rocket} from "@phosphor-icons/react"
-import {Table, Typography} from "antd"
+import {Button, Dropdown, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import Link from "next/link"
 import {useRouter} from "next/router"
@@ -56,6 +57,30 @@ const VariantsOverview = () => {
         },
         {
             title: <GearSix size={16} />,
+            key: "settings",
+            width: 50,
+            render: () => {
+                return (
+                    <Dropdown
+                        trigger={["hover"]}
+                        menu={{
+                            items: [
+                                {
+                                    key: "change_variant",
+                                    label: "Change Variant",
+                                },
+
+                                {
+                                    key: "open_playground",
+                                    label: "Open in playground",
+                                },
+                            ],
+                        }}
+                    >
+                        <Button type="text" icon={<MoreOutlined />} size="small" />
+                    </Dropdown>
+                )
+            },
         },
     ]
 

From 25259c3cfa9b3659b782452ecb8c260dc3fa13ee Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 4 Aug 2024 19:41:51 +0100
Subject: [PATCH 024/117] fix(frontend): improved logic and added card loaders

---
 .../deployments/DeploymentOverview.tsx        | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
index cbb78135d..a7323e6df 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -45,20 +45,24 @@ const DeploymentOverview = () => {
     const appId = router.query.app_id as string
     const [environments, setEnvironments] = useState<Environment[]>([])
     const [selectedEnvironment, setSelectedEnvironment] = useState<Environment>()
-
-    const loadEnvironments = async () => {
-        try {
-            const response = await fetchEnvironments(appId)
-            setEnvironments(response)
-        } catch (error) {
-            console.error(error)
-        }
-    }
+    const [isDeploymentLoading, setIsDeploymentLoading] = useState(false)
 
     useEffect(() => {
-        if (appId) {
-            loadEnvironments()
+        if (!appId) return
+
+        const loadEnvironments = async () => {
+            try {
+                setIsDeploymentLoading(true)
+                const response = await fetchEnvironments(appId)
+                setEnvironments(response)
+            } catch (error) {
+                console.error(error)
+            } finally {
+                setIsDeploymentLoading(false)
+            }
         }
+
+        loadEnvironments()
     }, [appId])
 
     return (
@@ -67,7 +71,7 @@ const DeploymentOverview = () => {
 
             <div className={classes.cardContainer}>
                 {environments.map((env, index) => (
-                    <Card key={index}>
+                    <Card key={index} loading={isDeploymentLoading}>
                         <Dropdown
                             trigger={["click"]}
                             menu={{

From 03124b22f05ada4c559249a13b865b14aca3ba29 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 4 Aug 2024 19:44:47 +0100
Subject: [PATCH 025/117] fix(frontend): improved ab testing eval overview
 table

---
 .../AbTestingEvalOverview.tsx                 | 233 ++++++++++++++++--
 1 file changed, 219 insertions(+), 14 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
index a9c738110..7d493ec30 100644
--- a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -1,10 +1,17 @@
+import {HumanEvaluationListTableDataType} from "@/components/Evaluations/HumanEvaluationResult"
+import {EvaluationType} from "@/lib/enums"
+import {getVotesPercentage} from "@/lib/helpers/evaluate"
+import {isDemo} from "@/lib/helpers/utils"
+import {variantNameWithRev} from "@/lib/helpers/variantHelper"
+import {abTestingEvaluationTransformer} from "@/lib/transformers"
 import {JSSTheme} from "@/lib/Types"
-import {PlusOutlined} from "@ant-design/icons"
+import {fetchAllLoadEvaluations, fetchEvaluationResults} from "@/services/human-evaluations/api"
+import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
 import {GearSix} from "@phosphor-icons/react"
-import {Button, Space, Table, Typography} from "antd"
+import {Button, Dropdown, Space, Spin, Statistic, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
-import React from "react"
+import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 
 const {Title} = Typography
@@ -18,6 +25,36 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             fontSize: theme.fontSize,
         },
     },
+    statFlag: {
+        "& .ant-statistic-content-value": {
+            fontSize: 20,
+            color: "#cf1322",
+        },
+        "& .ant-statistic-content-suffix": {
+            fontSize: 20,
+            color: "#cf1322",
+        },
+    },
+    stat: {
+        "& .ant-statistic-content-value": {
+            fontSize: 20,
+            color: "#1677ff",
+        },
+        "& .ant-statistic-content-suffix": {
+            fontSize: 20,
+            color: "#1677ff",
+        },
+    },
+    statGood: {
+        "& .ant-statistic-content-value": {
+            fontSize: 20,
+            color: "#3f8600",
+        },
+        "& .ant-statistic-content-suffix": {
+            fontSize: 20,
+            color: "#3f8600",
+        },
+    },
 }))
 
 const AbTestingEvalOverview = () => {
@@ -25,30 +62,198 @@ const AbTestingEvalOverview = () => {
     const router = useRouter()
     const appId = router.query.app_id as string
 
-    const columns: ColumnsType<any> = [
+    const [evaluationsList, setEvaluationsList] = useState<HumanEvaluationListTableDataType[]>([])
+    const [fetchingEvaluations, setFetchingEvaluations] = useState(false)
+
+    useEffect(() => {
+        if (!appId) return
+
+        const fetchEvaluations = async () => {
+            try {
+                setFetchingEvaluations(true)
+                const evals = await fetchAllLoadEvaluations(appId)
+
+                const fetchPromises = evals.map(async (item: any) => {
+                    return fetchEvaluationResults(item.id)
+                        .then((results) => {
+                            if (item.evaluation_type === EvaluationType.human_a_b_testing) {
+                                if (Object.keys(results.votes_data).length > 0) {
+                                    return abTestingEvaluationTransformer({item, results})
+                                }
+                            }
+                        })
+                        .catch((err) => console.error(err))
+                })
+
+                const results = (await Promise.all(fetchPromises))
+                    .filter((evaluation) => evaluation !== undefined)
+                    .slice(0, 5)
+
+                setEvaluationsList(results)
+            } catch (error) {
+                console.error(error)
+            } finally {
+                setFetchingEvaluations(false)
+            }
+        }
+
+        fetchEvaluations()
+    }, [appId])
+
+    const handleNavigation = (variantName: string, revisionNum: string) => {
+        router.push(`/apps/${appId}/playground?variant=${variantName}&revision=${revisionNum}`)
+    }
+
+    const columns: ColumnsType<HumanEvaluationListTableDataType> = [
         {
             title: "Test set",
+            dataIndex: "testsetName",
+            key: "testsetName",
+            render: (_, record: HumanEvaluationListTableDataType, index: number) => {
+                return <span>{record.testset.name}</span>
+            },
         },
         {
             title: "Variant 1",
+            dataIndex: "variantNames",
+            key: "variant1",
+            render: (value, record) => {
+                const percentage = getVotesPercentage(record, 0)
+                return (
+                    <div>
+                        <Statistic
+                            className={classes.stat}
+                            value={percentage}
+                            precision={percentage <= 99 ? 2 : 1}
+                            suffix="%"
+                        />
+                        <div
+                            style={{cursor: "pointer"}}
+                            onClick={() => handleNavigation(value[0], record.revisions[0])}
+                        >
+                            (
+                            {variantNameWithRev({
+                                variant_name: value[0],
+                                revision: record.revisions[0],
+                            })}
+                            )
+                        </div>
+                    </div>
+                )
+            },
         },
         {
             title: "Variant 2",
+            dataIndex: "variantNames",
+            key: "variant2",
+            render: (value, record) => {
+                const percentage = getVotesPercentage(record, 1)
+                return (
+                    <div>
+                        <Statistic
+                            className={classes.stat}
+                            value={percentage}
+                            precision={percentage <= 99 ? 2 : 1}
+                            suffix="%"
+                        />
+                        <div
+                            style={{cursor: "pointer"}}
+                            onClick={() => handleNavigation(value[1], record.revisions[1])}
+                        >
+                            (
+                            {variantNameWithRev({
+                                variant_name: value[1],
+                                revision: record.revisions[1],
+                            })}
+                            )
+                        </div>
+                    </div>
+                )
+            },
         },
         {
             title: "Both are good",
+            dataIndex: "positive",
+            key: "positive",
+            render: (value: any, record: HumanEvaluationListTableDataType) => {
+                let percentage = record.votesData.positive_votes.percentage
+                return (
+                    <span>
+                        <Statistic
+                            className={classes.statGood}
+                            value={percentage}
+                            precision={percentage <= 99 ? 2 : 1}
+                            suffix="%"
+                        />
+                    </span>
+                )
+            },
         },
         {
-            title: "flag",
-        },
-        {
-            title: "Created At",
-        },
-        {
-            title: <GearSix size={16} />,
+            title: "Flag",
+            dataIndex: "flag",
+            key: "flag",
+            render: (value: any, record: HumanEvaluationListTableDataType) => {
+                let percentage = record.votesData.flag_votes.percentage
+                return (
+                    <span>
+                        <Statistic
+                            className={classes.statFlag}
+                            value={percentage}
+                            precision={percentage <= 99 ? 2 : 1}
+                            suffix="%"
+                        />
+                    </span>
+                )
+            },
         },
     ]
 
+    if (isDemo()) {
+        columns.push({
+            title: "User",
+            dataIndex: ["user", "username"],
+            key: "username",
+        })
+    }
+
+    columns.push(
+        ...[
+            {
+                title: "Created at",
+                dataIndex: "createdAt",
+                key: "createdAt",
+            },
+            {
+                title: <GearSix size={16} />,
+                key: "settings",
+                width: 50,
+                render: () => {
+                    return (
+                        <Dropdown
+                            trigger={["hover"]}
+                            menu={{
+                                items: [
+                                    {
+                                        key: "change_variant",
+                                        label: "Change Variant",
+                                    },
+
+                                    {
+                                        key: "open_playground",
+                                        label: "Open in playground",
+                                    },
+                                ],
+                            }}
+                        >
+                            <Button type="text" icon={<MoreOutlined />} size="small" />
+                        </Dropdown>
+                    )
+                },
+            },
+        ],
+    )
+
     return (
         <div className={classes.container}>
             <div className="flex items-center justify-between">
@@ -76,9 +281,9 @@ const AbTestingEvalOverview = () => {
                 </Space>
             </div>
 
-            <div>
-                <Table className="ph-no-capture" columns={columns} dataSource={[]} />
-            </div>
+            <Spin spinning={fetchingEvaluations}>
+                <Table className="ph-no-capture" columns={columns} dataSource={evaluationsList} />
+            </Spin>
         </div>
     )
 }

From 600508959be1212d8afd84a7c1985e65e066b454 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 4 Aug 2024 23:09:35 +0100
Subject: [PATCH 026/117] fix(frontend): improved single model eval overview
 table

---
 .../Evaluations/AutomaticEvaluationResult.tsx |  46 ++----
 .../SingleModelEvalOverview.tsx               | 144 ++++++++++++++++--
 agenta-web/src/lib/Types.ts                   |  25 +++
 3 files changed, 173 insertions(+), 42 deletions(-)

diff --git a/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx b/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx
index 262fd5ab1..740a43a28 100644
--- a/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx
+++ b/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx
@@ -7,7 +7,7 @@ import {Button, Spin, Statistic, Table, Typography} from "antd"
 import {useRouter} from "next/router"
 import {useEffect, useState} from "react"
 import {ColumnsType} from "antd/es/table"
-import {Evaluation, GenericObject, StyleProps} from "@/lib/Types"
+import {Evaluation, SingleModelEvaluationListTableDataType, StyleProps} from "@/lib/Types"
 import {DeleteOutlined} from "@ant-design/icons"
 import {EvaluationFlow, EvaluationType} from "@/lib/enums"
 import {createUseStyles} from "react-jss"
@@ -19,31 +19,6 @@ import {
 } from "@/lib/transformers"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 
-interface EvaluationListTableDataType {
-    key: string
-    variants: string[]
-    testset: {
-        _id: string
-        name: string
-    }
-    evaluationType: string
-    status: EvaluationFlow
-    scoresData: {
-        nb_of_rows: number
-        wrong?: GenericObject[]
-        correct?: GenericObject[]
-        true?: GenericObject[]
-        false?: GenericObject[]
-        variant: string[]
-    }
-    avgScore: number
-    custom_code_eval_id: string
-    resultsData: {[key: string]: number}
-    createdAt: string
-    revisions: string[]
-    variant_revision_ids: string[]
-}
-
 const useStyles = createUseStyles({
     container: {
         marginBottom: 20,
@@ -88,7 +63,9 @@ export default function AutomaticEvaluationResult({
     setIsEvalModalOpen,
 }: AutomaticEvaluationResultProps) {
     const router = useRouter()
-    const [evaluationsList, setEvaluationsList] = useState<EvaluationListTableDataType[]>([])
+    const [evaluationsList, setEvaluationsList] = useState<
+        SingleModelEvaluationListTableDataType[]
+    >([])
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
     const [selectionType] = useState<"checkbox" | "radio">("checkbox")
     const {appTheme} = useAppTheme()
@@ -149,12 +126,12 @@ export default function AutomaticEvaluationResult({
         }
     }
 
-    const columns: ColumnsType<EvaluationListTableDataType> = [
+    const columns: ColumnsType<SingleModelEvaluationListTableDataType> = [
         {
             title: "Variant",
             dataIndex: "variants",
             key: "variants",
-            render: (value, record: EvaluationListTableDataType) => {
+            render: (value, record: SingleModelEvaluationListTableDataType) => {
                 return (
                     <div
                         onClick={() => handleNavigation(value[0].variantName, record.revisions[0])}
@@ -174,7 +151,7 @@ export default function AutomaticEvaluationResult({
             title: "Test set",
             dataIndex: "testsetName",
             key: "testsetName",
-            render: (value: any, record: EvaluationListTableDataType, index: number) => {
+            render: (value: any, record: SingleModelEvaluationListTableDataType, index: number) => {
                 return <span>{record.testset.name}</span>
             },
         },
@@ -182,7 +159,7 @@ export default function AutomaticEvaluationResult({
             title: "Average score",
             dataIndex: "averageScore",
             key: "averageScore",
-            render: (value: any, record: EvaluationListTableDataType, index: number) => {
+            render: (value: any, record: SingleModelEvaluationListTableDataType, index: number) => {
                 let score = 0
                 if (record.scoresData) {
                     score =
@@ -227,7 +204,7 @@ export default function AutomaticEvaluationResult({
             title: "Action",
             dataIndex: "action",
             key: "action",
-            render: (value: any, record: EvaluationListTableDataType, index: number) => {
+            render: (value: any, record: SingleModelEvaluationListTableDataType, index: number) => {
                 let actionText = "View evaluation"
                 if (record.status !== EvaluationFlow.EVALUATION_FINISHED) {
                     actionText = "Continue evaluation"
@@ -244,7 +221,10 @@ export default function AutomaticEvaluationResult({
     ]
 
     const rowSelection = {
-        onChange: (selectedRowKeys: React.Key[], selectedRows: EvaluationListTableDataType[]) => {
+        onChange: (
+            selectedRowKeys: React.Key[],
+            selectedRows: SingleModelEvaluationListTableDataType[],
+        ) => {
             setSelectedRowKeys(selectedRowKeys)
         },
     }
diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
index 64e8290ff..bb297784d 100644
--- a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -1,10 +1,18 @@
-import {JSSTheme} from "@/lib/Types"
+import {EvaluationType} from "@/lib/enums"
+import {calculateResultsDataAvg} from "@/lib/helpers/evaluate"
+import {variantNameWithRev} from "@/lib/helpers/variantHelper"
+import {
+    fromEvaluationResponseToEvaluation,
+    singleModelTestEvaluationTransformer,
+} from "@/lib/transformers"
+import {Evaluation, JSSTheme, SingleModelEvaluationListTableDataType} from "@/lib/Types"
+import {fetchAllLoadEvaluations, fetchEvaluationResults} from "@/services/human-evaluations/api"
 import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
 import {GearSix} from "@phosphor-icons/react"
-import {Button, Dropdown, Space, Table, Typography} from "antd"
+import {Button, Dropdown, Space, Spin, Statistic, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
-import React from "react"
+import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 
 const {Title} = Typography
@@ -18,6 +26,16 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             fontSize: theme.fontSize,
         },
     },
+    stat: {
+        "& .ant-statistic-content-value": {
+            fontSize: 20,
+            color: "#1677ff",
+        },
+        "& .ant-statistic-content-suffix": {
+            fontSize: 20,
+            color: "#1677ff",
+        },
+    },
 }))
 
 const SingleModelEvalOverview = () => {
@@ -25,18 +43,126 @@ const SingleModelEvalOverview = () => {
     const router = useRouter()
     const appId = router.query.app_id as string
 
-    const columns: ColumnsType<any> = [
+    const [evaluationsList, setEvaluationsList] = useState<
+        SingleModelEvaluationListTableDataType[]
+    >([])
+    const [fetchingEvaluations, setFetchingEvaluations] = useState(false)
+
+    useEffect(() => {
+        if (!appId) return
+
+        const fetchEvaluations = async () => {
+            try {
+                setFetchingEvaluations(true)
+                const evals: Evaluation[] = (await fetchAllLoadEvaluations(appId)).map(
+                    fromEvaluationResponseToEvaluation,
+                )
+                const results = await Promise.all(evals.map((e) => fetchEvaluationResults(e.id)))
+                const newEvals = results.map((result, ix) => {
+                    const item = evals[ix]
+                    if ([EvaluationType.single_model_test].includes(item.evaluationType)) {
+                        return singleModelTestEvaluationTransformer({item, result})
+                    }
+                })
+
+                const newEvalResults = newEvals
+                    .filter((evaluation) => evaluation !== undefined)
+                    .filter(
+                        (item: any) =>
+                            item.resultsData !== undefined ||
+                            !(Object.keys(item.scoresData || {}).length === 0) ||
+                            item.avgScore !== undefined,
+                    )
+                    .slice(0, 5)
+
+                setEvaluationsList(newEvalResults as any)
+            } catch (error) {
+                console.error(error)
+            } finally {
+                setFetchingEvaluations(false)
+            }
+        }
+
+        fetchEvaluations()
+    }, [appId])
+
+    const handleNavigation = (variantName: string, revisionNum: string) => {
+        router.push(`/apps/${appId}/playground?variant=${variantName}&revision=${revisionNum}`)
+    }
+
+    const columns: ColumnsType<SingleModelEvaluationListTableDataType> = [
         {
             title: "Test set",
+            dataIndex: "testsetName",
+            key: "testsetName",
+            render: (value: any, record: SingleModelEvaluationListTableDataType, index: number) => {
+                return <span>{record.testset.name}</span>
+            },
         },
         {
             title: "Variant",
+            dataIndex: "variants",
+            key: "variants",
+            render: (value, record: SingleModelEvaluationListTableDataType) => {
+                return (
+                    <div
+                        onClick={() => handleNavigation(value[0].variantName, record.revisions[0])}
+                        style={{cursor: "pointer"}}
+                    >
+                        <span>
+                            {variantNameWithRev({
+                                variant_name: value[0].variantName,
+                                revision: record.revisions[0],
+                            })}
+                        </span>
+                    </div>
+                )
+            },
         },
         {
-            title: "Average Score",
+            title: "Average score",
+            dataIndex: "averageScore",
+            key: "averageScore",
+            render: (value: any, record: SingleModelEvaluationListTableDataType, index: number) => {
+                let score = 0
+                if (record.scoresData) {
+                    score =
+                        ((record.scoresData.correct?.length ||
+                            record.scoresData.true?.length ||
+                            0) /
+                            record.scoresData.nb_of_rows) *
+                        100
+                } else if (record.resultsData) {
+                    const multiplier = {
+                        [EvaluationType.auto_webhook_test]: 100,
+                        [EvaluationType.single_model_test]: 1,
+                    }
+                    score = calculateResultsDataAvg(
+                        record.resultsData,
+                        multiplier[record.evaluationType as keyof typeof multiplier],
+                    )
+                    score = isNaN(score) ? 0 : score
+                } else if (record.avgScore) {
+                    score = record.avgScore * 100
+                }
+
+                return (
+                    <span>
+                        <Statistic
+                            className={classes.stat}
+                            value={score}
+                            precision={score <= 99 ? 2 : 1}
+                            suffix="%"
+                        />
+                    </span>
+                )
+            },
         },
         {
-            title: "Created At",
+            title: "Created at",
+            dataIndex: "createdAt",
+            key: "createdAt",
+            width: "300",
         },
         {
             title: <GearSix size={16} />,
@@ -94,9 +220,9 @@ const SingleModelEvalOverview = () => {
                 </Space>
             </div>
 
-            <div>
-                <Table className="ph-no-capture" columns={columns} dataSource={[]} />
-            </div>
+            <Spin spinning={fetchingEvaluations}>
+                <Table className="ph-no-capture" columns={columns} dataSource={evaluationsList} />
+            </Spin>
         </div>
     )
 }
diff --git a/agenta-web/src/lib/Types.ts b/agenta-web/src/lib/Types.ts
index 322da212a..760bf1541 100644
--- a/agenta-web/src/lib/Types.ts
+++ b/agenta-web/src/lib/Types.ts
@@ -493,3 +493,28 @@ export type PaginationQuery = {
 export type StyleProps = {
     themeMode: "dark" | "light"
 }
+
+export interface SingleModelEvaluationListTableDataType {
+    key: string
+    variants: string[]
+    testset: {
+        _id: string
+        name: string
+    }
+    evaluationType: string
+    status: EvaluationFlow
+    scoresData: {
+        nb_of_rows: number
+        wrong?: GenericObject[]
+        correct?: GenericObject[]
+        true?: GenericObject[]
+        false?: GenericObject[]
+        variant: string[]
+    }
+    avgScore: number
+    custom_code_eval_id: string
+    resultsData: {[key: string]: number}
+    createdAt: string
+    revisions: string[]
+    variant_revision_ids: string[]
+}

From e533e3cf6bb29dfd20d99a189a021c4d26393d8e Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 5 Aug 2024 12:06:33 +0100
Subject: [PATCH 027/117] fix(frontend): removed query human eval modal

---
 .../HumanEvaluationModal/HumanEvaluationModal.tsx        | 9 ++-------
 .../abTestingEvaluation/AbTestingEvalOverview.tsx        | 6 +-----
 .../singleModelEvaluation/SingleModelEvalOverview.tsx    | 6 +-----
 .../apps/[app_id]/annotations/human_a_b_testing.tsx      | 5 +----
 .../apps/[app_id]/annotations/single_model_test.tsx      | 5 +----
 5 files changed, 6 insertions(+), 25 deletions(-)

diff --git a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx b/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
index 6342cd370..06f7faa41 100644
--- a/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
+++ b/agenta-web/src/components/HumanEvaluationModal/HumanEvaluationModal.tsx
@@ -117,14 +117,12 @@ interface HumanEvaluationModalProps {
     isEvalModalOpen: boolean
     setIsEvalModalOpen: React.Dispatch<React.SetStateAction<boolean>>
     evaluationType: "single_model_test" | "human_a_b_testing"
-    setIsQueryHumanEvalOpen: (val: string) => void
 }
 
 const HumanEvaluationModal = ({
     isEvalModalOpen,
     setIsEvalModalOpen,
     evaluationType,
-    setIsQueryHumanEvalOpen,
 }: HumanEvaluationModalProps) => {
     const router = useRouter()
     const {appTheme} = useAppTheme()
@@ -354,7 +352,7 @@ const HumanEvaluationModal = ({
                 open={isEvalModalOpen}
                 onCancel={() => {
                     setIsEvalModalOpen(false)
-                    setIsQueryHumanEvalOpen("")
+
                     setSelectedTestset({name: "Select a Test set"})
                     setSelectedVariants(new Array(1).fill({variantName: "Select a variant"}))
                 }}
@@ -406,10 +404,7 @@ const HumanEvaluationModal = ({
                                 <Button
                                     style={{marginRight: "auto"}}
                                     key="cancel"
-                                    onClick={() => {
-                                        setIsEvalModalOpen(false)
-                                        setIsQueryHumanEvalOpen("")
-                                    }}
+                                    onClick={() => setIsEvalModalOpen(false)}
                                 >
                                     Cancel
                                 </Button>
diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
index 7d493ec30..e7d62c8f9 100644
--- a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -263,11 +263,7 @@ const AbTestingEvalOverview = () => {
                     <Button
                         icon={<PlusOutlined />}
                         size="small"
-                        onClick={() =>
-                            router.push(
-                                `/apps/${appId}/annotations/human_a_b_testing?openHumanEvalModal=open`,
-                            )
-                        }
+                        onClick={() => router.push(`/apps/${appId}/annotations/human_a_b_testing`)}
                     >
                         Start New
                     </Button>
diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
index bb297784d..43d9912ef 100644
--- a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -202,11 +202,7 @@ const SingleModelEvalOverview = () => {
                     <Button
                         icon={<PlusOutlined />}
                         size="small"
-                        onClick={() =>
-                            router.push(
-                                `/apps/${appId}/annotations/single_model_test?openHumanEvalModal=open`,
-                            )
-                        }
+                        onClick={() => router.push(`/apps/${appId}/annotations/single_model_test`)}
                     >
                         Start New
                     </Button>
diff --git a/agenta-web/src/pages/apps/[app_id]/annotations/human_a_b_testing.tsx b/agenta-web/src/pages/apps/[app_id]/annotations/human_a_b_testing.tsx
index 1225dcdff..ea60e0a9a 100644
--- a/agenta-web/src/pages/apps/[app_id]/annotations/human_a_b_testing.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/annotations/human_a_b_testing.tsx
@@ -1,11 +1,9 @@
 import HumanEvaluationResult from "@/components/Evaluations/HumanEvaluationResult"
 import HumanEvaluationModal from "@/components/HumanEvaluationModal/HumanEvaluationModal"
-import {useQueryParam} from "@/hooks/useQuery"
 import React, {useState} from "react"
 
 const HumanABTestingEvaluation = () => {
     const [isEvalModalOpen, setIsEvalModalOpen] = useState(false)
-    const [isQueryHumanEvalOpen, setIsQueryHumanEvalOpen] = useQueryParam("openHumanEvalModal")
 
     return (
         <>
@@ -13,9 +11,8 @@ const HumanABTestingEvaluation = () => {
 
             <HumanEvaluationModal
                 evaluationType={"human_a_b_testing"}
-                isEvalModalOpen={isQueryHumanEvalOpen === "open" || isEvalModalOpen}
+                isEvalModalOpen={isEvalModalOpen}
                 setIsEvalModalOpen={setIsEvalModalOpen}
-                setIsQueryHumanEvalOpen={setIsQueryHumanEvalOpen}
             />
         </>
     )
diff --git a/agenta-web/src/pages/apps/[app_id]/annotations/single_model_test.tsx b/agenta-web/src/pages/apps/[app_id]/annotations/single_model_test.tsx
index 5be2153a9..9487da1bc 100644
--- a/agenta-web/src/pages/apps/[app_id]/annotations/single_model_test.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/annotations/single_model_test.tsx
@@ -1,11 +1,9 @@
 import React, {useState} from "react"
 import AutomaticEvaluationResult from "@/components/Evaluations/AutomaticEvaluationResult"
 import HumanEvaluationModal from "@/components/HumanEvaluationModal/HumanEvaluationModal"
-import {useQueryParam} from "@/hooks/useQuery"
 
 const SingleModelTestEvaluation = () => {
     const [isEvalModalOpen, setIsEvalModalOpen] = useState(false)
-    const [isQueryHumanEvalOpen, setIsQueryHumanEvalOpen] = useQueryParam("openHumanEvalModal")
 
     return (
         <>
@@ -13,9 +11,8 @@ const SingleModelTestEvaluation = () => {
 
             <HumanEvaluationModal
                 evaluationType={"single_model_test"}
-                isEvalModalOpen={isQueryHumanEvalOpen === "open" || isEvalModalOpen}
+                isEvalModalOpen={isEvalModalOpen}
                 setIsEvalModalOpen={setIsEvalModalOpen}
-                setIsQueryHumanEvalOpen={setIsQueryHumanEvalOpen}
             />
         </>
     )

From 82e12bdc16e0b770cc5a2792bb506518a24a4c70 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 5 Aug 2024 12:09:12 +0100
Subject: [PATCH 028/117] design(frontend): modified deployment overview drawer
 width and added version and cleanup in Layout

---
 agenta-web/src/components/Layout/Layout.tsx   | 59 ++-----------------
 .../overview/deployments/DeploymentDrawer.tsx |  2 +-
 2 files changed, 6 insertions(+), 55 deletions(-)

diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index b84fe5c7a..6e220c31a 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/agenta-web/src/components/Layout/Layout.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useMemo, useState} from "react"
+import React, {useEffect, useMemo} from "react"
 import {Breadcrumb, Layout, Modal, Space, Typography, theme} from "antd"
 import Sidebar from "../Sidebar/Sidebar"
 import {GithubFilled, LinkedinFilled, TwitterOutlined} from "@ant-design/icons"
@@ -10,13 +10,13 @@ import {createUseStyles} from "react-jss"
 import NoSSRWrapper from "../NoSSRWrapper/NoSSRWrapper"
 import {ErrorBoundary} from "react-error-boundary"
 import ErrorFallback from "./ErrorFallback"
-import {fetchData} from "@/services/api"
 import {useAppsData} from "@/contexts/app.context"
 import {useRouter} from "next/router"
 import {useProfileData} from "@/contexts/profile.context"
 import {ThemeProvider} from "react-jss"
 import {JSSTheme, StyleProps as MainStyleProps} from "@/lib/Types"
 import {Lightning} from "@phosphor-icons/react"
+import {version} from "../../../package.json"
 
 const {Content, Footer} = Layout
 const {Text} = Typography
@@ -48,39 +48,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     breadcrumb: {
         padding: "24px 0",
     },
-    star: ({themeMode}: StyleProps) => ({
-        display: "flex",
-        alignItems: "center",
-        padding: 0,
-        height: 30,
-        borderWidth: 2,
-        borderColor: themeMode === "dark" ? "#333" : "#dfdfdf",
-        "& div:nth-of-type(1)": {
-            display: "flex",
-            alignItems: "center",
-            height: "100%",
-            width: "100%",
-            gap: 8,
-            padding: "0 10px",
-            background: themeMode === "dark" ? "#333" : "#dfdfdf",
-            borderTopLeftRadius: 3,
-            borderBottomLeftRadius: 3,
-        },
-        "& div:nth-of-type(2)": {
-            padding: "0 15px",
-        },
-    }),
-    joinBtn: {
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        "& span": {
-            display: "block",
-        },
-        "& img": {
-            width: "15px",
-        },
-    },
     footer: {
         position: "absolute",
         bottom: 0,
@@ -114,12 +81,11 @@ type LayoutProps = {
 
 const App: React.FC<LayoutProps> = ({children}) => {
     const {user} = useProfileData()
-    const {appTheme, themeMode, toggleAppTheme} = useAppTheme()
-    const {currentApp, setModalInstance} = useAppsData()
+    const {appTheme} = useAppTheme()
+    const {currentApp} = useAppsData()
     const capitalizedAppName = renameVariablesCapitalizeAll(currentApp?.app_name || "")
     const [footerRef, {height: footerHeight}] = useElementSize()
     const classes = useStyles({themeMode: appTheme, footerHeight} as StyleProps)
-    const [starCount, setStarCount] = useState(0)
     const router = useRouter()
     const appId = router.query.app_id as string
     const isDarkTheme = appTheme === "dark"
@@ -180,21 +146,6 @@ const App: React.FC<LayoutProps> = ({children}) => {
         [router.pathname],
     )
 
-    useEffect(() => {
-        const githubRepo = async () => {
-            try {
-                fetchData("https://api.github.com/repos/Agenta-AI/agenta").then((resp) => {
-                    setStarCount(resp.stargazers_count)
-                })
-            } catch (error) {
-                console.log(error)
-            }
-        }
-        githubRepo()
-
-        setModalInstance(modal)
-    }, [])
-
     useEffect(() => {
         if (typeof window === "undefined") return () => {}
 
@@ -234,7 +185,7 @@ const App: React.FC<LayoutProps> = ({children}) => {
                                         ]}
                                     />
                                     <div className={classes.topRightBar}>
-                                        <Text>agenta</Text>
+                                        <Text>agenta v{version}</Text>
                                     </div>
                                 </Space>
                                 <ErrorBoundary FallbackComponent={ErrorFallback}>
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
index 98f9ff030..46760a1ae 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -156,7 +156,7 @@ const DeploymentDrawer = ({selectedEnvironment, ...props}: DeploymentDrawerProps
 
     return (
         <Drawer
-            width={600}
+            width={560}
             {...props}
             destroyOnClose
             closeIcon={null}

From 8404d639b66e6f66aec1e796088b54c237142931 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 5 Aug 2024 19:54:18 +0100
Subject: [PATCH 029/117] minor changes

---
 agenta-web/src/components/TestSetTable/TestsetTable.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/agenta-web/src/components/TestSetTable/TestsetTable.tsx b/agenta-web/src/components/TestSetTable/TestsetTable.tsx
index 75990212b..872076b7c 100644
--- a/agenta-web/src/components/TestSetTable/TestsetTable.tsx
+++ b/agenta-web/src/components/TestSetTable/TestsetTable.tsx
@@ -39,6 +39,7 @@ export const ADD_BUTTON_COL = {field: "", editable: false, maxWidth: 100}
 const useStylesTestset = createUseStyles({
     title: {
         marginBottom: "20px !important",
+        fontWeight: "500 !important",
     },
     inputContainer: {
         width: "100%",

From 2bac31d5f6fec865b0bdb6a2168a883b9b237a96 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 5 Aug 2024 20:07:50 +0100
Subject: [PATCH 030/117] fix(frontend): added day format for human eval table

---
 agenta-web/src/lib/helpers/dateTimeHelper.ts | 4 ++++
 agenta-web/src/lib/transformers.ts           | 6 +++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/agenta-web/src/lib/helpers/dateTimeHelper.ts b/agenta-web/src/lib/helpers/dateTimeHelper.ts
index a28c9e0c6..070a121cc 100644
--- a/agenta-web/src/lib/helpers/dateTimeHelper.ts
+++ b/agenta-web/src/lib/helpers/dateTimeHelper.ts
@@ -7,3 +7,7 @@ export const formatDate = (date: dayjs.ConfigType): string => {
 export const formatDate24 = (date: dayjs.ConfigType, includeSeconds = false): string => {
     return dayjs(date).format("DD MMM YY, HH:mm" + (includeSeconds ? ":ss" : ""))
 }
+
+export const formatDay = (date: dayjs.ConfigType): string => {
+    return dayjs(date).format("DD MMM YYYY")
+}
diff --git a/agenta-web/src/lib/transformers.ts b/agenta-web/src/lib/transformers.ts
index 6d85179c9..e6cc1367b 100644
--- a/agenta-web/src/lib/transformers.ts
+++ b/agenta-web/src/lib/transformers.ts
@@ -1,7 +1,7 @@
 import {getAppValues} from "@/contexts/app.context"
 import {Evaluation, EvaluationResponseType, GenericObject, Variant} from "./Types"
 import {EvaluationType} from "./enums"
-import {formatDate} from "./helpers/dateTimeHelper"
+import {formatDay} from "./helpers/dateTimeHelper"
 import {snakeToCamel} from "./helpers/utils"
 
 export const fromEvaluationResponseToEvaluation = (item: EvaluationResponseType) => {
@@ -26,7 +26,7 @@ export const fromEvaluationResponseToEvaluation = (item: EvaluationResponseType)
 
     return {
         id: item.id,
-        createdAt: formatDate(item.created_at),
+        createdAt: formatDay(item.created_at),
         user: {
             id: item.user_id,
             username: item.user_username,
@@ -83,7 +83,7 @@ export const abTestingEvaluationTransformer = ({
     results: any
 }) => ({
     key: item.id,
-    createdAt: formatDate(item.created_at),
+    createdAt: formatDay(item.created_at),
     variants: item.variant_ids,
     variantNames: item.variant_names,
     votesData: results.votes_data,

From 041761c5dac8775b580f5632d0317fab62cbb5bf Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 6 Aug 2024 01:52:41 +0100
Subject: [PATCH 031/117] fix(frontend): updated Variant type to add revision,
 fixed agenta version import from package json and modified table header bg in
 antd token config file

---
 agenta-web/src/components/Layout/Layout.tsx        | 4 ++--
 agenta-web/src/lib/Types.ts                        | 3 ++-
 agenta-web/src/services/api.ts                     | 1 +
 agenta-web/src/styles/tokens/antd-themeConfig.json | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index 6e220c31a..60c7caa99 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/agenta-web/src/components/Layout/Layout.tsx
@@ -16,7 +16,7 @@ import {useProfileData} from "@/contexts/profile.context"
 import {ThemeProvider} from "react-jss"
 import {JSSTheme, StyleProps as MainStyleProps} from "@/lib/Types"
 import {Lightning} from "@phosphor-icons/react"
-import {version} from "../../../package.json"
+import packageJsonData from "../../../package.json"
 
 const {Content, Footer} = Layout
 const {Text} = Typography
@@ -185,7 +185,7 @@ const App: React.FC<LayoutProps> = ({children}) => {
                                         ]}
                                     />
                                     <div className={classes.topRightBar}>
-                                        <Text>agenta v{version}</Text>
+                                        <Text>agenta v{packageJsonData.version}</Text>
                                     </div>
                                 </Space>
                                 <ErrorBoundary FallbackComponent={ErrorFallback}>
diff --git a/agenta-web/src/lib/Types.ts b/agenta-web/src/lib/Types.ts
index 760bf1541..87bbace8e 100644
--- a/agenta-web/src/lib/Types.ts
+++ b/agenta-web/src/lib/Types.ts
@@ -39,6 +39,7 @@ export interface Variant {
     baseId: string
     baseName: string
     configName: string
+    revision: number
 }
 
 // Define the interface for the tabs item in playground page
@@ -496,7 +497,7 @@ export type StyleProps = {
 
 export interface SingleModelEvaluationListTableDataType {
     key: string
-    variants: string[]
+    variants: Variant[]
     testset: {
         _id: string
         name: string
diff --git a/agenta-web/src/services/api.ts b/agenta-web/src/services/api.ts
index 71d684901..878b5fcc3 100644
--- a/agenta-web/src/services/api.ts
+++ b/agenta-web/src/services/api.ts
@@ -39,6 +39,7 @@ export async function fetchVariants(
                 baseId: variant.base_id,
                 baseName: variant.base_name,
                 configName: variant.config_name,
+                revision: variant.revision,
             }
             return v
         })
diff --git a/agenta-web/src/styles/tokens/antd-themeConfig.json b/agenta-web/src/styles/tokens/antd-themeConfig.json
index d177f31a5..af366763a 100644
--- a/agenta-web/src/styles/tokens/antd-themeConfig.json
+++ b/agenta-web/src/styles/tokens/antd-themeConfig.json
@@ -641,7 +641,7 @@
         "Table": {
             "stickyScrollBarBorderRadius": 100,
             "headerSplitColor": "#f0f0f0",
-            "headerBg": "rgba(0, 0, 0, 0.02)",
+            "headerBg": "#fafafa",
             "footerBg": "rgba(0, 0, 0, 0.02)",
             "paddingXXS": 4,
             "paddingXS": 8,

From 50f52f250dd950d43e1717a145d35fe2105daee0 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 6 Aug 2024 02:16:45 +0100
Subject: [PATCH 032/117] design(frontend): improved overview layout

---
 .../AbTestingEvalOverview.tsx                 | 209 +++++++++++++-----
 .../AutomaticEvalOverview.tsx                 | 195 ++++++++++++++--
 .../SingleModelEvalOverview.tsx               | 131 ++++++++---
 .../overview/variants/VariantsOverview.tsx    | 138 ++++++++++--
 4 files changed, 534 insertions(+), 139 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
index e7d62c8f9..628676387 100644
--- a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -1,14 +1,15 @@
 import {HumanEvaluationListTableDataType} from "@/components/Evaluations/HumanEvaluationResult"
 import {EvaluationType} from "@/lib/enums"
+import {getColorFromStr} from "@/lib/helpers/colors"
 import {getVotesPercentage} from "@/lib/helpers/evaluate"
-import {isDemo} from "@/lib/helpers/utils"
+import {getInitials, isDemo} from "@/lib/helpers/utils"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 import {abTestingEvaluationTransformer} from "@/lib/transformers"
 import {JSSTheme} from "@/lib/Types"
 import {fetchAllLoadEvaluations, fetchEvaluationResults} from "@/services/human-evaluations/api"
 import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
-import {GearSix} from "@phosphor-icons/react"
-import {Button, Dropdown, Space, Spin, Statistic, Table, Typography} from "antd"
+import {ArrowsClockwise, Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
+import {Avatar, Button, Dropdown, Space, Spin, Statistic, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
 import React, {useEffect, useState} from "react"
@@ -85,9 +86,9 @@ const AbTestingEvalOverview = () => {
                         .catch((err) => console.error(err))
                 })
 
-                const results = (await Promise.all(fetchPromises))
-                    .filter((evaluation) => evaluation !== undefined)
-                    .slice(0, 5)
+                const results = (await Promise.all(fetchPromises)).filter(
+                    (evaluation) => evaluation !== undefined,
+                )
 
                 setEvaluationsList(results)
             } catch (error) {
@@ -104,40 +105,23 @@ const AbTestingEvalOverview = () => {
         router.push(`/apps/${appId}/playground?variant=${variantName}&revision=${revisionNum}`)
     }
 
+    const handleDeleteEvaluation = async (record: HumanEvaluationListTableDataType) => {}
+
     const columns: ColumnsType<HumanEvaluationListTableDataType> = [
-        {
-            title: "Test set",
-            dataIndex: "testsetName",
-            key: "testsetName",
-            render: (_, record: HumanEvaluationListTableDataType, index: number) => {
-                return <span>{record.testset.name}</span>
-            },
-        },
         {
             title: "Variant 1",
             dataIndex: "variantNames",
             key: "variant1",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
             render: (value, record) => {
-                const percentage = getVotesPercentage(record, 0)
                 return (
                     <div>
-                        <Statistic
-                            className={classes.stat}
-                            value={percentage}
-                            precision={percentage <= 99 ? 2 : 1}
-                            suffix="%"
-                        />
-                        <div
-                            style={{cursor: "pointer"}}
-                            onClick={() => handleNavigation(value[0], record.revisions[0])}
-                        >
-                            (
-                            {variantNameWithRev({
-                                variant_name: value[0],
-                                revision: record.revisions[0],
-                            })}
-                            )
-                        </div>
+                        {variantNameWithRev({
+                            variant_name: value[0],
+                            revision: record.revisions[0],
+                        })}
                     </div>
                 )
             },
@@ -146,27 +130,56 @@ const AbTestingEvalOverview = () => {
             title: "Variant 2",
             dataIndex: "variantNames",
             key: "variant2",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
             render: (value, record) => {
-                const percentage = getVotesPercentage(record, 1)
                 return (
                     <div>
+                        {variantNameWithRev({
+                            variant_name: value[1],
+                            revision: record.revisions[1],
+                        })}
+                    </div>
+                )
+            },
+        },
+        {
+            title: "Test set",
+            dataIndex: "testsetName",
+            key: "testsetName",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record: HumanEvaluationListTableDataType, index: number) => {
+                return <span>{record.testset.name}</span>
+            },
+        },
+        {
+            title: "Results",
+            key: "results",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record: HumanEvaluationListTableDataType) => {
+                const stat1 = getVotesPercentage(record, 0)
+                const stat2 = getVotesPercentage(record, 1)
+
+                return (
+                    <div className="flex items-center gap-2">
                         <Statistic
                             className={classes.stat}
-                            value={percentage}
-                            precision={percentage <= 99 ? 2 : 1}
+                            value={stat1}
+                            precision={stat1 <= 99 ? 2 : 1}
+                            suffix="%"
+                        />
+                        |
+                        <Statistic
+                            className={classes.stat}
+                            value={stat2}
+                            precision={stat2 <= 99 ? 2 : 1}
                             suffix="%"
                         />
-                        <div
-                            style={{cursor: "pointer"}}
-                            onClick={() => handleNavigation(value[1], record.revisions[1])}
-                        >
-                            (
-                            {variantNameWithRev({
-                                variant_name: value[1],
-                                revision: record.revisions[1],
-                            })}
-                            )
-                        </div>
                     </div>
                 )
             },
@@ -175,7 +188,10 @@ const AbTestingEvalOverview = () => {
             title: "Both are good",
             dataIndex: "positive",
             key: "positive",
-            render: (value: any, record: HumanEvaluationListTableDataType) => {
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record: HumanEvaluationListTableDataType) => {
                 let percentage = record.votesData.positive_votes.percentage
                 return (
                     <span>
@@ -193,6 +209,9 @@ const AbTestingEvalOverview = () => {
             title: "Flag",
             dataIndex: "flag",
             key: "flag",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
             render: (value: any, record: HumanEvaluationListTableDataType) => {
                 let percentage = record.votesData.flag_votes.percentage
                 return (
@@ -214,34 +233,99 @@ const AbTestingEvalOverview = () => {
             title: "User",
             dataIndex: ["user", "username"],
             key: "username",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record: any) => {
+                return (
+                    <Space>
+                        <Avatar
+                            size={"small"}
+                            style={{
+                                backgroundColor: getColorFromStr(record.user.id),
+                                color: "#fff",
+                            }}
+                        >
+                            {getInitials(record.user.username)}
+                        </Avatar>
+                        <Typography.Text>{record.user.username}</Typography.Text>
+                    </Space>
+                )
+            },
         })
     }
 
     columns.push(
-        ...[
+        ...([
             {
-                title: "Created at",
+                title: "Created on",
                 dataIndex: "createdAt",
                 key: "createdAt",
+                onHeaderCell: () => ({
+                    style: {minWidth: 160},
+                }),
             },
             {
                 title: <GearSix size={16} />,
-                key: "settings",
-                width: 50,
-                render: () => {
+                key: "key",
+                width: 56,
+                fixed: "right",
+                render: (_: any, record: HumanEvaluationListTableDataType) => {
                     return (
                         <Dropdown
-                            trigger={["hover"]}
+                            trigger={["click"]}
                             menu={{
                                 items: [
                                     {
-                                        key: "change_variant",
-                                        label: "Change Variant",
+                                        key: "details",
+                                        label: "Open details",
+                                        icon: <Note size={16} />,
+                                        onClick: () =>
+                                            router.push(
+                                                `/apps/${appId}/annotations/single_model_test/${record.key}`,
+                                            ),
+                                    },
+                                    {
+                                        key: "variant1",
+                                        label: "View variant 1",
+                                        icon: <Rocket size={16} />,
+                                        onClick: () =>
+                                            handleNavigation(
+                                                record.variantNames[0],
+                                                record.revisions[0],
+                                            ),
+                                    },
+                                    {
+                                        key: "variant2",
+                                        label: "View variant 2",
+                                        icon: <Rocket size={16} />,
+                                        onClick: () =>
+                                            handleNavigation(
+                                                record.variantNames[1],
+                                                record.revisions[1],
+                                            ),
+                                    },
+                                    {
+                                        key: "view_testset",
+                                        label: "View test set",
+                                        icon: <Database size={16} />,
+                                        onClick: () =>
+                                            router.push(
+                                                `/apps/${appId}/testsets/${record.testset._id}`,
+                                            ),
+                                    },
+                                    {type: "divider"},
+                                    {
+                                        key: "rerun_eval",
+                                        label: "Re-run evaluation",
+                                        icon: <ArrowsClockwise size={16} />,
                                     },
-
                                     {
-                                        key: "open_playground",
-                                        label: "Open in playground",
+                                        key: "delete_eval",
+                                        label: "Delete",
+                                        icon: <Trash size={16} />,
+                                        danger: true,
+                                        onClick: () => handleDeleteEvaluation(record),
                                     },
                                 ],
                             }}
@@ -251,7 +335,7 @@ const AbTestingEvalOverview = () => {
                     )
                 },
             },
-        ],
+        ] as any),
     )
 
     return (
@@ -278,7 +362,12 @@ const AbTestingEvalOverview = () => {
             </div>
 
             <Spin spinning={fetchingEvaluations}>
-                <Table className="ph-no-capture" columns={columns} dataSource={evaluationsList} />
+                <Table
+                    className="ph-no-capture"
+                    columns={columns}
+                    dataSource={evaluationsList}
+                    scroll={{x: true}}
+                />
             </Spin>
         </div>
     )
diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index ac965e17b..76951c62c 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -1,10 +1,14 @@
-import {JSSTheme} from "@/lib/Types"
+import {formatDay} from "@/lib/helpers/dateTimeHelper"
+import {getTypedValue} from "@/lib/helpers/evaluate"
+import {variantNameWithRev} from "@/lib/helpers/variantHelper"
+import {_Evaluation, JSSTheme} from "@/lib/Types"
+import {fetchAllEvaluations} from "@/services/evaluations/api"
 import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
-import {GearSix} from "@phosphor-icons/react"
-import {Button, Dropdown, Space, Table, Typography} from "antd"
+import {ArrowsClockwise, Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
+import {Button, Dropdown, Input, Space, Spin, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
-import React from "react"
+import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 
 const {Title} = Typography
@@ -24,47 +28,182 @@ const AutomaticEvalOverview = () => {
     const classes = useStyles()
     const router = useRouter()
     const appId = router.query.app_id as string
+    const [evaluationList, setEvaluationList] = useState<_Evaluation[]>([])
+    const [isEvalLoading, setIsEvalLoading] = useState(false)
+    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
 
-    const columns: ColumnsType<any> = [
-        {
-            title: "Test set",
+    const rowSelection = {
+        onChange: (selectedRowKeys: React.Key[]) => {
+            setSelectedRowKeys(selectedRowKeys)
         },
+    }
+
+    useEffect(() => {
+        const fetchEvaluations = async () => {
+            try {
+                setIsEvalLoading(true)
+                const data = await fetchAllEvaluations(appId)
+                setEvaluationList(data)
+            } catch (error) {
+                console.error(error)
+            } finally {
+                setIsEvalLoading(false)
+            }
+        }
+
+        fetchEvaluations()
+    }, [appId])
+
+    const handleNavigation = (variantName: string, revisionNum: string) => {
+        router.push(`/apps/${appId}/playground?variant=${variantName}&revision=${revisionNum}`)
+    }
+
+    const handleDeleteEvaluation = async (record: _Evaluation) => {}
+
+    const columns: ColumnsType<_Evaluation> = [
         {
             title: "Variant",
+            dataIndex: "variants",
+            key: "variants",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (value, record) => {
+                return (
+                    <span>
+                        {variantNameWithRev({
+                            variant_name: value[0].variantName,
+                            revision: record.revisions[0],
+                        })}
+                    </span>
+                )
+            },
+        },
+        {
+            title: "Test set",
+            dataIndex: "testsetName",
+            key: "testsetName",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record) => {
+                return <span>{record.testset.name}</span>
+            },
         },
         {
             title: "Status",
+            dataIndex: "status",
+            key: "status",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record) => {
+                return getTypedValue(record.status as any)
+            },
         },
         {
-            title: "Tokens",
+            title: "Results",
+            dataIndex: "aggregated_results",
+            key: "results",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record) => {
+                return (
+                    <Space>
+                        {record.aggregated_results.map((result, index) => (
+                            <Input
+                                key={index}
+                                addonBefore={result.evaluator_config.name}
+                                defaultValue={getTypedValue(result.result)}
+                            />
+                        ))}
+                    </Space>
+                )
+            },
         },
         {
-            title: "Cost",
+            title: "Created on",
+            dataIndex: "created_at",
+            key: "createdAt",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record) => {
+                return formatDay(record.created_at)
+            },
         },
         {
-            title: "Latency",
+            title: "Avg. Latency",
+            dataIndex: "average_latency",
+            key: "average_latency",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record) => {
+                return getTypedValue(record.average_latency)
+            },
         },
         {
-            title: "Created At",
+            title: "Total Cost",
+            dataIndex: "average_cost",
+            key: "average_cost",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record) => {
+                return getTypedValue(record.average_cost)
+            },
         },
         {
             title: <GearSix size={16} />,
-            key: "settings",
-            width: 50,
-            render: () => {
+            key: "key",
+            width: 56,
+            fixed: "right",
+            render: (_, record) => {
                 return (
                     <Dropdown
-                        trigger={["hover"]}
+                        trigger={["click"]}
                         menu={{
                             items: [
                                 {
-                                    key: "change_variant",
-                                    label: "Change Variant",
+                                    key: "details",
+                                    label: "Open details",
+                                    icon: <Note size={16} />,
+                                    onClick: () =>
+                                        router.push(
+                                            `/apps/${appId}/evaluations/results/${record.id}`,
+                                        ),
                                 },
-
                                 {
-                                    key: "open_playground",
-                                    label: "Open in playground",
+                                    key: "variant",
+                                    label: "View variant",
+                                    icon: <Rocket size={16} />,
+                                    onClick: () =>
+                                        handleNavigation(
+                                            record.variants[0].variantName,
+                                            record.revisions[0],
+                                        ),
+                                },
+                                {
+                                    key: "view_testset",
+                                    label: "View test set",
+                                    icon: <Database size={16} />,
+                                    onClick: () =>
+                                        router.push(`/apps/${appId}/testsets/${record.testset.id}`),
+                                },
+                                {type: "divider"},
+                                {
+                                    key: "rerun_eval",
+                                    label: "Re-run evaluation",
+                                    icon: <ArrowsClockwise size={16} />,
+                                },
+                                {
+                                    key: "delete_eval",
+                                    label: "Delete",
+                                    icon: <Trash size={16} />,
+                                    danger: true,
+                                    onClick: () => handleDeleteEvaluation(record),
                                 },
                             ],
                         }}
@@ -99,9 +238,19 @@ const AutomaticEvalOverview = () => {
                 </Space>
             </div>
 
-            <div>
-                <Table className="ph-no-capture" columns={columns} dataSource={[]} />
-            </div>
+            <Spin spinning={isEvalLoading}>
+                <Table
+                    rowSelection={{
+                        type: "checkbox",
+                        columnWidth: 48,
+                        ...rowSelection,
+                    }}
+                    className="ph-no-capture"
+                    columns={columns}
+                    dataSource={evaluationList}
+                    scroll={{x: true}}
+                />
+            </Spin>
         </div>
     )
 }
diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
index 43d9912ef..e842420c4 100644
--- a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -6,10 +6,14 @@ import {
     singleModelTestEvaluationTransformer,
 } from "@/lib/transformers"
 import {Evaluation, JSSTheme, SingleModelEvaluationListTableDataType} from "@/lib/Types"
-import {fetchAllLoadEvaluations, fetchEvaluationResults} from "@/services/human-evaluations/api"
+import {
+    deleteEvaluations,
+    fetchAllLoadEvaluations,
+    fetchEvaluationResults,
+} from "@/services/human-evaluations/api"
 import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
-import {GearSix} from "@phosphor-icons/react"
-import {Button, Dropdown, Space, Spin, Statistic, Table, Typography} from "antd"
+import {ArrowsClockwise, Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
+import {Button, Dropdown, message, Space, Spin, Statistic, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
 import React, {useEffect, useState} from "react"
@@ -73,7 +77,6 @@ const SingleModelEvalOverview = () => {
                             !(Object.keys(item.scoresData || {}).length === 0) ||
                             item.avgScore !== undefined,
                     )
-                    .slice(0, 5)
 
                 setEvaluationsList(newEvalResults as any)
             } catch (error) {
@@ -90,40 +93,56 @@ const SingleModelEvalOverview = () => {
         router.push(`/apps/${appId}/playground?variant=${variantName}&revision=${revisionNum}`)
     }
 
+    const handleDeleteEvaluation = async (record: SingleModelEvaluationListTableDataType) => {
+        try {
+            await deleteEvaluations([record.key])
+            setEvaluationsList((prevEvaluationsList) =>
+                prevEvaluationsList.filter((evaluation) => ![record.key].includes(evaluation.key)),
+            )
+            message.success("Evaluation Deleted")
+        } catch (error) {
+            console.error(error)
+        }
+    }
+
     const columns: ColumnsType<SingleModelEvaluationListTableDataType> = [
-        {
-            title: "Test set",
-            dataIndex: "testsetName",
-            key: "testsetName",
-            render: (value: any, record: SingleModelEvaluationListTableDataType, index: number) => {
-                return <span>{record.testset.name}</span>
-            },
-        },
         {
             title: "Variant",
             dataIndex: "variants",
             key: "variants",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
             render: (value, record: SingleModelEvaluationListTableDataType) => {
                 return (
-                    <div
-                        onClick={() => handleNavigation(value[0].variantName, record.revisions[0])}
-                        style={{cursor: "pointer"}}
-                    >
-                        <span>
-                            {variantNameWithRev({
-                                variant_name: value[0].variantName,
-                                revision: record.revisions[0],
-                            })}
-                        </span>
-                    </div>
+                    <span>
+                        {variantNameWithRev({
+                            variant_name: value[0].variantName,
+                            revision: record.revisions[0],
+                        })}
+                    </span>
                 )
             },
         },
+        {
+            title: "Test set",
+            dataIndex: "testsetName",
+            key: "testsetName",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record) => {
+                return <span>{record.testset.name}</span>
+            },
+        },
         {
             title: "Average score",
             dataIndex: "averageScore",
             key: "averageScore",
-            render: (value: any, record: SingleModelEvaluationListTableDataType, index: number) => {
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record) => {
                 let score = 0
                 if (record.scoresData) {
                     score =
@@ -159,29 +178,64 @@ const SingleModelEvalOverview = () => {
             },
         },
         {
-            title: "Created at",
+            title: "Created on",
             dataIndex: "createdAt",
             key: "createdAt",
-            width: "300",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
         },
         {
             title: <GearSix size={16} />,
-            key: "settings",
-            width: 50,
-            render: () => {
+            key: "key",
+            width: 56,
+            fixed: "right",
+            render: (_, record) => {
                 return (
                     <Dropdown
-                        trigger={["hover"]}
+                        trigger={["click"]}
                         menu={{
                             items: [
                                 {
-                                    key: "change_variant",
-                                    label: "Change Variant",
+                                    key: "details",
+                                    label: "Open details",
+                                    icon: <Note size={16} />,
+                                    onClick: () =>
+                                        router.push(
+                                            `/apps/${appId}/annotations/single_model_test/${record.key}`,
+                                        ),
+                                },
+                                {
+                                    key: "variant",
+                                    label: "View variant",
+                                    icon: <Rocket size={16} />,
+                                    onClick: () =>
+                                        handleNavigation(
+                                            record.variants[0].variantName,
+                                            record.revisions[0],
+                                        ),
+                                },
+                                {
+                                    key: "view_testset",
+                                    label: "View test set",
+                                    icon: <Database size={16} />,
+                                    onClick: () =>
+                                        router.push(
+                                            `/apps/${appId}/testsets/${record.testset._id}`,
+                                        ),
+                                },
+                                {type: "divider"},
+                                {
+                                    key: "rerun_eval",
+                                    label: "Re-run evaluation",
+                                    icon: <ArrowsClockwise size={16} />,
                                 },
-
                                 {
-                                    key: "open_playground",
-                                    label: "Open in playground",
+                                    key: "delete_eval",
+                                    label: "Delete",
+                                    icon: <Trash size={16} />,
+                                    danger: true,
+                                    onClick: () => handleDeleteEvaluation(record),
                                 },
                             ],
                         }}
@@ -217,7 +271,12 @@ const SingleModelEvalOverview = () => {
             </div>
 
             <Spin spinning={fetchingEvaluations}>
-                <Table className="ph-no-capture" columns={columns} dataSource={evaluationsList} />
+                <Table
+                    className="ph-no-capture"
+                    columns={columns}
+                    dataSource={evaluationsList}
+                    scroll={{x: true}}
+                />
             </Spin>
         </div>
     )
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 2c97ea370..84e989c2d 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -1,11 +1,13 @@
-import {JSSTheme} from "@/lib/Types"
+import {variantNameWithRev} from "@/lib/helpers/variantHelper"
+import {JSSTheme, Variant} from "@/lib/Types"
+import {fetchVariants} from "@/services/api"
 import {MoreOutlined} from "@ant-design/icons"
-import {GearSix, Rocket} from "@phosphor-icons/react"
-import {Button, Dropdown, Table, Typography} from "antd"
+import {CloudArrowUp, GearSix, Note, PencilLine, Rocket, Trash} from "@phosphor-icons/react"
+import {Button, Dropdown, Spin, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import Link from "next/link"
 import {useRouter} from "next/router"
-import React from "react"
+import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 
 const {Title} = Typography
@@ -38,41 +40,127 @@ const VariantsOverview = () => {
     const classes = useStyles()
     const router = useRouter()
     const appId = router.query.app_id as string
+    const [variantList, setVariantList] = useState<Variant[]>([])
+    const [isVariantLoading, setIsVariantLoading] = useState(false)
+    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
 
-    const columns: ColumnsType<any> = [
+    const rowSelection = {
+        onChange: (selectedRowKeys: React.Key[]) => {
+            setSelectedRowKeys(selectedRowKeys)
+        },
+    }
+
+    useEffect(() => {
+        const fetchOverviewVariants = async () => {
+            try {
+                setIsVariantLoading(true)
+                const data = await fetchVariants(appId)
+                setVariantList(data)
+            } catch (error) {
+                console.error(error)
+            } finally {
+                setIsVariantLoading(false)
+            }
+        }
+
+        fetchOverviewVariants()
+    }, [appId])
+
+    const handleNavigation = (variantName: string, revisionNum: number) => {
+        router.push(`/apps/${appId}/playground?variant=${variantName}&revision=${revisionNum}`)
+    }
+
+    const handleDeleteEvaluation = async (record: Variant) => {}
+
+    const columns: ColumnsType<Variant> = [
         {
             title: "Name",
+            dataIndex: "variant_name",
+            key: "variant_name",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+            render: (_, record) => {
+                return (
+                    <span>
+                        {variantNameWithRev({
+                            variant_name: record.variantName,
+                            revision: record.revision,
+                        })}
+                    </span>
+                )
+            },
         },
         {
-            title: "Tokens",
+            title: "Last modified",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
         },
         {
-            title: "Cost",
+            title: "Modified by",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
         },
         {
-            title: "Latency",
+            title: "Tags",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
         },
         {
-            title: "Created At",
+            title: "Model",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
+        },
+        {
+            title: "Created on",
+            onHeaderCell: () => ({
+                style: {minWidth: 160},
+            }),
         },
         {
             title: <GearSix size={16} />,
-            key: "settings",
-            width: 50,
-            render: () => {
+            key: "key",
+            width: 56,
+            fixed: "right",
+            render: (_, record) => {
                 return (
                     <Dropdown
-                        trigger={["hover"]}
+                        trigger={["click"]}
                         menu={{
                             items: [
                                 {
-                                    key: "change_variant",
-                                    label: "Change Variant",
+                                    key: "details",
+                                    label: "Open details",
+                                    icon: <Note size={16} />,
                                 },
-
                                 {
-                                    key: "open_playground",
+                                    key: "open_variant",
                                     label: "Open in playground",
+                                    icon: <Rocket size={16} />,
+                                    onClick: () =>
+                                        handleNavigation(record.variantName, record.revision),
+                                },
+                                {
+                                    key: "deploy",
+                                    label: "Deploy",
+                                    icon: <CloudArrowUp size={16} />,
+                                },
+                                {type: "divider"},
+                                {
+                                    key: "rename",
+                                    label: "Rename",
+                                    icon: <PencilLine size={16} />,
+                                },
+                                {
+                                    key: "delete_eval",
+                                    label: "Delete",
+                                    icon: <Trash size={16} />,
+                                    danger: true,
+                                    onClick: () => handleDeleteEvaluation(record),
                                 },
                             ],
                         }}
@@ -95,9 +183,19 @@ const VariantsOverview = () => {
                 </Link>
             </div>
 
-            <div>
-                <Table className="ph-no-capture" columns={columns} dataSource={[]} />
-            </div>
+            <Spin spinning={isVariantLoading}>
+                <Table
+                    rowSelection={{
+                        type: "checkbox",
+                        columnWidth: 48,
+                        ...rowSelection,
+                    }}
+                    className="ph-no-capture"
+                    columns={columns}
+                    dataSource={variantList}
+                    scroll={{x: true}}
+                />
+            </Spin>
         </div>
     )
 }

From 80747434dac8a85e6d6a26d89d1f77390eea9473 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 6 Aug 2024 03:43:02 +0100
Subject: [PATCH 033/117] design(frontend): revamped app management view

---
 .../src/components/AppSelector/AppCard.tsx    | 131 +++++++++++-------
 .../components/AppSelector/AppSelector.tsx    |  66 ++++-----
 2 files changed, 109 insertions(+), 88 deletions(-)

diff --git a/agenta-web/src/components/AppSelector/AppCard.tsx b/agenta-web/src/components/AppSelector/AppCard.tsx
index 5b518e1ff..0ae8b9580 100644
--- a/agenta-web/src/components/AppSelector/AppCard.tsx
+++ b/agenta-web/src/components/AppSelector/AppCard.tsx
@@ -1,54 +1,53 @@
-import {Modal, Card, Avatar} from "antd"
-import {DeleteOutlined} from "@ant-design/icons"
+import {Modal, Card, Dropdown, Button, Typography, Tag} from "antd"
+import {MoreOutlined} from "@ant-design/icons"
 import {deleteApp} from "@/services/app-selector/api"
 import {useState} from "react"
 import Link from "next/link"
 import {renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
 import {createUseStyles} from "react-jss"
-import {ListAppsItem} from "@/lib/Types"
+import {JSSTheme, ListAppsItem} from "@/lib/Types"
 import {useAppsData} from "@/contexts/app.context"
+import {Note, PencilLine, Trash} from "@phosphor-icons/react"
+import {useRouter} from "next/router"
+import {formatDay} from "@/lib/helpers/dateTimeHelper"
 
-const useStyles = createUseStyles({
+const {Text} = Typography
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
     card: {
         width: 300,
-        height: 120,
         display: "flex",
         flexDirection: "column",
-        justifyContent: "space-between",
-        overflow: "hidden",
-        boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.1)",
-        "& svg": {
-            color: "#ef4146",
+        transition: "all 0.3s ease-in",
+        "& > .ant-card-head": {
+            minHeight: 0,
+            padding: theme.paddingSM,
+
+            "& .ant-card-head-title": {
+                fontSize: theme.fontSizeLG,
+                fontWeight: 500,
+            },
         },
-        "& .ant-card-meta": {
-            height: "110%",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
+        "& > .ant-card-body": {
+            padding: theme.paddingSM,
         },
-        "& .ant-card-meta-title div": {
-            textAlign: "center",
+        "&:hover": {
+            boxShadow: theme.boxShadow,
         },
     },
-    cardCover: {
-        "z-index": 1,
-        position: "absolute",
-        top: 0,
-        right: 0,
-        left: 0,
-        background: "transparent",
-        margin: "auto",
-        width: "300px",
-        height: "70px",
+    app_card_link: {
         display: "flex",
-        overflow: "hidden",
-        "flex-direction": "column",
-        "justify-content": "space-between",
-    },
-    cardLink: {
-        padding: "24px",
+        flexDirection: "column",
+        gap: "8px",
+        "& > div": {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            textDecoration: "none",
+            color: theme.colorText,
+        },
     },
-})
+}))
 
 const DeleteModal: React.FC<{
     open: boolean
@@ -78,10 +77,7 @@ const AppCard: React.FC<{
     const [visibleDelete, setVisibleDelete] = useState(false)
     const [confirmLoading, setConfirmLoading] = useState(false)
     const {mutate} = useAppsData()
-
-    const showDeleteModal = () => {
-        setVisibleDelete(true)
-    }
+    const router = useRouter()
 
     const handleDeleteOk = async () => {
         setConfirmLoading(true)
@@ -107,20 +103,53 @@ const AppCard: React.FC<{
         <>
             <Card
                 className={classes.card}
-                actions={[<DeleteOutlined key="delete" onClick={showDeleteModal} />]}
+                title={renameVariablesCapitalizeAll(app.app_name)}
+                extra={
+                    <Dropdown
+                        trigger={["hover"]}
+                        overlayStyle={{width: 180}}
+                        menu={{
+                            items: [
+                                {
+                                    key: "open_app",
+                                    label: "Open",
+                                    icon: <Note size={16} />,
+                                    onClick: () => router.push(`/apps/${app.app_id}/overview`),
+                                },
+
+                                {type: "divider"},
+                                {
+                                    key: "rename_app",
+                                    label: "Rename",
+                                    icon: <PencilLine size={16} />,
+                                },
+                                {
+                                    key: "delete_app",
+                                    label: "Delete",
+                                    icon: <Trash size={16} />,
+                                    danger: true,
+                                    onClick: () => setVisibleDelete(true),
+                                },
+                            ],
+                        }}
+                    >
+                        <Button type="text" icon={<MoreOutlined />} size="small" />
+                    </Dropdown>
+                }
             >
-                <Link data-cy="app-card-link" href={`/apps/${app.app_id}/overview`}>
-                    <Card.Meta
-                        title={<div>{renameVariablesCapitalizeAll(app.app_name)}</div>}
-                        avatar={
-                            <Avatar
-                                size="large"
-                                style={{backgroundColor: "hsl(150, 52%, 62%)"}} // Example: blue in HSL
-                            >
-                                {app.app_name.charAt(0).toUpperCase()}
-                            </Avatar>
-                        }
-                    />
+                <Link
+                    data-cy="app-card-link"
+                    href={`/apps/${app.app_id}/overview`}
+                    className={classes.app_card_link}
+                >
+                    <div>
+                        <Text>Type</Text>
+                        <Tag className="mr-0">Single Prompt</Tag>
+                    </div>
+                    <div>
+                        <Text>Last modified:</Text>
+                        <Text>{formatDay("2024-08-05T22:32:19.593503Z")}</Text>
+                    </div>
                 </Link>
             </Card>
 
diff --git a/agenta-web/src/components/AppSelector/AppSelector.tsx b/agenta-web/src/components/AppSelector/AppSelector.tsx
index 2b4260a45..10c1f642d 100644
--- a/agenta-web/src/components/AppSelector/AppSelector.tsx
+++ b/agenta-web/src/components/AppSelector/AppSelector.tsx
@@ -1,6 +1,6 @@
 import {useState, useEffect, useMemo} from "react"
 import {PlusOutlined} from "@ant-design/icons"
-import {Input, Modal, ConfigProvider, theme, Card, Button, notification, Divider} from "antd"
+import {Input, Modal, ConfigProvider, theme, Button, notification} from "antd"
 import AppCard from "./AppCard"
 import {Template, GenericObject, StyleProps} from "@/lib/Types"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
@@ -24,14 +24,14 @@ import {dynamicContext} from "@/lib/helpers/dynamic"
 
 const useStyles = createUseStyles({
     container: ({themeMode}: StyleProps) => ({
-        marginTop: 10,
+        marginTop: "24px",
         width: "100%",
         color: themeMode === "dark" ? "#fff" : "#000",
     }),
     cardsList: ({themeMode}: StyleProps) => ({
         display: "flex",
         flexWrap: "wrap",
-        gap: 24,
+        gap: 16,
         "& .ant-card-bordered, .ant-card-actions": {
             borderColor: themeMode === "dark" ? "rgba(256, 256, 256, 0.2)" : "rgba(5, 5, 5, 0.1)",
         },
@@ -64,14 +64,10 @@ const useStyles = createUseStyles({
         fontSize: 20,
         color: "red",
     },
-    divider: ({themeMode}: StyleProps) => ({
-        marginTop: 0,
-        marginBottom: 32,
-        borderColor: themeMode === "dark" ? "rgba(256, 256, 256, 0.2)" : "rgba(5, 5, 5, 0.15)",
-    }),
-    h1: {
-        fontSize: 28,
-        fontWeight: "normal",
+    title: {
+        fontSize: 16,
+        fontWeight: 500,
+        lineHeight: "24px",
     },
     modal: {
         "& .ant-modal-body": {
@@ -292,34 +288,30 @@ const AppSelector: React.FC = () => {
                         <ResultComponent status={"error"} title="Failed to load" />
                     </div>
                 ) : Array.isArray(apps) && apps.length ? (
-                    <>
-                        <h1 className={classes.h1}>Applications</h1>
-                        <Divider className={classes.divider} />
+                    <div className="flex flex-col gap-6">
+                        <div className="flex items-center justify-between">
+                            <h1 className={classes.title}>Applications</h1>
+                            <Button
+                                data-cy="create-new-app-button"
+                                icon={<PlusOutlined />}
+                                onClick={() => {
+                                    if (
+                                        isDemo() &&
+                                        selectedOrg?.is_paying == false &&
+                                        apps.length > 2
+                                    ) {
+                                        showMaxAppError()
+                                    } else {
+                                        showCreateAppModal()
+                                    }
+                                }}
+                            >
+                                Create new app
+                            </Button>
+                        </div>
                         <div className={classes.cardsList}>
                             {Array.isArray(apps) && (
                                 <>
-                                    <Card
-                                        className={classes.createCard}
-                                        onClick={() => {
-                                            if (
-                                                isDemo() &&
-                                                selectedOrg?.is_paying == false &&
-                                                apps.length > 2
-                                            ) {
-                                                showMaxAppError()
-                                            } else {
-                                                showCreateAppModal()
-                                            }
-                                        }}
-                                    >
-                                        <Card.Meta
-                                            data-cy="create-new-app-button"
-                                            className={classes.createCardMeta}
-                                            title={<div>Create new app</div>}
-                                            avatar={<PlusOutlined size={24} />}
-                                        />
-                                    </Card>
-
                                     {apps.map((app, index: number) => (
                                         <div key={index}>
                                             <AppCard app={app} />
@@ -330,7 +322,7 @@ const AppSelector: React.FC = () => {
                         </div>
 
                         <TipsAndFeatures />
-                    </>
+                    </div>
                 ) : (
                     <Welcome
                         onWriteOwnApp={showWriteAppModal}

From 7d67e227642d1df280815d4852c7c334b1a84114 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 6 Aug 2024 13:30:35 +0100
Subject: [PATCH 034/117] design(frontend): updated overview section title

---
 .../AbTestingEvalOverview.tsx                 | 58 ++++++++++++-------
 .../AutomaticEvalOverview.tsx                 | 46 +++++++++++----
 .../SingleModelEvalOverview.tsx               | 34 ++++++-----
 .../overview/variants/VariantsOverview.tsx    | 18 ++++--
 4 files changed, 104 insertions(+), 52 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
index 628676387..f32e0f72a 100644
--- a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -6,10 +6,14 @@ import {getInitials, isDemo} from "@/lib/helpers/utils"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 import {abTestingEvaluationTransformer} from "@/lib/transformers"
 import {JSSTheme} from "@/lib/Types"
-import {fetchAllLoadEvaluations, fetchEvaluationResults} from "@/services/human-evaluations/api"
+import {
+    deleteEvaluations,
+    fetchAllLoadEvaluations,
+    fetchEvaluationResults,
+} from "@/services/human-evaluations/api"
 import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
 import {ArrowsClockwise, Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
-import {Avatar, Button, Dropdown, Space, Spin, Statistic, Table, Typography} from "antd"
+import {Avatar, Button, Dropdown, message, Space, Spin, Statistic, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
 import React, {useEffect, useState} from "react"
@@ -86,9 +90,12 @@ const AbTestingEvalOverview = () => {
                         .catch((err) => console.error(err))
                 })
 
-                const results = (await Promise.all(fetchPromises)).filter(
-                    (evaluation) => evaluation !== undefined,
-                )
+                const results = (await Promise.all(fetchPromises))
+                    .filter((evaluation) => evaluation !== undefined)
+                    // shortend array to have 5 items (length 5)
+                    .slice(0, 5)
+                    // reverse array to have from new to old
+                    .reverse()
 
                 setEvaluationsList(results)
             } catch (error) {
@@ -105,7 +112,20 @@ const AbTestingEvalOverview = () => {
         router.push(`/apps/${appId}/playground?variant=${variantName}&revision=${revisionNum}`)
     }
 
-    const handleDeleteEvaluation = async (record: HumanEvaluationListTableDataType) => {}
+    const handleDeleteEvaluation = async (record: HumanEvaluationListTableDataType) => {
+        try {
+            setFetchingEvaluations(true)
+            await deleteEvaluations([record.key])
+            setEvaluationsList((prevEvaluationsList) =>
+                prevEvaluationsList.filter((evaluation) => ![record.key].includes(evaluation.key)),
+            )
+            message.success("Evaluation Deleted")
+        } catch (error) {
+            console.error(error)
+        } finally {
+            setFetchingEvaluations(false)
+        }
+    }
 
     const columns: ColumnsType<HumanEvaluationListTableDataType> = [
         {
@@ -341,24 +361,20 @@ const AbTestingEvalOverview = () => {
     return (
         <div className={classes.container}>
             <div className="flex items-center justify-between">
-                <Title>A/B Testing Evaluations</Title>
-
                 <Space>
-                    <Button
-                        icon={<PlusOutlined />}
-                        size="small"
-                        onClick={() => router.push(`/apps/${appId}/annotations/human_a_b_testing`)}
-                    >
-                        Start New
-                    </Button>
-                    <Button
-                        type="text"
-                        size="small"
-                        href={`/apps/${appId}/annotations/human_a_b_testing`}
-                    >
-                        View All
+                    <Title>A/B Testing Evaluations</Title>
+                    <Button size="small" href={`/apps/${appId}/annotations/human_a_b_testing`}>
+                        View all
                     </Button>
                 </Space>
+
+                <Button
+                    icon={<PlusOutlined />}
+                    size="small"
+                    onClick={() => router.push(`/apps/${appId}/annotations/human_a_b_testing`)}
+                >
+                    Create new
+                </Button>
             </div>
 
             <Spin spinning={fetchingEvaluations}>
diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index 76951c62c..6062f0e8b 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -1,15 +1,16 @@
 import {formatDay} from "@/lib/helpers/dateTimeHelper"
 import {getTypedValue} from "@/lib/helpers/evaluate"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
-import {_Evaluation, JSSTheme} from "@/lib/Types"
+import {_Evaluation, EvaluationStatus, JSSTheme} from "@/lib/Types"
 import {fetchAllEvaluations} from "@/services/evaluations/api"
-import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
+import {MoreOutlined, PlusOutlined, SwapOutlined} from "@ant-design/icons"
 import {ArrowsClockwise, Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
 import {Button, Dropdown, Input, Space, Spin, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
-import React, {useEffect, useState} from "react"
+import React, {useEffect, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
+import StatusRenderer from "./StatusRenderer"
 
 const {Title} = Typography
 
@@ -38,12 +39,26 @@ const AutomaticEvalOverview = () => {
         },
     }
 
+    const compareDisabled = useMemo(() => {
+        const evalList = evaluationList.filter((e) => selectedRowKeys.includes(e.id))
+        return (
+            evalList.length < 2 ||
+            evalList.some(
+                (item) =>
+                    item.status.value === EvaluationStatus.STARTED ||
+                    item.status.value === EvaluationStatus.INITIALIZED ||
+                    item.testset.id !== evalList[0].testset.id,
+            )
+        )
+    }, [selectedRowKeys])
+
     useEffect(() => {
         const fetchEvaluations = async () => {
             try {
                 setIsEvalLoading(true)
                 const data = await fetchAllEvaluations(appId)
-                setEvaluationList(data)
+                const result = data.slice(0, 5).reverse()
+                setEvaluationList(result)
             } catch (error) {
                 console.error(error)
             } finally {
@@ -98,7 +113,7 @@ const AutomaticEvalOverview = () => {
                 style: {minWidth: 160},
             }),
             render: (_, record) => {
-                return getTypedValue(record.status as any)
+                return <StatusRenderer {...record} />
             },
         },
         {
@@ -218,9 +233,22 @@ const AutomaticEvalOverview = () => {
     return (
         <div className={classes.container}>
             <div className="flex items-center justify-between">
-                <Title>Automatic Evaluations</Title>
+                <Space>
+                    <Title>Automatic Evaluations</Title>
+                    <Button size="small" href={`/apps/${appId}/evaluations/results`}>
+                        View all
+                    </Button>
+                </Space>
 
                 <Space>
+                    <Button
+                        disabled={compareDisabled}
+                        size="small"
+                        type="link"
+                        icon={<SwapOutlined />}
+                    >
+                        Compare evaluations
+                    </Button>
                     <Button
                         icon={<PlusOutlined />}
                         size="small"
@@ -230,10 +258,7 @@ const AutomaticEvalOverview = () => {
                             )
                         }
                     >
-                        Start New
-                    </Button>
-                    <Button type="text" size="small" href={`/apps/${appId}/evaluations/results`}>
-                        View All
+                        Create new
                     </Button>
                 </Space>
             </div>
@@ -247,6 +272,7 @@ const AutomaticEvalOverview = () => {
                     }}
                     className="ph-no-capture"
                     columns={columns}
+                    rowKey={"id"}
                     dataSource={evaluationList}
                     scroll={{x: true}}
                 />
diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
index e842420c4..272605be4 100644
--- a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -77,6 +77,10 @@ const SingleModelEvalOverview = () => {
                             !(Object.keys(item.scoresData || {}).length === 0) ||
                             item.avgScore !== undefined,
                     )
+                    // shortend array to have 5 items (length 5)
+                    .slice(0, 5)
+                    // reverse array to have from new to old
+                    .reverse()
 
                 setEvaluationsList(newEvalResults as any)
             } catch (error) {
@@ -95,6 +99,7 @@ const SingleModelEvalOverview = () => {
 
     const handleDeleteEvaluation = async (record: SingleModelEvaluationListTableDataType) => {
         try {
+            setFetchingEvaluations(true)
             await deleteEvaluations([record.key])
             setEvaluationsList((prevEvaluationsList) =>
                 prevEvaluationsList.filter((evaluation) => ![record.key].includes(evaluation.key)),
@@ -102,6 +107,8 @@ const SingleModelEvalOverview = () => {
             message.success("Evaluation Deleted")
         } catch (error) {
             console.error(error)
+        } finally {
+            setFetchingEvaluations(false)
         }
     }
 
@@ -250,24 +257,21 @@ const SingleModelEvalOverview = () => {
     return (
         <div className={classes.container}>
             <div className="flex items-center justify-between">
-                <Title>Single Model Evaluations</Title>
-
                 <Space>
-                    <Button
-                        icon={<PlusOutlined />}
-                        size="small"
-                        onClick={() => router.push(`/apps/${appId}/annotations/single_model_test`)}
-                    >
-                        Start New
-                    </Button>
-                    <Button
-                        type="text"
-                        size="small"
-                        href={`/apps/${appId}/annotations/single_model_test`}
-                    >
-                        View All
+                    <Title>Single Model Evaluations</Title>
+
+                    <Button size="small" href={`/apps/${appId}/annotations/single_model_test`}>
+                        View all
                     </Button>
                 </Space>
+
+                <Button
+                    icon={<PlusOutlined />}
+                    size="small"
+                    onClick={() => router.push(`/apps/${appId}/annotations/single_model_test`)}
+                >
+                    Create new
+                </Button>
             </div>
 
             <Spin spinning={fetchingEvaluations}>
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 84e989c2d..645cd2f59 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -1,9 +1,9 @@
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 import {JSSTheme, Variant} from "@/lib/Types"
 import {fetchVariants} from "@/services/api"
-import {MoreOutlined} from "@ant-design/icons"
+import {MoreOutlined, SwapOutlined} from "@ant-design/icons"
 import {CloudArrowUp, GearSix, Note, PencilLine, Rocket, Trash} from "@phosphor-icons/react"
-import {Button, Dropdown, Spin, Table, Typography} from "antd"
+import {Button, Dropdown, Space, Spin, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import Link from "next/link"
 import {useRouter} from "next/router"
@@ -177,10 +177,15 @@ const VariantsOverview = () => {
             <div className="flex items-center justify-between">
                 <Title>Variants</Title>
 
-                <Link href={`/apps/${appId}/playground`} className={classes.titleLink}>
-                    <Rocket size={14} />
-                    Playground
-                </Link>
+                <Space>
+                    <Button size="small" type="link" icon={<SwapOutlined />}>
+                        Compare variants
+                    </Button>
+                    <Link href={`/apps/${appId}/playground`} className={classes.titleLink}>
+                        <Rocket size={14} />
+                        Playground
+                    </Link>
+                </Space>
             </div>
 
             <Spin spinning={isVariantLoading}>
@@ -191,6 +196,7 @@ const VariantsOverview = () => {
                         ...rowSelection,
                     }}
                     className="ph-no-capture"
+                    rowKey={"variantId"}
                     columns={columns}
                     dataSource={variantList}
                     scroll={{x: true}}

From c1d54a4cfdf3d21a6f74b60d38b944e07133f5c0 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 6 Aug 2024 22:02:41 +0100
Subject: [PATCH 035/117] fix(frontend): added status component for auto eval
 result in overview page

---
 .../automaticEvaluation/StatusRenderer.tsx    | 62 +++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 agenta-web/src/components/pages/overview/automaticEvaluation/StatusRenderer.tsx

diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/StatusRenderer.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/StatusRenderer.tsx
new file mode 100644
index 000000000..107498527
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/StatusRenderer.tsx
@@ -0,0 +1,62 @@
+import {useDurationCounter} from "@/hooks/useDurationCounter"
+import {_Evaluation, EvaluationStatus, JSSTheme} from "@/lib/Types"
+import {InfoCircleOutlined} from "@ant-design/icons"
+import {theme, Tooltip, Typography} from "antd"
+import React from "react"
+import {createUseStyles} from "react-jss"
+import {runningStatuses, statusMapper} from "../../evaluations/cellRenderers/cellRenderers"
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    statusCell: {
+        display: "flex",
+        alignItems: "center",
+        gap: "0.25rem",
+        height: "100%",
+        marginBottom: 0,
+
+        "& > div:nth-of-type(1)": {
+            height: 6,
+            aspectRatio: 1 / 1,
+            borderRadius: "50%",
+        },
+    },
+    dot: {
+        height: 3,
+        aspectRatio: 1 / 1,
+        borderRadius: "50%",
+        backgroundColor: "#8c8c8c",
+        marginTop: 2,
+    },
+    date: {
+        color: "#8c8c8c",
+    },
+}))
+
+const StatusRenderer = (record: _Evaluation) => {
+    const classes = useStyles()
+    const {token} = theme.useToken()
+    const value = statusMapper(token)(record.status.value as EvaluationStatus)
+        .label as EvaluationStatus
+    const duration = useDurationCounter(record.duration || 0, runningStatuses.includes(value))
+    const {label, color} = statusMapper(token)(record.status.value as EvaluationStatus)
+    const errorMsg = record.status.error?.message
+    const errorStacktrace = record.status.error?.stacktrace
+
+    return (
+        <Typography.Text className={classes.statusCell}>
+            <div style={{backgroundColor: color}} />
+            <span>{label}</span>
+            {errorMsg && (
+                <span style={{marginRight: 2}}>
+                    <Tooltip title={errorStacktrace ? errorStacktrace : ""}>
+                        <InfoCircleOutlined />
+                    </Tooltip>
+                </span>
+            )}
+            <span className={classes.dot}></span>
+            <span className={classes.date}>{duration}</span>
+        </Typography.Text>
+    )
+}
+
+export default StatusRenderer

From e1b14905df9b5a8b348ca5bc666380ef5813b370 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 7 Aug 2024 12:04:49 +0100
Subject: [PATCH 036/117] fix(frontend): overall design improvements

---
 agenta-web/src/components/Sidebar/config.tsx  |  27 +----
 .../AutomaticEvalOverview.tsx                 | 106 +++++++++++++++---
 .../overview/deployments/DeploymentDrawer.tsx |  81 +++++++------
 .../deployments/DeploymentOverview.tsx        |   8 +-
 .../pages/apps/[app_id]/overview/index.tsx    |  12 +-
 5 files changed, 158 insertions(+), 76 deletions(-)

diff --git a/agenta-web/src/components/Sidebar/config.tsx b/agenta-web/src/components/Sidebar/config.tsx
index 375bb17ff..de10a43ce 100644
--- a/agenta-web/src/components/Sidebar/config.tsx
+++ b/agenta-web/src/components/Sidebar/config.tsx
@@ -1,25 +1,9 @@
 import {useAppId} from "@/hooks/useAppId"
 import {useSession} from "@/hooks/useSession"
-import {JSSTheme} from "@/lib/Types"
 import {dynamicContext} from "@/lib/helpers/dynamic"
 import {isDemo, renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
-import {
-    ApiOutlined,
-    AppstoreOutlined,
-    DashboardOutlined,
-    DatabaseOutlined,
-    PartitionOutlined,
-    PlayCircleOutlined,
-    RocketOutlined,
-    SlidersOutlined,
-    SwapOutlined,
-    GithubFilled,
-} from "@ant-design/icons"
+import {AppstoreOutlined, DatabaseOutlined, RocketOutlined, GithubFilled} from "@ant-design/icons"
 import {useEffect, useState} from "react"
-import Image from "next/image"
-import abTesting from "@/media/testing.png"
-import singleModel from "@/media/score.png"
-import {createUseStyles} from "react-jss"
 import {
     ChartDonut,
     ChartLineUp,
@@ -37,14 +21,6 @@ import {
 } from "@phosphor-icons/react"
 import {useAppsData} from "@/contexts/app.context"
 
-const useStyles = createUseStyles((theme: JSSTheme) => ({
-    evaluationImg: {
-        width: 20,
-        height: 20,
-        filter: theme.isDark ? "invert(1)" : "none",
-    },
-}))
-
 export type SidebarConfig = {
     key: string
     title: string
@@ -63,7 +39,6 @@ export type SidebarConfig = {
 }
 
 export const useSidebarConfig = () => {
-    const classes = useStyles()
     const appId = useAppId()
     const {doesSessionExist} = useSession()
     const {currentApp} = useAppsData()
diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index 6062f0e8b..755afea31 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -1,11 +1,17 @@
 import {formatDay} from "@/lib/helpers/dateTimeHelper"
 import {getTypedValue} from "@/lib/helpers/evaluate"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
-import {_Evaluation, EvaluationStatus, JSSTheme} from "@/lib/Types"
-import {fetchAllEvaluations} from "@/services/evaluations/api"
-import {MoreOutlined, PlusOutlined, SwapOutlined} from "@ant-design/icons"
+import {_Evaluation, EvaluationStatus, Evaluator, JSSTheme} from "@/lib/Types"
+import {fetchAllEvaluations, fetchAllEvaluators} from "@/services/evaluations/api"
+import {
+    EditOutlined,
+    InfoCircleOutlined,
+    MoreOutlined,
+    PlusOutlined,
+    SwapOutlined,
+} from "@ant-design/icons"
 import {ArrowsClockwise, Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
-import {Button, Dropdown, Input, Space, Spin, Table, Typography} from "antd"
+import {Button, Dropdown, Popover, Space, Spin, Table, Tag, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
 import React, {useEffect, useMemo, useState} from "react"
@@ -23,6 +29,25 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             fontSize: theme.fontSize,
         },
     },
+    resultTag: {
+        minWidth: 150,
+        display: "flex",
+        cursor: "pointer",
+        alignItems: "stretch",
+        borderRadius: theme.borderRadiusSM,
+        border: `1px solid ${theme.colorBorder}`,
+        textAlign: "center",
+        "& > div:nth-child(1)": {
+            backgroundColor: "rgba(0, 0, 0, 0.02)",
+            lineHeight: theme.lineHeight,
+            flex: 1,
+            minWidth: 100,
+            borderRight: `1px solid ${theme.colorBorder}`,
+        },
+        "& > div:nth-child(2)": {
+            padding: "0 7px",
+        },
+    },
 }))
 
 const AutomaticEvalOverview = () => {
@@ -30,6 +55,7 @@ const AutomaticEvalOverview = () => {
     const router = useRouter()
     const appId = router.query.app_id as string
     const [evaluationList, setEvaluationList] = useState<_Evaluation[]>([])
+    const [evaluators, setEvaluators] = useState<Evaluator[]>()
     const [isEvalLoading, setIsEvalLoading] = useState(false)
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
 
@@ -56,9 +82,13 @@ const AutomaticEvalOverview = () => {
         const fetchEvaluations = async () => {
             try {
                 setIsEvalLoading(true)
-                const data = await fetchAllEvaluations(appId)
-                const result = data.slice(0, 5).reverse()
+                const [allEvaluations, allEvaluators] = await Promise.all([
+                    fetchAllEvaluations(appId),
+                    fetchAllEvaluators(),
+                ])
+                const result = allEvaluations.reverse().slice(0, 5)
                 setEvaluationList(result)
+                setEvaluators(allEvaluators)
             } catch (error) {
                 console.error(error)
             } finally {
@@ -110,7 +140,7 @@ const AutomaticEvalOverview = () => {
             dataIndex: "status",
             key: "status",
             onHeaderCell: () => ({
-                style: {minWidth: 160},
+                style: {minWidth: 240},
             }),
             render: (_, record) => {
                 return <StatusRenderer {...record} />
@@ -124,15 +154,58 @@ const AutomaticEvalOverview = () => {
                 style: {minWidth: 160},
             }),
             render: (_, record) => {
+                if (!evaluators?.length) return
                 return (
                     <Space>
-                        {record.aggregated_results.map((result, index) => (
-                            <Input
-                                key={index}
-                                addonBefore={result.evaluator_config.name}
-                                defaultValue={getTypedValue(result.result)}
-                            />
-                        ))}
+                        {record.aggregated_results.map((result, index) => {
+                            const evaluator = evaluators.find(
+                                (item) => item.key === result.evaluator_config.evaluator_key,
+                            )
+
+                            return result.result.error ? (
+                                <Popover
+                                    placement="bottom"
+                                    arrow={false}
+                                    key={index}
+                                    content={
+                                        <div className="w-[256px]">
+                                            {result.result.error.stacktrace}
+                                        </div>
+                                    }
+                                    title={result.result.error.message}
+                                >
+                                    <Button icon={<InfoCircleOutlined />} type="link">
+                                        Read more
+                                    </Button>
+                                </Popover>
+                            ) : (
+                                <Popover
+                                    placement="bottom"
+                                    arrow={false}
+                                    key={index}
+                                    content={
+                                        <div className="w-[256px] flex flex-col gap-1">
+                                            <div className="font-[500]">
+                                                {result.evaluator_config.name}
+                                            </div>
+                                            <div>{getTypedValue(result.result)}</div>
+                                        </div>
+                                    }
+                                    title={
+                                        <div className="flex items-center justify-between">
+                                            <Tag color={evaluator?.color}>{evaluator?.name}</Tag>
+
+                                            <Button icon={<EditOutlined />} size="small" />
+                                        </div>
+                                    }
+                                >
+                                    <div className={classes.resultTag}>
+                                        <div>{result.evaluator_config.name}</div>
+                                        <div>{getTypedValue(result.result)}</div>
+                                    </div>
+                                </Popover>
+                            )
+                        })}
                     </Space>
                 )
             },
@@ -246,6 +319,11 @@ const AutomaticEvalOverview = () => {
                         size="small"
                         type="link"
                         icon={<SwapOutlined />}
+                        onClick={() =>
+                            router.push(
+                                `/apps/${appId}/evaluations/results/compare?evaluations=${selectedRowKeys.join(",")}`,
+                            )
+                        }
                     >
                         Compare evaluations
                     </Button>
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
index 46760a1ae..b1b82f13e 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -1,9 +1,9 @@
 import CopyButton from "@/components/CopyButton/CopyButton"
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {createParams} from "@/pages/apps/[app_id]/endpoints"
-import {MoreOutlined, PythonOutlined} from "@ant-design/icons"
-import {FileCode, FileTs} from "@phosphor-icons/react"
-import {Button, Drawer, DrawerProps, Dropdown, Space, Tabs, Tag, Typography} from "antd"
+import {CloseOutlined, MoreOutlined, PythonOutlined} from "@ant-design/icons"
+import {ClockClockwise, FileCode, FileTs, Rocket, Swap} from "@phosphor-icons/react"
+import {Button, Drawer, DrawerProps, Dropdown, Space, Tabs, Tag, Tooltip, Typography} from "antd"
 import React, {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 import fetchConfigcURLCode from "@/code_snippets/endpoints/fetch_config/curl"
@@ -16,6 +16,7 @@ import CodeBlock from "@/components/DynamicCodeBlock/CodeBlock"
 import {useRouter} from "next/router"
 import {fetchAppContainerURL, fetchVariants} from "@/services/api"
 import {useVariant} from "@/lib/hooks/useVariant"
+import {isDemo} from "@/lib/helpers/utils"
 
 interface DeploymentDrawerProps {
     selectedEnvironment: Environment
@@ -35,7 +36,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         alignItems: "center",
         justifyContent: "space-between",
         "& h1.ant-typography": {
-            fontSize: 22,
+            fontSize: theme.fontSizeHeading5,
             fontWeight: 500,
             textTransform: "capitalize",
         },
@@ -162,42 +163,56 @@ const DeploymentDrawer = ({selectedEnvironment, ...props}: DeploymentDrawerProps
             closeIcon={null}
             title={
                 <Space className={classes.drawerTitleContainer}>
-                    <Title>{selectedEnvironment?.name} environment</Title>
+                    <Space className="gap-3">
+                        <CloseOutlined onClick={() => props.onClose?.({} as any)} />
+                        <Title>{selectedEnvironment?.name} environment</Title>
+                    </Space>
 
                     <Space direction="horizontal">
-                        <Button>Button1</Button>
-                        <Button type="primary">Button2</Button>
+                        <Tooltip
+                            title={
+                                isDemo()
+                                    ? ""
+                                    : "History available in Cloud/Enterprise editions only"
+                            }
+                        >
+                            <Button
+                                size="small"
+                                className="flex items-center gap-2"
+                                disabled={!isDemo()}
+                            >
+                                <ClockClockwise size={16} />
+                                View history
+                            </Button>
+                        </Tooltip>
+                        <Dropdown
+                            trigger={["hover"]}
+                            menu={{
+                                items: [
+                                    {
+                                        key: "change_variant",
+                                        label: "Change Variant",
+                                        icon: <Swap size={16} />,
+                                    },
+                                    {
+                                        key: "open_playground",
+                                        label: "Open in playground",
+                                        icon: <Rocket size={16} />,
+                                    },
+                                ],
+                            }}
+                        >
+                            <Button type="text" icon={<MoreOutlined />} size="small" />
+                        </Dropdown>
                     </Space>
                 </Space>
             }
         >
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-6">
                 <div className="flex justify-between">
-                    <div className="flex flex-col gap-1">
-                        <Text className="font-[500]">Variant Deployed</Text>
-                        <Tag color="blue" className="w-fit">
-                            {selectedEnvironment?.deployed_variant_name}
-                        </Tag>
-                    </div>
-
-                    <Dropdown
-                        trigger={["click"]}
-                        menu={{
-                            items: [
-                                {
-                                    key: "change_variant",
-                                    label: "Change Variant",
-                                },
-
-                                {
-                                    key: "open_playground",
-                                    label: "Open in playground",
-                                },
-                            ],
-                        }}
-                    >
-                        <Button type="text" icon={<MoreOutlined />} size="small" />
-                    </Dropdown>
+                    <Text className="font-[500]">Variant Deployed</Text>
+
+                    <Tag>{selectedEnvironment?.deployed_variant_name}</Tag>
                 </div>
 
                 <div>
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
index a7323e6df..8a6dc0b13 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -7,6 +7,7 @@ import {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 import DeploymentDrawer from "./DeploymentDrawer"
 import {useQueryParam} from "@/hooks/useQuery"
+import {Code, Rocket, Swap} from "@phosphor-icons/react"
 
 const {Title, Text} = Typography
 
@@ -77,8 +78,9 @@ const DeploymentOverview = () => {
                             menu={{
                                 items: [
                                     {
-                                        key: "view-details",
-                                        label: "View Details",
+                                        key: "use_api",
+                                        label: "Use API",
+                                        icon: <Code size={16} />,
                                         onClick: () => {
                                             setQueryEnv(env.name)
                                             setSelectedEnvironment(env)
@@ -88,11 +90,13 @@ const DeploymentOverview = () => {
                                     {
                                         key: "change_variant",
                                         label: "Change Variant",
+                                        icon: <Swap size={16} />,
                                     },
                                     {type: "divider"},
                                     {
                                         key: "open_playground",
                                         label: "Open in playground",
+                                        icon: <Rocket size={16} />,
                                     },
                                 ],
                             }}
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 414ac32db..3f903f122 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -3,7 +3,9 @@ import AutomaticEvalOverview from "@/components/pages/overview/automaticEvaluati
 import DeploymentOverview from "@/components/pages/overview/deployments/DeploymentOverview"
 import SingleModelEvalOverview from "@/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview"
 import VariantsOverview from "@/components/pages/overview/variants/VariantsOverview"
+import {useAppsData} from "@/contexts/app.context"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
+import {renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
 import {JSSTheme} from "@/lib/Types"
 import {Typography} from "antd"
 import {createUseStyles} from "react-jss"
@@ -17,14 +19,22 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         display: "flex",
         flexDirection: "column",
         gap: theme.paddingLG,
+        "& h1": {
+            fontSize: theme.fontSizeHeading4,
+            fontWeight: 500,
+            lineHeight: theme.lineHeightHeading4,
+        },
     },
 }))
 
 export default function Overview() {
     const classes = useStyles()
+    const {currentApp} = useAppsData()
+    const capitalizedAppName = renameVariablesCapitalizeAll(currentApp?.app_name || "")
+
     return (
         <div className={classes.container}>
-            <Title level={3}>Overview</Title>
+            <Title>{capitalizedAppName}</Title>
 
             <ObservabilityOverview />
 

From 6cb3d0b773be42158f8a9875397c642eea6ab9c4 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 7 Aug 2024 16:12:30 +0100
Subject: [PATCH 037/117] minor fix

---
 .../pages/evaluations/evaluationResults/EvaluationResults.tsx    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/agenta-web/src/components/pages/evaluations/evaluationResults/EvaluationResults.tsx b/agenta-web/src/components/pages/evaluations/evaluationResults/EvaluationResults.tsx
index 68008feb4..97cae7ee8 100644
--- a/agenta-web/src/components/pages/evaluations/evaluationResults/EvaluationResults.tsx
+++ b/agenta-web/src/components/pages/evaluations/evaluationResults/EvaluationResults.tsx
@@ -529,6 +529,7 @@ const EvaluationResults: React.FC<Props> = () => {
                 }}
                 onSuccess={() => {
                     setNewEvalModalOpen(false)
+                    setQueryNewEvalModalOpen("")
                     fetcher()
                 }}
             />

From 9f530b0477d4c47e529f098e4368f28087050ac0 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 7 Aug 2024 20:28:24 +0100
Subject: [PATCH 038/117] fix(frontend): updated design

---
 .../AbTestingEvalOverview.tsx                 |  10 +-
 .../AutomaticEvalOverview.tsx                 | 147 +++++++++---
 .../overview/deployments/DeploymentDrawer.tsx | 218 ++++++++++--------
 .../deployments/DeploymentOverview.tsx        |   1 -
 .../SingleModelEvalOverview.tsx               |  10 +-
 .../pages/apps/[app_id]/overview/index.tsx    |  30 ++-
 6 files changed, 278 insertions(+), 138 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
index f32e0f72a..ddc6f7a66 100644
--- a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -1,4 +1,5 @@
 import {HumanEvaluationListTableDataType} from "@/components/Evaluations/HumanEvaluationResult"
+import HumanEvaluationModal from "@/components/HumanEvaluationModal/HumanEvaluationModal"
 import {EvaluationType} from "@/lib/enums"
 import {getColorFromStr} from "@/lib/helpers/colors"
 import {getVotesPercentage} from "@/lib/helpers/evaluate"
@@ -69,6 +70,7 @@ const AbTestingEvalOverview = () => {
 
     const [evaluationsList, setEvaluationsList] = useState<HumanEvaluationListTableDataType[]>([])
     const [fetchingEvaluations, setFetchingEvaluations] = useState(false)
+    const [isEvalModalOpen, setIsEvalModalOpen] = useState(false)
 
     useEffect(() => {
         if (!appId) return
@@ -371,7 +373,7 @@ const AbTestingEvalOverview = () => {
                 <Button
                     icon={<PlusOutlined />}
                     size="small"
-                    onClick={() => router.push(`/apps/${appId}/annotations/human_a_b_testing`)}
+                    onClick={() => setIsEvalModalOpen(true)}
                 >
                     Create new
                 </Button>
@@ -385,6 +387,12 @@ const AbTestingEvalOverview = () => {
                     scroll={{x: true}}
                 />
             </Spin>
+
+            <HumanEvaluationModal
+                evaluationType={"human_a_b_testing"}
+                isEvalModalOpen={isEvalModalOpen}
+                setIsEvalModalOpen={setIsEvalModalOpen}
+            />
         </div>
     )
 }
diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index 755afea31..ab43537e4 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -1,8 +1,14 @@
 import {formatDay} from "@/lib/helpers/dateTimeHelper"
-import {getTypedValue} from "@/lib/helpers/evaluate"
+import {calcEvalDuration, getTypedValue} from "@/lib/helpers/evaluate"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
-import {_Evaluation, EvaluationStatus, Evaluator, JSSTheme} from "@/lib/Types"
-import {fetchAllEvaluations, fetchAllEvaluators} from "@/services/evaluations/api"
+import {_Evaluation, EvaluationStatus, JSSTheme} from "@/lib/Types"
+import {
+    deleteEvaluations,
+    fetchAllEvaluations,
+    fetchAllEvaluatorConfigs,
+    fetchAllEvaluators,
+    fetchEvaluationStatus,
+} from "@/services/evaluations/api"
 import {
     EditOutlined,
     InfoCircleOutlined,
@@ -11,12 +17,18 @@ import {
     SwapOutlined,
 } from "@ant-design/icons"
 import {ArrowsClockwise, Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
-import {Button, Dropdown, Popover, Space, Spin, Table, Tag, Typography} from "antd"
+import {Button, Dropdown, message, Popover, Space, Spin, Table, Tag, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
-import React, {useEffect, useMemo, useState} from "react"
+import React, {useEffect, useMemo, useRef, useState} from "react"
 import {createUseStyles} from "react-jss"
 import StatusRenderer from "./StatusRenderer"
+import NewEvaluationModal from "../../evaluations/evaluationResults/NewEvaluationModal"
+import {useAtom} from "jotai"
+import {evaluatorConfigsAtom, evaluatorsAtom} from "@/lib/atoms/evaluation"
+import {runningStatuses} from "../../evaluations/cellRenderers/cellRenderers"
+import {useUpdateEffect} from "usehooks-ts"
+import {shortPoll} from "@/lib/helpers/utils"
 
 const {Title} = Typography
 
@@ -55,9 +67,54 @@ const AutomaticEvalOverview = () => {
     const router = useRouter()
     const appId = router.query.app_id as string
     const [evaluationList, setEvaluationList] = useState<_Evaluation[]>([])
-    const [evaluators, setEvaluators] = useState<Evaluator[]>()
+    const [evaluators, setEvaluators] = useAtom(evaluatorsAtom)
     const [isEvalLoading, setIsEvalLoading] = useState(false)
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
+    const [newEvalModalOpen, setNewEvalModalOpen] = useState(false)
+    const setEvaluatorConfigs = useAtom(evaluatorConfigsAtom)[1]
+    const stoppers = useRef<Function>()
+
+    const runningEvaluationIds = useMemo(
+        () =>
+            evaluationList
+                .filter((item) => runningStatuses.includes(item.status.value))
+                .map((item) => item.id),
+        [evaluationList],
+    )
+
+    useUpdateEffect(() => {
+        stoppers.current?.()
+
+        if (runningEvaluationIds.length) {
+            stoppers.current = shortPoll(
+                () =>
+                    Promise.all(runningEvaluationIds.map((id) => fetchEvaluationStatus(id)))
+                        .then((res) => {
+                            setEvaluationList((prev) => {
+                                const newEvals = [...prev]
+                                runningEvaluationIds.forEach((id, ix) => {
+                                    const index = newEvals.findIndex((e) => e.id === id)
+                                    if (index !== -1) {
+                                        newEvals[index].status = res[ix].status
+                                        newEvals[index].duration = calcEvalDuration(newEvals[index])
+                                    }
+                                })
+                                if (
+                                    res.some((item) => !runningStatuses.includes(item.status.value))
+                                )
+                                    fetchEvaluations()
+                                return newEvals
+                            })
+                        })
+                        .catch(console.error),
+                {delayMs: 2000, timeoutMs: Infinity},
+            ).stopper
+        }
+
+        return () => {
+            stoppers.current?.()
+        }
+    }, [JSON.stringify(runningEvaluationIds)])
 
     const rowSelection = {
         onChange: (selectedRowKeys: React.Key[]) => {
@@ -78,23 +135,27 @@ const AutomaticEvalOverview = () => {
         )
     }, [selectedRowKeys])
 
-    useEffect(() => {
-        const fetchEvaluations = async () => {
-            try {
-                setIsEvalLoading(true)
-                const [allEvaluations, allEvaluators] = await Promise.all([
-                    fetchAllEvaluations(appId),
-                    fetchAllEvaluators(),
-                ])
-                const result = allEvaluations.reverse().slice(0, 5)
-                setEvaluationList(result)
-                setEvaluators(allEvaluators)
-            } catch (error) {
-                console.error(error)
-            } finally {
-                setIsEvalLoading(false)
-            }
+    const fetchEvaluations = async () => {
+        try {
+            setIsEvalLoading(true)
+            const [allEvaluations, allEvaluators, allEvaluatorConfigs] = await Promise.all([
+                fetchAllEvaluations(appId),
+                fetchAllEvaluators(),
+                fetchAllEvaluatorConfigs(appId),
+            ])
+            const result = allEvaluations
+            setEvaluationList(result)
+            setEvaluators(allEvaluators)
+            setEvaluatorConfigs(allEvaluatorConfigs)
+        } catch (error) {
+            console.error(error)
+        } finally {
+            setIsEvalLoading(false)
         }
+    }
+
+    useEffect(() => {
+        if (!appId) return
 
         fetchEvaluations()
     }, [appId])
@@ -103,7 +164,20 @@ const AutomaticEvalOverview = () => {
         router.push(`/apps/${appId}/playground?variant=${variantName}&revision=${revisionNum}`)
     }
 
-    const handleDeleteEvaluation = async (record: _Evaluation) => {}
+    const handleDeleteEvaluation = async (record: _Evaluation) => {
+        try {
+            setIsEvalLoading(true)
+            await deleteEvaluations([record.id])
+            setEvaluationList((prevEvaluationsList) =>
+                prevEvaluationsList.filter((evaluation) => ![record.id].includes(evaluation.id)),
+            )
+            message.success("Evaluation Deleted")
+        } catch (error) {
+            console.error(error)
+        } finally {
+            setIsEvalLoading(false)
+        }
+    }
 
     const columns: ColumnsType<_Evaluation> = [
         {
@@ -164,15 +238,16 @@ const AutomaticEvalOverview = () => {
 
                             return result.result.error ? (
                                 <Popover
+                                    key={index}
                                     placement="bottom"
+                                    trigger={"click"}
                                     arrow={false}
-                                    key={index}
                                     content={
                                         <div className="w-[256px]">
-                                            {result.result.error.stacktrace}
+                                            {result.result.error?.stacktrace}
                                         </div>
                                     }
-                                    title={result.result.error.message}
+                                    title={result.result.error?.message}
                                 >
                                     <Button icon={<InfoCircleOutlined />} type="link">
                                         Read more
@@ -180,9 +255,10 @@ const AutomaticEvalOverview = () => {
                                 </Popover>
                             ) : (
                                 <Popover
+                                    key={index}
                                     placement="bottom"
+                                    trigger={"click"}
                                     arrow={false}
-                                    key={index}
                                     content={
                                         <div className="w-[256px] flex flex-col gap-1">
                                             <div className="font-[500]">
@@ -330,11 +406,7 @@ const AutomaticEvalOverview = () => {
                     <Button
                         icon={<PlusOutlined />}
                         size="small"
-                        onClick={() =>
-                            router.push(
-                                `/apps/${appId}/evaluations/results?openNewEvaluationModal=open`,
-                            )
-                        }
+                        onClick={() => setNewEvalModalOpen(true)}
                     >
                         Create new
                     </Button>
@@ -355,6 +427,17 @@ const AutomaticEvalOverview = () => {
                     scroll={{x: true}}
                 />
             </Spin>
+
+            <NewEvaluationModal
+                open={newEvalModalOpen}
+                onCancel={() => {
+                    setNewEvalModalOpen(false)
+                }}
+                onSuccess={() => {
+                    setNewEvalModalOpen(false)
+                    fetchEvaluations()
+                }}
+            />
         </div>
     )
 }
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
index b1b82f13e..f210394e8 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -17,6 +17,11 @@ import {useRouter} from "next/router"
 import {fetchAppContainerURL, fetchVariants} from "@/services/api"
 import {useVariant} from "@/lib/hooks/useVariant"
 import {isDemo} from "@/lib/helpers/utils"
+import {dynamicComponent} from "@/lib/helpers/dynamic"
+
+const DeploymentHistoryModal: any = dynamicComponent(
+    "pages/overview/deployments/DeploymentHistoryModal",
+)
 
 interface DeploymentDrawerProps {
     selectedEnvironment: Environment
@@ -101,6 +106,7 @@ const DeploymentDrawer = ({selectedEnvironment, ...props}: DeploymentDrawerProps
     const [uri, setURI] = useState<string | null>(null)
     const [variants, setVariants] = useState<Variant[]>([])
     const [variant, setVariant] = useState<Variant | null>(null)
+    const [isHistoryModalOpen, setIsHistoryModalOpen] = useState(false)
 
     useEffect(() => {
         const fetchData = async () => {
@@ -156,113 +162,123 @@ const DeploymentDrawer = ({selectedEnvironment, ...props}: DeploymentDrawerProps
     }
 
     return (
-        <Drawer
-            width={560}
-            {...props}
-            destroyOnClose
-            closeIcon={null}
-            title={
-                <Space className={classes.drawerTitleContainer}>
-                    <Space className="gap-3">
-                        <CloseOutlined onClick={() => props.onClose?.({} as any)} />
-                        <Title>{selectedEnvironment?.name} environment</Title>
-                    </Space>
+        <>
+            <Drawer
+                width={560}
+                {...props}
+                destroyOnClose
+                closeIcon={null}
+                title={
+                    <Space className={classes.drawerTitleContainer}>
+                        <Space className="gap-3">
+                            <CloseOutlined onClick={() => props.onClose?.({} as any)} />
+                            <Title>{selectedEnvironment?.name} environment</Title>
+                        </Space>
 
-                    <Space direction="horizontal">
-                        <Tooltip
-                            title={
-                                isDemo()
-                                    ? ""
-                                    : "History available in Cloud/Enterprise editions only"
-                            }
-                        >
-                            <Button
-                                size="small"
-                                className="flex items-center gap-2"
-                                disabled={!isDemo()}
+                        <Space direction="horizontal">
+                            <Tooltip
+                                title={
+                                    isDemo()
+                                        ? ""
+                                        : "History available in Cloud/Enterprise editions only"
+                                }
                             >
-                                <ClockClockwise size={16} />
-                                View history
-                            </Button>
-                        </Tooltip>
-                        <Dropdown
-                            trigger={["hover"]}
-                            menu={{
-                                items: [
-                                    {
-                                        key: "change_variant",
-                                        label: "Change Variant",
-                                        icon: <Swap size={16} />,
-                                    },
-                                    {
-                                        key: "open_playground",
-                                        label: "Open in playground",
-                                        icon: <Rocket size={16} />,
-                                    },
-                                ],
-                            }}
-                        >
-                            <Button type="text" icon={<MoreOutlined />} size="small" />
-                        </Dropdown>
+                                <Button
+                                    size="small"
+                                    className="flex items-center gap-2"
+                                    disabled={!isDemo()}
+                                    onClick={() => setIsHistoryModalOpen(true)}
+                                >
+                                    <ClockClockwise size={16} />
+                                    View history
+                                </Button>
+                            </Tooltip>
+                            <Dropdown
+                                trigger={["hover"]}
+                                menu={{
+                                    items: [
+                                        {
+                                            key: "change_variant",
+                                            label: "Change Variant",
+                                            icon: <Swap size={16} />,
+                                        },
+                                        {
+                                            key: "open_playground",
+                                            label: "Open in playground",
+                                            icon: <Rocket size={16} />,
+                                        },
+                                    ],
+                                }}
+                            >
+                                <Button type="text" icon={<MoreOutlined />} size="small" />
+                            </Dropdown>
+                        </Space>
                     </Space>
-                </Space>
-            }
-        >
-            <div className="flex flex-col gap-6">
-                <div className="flex justify-between">
-                    <Text className="font-[500]">Variant Deployed</Text>
+                }
+            >
+                <div className="flex flex-col gap-6">
+                    <div className="flex justify-between">
+                        <Text className="font-[500]">Variant Deployed</Text>
 
-                    <Tag>{selectedEnvironment?.deployed_variant_name}</Tag>
-                </div>
+                        <Tag>{selectedEnvironment?.deployed_variant_name}</Tag>
+                    </div>
 
-                <div>
-                    <Tabs
-                        destroyInactiveTabPane
-                        defaultActiveKey={selectedLang}
-                        className={classes.drawerTabs}
-                        items={[
-                            {
-                                key: "python",
-                                label: "Python",
-                                children: (
-                                    <LanguageCodeBlock
-                                        fetchConfigCodeSnippet={fetchConfigCodeSnippet}
-                                        invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
-                                        selectedLang={selectedLang}
-                                    />
-                                ),
-                                icon: <PythonOutlined />,
-                            },
-                            {
-                                key: "typescript",
-                                label: "TypeScript",
-                                children: (
-                                    <LanguageCodeBlock
-                                        fetchConfigCodeSnippet={fetchConfigCodeSnippet}
-                                        invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
-                                        selectedLang={selectedLang}
-                                    />
-                                ),
-                                icon: <FileTs size={14} />,
-                            },
-                            {
-                                key: "bash",
-                                label: "cURL",
-                                children: (
-                                    <LanguageCodeBlock
-                                        fetchConfigCodeSnippet={fetchConfigCodeSnippet}
-                                        invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
-                                        selectedLang={selectedLang}
-                                    />
-                                ),
-                                icon: <FileCode size={14} />,
-                            },
-                        ]}
-                        onChange={setSelectedLang}
-                    />
+                    <div>
+                        <Tabs
+                            destroyInactiveTabPane
+                            defaultActiveKey={selectedLang}
+                            className={classes.drawerTabs}
+                            items={[
+                                {
+                                    key: "python",
+                                    label: "Python",
+                                    children: (
+                                        <LanguageCodeBlock
+                                            fetchConfigCodeSnippet={fetchConfigCodeSnippet}
+                                            invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
+                                            selectedLang={selectedLang}
+                                        />
+                                    ),
+                                    icon: <PythonOutlined />,
+                                },
+                                {
+                                    key: "typescript",
+                                    label: "TypeScript",
+                                    children: (
+                                        <LanguageCodeBlock
+                                            fetchConfigCodeSnippet={fetchConfigCodeSnippet}
+                                            invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
+                                            selectedLang={selectedLang}
+                                        />
+                                    ),
+                                    icon: <FileTs size={14} />,
+                                },
+                                {
+                                    key: "bash",
+                                    label: "cURL",
+                                    children: (
+                                        <LanguageCodeBlock
+                                            fetchConfigCodeSnippet={fetchConfigCodeSnippet}
+                                            invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
+                                            selectedLang={selectedLang}
+                                        />
+                                    ),
+                                    icon: <FileCode size={14} />,
+                                },
+                            ]}
+                            onChange={setSelectedLang}
+                        />
+                    </div>
                 </div>
-            </div>
-        </Drawer>
+            </Drawer>
+
+            <DeploymentHistoryModal
+                open={isHistoryModalOpen}
+                onCancel={() => setIsHistoryModalOpen(false)}
+                setIsHistoryModalOpen={setIsHistoryModalOpen}
+                selectedEnvironment={selectedEnvironment}
+            />
+        </>
     )
 }
 
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
index 8a6dc0b13..b7b69264f 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -85,7 +85,6 @@ const DeploymentOverview = () => {
                                             setQueryEnv(env.name)
                                             setSelectedEnvironment(env)
                                         },
-                                        disabled: !env.deployed_app_variant_id,
                                     },
                                     {
                                         key: "change_variant",
diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
index 272605be4..3ae619f93 100644
--- a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -1,3 +1,4 @@
+import HumanEvaluationModal from "@/components/HumanEvaluationModal/HumanEvaluationModal"
 import {EvaluationType} from "@/lib/enums"
 import {calculateResultsDataAvg} from "@/lib/helpers/evaluate"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
@@ -51,6 +52,7 @@ const SingleModelEvalOverview = () => {
         SingleModelEvaluationListTableDataType[]
     >([])
     const [fetchingEvaluations, setFetchingEvaluations] = useState(false)
+    const [isEvalModalOpen, setIsEvalModalOpen] = useState(false)
 
     useEffect(() => {
         if (!appId) return
@@ -268,7 +270,7 @@ const SingleModelEvalOverview = () => {
                 <Button
                     icon={<PlusOutlined />}
                     size="small"
-                    onClick={() => router.push(`/apps/${appId}/annotations/single_model_test`)}
+                    onClick={() => setIsEvalModalOpen(true)}
                 >
                     Create new
                 </Button>
@@ -282,6 +284,12 @@ const SingleModelEvalOverview = () => {
                     scroll={{x: true}}
                 />
             </Spin>
+
+            <HumanEvaluationModal
+                evaluationType={"single_model_test"}
+                isEvalModalOpen={isEvalModalOpen}
+                setIsEvalModalOpen={setIsEvalModalOpen}
+            />
         </div>
     )
 }
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 3f903f122..5f7a06eab 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -7,7 +7,9 @@ import {useAppsData} from "@/contexts/app.context"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
 import {renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
 import {JSSTheme} from "@/lib/Types"
-import {Typography} from "antd"
+import {MoreOutlined} from "@ant-design/icons"
+import {PencilLine, Trash} from "@phosphor-icons/react"
+import {Button, Dropdown, Space, Typography} from "antd"
 import {createUseStyles} from "react-jss"
 
 const ObservabilityOverview = dynamicComponent("pages/overview/observability/ObservabilityOverview")
@@ -34,7 +36,31 @@ export default function Overview() {
 
     return (
         <div className={classes.container}>
-            <Title>{capitalizedAppName}</Title>
+            <Space className="justify-between">
+                <Title>{capitalizedAppName}</Title>
+
+                <Dropdown
+                    trigger={["click"]}
+                    overlayStyle={{width: 180}}
+                    menu={{
+                        items: [
+                            {
+                                key: "rename_app",
+                                label: "Rename",
+                                icon: <PencilLine size={16} />,
+                            },
+                            {
+                                key: "delete_app",
+                                label: "Delete",
+                                icon: <Trash size={16} />,
+                                danger: true,
+                            },
+                        ],
+                    }}
+                >
+                    <Button type="text" icon={<MoreOutlined />} size="small" />
+                </Dropdown>
+            </Space>
 
             <ObservabilityOverview />
 

From 8337e9c75a53c1bdb4c0f928c57aeb160afe6137 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 8 Aug 2024 00:09:04 +0100
Subject: [PATCH 039/117] minor improvement

---
 .../pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index ab43537e4..494f00694 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -55,6 +55,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             flex: 1,
             minWidth: 100,
             borderRight: `1px solid ${theme.colorBorder}`,
+            padding: "0 7px",
         },
         "& > div:nth-child(2)": {
             padding: "0 7px",

From 5306209a04779cdf59d1dfb30f27147b612d4fed Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 8 Aug 2024 07:52:56 +0100
Subject: [PATCH 040/117] fix(frontend): removed rerun action button

---
 .../abTestingEvaluation/AbTestingEvalOverview.tsx         | 7 +------
 .../automaticEvaluation/AutomaticEvalOverview.tsx         | 8 +-------
 .../singleModelEvaluation/SingleModelEvalOverview.tsx     | 7 +------
 3 files changed, 3 insertions(+), 19 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
index ddc6f7a66..cf698e0f5 100644
--- a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -13,7 +13,7 @@ import {
     fetchEvaluationResults,
 } from "@/services/human-evaluations/api"
 import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
-import {ArrowsClockwise, Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
+import {Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
 import {Avatar, Button, Dropdown, message, Space, Spin, Statistic, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
@@ -337,11 +337,6 @@ const AbTestingEvalOverview = () => {
                                             ),
                                     },
                                     {type: "divider"},
-                                    {
-                                        key: "rerun_eval",
-                                        label: "Re-run evaluation",
-                                        icon: <ArrowsClockwise size={16} />,
-                                    },
                                     {
                                         key: "delete_eval",
                                         label: "Delete",
diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index 494f00694..cd99e00b6 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -16,7 +16,7 @@ import {
     PlusOutlined,
     SwapOutlined,
 } from "@ant-design/icons"
-import {ArrowsClockwise, Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
+import {Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
 import {Button, Dropdown, message, Popover, Space, Spin, Table, Tag, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
@@ -53,7 +53,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             backgroundColor: "rgba(0, 0, 0, 0.02)",
             lineHeight: theme.lineHeight,
             flex: 1,
-            minWidth: 100,
             borderRight: `1px solid ${theme.colorBorder}`,
             padding: "0 7px",
         },
@@ -358,11 +357,6 @@ const AutomaticEvalOverview = () => {
                                         router.push(`/apps/${appId}/testsets/${record.testset.id}`),
                                 },
                                 {type: "divider"},
-                                {
-                                    key: "rerun_eval",
-                                    label: "Re-run evaluation",
-                                    icon: <ArrowsClockwise size={16} />,
-                                },
                                 {
                                     key: "delete_eval",
                                     label: "Delete",
diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
index 3ae619f93..ca90f4d30 100644
--- a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -13,7 +13,7 @@ import {
     fetchEvaluationResults,
 } from "@/services/human-evaluations/api"
 import {MoreOutlined, PlusOutlined} from "@ant-design/icons"
-import {ArrowsClockwise, Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
+import {Database, GearSix, Note, Rocket, Trash} from "@phosphor-icons/react"
 import {Button, Dropdown, message, Space, Spin, Statistic, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import {useRouter} from "next/router"
@@ -234,11 +234,6 @@ const SingleModelEvalOverview = () => {
                                         ),
                                 },
                                 {type: "divider"},
-                                {
-                                    key: "rerun_eval",
-                                    label: "Re-run evaluation",
-                                    icon: <ArrowsClockwise size={16} />,
-                                },
                                 {
                                     key: "delete_eval",
                                     label: "Delete",

From 3087f62970716aee296a754caaf2bc2007544134 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 8 Aug 2024 08:39:28 +0100
Subject: [PATCH 041/117] temporarily disabled ts warning

---
 agenta-web/src/components/Layout/ThemeContextProvider.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/agenta-web/src/components/Layout/ThemeContextProvider.tsx b/agenta-web/src/components/Layout/ThemeContextProvider.tsx
index a8173d6f2..f49712575 100644
--- a/agenta-web/src/components/Layout/ThemeContextProvider.tsx
+++ b/agenta-web/src/components/Layout/ThemeContextProvider.tsx
@@ -8,6 +8,7 @@ export const AntdThemeConfig: ThemeConfig = {
         // Seed Token
         ...antdTokens.token,
     },
+    // @ts-ignore
     components: {
         ...antdTokens.components,
     },

From ebea35f953cc4abeb5b6424dba3d8d7a4288d02b Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 9 Aug 2024 12:12:09 +0100
Subject: [PATCH 042/117] fix(frontend): improved loading state in deployment
 overview section

---
 .../deployments/DeploymentOverview.tsx        | 106 ++++++++++--------
 1 file changed, 57 insertions(+), 49 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
index b7b69264f..1132ea122 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -1,7 +1,7 @@
 import {Environment, JSSTheme} from "@/lib/Types"
 import {fetchEnvironments} from "@/services/deployment/api"
 import {MoreOutlined} from "@ant-design/icons"
-import {Button, Card, Dropdown, Tag, Typography} from "antd"
+import {Button, Card, Dropdown, Skeleton, Tag, Typography} from "antd"
 import {useRouter} from "next/router"
 import {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
@@ -46,7 +46,7 @@ const DeploymentOverview = () => {
     const appId = router.query.app_id as string
     const [environments, setEnvironments] = useState<Environment[]>([])
     const [selectedEnvironment, setSelectedEnvironment] = useState<Environment>()
-    const [isDeploymentLoading, setIsDeploymentLoading] = useState(false)
+    const [isDeploymentLoading, setIsDeploymentLoading] = useState(true)
 
     useEffect(() => {
         if (!appId) return
@@ -70,54 +70,62 @@ const DeploymentOverview = () => {
         <div className={classes.container}>
             <Title>Deployment</Title>
 
-            <div className={classes.cardContainer}>
-                {environments.map((env, index) => (
-                    <Card key={index} loading={isDeploymentLoading}>
-                        <Dropdown
-                            trigger={["click"]}
-                            menu={{
-                                items: [
-                                    {
-                                        key: "use_api",
-                                        label: "Use API",
-                                        icon: <Code size={16} />,
-                                        onClick: () => {
-                                            setQueryEnv(env.name)
-                                            setSelectedEnvironment(env)
+            {isDeploymentLoading ? (
+                <div className="flex gap-2">
+                    {Array.from({length: 3}).map((_, index) => (
+                        <Skeleton key={index} />
+                    ))}
+                </div>
+            ) : (
+                <div className={classes.cardContainer}>
+                    {environments.map((env, index) => (
+                        <Card key={index}>
+                            <Dropdown
+                                trigger={["click"]}
+                                menu={{
+                                    items: [
+                                        {
+                                            key: "use_api",
+                                            label: "Use API",
+                                            icon: <Code size={16} />,
+                                            onClick: () => {
+                                                setQueryEnv(env.name)
+                                                setSelectedEnvironment(env)
+                                            },
                                         },
-                                    },
-                                    {
-                                        key: "change_variant",
-                                        label: "Change Variant",
-                                        icon: <Swap size={16} />,
-                                    },
-                                    {type: "divider"},
-                                    {
-                                        key: "open_playground",
-                                        label: "Open in playground",
-                                        icon: <Rocket size={16} />,
-                                    },
-                                ],
-                            }}
-                        >
-                            <Button
-                                type="text"
-                                icon={<MoreOutlined />}
-                                size="small"
-                                className="absolute right-2"
-                            />
-                        </Dropdown>
-                        <Text>{env.name}</Text>
-                        {env.deployed_variant_name ? (
-                            <Tag className="w-fit" color="green">
-                                {env.deployed_variant_name}
-                            </Tag>
-                        ) : (
-                            <Tag className="w-fit">No deployment</Tag>
-                        )}
-                    </Card>
-                ))}
-            </div>
+                                        {
+                                            key: "change_variant",
+                                            label: "Change Variant",
+                                            icon: <Swap size={16} />,
+                                        },
+                                        {type: "divider"},
+                                        {
+                                            key: "open_playground",
+                                            label: "Open in playground",
+                                            icon: <Rocket size={16} />,
+                                        },
+                                    ],
+                                }}
+                            >
+                                <Button
+                                    type="text"
+                                    icon={<MoreOutlined />}
+                                    size="small"
+                                    className="absolute right-2"
+                                />
+                            </Dropdown>
+                            <Text>{env.name}</Text>
+                            {env.deployed_variant_name ? (
+                                <Tag className="w-fit" color="green">
+                                    {env.deployed_variant_name}
+                                </Tag>
+                            ) : (
+                                <Tag className="w-fit">No deployment</Tag>
+                            )}
+                        </Card>
+                    ))}
+                </div>
+            )}
 
             {selectedEnvironment && (
                 <DeploymentDrawer

From f5559f2375e0e54b00ccf5bd926515b4271ce432 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 9 Aug 2024 12:25:39 +0100
Subject: [PATCH 043/117] minor ui improvement

---
 .../pages/overview/deployments/DeploymentDrawer.tsx         | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
index f210394e8..2040dde08 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -171,7 +171,11 @@ const DeploymentDrawer = ({selectedEnvironment, ...props}: DeploymentDrawerProps
                 title={
                     <Space className={classes.drawerTitleContainer}>
                         <Space className="gap-3">
-                            <CloseOutlined onClick={() => props.onClose?.({} as any)} />
+                            <Button
+                                onClick={() => props.onClose?.({} as any)}
+                                type="text"
+                                icon={<CloseOutlined />}
+                            />
                             <Title>{selectedEnvironment?.name} environment</Title>
                         </Space>
 

From 69175281a6a02fe5819a1fe548872adb8e47142d Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 9 Aug 2024 14:20:00 +0100
Subject: [PATCH 044/117] fix(frontend): moved fetch variants request to parent
 level to avoid multiple request calls

---
 .../overview/deployments/DeploymentDrawer.tsx | 23 +++++--------
 .../deployments/DeploymentOverview.tsx        | 19 +++++++++--
 .../overview/variants/VariantsOverview.tsx    | 28 ++++-----------
 .../pages/apps/[app_id]/overview/index.tsx    | 34 ++++++++++++++++---
 4 files changed, 61 insertions(+), 43 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
index 2040dde08..e4b7508eb 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -14,7 +14,7 @@ import invokeLlmApppythonCode from "@/code_snippets/endpoints/invoke_llm_app/pyt
 import invokeLlmApptsCode from "@/code_snippets/endpoints/invoke_llm_app/typescript"
 import CodeBlock from "@/components/DynamicCodeBlock/CodeBlock"
 import {useRouter} from "next/router"
-import {fetchAppContainerURL, fetchVariants} from "@/services/api"
+import {fetchAppContainerURL} from "@/services/api"
 import {useVariant} from "@/lib/hooks/useVariant"
 import {isDemo} from "@/lib/helpers/utils"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
@@ -25,6 +25,7 @@ const DeploymentHistoryModal: any = dynamicComponent(
 
 interface DeploymentDrawerProps {
     selectedEnvironment: Environment
+    variants: Variant[]
 }
 
 interface LanguageCodeBlockProps {
@@ -98,28 +99,20 @@ const LanguageCodeBlock = ({
     )
 }
 
-const DeploymentDrawer = ({selectedEnvironment, ...props}: DeploymentDrawerProps & DrawerProps) => {
+const DeploymentDrawer = ({
+    variants,
+
+    selectedEnvironment,
+    ...props
+}: DeploymentDrawerProps & DrawerProps) => {
     const classes = useStyles()
     const router = useRouter()
     const appId = router.query.app_id as string
     const [selectedLang, setSelectedLang] = useState("python")
     const [uri, setURI] = useState<string | null>(null)
-    const [variants, setVariants] = useState<Variant[]>([])
     const [variant, setVariant] = useState<Variant | null>(null)
     const [isHistoryModalOpen, setIsHistoryModalOpen] = useState(false)
 
-    useEffect(() => {
-        const fetchData = async () => {
-            try {
-                const backendVariants = await fetchVariants(appId)
-                setVariants(backendVariants)
-            } catch (error) {
-                console.error(error)
-            }
-        }
-        fetchData()
-    }, [appId])
-
     useEffect(() => {
         loadURL(selectedEnvironment)
     }, [selectedEnvironment, appId])
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
index 1132ea122..81f1d2bb0 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -1,4 +1,4 @@
-import {Environment, JSSTheme} from "@/lib/Types"
+import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {fetchEnvironments} from "@/services/deployment/api"
 import {MoreOutlined} from "@ant-design/icons"
 import {Button, Card, Dropdown, Skeleton, Tag, Typography} from "antd"
@@ -8,9 +8,15 @@ import {createUseStyles} from "react-jss"
 import DeploymentDrawer from "./DeploymentDrawer"
 import {useQueryParam} from "@/hooks/useQuery"
 import {Code, Rocket, Swap} from "@phosphor-icons/react"
+import ChangeVariantModal from "./ChangeVariantModal"
+import {fetchVariants} from "@/services/api"
 
 const {Title, Text} = Typography
 
+interface DeploymentOverviewProps {
+    variants: Variant[]
+}
+
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     container: {
         display: "flex",
@@ -39,7 +45,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
 }))
 
-const DeploymentOverview = () => {
+const DeploymentOverview = ({variants}: DeploymentOverviewProps) => {
     const classes = useStyles()
     const router = useRouter()
     const [queryEnv, setQueryEnv] = useQueryParam("environment")
@@ -47,6 +53,7 @@ const DeploymentOverview = () => {
     const [environments, setEnvironments] = useState<Environment[]>([])
     const [selectedEnvironment, setSelectedEnvironment] = useState<Environment>()
     const [isDeploymentLoading, setIsDeploymentLoading] = useState(true)
+    const [openChangeVariantModal, setOpenChangeVariantModal] = useState(false)
 
     useEffect(() => {
         if (!appId) return
@@ -97,6 +104,7 @@ const DeploymentOverview = () => {
                                             key: "change_variant",
                                             label: "Change Variant",
                                             icon: <Swap size={16} />,
+                                            onClick: () => setOpenChangeVariantModal(true),
                                         },
                                         {type: "divider"},
                                         {
@@ -132,8 +140,15 @@ const DeploymentOverview = () => {
                     selectedEnvironment={selectedEnvironment}
                     open={!!queryEnv}
                     onClose={() => setQueryEnv("")}
+                    variants={variants}
                 />
             )}
+
+            <ChangeVariantModal
+                open={openChangeVariantModal}
+                onCancel={() => setOpenChangeVariantModal(false)}
+                variants={variants}
+            />
         </div>
     )
 }
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 645cd2f59..422c1761e 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -1,17 +1,21 @@
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 import {JSSTheme, Variant} from "@/lib/Types"
-import {fetchVariants} from "@/services/api"
 import {MoreOutlined, SwapOutlined} from "@ant-design/icons"
 import {CloudArrowUp, GearSix, Note, PencilLine, Rocket, Trash} from "@phosphor-icons/react"
 import {Button, Dropdown, Space, Spin, Table, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import Link from "next/link"
 import {useRouter} from "next/router"
-import React, {useEffect, useState} from "react"
+import React, {useState} from "react"
 import {createUseStyles} from "react-jss"
 
 const {Title} = Typography
 
+interface VariantsOverviewProps {
+    isVariantLoading: boolean
+    variantList: Variant[]
+}
+
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     container: {
         display: "flex",
@@ -36,12 +40,10 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         },
     },
 }))
-const VariantsOverview = () => {
+const VariantsOverview = ({variantList, isVariantLoading}: VariantsOverviewProps) => {
     const classes = useStyles()
     const router = useRouter()
     const appId = router.query.app_id as string
-    const [variantList, setVariantList] = useState<Variant[]>([])
-    const [isVariantLoading, setIsVariantLoading] = useState(false)
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
 
     const rowSelection = {
@@ -50,22 +52,6 @@ const VariantsOverview = () => {
         },
     }
 
-    useEffect(() => {
-        const fetchOverviewVariants = async () => {
-            try {
-                setIsVariantLoading(true)
-                const data = await fetchVariants(appId)
-                setVariantList(data)
-            } catch (error) {
-                console.error(error)
-            } finally {
-                setIsVariantLoading(false)
-            }
-        }
-
-        fetchOverviewVariants()
-    }, [appId])
-
     const handleNavigation = (variantName: string, revisionNum: number) => {
         router.push(`/apps/${appId}/playground?variant=${variantName}&revision=${revisionNum}`)
     }
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 5f7a06eab..bdee8e5e7 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -4,15 +4,20 @@ import DeploymentOverview from "@/components/pages/overview/deployments/Deployme
 import SingleModelEvalOverview from "@/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview"
 import VariantsOverview from "@/components/pages/overview/variants/VariantsOverview"
 import {useAppsData} from "@/contexts/app.context"
+import {useAppId} from "@/hooks/useAppId"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
 import {renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
-import {JSSTheme} from "@/lib/Types"
+import {JSSTheme, Variant} from "@/lib/Types"
+import {fetchVariants} from "@/services/api"
 import {MoreOutlined} from "@ant-design/icons"
 import {PencilLine, Trash} from "@phosphor-icons/react"
 import {Button, Dropdown, Space, Typography} from "antd"
+import {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 
-const ObservabilityOverview = dynamicComponent("pages/overview/observability/ObservabilityOverview")
+const ObservabilityOverview: any = dynamicComponent(
+    "pages/overview/observability/ObservabilityOverview",
+)
 
 const {Title} = Typography
 
@@ -30,9 +35,28 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
 }))
 
 export default function Overview() {
+    const appId = useAppId()
     const classes = useStyles()
     const {currentApp} = useAppsData()
     const capitalizedAppName = renameVariablesCapitalizeAll(currentApp?.app_name || "")
+    const [variants, setVariants] = useState<Variant[]>([])
+    const [isVariantLoading, setIsVariantLoading] = useState(false)
+
+    useEffect(() => {
+        const fetchAllVariants = async () => {
+            try {
+                setIsVariantLoading(true)
+                const data = await fetchVariants(appId)
+                setVariants(data)
+            } catch (error) {
+                console.error(error)
+            } finally {
+                setIsVariantLoading(false)
+            }
+        }
+
+        fetchAllVariants()
+    }, [appId])
 
     return (
         <div className={classes.container}>
@@ -62,11 +86,11 @@ export default function Overview() {
                 </Dropdown>
             </Space>
 
-            <ObservabilityOverview />
+            <ObservabilityOverview variants={variants} />
 
-            <DeploymentOverview />
+            <DeploymentOverview variants={variants} />
 
-            <VariantsOverview />
+            <VariantsOverview variantList={variants} isVariantLoading={isVariantLoading} />
 
             <AutomaticEvalOverview />
 

From c4d51a567973f8b8eeaf5aae36748b406dfcf884 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 9 Aug 2024 14:25:13 +0100
Subject: [PATCH 045/117] design(frontend): added change variant modal

---
 .../overview/deployments/ChangeVariantModal.tsx     | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx

diff --git a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
new file mode 100644
index 000000000..1fc3429e8
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
@@ -0,0 +1,13 @@
+import {Variant} from "@/lib/Types"
+import {Modal} from "antd"
+import React from "react"
+
+type ChangeVariantModalProps = {
+    variants: Variant[]
+} & React.ComponentProps<typeof Modal>
+
+const ChangeVariantModal = ({...props}: ChangeVariantModalProps) => {
+    return <Modal width={520} centered destroyOnClose footer={null} {...props}></Modal>
+}
+
+export default ChangeVariantModal

From aafac10dba194a253087d7741f044235ef57341f Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 12 Aug 2024 13:52:55 +0100
Subject: [PATCH 046/117] design(frontend): added evaluation delete modal

---
 .../DeleteEvaluationModal.tsx                 | 59 +++++++++++++++++++
 .../AbTestingEvalOverview.tsx                 | 20 ++++++-
 .../AutomaticEvalOverview.tsx                 | 47 ++++++++++++++-
 .../SingleModelEvalOverview.tsx               | 21 ++++++-
 4 files changed, 142 insertions(+), 5 deletions(-)
 create mode 100644 agenta-web/src/components/DeleteEvaluationModal/DeleteEvaluationModal.tsx

diff --git a/agenta-web/src/components/DeleteEvaluationModal/DeleteEvaluationModal.tsx b/agenta-web/src/components/DeleteEvaluationModal/DeleteEvaluationModal.tsx
new file mode 100644
index 000000000..99450c7e6
--- /dev/null
+++ b/agenta-web/src/components/DeleteEvaluationModal/DeleteEvaluationModal.tsx
@@ -0,0 +1,59 @@
+import {_Evaluation, JSSTheme} from "@/lib/Types"
+import {DeleteOutlined} from "@ant-design/icons"
+import {Modal, Typography} from "antd"
+import React from "react"
+import {createUseStyles} from "react-jss"
+
+type DeleteAutoEvalModalProps = {
+    evaluationType: string
+} & React.ComponentProps<typeof Modal>
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    container: {
+        "& h1": {
+            fontSize: theme.fontSizeLG,
+            lineHeight: theme.lineHeightLG,
+            fontWeight: theme.fontWeightStrong,
+            marginBottom: theme.paddingXS,
+        },
+    },
+    delText: {
+        color: theme.colorPrimary,
+        fontSize: theme.fontSizeLG,
+        fontWeight: 500,
+        lineHeight: theme.lineHeightLG,
+        textTransform: "capitalize",
+    },
+}))
+const DeleteEvaluationModal = ({evaluationType, ...props}: DeleteAutoEvalModalProps) => {
+    const classes = useStyles()
+
+    return (
+        <Modal
+            {...props}
+            okText={"Delete"}
+            okType="danger"
+            okButtonProps={{icon: <DeleteOutlined />, type: "primary"}}
+            centered
+        >
+            <div className={classes.container}>
+                <Typography.Title>Are you sure you want to delete?</Typography.Title>
+
+                <div className="flex flex-col gap-4">
+                    <Typography.Text>
+                        A deleted {evaluationType} cannot be restored.
+                    </Typography.Text>
+
+                    <div className="flex flex-col gap-1">
+                        <Typography.Text>You are about to delete:</Typography.Text>
+                        <Typography.Text className={classes.delText}>
+                            {evaluationType}
+                        </Typography.Text>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+    )
+}
+
+export default DeleteEvaluationModal
diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
index cf698e0f5..ae1150749 100644
--- a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -1,3 +1,4 @@
+import DeleteEvaluationModal from "@/components/DeleteEvaluationModal/DeleteEvaluationModal"
 import {HumanEvaluationListTableDataType} from "@/components/Evaluations/HumanEvaluationResult"
 import HumanEvaluationModal from "@/components/HumanEvaluationModal/HumanEvaluationModal"
 import {EvaluationType} from "@/lib/enums"
@@ -71,6 +72,8 @@ const AbTestingEvalOverview = () => {
     const [evaluationsList, setEvaluationsList] = useState<HumanEvaluationListTableDataType[]>([])
     const [fetchingEvaluations, setFetchingEvaluations] = useState(false)
     const [isEvalModalOpen, setIsEvalModalOpen] = useState(false)
+    const [selectedEvalRecord, setSelectedEvalRecord] = useState<HumanEvaluationListTableDataType>()
+    const [isDeleteEvalModalOpen, setIsDeleteEvalModalOpen] = useState(false)
 
     useEffect(() => {
         if (!appId) return
@@ -342,7 +345,10 @@ const AbTestingEvalOverview = () => {
                                         label: "Delete",
                                         icon: <Trash size={16} />,
                                         danger: true,
-                                        onClick: () => handleDeleteEvaluation(record),
+                                        onClick: () => {
+                                            setSelectedEvalRecord(record)
+                                            setIsDeleteEvalModalOpen(true)
+                                        },
                                     },
                                 ],
                             }}
@@ -388,6 +394,18 @@ const AbTestingEvalOverview = () => {
                 isEvalModalOpen={isEvalModalOpen}
                 setIsEvalModalOpen={setIsEvalModalOpen}
             />
+
+            {selectedEvalRecord && (
+                <DeleteEvaluationModal
+                    open={isDeleteEvalModalOpen}
+                    onCancel={() => setIsDeleteEvalModalOpen(false)}
+                    onOk={async () => {
+                        await handleDeleteEvaluation(selectedEvalRecord)
+                        setIsDeleteEvalModalOpen(false)
+                    }}
+                    evaluationType={"a/b testing evaluation"}
+                />
+            )}
         </div>
     )
 }
diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index cd99e00b6..e97cbf428 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -1,7 +1,7 @@
 import {formatDay} from "@/lib/helpers/dateTimeHelper"
 import {calcEvalDuration, getTypedValue} from "@/lib/helpers/evaluate"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
-import {_Evaluation, EvaluationStatus, JSSTheme} from "@/lib/Types"
+import {_Evaluation, EvaluationStatus, EvaluatorConfig, JSSTheme} from "@/lib/Types"
 import {
     deleteEvaluations,
     fetchAllEvaluations,
@@ -29,6 +29,8 @@ import {evaluatorConfigsAtom, evaluatorsAtom} from "@/lib/atoms/evaluation"
 import {runningStatuses} from "../../evaluations/cellRenderers/cellRenderers"
 import {useUpdateEffect} from "usehooks-ts"
 import {shortPoll} from "@/lib/helpers/utils"
+import NewEvaluatorModal from "../../evaluations/evaluators/NewEvaluatorModal"
+import DeleteEvaluationModal from "@/components/DeleteEvaluationModal/DeleteEvaluationModal"
 
 const {Title} = Typography
 
@@ -72,6 +74,10 @@ const AutomaticEvalOverview = () => {
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
     const [newEvalModalOpen, setNewEvalModalOpen] = useState(false)
     const setEvaluatorConfigs = useAtom(evaluatorConfigsAtom)[1]
+    const [selectedConfigEdit, setSelectedConfigEdit] = useState<EvaluatorConfig>()
+    const [isEditEvalConfigOpen, setIsEditEvalConfigOpen] = useState(false)
+    const [isDeleteEvalModalOpen, setIsDeleteEvalModalOpen] = useState(false)
+    const [selectedEvalRecord, setSelectedEvalRecord] = useState<_Evaluation>()
     const stoppers = useRef<Function>()
 
     const runningEvaluationIds = useMemo(
@@ -271,7 +277,14 @@ const AutomaticEvalOverview = () => {
                                         <div className="flex items-center justify-between">
                                             <Tag color={evaluator?.color}>{evaluator?.name}</Tag>
 
-                                            <Button icon={<EditOutlined />} size="small" />
+                                            <Button
+                                                icon={<EditOutlined />}
+                                                size="small"
+                                                onClick={() => {
+                                                    setSelectedConfigEdit(result.evaluator_config)
+                                                    setIsEditEvalConfigOpen(true)
+                                                }}
+                                            />
                                         </div>
                                     }
                                 >
@@ -362,7 +375,10 @@ const AutomaticEvalOverview = () => {
                                     label: "Delete",
                                     icon: <Trash size={16} />,
                                     danger: true,
-                                    onClick: () => handleDeleteEvaluation(record),
+                                    onClick: () => {
+                                        setSelectedEvalRecord(record)
+                                        setIsDeleteEvalModalOpen(true)
+                                    },
                                 },
                             ],
                         }}
@@ -433,6 +449,31 @@ const AutomaticEvalOverview = () => {
                     fetchEvaluations()
                 }}
             />
+
+            <NewEvaluatorModal
+                open={false}
+                onSuccess={() => {
+                    setIsEditEvalConfigOpen(false)
+                    fetchEvaluations()
+                }}
+                newEvalModalConfigOpen={isEditEvalConfigOpen}
+                setNewEvalModalConfigOpen={setIsEditEvalConfigOpen}
+                setNewEvalModalOpen={() => {}}
+                editMode={true}
+                initialValues={selectedConfigEdit}
+            />
+
+            {selectedEvalRecord && (
+                <DeleteEvaluationModal
+                    open={isDeleteEvalModalOpen}
+                    onCancel={() => setIsDeleteEvalModalOpen(false)}
+                    onOk={async () => {
+                        await handleDeleteEvaluation(selectedEvalRecord)
+                        setIsDeleteEvalModalOpen(false)
+                    }}
+                    evaluationType={"automatic evaluation"}
+                />
+            )}
         </div>
     )
 }
diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
index ca90f4d30..51dc78f95 100644
--- a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -1,3 +1,4 @@
+import DeleteEvaluationModal from "@/components/DeleteEvaluationModal/DeleteEvaluationModal"
 import HumanEvaluationModal from "@/components/HumanEvaluationModal/HumanEvaluationModal"
 import {EvaluationType} from "@/lib/enums"
 import {calculateResultsDataAvg} from "@/lib/helpers/evaluate"
@@ -53,6 +54,9 @@ const SingleModelEvalOverview = () => {
     >([])
     const [fetchingEvaluations, setFetchingEvaluations] = useState(false)
     const [isEvalModalOpen, setIsEvalModalOpen] = useState(false)
+    const [selectedEvalRecord, setSelectedEvalRecord] =
+        useState<SingleModelEvaluationListTableDataType>()
+    const [isDeleteEvalModalOpen, setIsDeleteEvalModalOpen] = useState(false)
 
     useEffect(() => {
         if (!appId) return
@@ -239,7 +243,10 @@ const SingleModelEvalOverview = () => {
                                     label: "Delete",
                                     icon: <Trash size={16} />,
                                     danger: true,
-                                    onClick: () => handleDeleteEvaluation(record),
+                                    onClick: () => {
+                                        setSelectedEvalRecord(record)
+                                        setIsDeleteEvalModalOpen(true)
+                                    },
                                 },
                             ],
                         }}
@@ -285,6 +292,18 @@ const SingleModelEvalOverview = () => {
                 isEvalModalOpen={isEvalModalOpen}
                 setIsEvalModalOpen={setIsEvalModalOpen}
             />
+
+            {selectedEvalRecord && (
+                <DeleteEvaluationModal
+                    open={isDeleteEvalModalOpen}
+                    onCancel={() => setIsDeleteEvalModalOpen(false)}
+                    onOk={async () => {
+                        await handleDeleteEvaluation(selectedEvalRecord)
+                        setIsDeleteEvalModalOpen(false)
+                    }}
+                    evaluationType={"single model evaluation"}
+                />
+            )}
         </div>
     )
 }

From 79d2d2e46d360e3f2090be8fa9bbeae565db1ff2 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 12 Aug 2024 14:35:00 +0100
Subject: [PATCH 047/117] commented out deployment and variant overview
 sections

---
 agenta-web/src/pages/apps/[app_id]/overview/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index bdee8e5e7..45e6e195f 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -88,9 +88,9 @@ export default function Overview() {
 
             <ObservabilityOverview variants={variants} />
 
-            <DeploymentOverview variants={variants} />
+            {/* <DeploymentOverview variants={variants} /> */}
 
-            <VariantsOverview variantList={variants} isVariantLoading={isVariantLoading} />
+            {/* <VariantsOverview variantList={variants} isVariantLoading={isVariantLoading} /> */}
 
             <AutomaticEvalOverview />
 

From e22aa616b4d503983bc10b78a402df19760b380c Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 12 Aug 2024 14:38:32 +0100
Subject: [PATCH 048/117] updated antd theme config

---
 .../src/styles/tokens/antd-themeConfig.json   | 200 +++++++++---------
 1 file changed, 100 insertions(+), 100 deletions(-)

diff --git a/agenta-web/src/styles/tokens/antd-themeConfig.json b/agenta-web/src/styles/tokens/antd-themeConfig.json
index af366763a..3d5a33a17 100644
--- a/agenta-web/src/styles/tokens/antd-themeConfig.json
+++ b/agenta-web/src/styles/tokens/antd-themeConfig.json
@@ -100,7 +100,7 @@
         "purple.5": "#9254de",
         "colorBgElevated": "#ffffff",
         "purple.6": "#722ed1",
-        "colorBgLayout": "#f5f5f5",
+        "colorBgLayout": "#ffffff",
         "purple.7": "#531dab",
         "colorBgMask": "rgba(0, 0, 0, 0.45)",
         "purple.8": "#391085",
@@ -231,9 +231,9 @@
         "sizeXL": 32,
         "sizeXS": 8,
         "sizeXXL": 48,
-        "controlHeight": 32,
+        "controlHeight": 28,
         "sizeXXS": 4,
-        "controlHeightLG": 40,
+        "controlHeightLG": 34,
         "controlHeightSM": 24,
         "controlHeightXS": 16,
         "lineWidth": 1,
@@ -282,7 +282,7 @@
         "controlPaddingHorizontal": 12,
         "controlPaddingHorizontalSM": 8,
         "fontFamily": "Inter",
-        "fontFamilyCode": "Courier Prime",
+        "fontFamilyCode": "Inter",
         "fontSize": 12,
         "fontSizeLG": 14,
         "fontSizeSM": 10,
@@ -304,16 +304,16 @@
         "fontWeightStrong": 600,
         "colorFillAlterSolid": "#fafafa",
         "fontWeightNormal": 400,
-        "base.1": "#fafafa",
-        "base.2": "#f4f4f5",
-        "base.3": "#e4e4e7",
-        "base.4": "#d4d4d8",
-        "base.5": "#a1a1aa",
-        "base.6": "#71717a",
-        "base.7": "#52525b",
-        "base.8": "#3f3f46",
-        "base.9": "#27272a",
-        "base.10": "#18181b",
+        "zinc.1": "#fafafa",
+        "zinc.2": "#f4f4f5",
+        "zinc.3": "#e4e4e7",
+        "zinc.4": "#d4d4d8",
+        "zinc.5": "#a1a1aa",
+        "zinc.6": "#71717a",
+        "zinc.7": "#52525b",
+        "zinc.8": "#3f3f46",
+        "zinc.9": "#27272a",
+        "zinc.10": "#18181b",
         "fontWeightMedium": 500
     },
     "components": {
@@ -339,8 +339,8 @@
             "controlOutlineWidth": 2,
             "controlOutline": "rgba(5, 145, 255, 0.1)",
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
             "borderRadius": 6,
@@ -398,8 +398,8 @@
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlItemBgActiveHover": "#bae0ff",
             "controlItemBgActive": "#e6f4ff",
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusLG": 8,
             "colorWarning": "#faad14",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
@@ -410,8 +410,8 @@
             "colorBorder": "#d9d9d9",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
-            "itemHeight": 32,
-            "headerHeight": 40,
+            "itemHeight": 28,
+            "headerHeight": 34,
             "fontFamily": "Inter"
         },
         "Segmented": {
@@ -426,8 +426,8 @@
             "controlPaddingHorizontalSM": 8,
             "controlPaddingHorizontal": 12,
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusXS": 2,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
@@ -437,7 +437,7 @@
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
             "colorFill": "rgba(0, 0, 0, 0.15)",
-            "colorBgLayout": "#f5f5f5",
+            "colorBgLayout": "#ffffff",
             "colorBgElevated": "#ffffff",
             "segmentedGroupBg": "rgba(0, 0, 0, 0.04)",
             "itemSelectedColor": "rgba(0, 0, 0, 0.88)",
@@ -447,7 +447,7 @@
             "itemColor": "rgba(0, 0, 0, 0.65)",
             "itemActiveBg": "rgba(0, 0, 0, 0.15)",
             "trackPadding": 2,
-            "trackBg": "#f5f5f5",
+            "trackBg": "#ffffff",
             "fontFamily": "Inter"
         },
         "Switch": {
@@ -464,7 +464,7 @@
             "fontSizeSM": 10,
             "fontSizeIcon": 12,
             "fontSize": 12,
-            "controlHeight": 32,
+            "controlHeight": 28,
             "colorWhite": "#ffffff",
             "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
             "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
@@ -503,8 +503,8 @@
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlItemBgActive": "#e6f4ff",
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusXS": 2,
             "borderRadius": 6,
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
@@ -559,7 +559,7 @@
             "paddingBlockSM": 0,
             "presetsMaxWidth": 200,
             "presetsWidth": 120,
-            "textHeight": 40,
+            "textHeight": 34,
             "withoutTimeCellHeight": 66,
             "inputFontSize": 12,
             "inputFontSizeLG": 14,
@@ -579,7 +579,7 @@
             "lineHeight": 1.6666666666666667,
             "fontSizeSM": 10,
             "fontSize": 12,
-            "controlHeightLG": 40,
+            "controlHeightLG": 34,
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSuccess": "#52c41a",
@@ -591,7 +591,7 @@
             "fontFamily": "Inter"
         },
         "Tabs": {
-            "horizontalItemGutter": 32,
+            "horizontalItemGutter": 24,
             "cardGutter": 2,
             "paddingXXS": 4,
             "paddingXS": 8,
@@ -610,8 +610,8 @@
             "fontSizeLG": 14,
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusLG": 8,
             "borderRadius": 6,
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
@@ -627,11 +627,11 @@
             "colorBorder": "#d9d9d9",
             "colorBgContainer": "#ffffff",
             "itemSelectedColor": "#1677ff",
-            "itemHoverColor": "#4096ff",
-            "itemColor": "rgba(0, 0, 0, 0.88)",
+            "itemHoverColor": "rgba(0, 0, 0, 0.88)",
+            "itemColor": "rgba(0, 0, 0, 0.65)",
             "itemActiveColor": "#0958d9",
             "inkBarColor": "#1677ff",
-            "cardHeight": 40,
+            "cardHeight": 34,
             "cardBg": "rgba(0, 0, 0, 0.02)",
             "titleFontSize": 12,
             "titleFontSizeLG": 14,
@@ -641,7 +641,7 @@
         "Table": {
             "stickyScrollBarBorderRadius": 100,
             "headerSplitColor": "#f0f0f0",
-            "headerBg": "#fafafa",
+            "headerBg": "rgba(0, 0, 0, 0.02)",
             "footerBg": "rgba(0, 0, 0, 0.02)",
             "paddingXXS": 4,
             "paddingXS": 8,
@@ -651,7 +651,7 @@
             "margin": 16,
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 500,
             "fontSizeSM": 10,
             "fontSizeIcon": 12,
             "fontSize": 12,
@@ -659,7 +659,7 @@
             "controlItemBgActiveHover": "#bae0ff",
             "controlItemBgActive": "#e6f4ff",
             "controlInteractiveSize": 16,
-            "controlHeight": 32,
+            "controlHeight": 28,
             "borderRadiusLG": 8,
             "borderRadius": 6,
             "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
@@ -691,7 +691,7 @@
             "cellPaddingInline": 16,
             "cellPaddingBlockSM": 8,
             "cellPaddingBlockMD": 12,
-            "cellPaddingBlock": 16,
+            "cellPaddingBlock": 8,
             "borderColor": "#f0f0f0",
             "rowHoverBg": "#fafafa",
             "headerSortActiveBg": "rgba(0, 0, 0, 0.06)",
@@ -729,7 +729,7 @@
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlItemBgActive": "#e6f4ff",
-            "controlHeightLG": 40,
+            "controlHeightLG": 34,
             "borderRadiusSM": 4,
             "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
             "colorTextLightSolid": "#ffffff",
@@ -745,9 +745,9 @@
             "colorBorderSecondary": "#f0f0f0",
             "colorBorderBg": "#ffffff",
             "colorBgContainer": "#ffffff",
-            "titleLineHeight": 32,
+            "titleLineHeight": 28,
             "iconSizeSM": 20,
-            "iconSize": 32,
+            "iconSize": 28,
             "finishIconBorderColor": "#1677ff",
             "customIconFontSize": 24,
             "iconFontSize": 12,
@@ -760,13 +760,13 @@
             "marginXXS": 4,
             "lineHeight": 1.6666666666666667,
             "fontSize": 12,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorPrimary": "#1677ff",
             "colorBgContainer": "#ffffff",
-            "dotSizeLG": 32,
+            "dotSizeLG": 28,
             "fontFamily": "Inter"
         },
         "Slider": {
@@ -779,8 +779,8 @@
             "lineHeight": 1.6666666666666667,
             "fontSize": 12,
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusXS": 2,
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
@@ -813,7 +813,7 @@
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
             "fontSize": 12,
-            "controlHeightLG": 40,
+            "controlHeightLG": 34,
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorFillContent": "rgba(0, 0, 0, 0.06)",
             "fontFamily": "Inter"
@@ -834,8 +834,8 @@
             "controlOutline": "rgba(5, 145, 255, 0.1)",
             "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
             "borderRadius": 6,
@@ -873,7 +873,7 @@
             "lineHeight": 1.6666666666666667,
             "fontWeightStrong": 600,
             "fontSize": 12,
-            "controlHeight": 32,
+            "controlHeight": 28,
             "borderRadiusXS": 2,
             "borderRadiusLG": 8,
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
@@ -894,7 +894,7 @@
             "lineHeight": 1.6666666666666667,
             "fontSizeLG": 14,
             "fontSize": 12,
-            "controlHeightLG": 40,
+            "controlHeightLG": 34,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
             "colorWarning": "#faad14",
@@ -916,7 +916,7 @@
             "paddingXS": 8,
             "lineHeight": 1.6666666666666667,
             "fontSize": 12,
-            "controlHeight": 32,
+            "controlHeight": 28,
             "borderRadiusXS": 2,
             "borderRadius": 6,
             "colorTextLightSolid": "#ffffff",
@@ -945,7 +945,7 @@
             "fontSize": 12,
             "controlItemBgActive": "#e6f4ff",
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
+            "controlHeightLG": 34,
             "borderRadius": 6,
             "colorSplit": "rgba(0, 0, 0, 0.06)",
             "colorPrimaryBorder": "#91caff",
@@ -958,8 +958,8 @@
             "colorBgContainer": "#ffffff",
             "subMenuItemBorderRadius": 4,
             "popupBg": "#ffffff",
-            "itemSelectedColor": "#1677ff",
-            "itemSelectedBg": "#e6f4ff",
+            "itemSelectedColor": "rgba(0, 0, 0, 0.88)",
+            "itemSelectedBg": "rgba(0, 0, 0, 0.06)",
             "itemHoverColor": "rgba(0, 0, 0, 0.88)",
             "itemHoverBg": "rgba(0, 0, 0, 0.06)",
             "itemHeight": 28,
@@ -1009,8 +1009,8 @@
             "controlPaddingHorizontalSM": 8,
             "controlPaddingHorizontal": 12,
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
             "borderRadius": 6,
@@ -1055,7 +1055,7 @@
             "marginSM": 12,
             "margin": 16,
             "fontSizeIcon": 12,
-            "controlHeightLG": 40,
+            "controlHeightLG": 34,
             "colorTextLightSolid": "#ffffff",
             "colorBgMask": "rgba(0, 0, 0, 0.45)",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)"
@@ -1097,7 +1097,7 @@
             "lineHeight": 1.6666666666666667,
             "fontSize": 12,
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
+            "controlHeightLG": 34,
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorBgContainer": "#ffffff",
             "fontFamily": "Inter"
@@ -1121,7 +1121,7 @@
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlItemBgActive": "#e6f4ff",
             "controlInteractiveSize": 16,
-            "controlHeight": 32,
+            "controlHeight": 28,
             "borderRadiusSM": 4,
             "colorWhite": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
@@ -1142,7 +1142,7 @@
         "Calendar": {
             "yearControlWidth": 80,
             "monthControlWidth": 70,
-            "controlHeight": 32,
+            "controlHeight": 28,
             "screenXS": 480,
             "paddingXXS": 4,
             "paddingXS": 8,
@@ -1160,7 +1160,7 @@
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlItemBgActive": "#e6f4ff",
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
+            "controlHeightLG": 34,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
             "colorTextLightSolid": "#ffffff",
@@ -1199,8 +1199,8 @@
             "controlOutlineWidth": 2,
             "controlOutline": "rgba(5, 145, 255, 0.1)",
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
             "borderRadius": 6,
@@ -1293,8 +1293,8 @@
             "controlOutlineWidth": 2,
             "controlOutline": "rgba(5, 145, 255, 0.1)",
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "colorWarning": "#faad14",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
@@ -1308,7 +1308,7 @@
             "itemMarginBottom": 24,
             "labelColonMarginInlineEnd": 8,
             "labelColonMarginInlineStart": 2,
-            "labelHeight": 32,
+            "labelHeight": 28,
             "labelFontSize": 12,
             "fontFamily": "Inter"
         },
@@ -1329,8 +1329,8 @@
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorBorderBg": "#ffffff",
             "containerSizeSM": 24,
-            "containerSizeLG": 40,
-            "containerSize": 32,
+            "containerSizeLG": 34,
+            "containerSize": 28,
             "textFontSize": 18,
             "textFontSizeLG": 20,
             "textFontSizeSM": 12,
@@ -1369,7 +1369,7 @@
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
             "fontSize": 12,
-            "controlHeight": 32,
+            "controlHeight": 28,
             "borderRadiusLG": 8,
             "colorWhite": "#ffffff",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -1391,7 +1391,7 @@
             "fontSizeHeading2": 26,
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlHeightLG": 40,
+            "controlHeightLG": 34,
             "borderRadiusLG": 8,
             "colorTextLightSolid": "#ffffff",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
@@ -1440,7 +1440,7 @@
             "colorErrorHover": "#ff7875",
             "colorErrorActive": "#d9363e",
             "colorError": "#ff4d4f",
-            "fontFamilyCode": "Courier Prime"
+            "fontFamilyCode": "Inter"
         },
         "TreeSelect": {
             "paddingXS": 8,
@@ -1512,9 +1512,9 @@
             "paddingXXS": 4,
             "marginXS": 8,
             "lineWidth": 1,
-            "lineHeightSM": 1.8,
+            "lineHeightSM": 1.6666666666666667,
             "lineHeight": 1.6666666666666667,
-            "fontSizeSM": 10,
+            "fontSizeSM": 12,
             "fontSizeIcon": 12,
             "fontSize": 12,
             "borderRadiusSM": 4,
@@ -1561,8 +1561,8 @@
             "marginLG": 24,
             "controlHeightXS": 16,
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusSM": 4,
             "colorFillContent": "rgba(0, 0, 0, 0.06)",
             "colorFill": "rgba(0, 0, 0, 0.15)"
@@ -1585,9 +1585,9 @@
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlItemBgActive": "#e6f4ff",
             "controlHeightXS": 16,
-            "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightSM": 28,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusXS": 2,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
@@ -1611,15 +1611,15 @@
             "colorBgElevated": "#ffffff",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
-            "singleItemHeightLG": 40,
+            "singleItemHeightLG": 34,
             "selectorBg": "#ffffff",
             "optionSelectedColor": "rgba(0, 0, 0, 0.88)",
             "optionSelectedBg": "#e6f4ff",
             "optionLineHeight": null,
-            "optionHeight": 32,
+            "optionHeight": 28,
             "optionActiveBg": "rgba(0, 0, 0, 0.04)",
             "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
-            "multipleItemHeightLG": 32,
+            "multipleItemHeightLG": 28,
             "multipleItemHeight": 24,
             "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
             "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
@@ -1700,8 +1700,8 @@
             "controlOutline": "rgba(5, 145, 255, 0.1)",
             "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
             "borderRadius": 6,
@@ -1720,7 +1720,7 @@
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
             "itemSizeSM": 24,
-            "itemSize": 32,
+            "itemSize": 28,
             "itemLinkBg": "#ffffff",
             "itemInputBg": "#ffffff",
             "itemBg": "#ffffff",
@@ -1774,7 +1774,7 @@
             "lineHeight": 1.6666666666666667,
             "fontSizeLG": 14,
             "fontSize": 12,
-            "controlHeightLG": 40,
+            "controlHeightLG": 34,
             "borderRadiusLG": 8,
             "colorWarning": "#faad14",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -1807,8 +1807,8 @@
             "fontSizeSM": 10,
             "fontSizeLG": 14,
             "fontSize": 12,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusLG": 8,
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
@@ -1834,7 +1834,7 @@
             "fontSizeIcon": 12,
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlHeightLG": 40,
+            "controlHeightLG": 34,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
             "colorTextLightSolid": "#ffffff",
@@ -1867,7 +1867,7 @@
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlItemBgActiveHover": "#bae0ff",
             "controlItemBgActive": "#e6f4ff",
-            "controlHeight": 32,
+            "controlHeight": 28,
             "borderRadiusXS": 2,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
@@ -1961,8 +1961,8 @@
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlItemBgActive": "#e6f4ff",
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusXS": 2,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
@@ -2028,7 +2028,7 @@
             "paddingInline 2": 11,
             "presetsMaxWidth": 200,
             "presetsWidth": 120,
-            "textHeight": 40,
+            "textHeight": 34,
             "timeCellHeight": 28,
             "timeColumnHeight": 224,
             "timeColumnWidth": 56,
@@ -2173,8 +2173,8 @@
             "controlItemBgActive": "#e6f4ff",
             "controlHeightXS": 16,
             "controlHeightSM": 24,
-            "controlHeightLG": 40,
-            "controlHeight": 32,
+            "controlHeightLG": 34,
+            "controlHeight": 28,
             "borderRadiusXS": 2,
             "borderRadiusSM": 4,
             "borderRadiusLG": 8,
@@ -2210,8 +2210,8 @@
             "fontSizeSM": 10
         },
         "Layout": {
-            "bodyBg": "#f5f5f5",
-            "footerBg": "#f5f5f5",
+            "bodyBg": "#ffffff",
+            "footerBg": "#ffffff",
             "headerBg": "#001529",
             "headerColor": "rgba(0, 0, 0, 0.88)",
             "lightSiderBg": "#ffffff",
@@ -2223,8 +2223,8 @@
             "colorText": "rgba(0, 0, 0, 0.88)",
             "headerHeight": 64,
             "triggerHeight": 48,
-            "zeroTriggerHeight": 40,
-            "zeroTriggerWidth": 40,
+            "zeroTriggerHeight": 34,
+            "zeroTriggerWidth": 34,
             "borderRadius": 6,
             "fontSize": 12,
             "fontSizeXL": 18

From 04330cb82861d8107a5386273f892bc54268137e Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 13 Aug 2024 11:33:10 +0100
Subject: [PATCH 049/117] fix(frontend): added unfinished feature flag and
 remove deployment section in overview page

---
 .../deployments/ChangeVariantModal.tsx        |  13 -
 .../overview/deployments/DeploymentDrawer.tsx | 282 ------------------
 .../deployments/DeploymentOverview.tsx        | 156 ----------
 agenta-web/src/lib/helpers/utils.ts           |   2 +
 .../pages/apps/[app_id]/overview/index.tsx    |   9 +-
 5 files changed, 6 insertions(+), 456 deletions(-)
 delete mode 100644 agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
 delete mode 100644 agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
 delete mode 100644 agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx

diff --git a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
deleted file mode 100644
index 1fc3429e8..000000000
--- a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Variant} from "@/lib/Types"
-import {Modal} from "antd"
-import React from "react"
-
-type ChangeVariantModalProps = {
-    variants: Variant[]
-} & React.ComponentProps<typeof Modal>
-
-const ChangeVariantModal = ({...props}: ChangeVariantModalProps) => {
-    return <Modal width={520} centered destroyOnClose footer={null} {...props}></Modal>
-}
-
-export default ChangeVariantModal
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
deleted file mode 100644
index e4b7508eb..000000000
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import CopyButton from "@/components/CopyButton/CopyButton"
-import {Environment, JSSTheme, Variant} from "@/lib/Types"
-import {createParams} from "@/pages/apps/[app_id]/endpoints"
-import {CloseOutlined, MoreOutlined, PythonOutlined} from "@ant-design/icons"
-import {ClockClockwise, FileCode, FileTs, Rocket, Swap} from "@phosphor-icons/react"
-import {Button, Drawer, DrawerProps, Dropdown, Space, Tabs, Tag, Tooltip, Typography} from "antd"
-import React, {useEffect, useState} from "react"
-import {createUseStyles} from "react-jss"
-import fetchConfigcURLCode from "@/code_snippets/endpoints/fetch_config/curl"
-import fetchConfigpythonCode from "@/code_snippets/endpoints/fetch_config/python"
-import fetchConfigtsCode from "@/code_snippets/endpoints/fetch_config/typescript"
-import invokeLlmAppcURLCode from "@/code_snippets/endpoints/invoke_llm_app/curl"
-import invokeLlmApppythonCode from "@/code_snippets/endpoints/invoke_llm_app/python"
-import invokeLlmApptsCode from "@/code_snippets/endpoints/invoke_llm_app/typescript"
-import CodeBlock from "@/components/DynamicCodeBlock/CodeBlock"
-import {useRouter} from "next/router"
-import {fetchAppContainerURL} from "@/services/api"
-import {useVariant} from "@/lib/hooks/useVariant"
-import {isDemo} from "@/lib/helpers/utils"
-import {dynamicComponent} from "@/lib/helpers/dynamic"
-
-const DeploymentHistoryModal: any = dynamicComponent(
-    "pages/overview/deployments/DeploymentHistoryModal",
-)
-
-interface DeploymentDrawerProps {
-    selectedEnvironment: Environment
-    variants: Variant[]
-}
-
-interface LanguageCodeBlockProps {
-    selectedLang: string
-    fetchConfigCodeSnippet: Record<string, string>
-    invokeLlmAppCodeSnippet: Record<string, string>
-}
-
-const {Title, Text} = Typography
-
-const useStyles = createUseStyles((theme: JSSTheme) => ({
-    drawerTitleContainer: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        "& h1.ant-typography": {
-            fontSize: theme.fontSizeHeading5,
-            fontWeight: 500,
-            textTransform: "capitalize",
-        },
-    },
-    drawerTabs: {
-        "& .ant-tabs-content-holder": {
-            maxHeight: 700,
-            overflowY: "scroll",
-        },
-    },
-}))
-
-const LanguageCodeBlock = ({
-    selectedLang,
-    fetchConfigCodeSnippet,
-    invokeLlmAppCodeSnippet,
-}: LanguageCodeBlockProps) => {
-    return (
-        <div className="flex flex-col gap-6">
-            <div className="flex flex-col gap-2">
-                <div className="flex items-center justify-between">
-                    <Text className="font-[500]">Fetch Prompt/Config</Text>
-                    <CopyButton
-                        buttonText={null}
-                        text={fetchConfigCodeSnippet[selectedLang]}
-                        icon={true}
-                    />
-                </div>
-
-                <CodeBlock
-                    key={selectedLang}
-                    language={selectedLang}
-                    value={fetchConfigCodeSnippet[selectedLang]}
-                />
-            </div>
-
-            <div className="flex flex-col gap-2">
-                <div className="flex items-center justify-between">
-                    <Text className="font-[500]">Invoke LLM</Text>
-                    <CopyButton
-                        buttonText={null}
-                        text={invokeLlmAppCodeSnippet[selectedLang]}
-                        icon={true}
-                    />
-                </div>
-
-                <CodeBlock
-                    key={selectedLang}
-                    language={selectedLang}
-                    value={invokeLlmAppCodeSnippet[selectedLang]}
-                />
-            </div>
-        </div>
-    )
-}
-
-const DeploymentDrawer = ({
-    variants,
-
-    selectedEnvironment,
-    ...props
-}: DeploymentDrawerProps & DrawerProps) => {
-    const classes = useStyles()
-    const router = useRouter()
-    const appId = router.query.app_id as string
-    const [selectedLang, setSelectedLang] = useState("python")
-    const [uri, setURI] = useState<string | null>(null)
-    const [variant, setVariant] = useState<Variant | null>(null)
-    const [isHistoryModalOpen, setIsHistoryModalOpen] = useState(false)
-
-    useEffect(() => {
-        loadURL(selectedEnvironment)
-    }, [selectedEnvironment, appId])
-
-    useEffect(() => {
-        const variant = variants.find(
-            (variant) => variant.variantId === selectedEnvironment.deployed_app_variant_id,
-        )
-        if (!variant) return
-
-        setVariant(variant)
-    }, [selectedEnvironment, variants])
-
-    const loadURL = async (environment: Environment) => {
-        if (environment.deployed_app_variant_id) {
-            const url = await fetchAppContainerURL(appId, environment.deployed_app_variant_id)
-            setURI(`${url}/generate_deployed`)
-        }
-    }
-
-    const {inputParams, isChatVariant} = useVariant(appId, variant!)
-
-    const params = createParams(
-        inputParams,
-        selectedEnvironment?.name || "none",
-        "add_a_value",
-        isChatVariant,
-    )
-
-    const invokeLlmAppCodeSnippet: Record<string, string> = {
-        python: invokeLlmApppythonCode(uri!, params),
-        bash: invokeLlmAppcURLCode(uri!, params),
-        typescript: invokeLlmApptsCode(uri!, params),
-    }
-
-    const fetchConfigCodeSnippet: Record<string, string> = {
-        python: fetchConfigpythonCode(variant?.baseId!, selectedEnvironment?.name!),
-        bash: fetchConfigcURLCode(variant?.baseId!, selectedEnvironment?.name!),
-        typescript: fetchConfigtsCode(variant?.baseId!, selectedEnvironment?.name!),
-    }
-
-    return (
-        <>
-            <Drawer
-                width={560}
-                {...props}
-                destroyOnClose
-                closeIcon={null}
-                title={
-                    <Space className={classes.drawerTitleContainer}>
-                        <Space className="gap-3">
-                            <Button
-                                onClick={() => props.onClose?.({} as any)}
-                                type="text"
-                                icon={<CloseOutlined />}
-                            />
-                            <Title>{selectedEnvironment?.name} environment</Title>
-                        </Space>
-
-                        <Space direction="horizontal">
-                            <Tooltip
-                                title={
-                                    isDemo()
-                                        ? ""
-                                        : "History available in Cloud/Enterprise editions only"
-                                }
-                            >
-                                <Button
-                                    size="small"
-                                    className="flex items-center gap-2"
-                                    disabled={!isDemo()}
-                                    onClick={() => setIsHistoryModalOpen(true)}
-                                >
-                                    <ClockClockwise size={16} />
-                                    View history
-                                </Button>
-                            </Tooltip>
-                            <Dropdown
-                                trigger={["hover"]}
-                                menu={{
-                                    items: [
-                                        {
-                                            key: "change_variant",
-                                            label: "Change Variant",
-                                            icon: <Swap size={16} />,
-                                        },
-                                        {
-                                            key: "open_playground",
-                                            label: "Open in playground",
-                                            icon: <Rocket size={16} />,
-                                        },
-                                    ],
-                                }}
-                            >
-                                <Button type="text" icon={<MoreOutlined />} size="small" />
-                            </Dropdown>
-                        </Space>
-                    </Space>
-                }
-            >
-                <div className="flex flex-col gap-6">
-                    <div className="flex justify-between">
-                        <Text className="font-[500]">Variant Deployed</Text>
-
-                        <Tag>{selectedEnvironment?.deployed_variant_name}</Tag>
-                    </div>
-
-                    <div>
-                        <Tabs
-                            destroyInactiveTabPane
-                            defaultActiveKey={selectedLang}
-                            className={classes.drawerTabs}
-                            items={[
-                                {
-                                    key: "python",
-                                    label: "Python",
-                                    children: (
-                                        <LanguageCodeBlock
-                                            fetchConfigCodeSnippet={fetchConfigCodeSnippet}
-                                            invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
-                                            selectedLang={selectedLang}
-                                        />
-                                    ),
-                                    icon: <PythonOutlined />,
-                                },
-                                {
-                                    key: "typescript",
-                                    label: "TypeScript",
-                                    children: (
-                                        <LanguageCodeBlock
-                                            fetchConfigCodeSnippet={fetchConfigCodeSnippet}
-                                            invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
-                                            selectedLang={selectedLang}
-                                        />
-                                    ),
-                                    icon: <FileTs size={14} />,
-                                },
-                                {
-                                    key: "bash",
-                                    label: "cURL",
-                                    children: (
-                                        <LanguageCodeBlock
-                                            fetchConfigCodeSnippet={fetchConfigCodeSnippet}
-                                            invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
-                                            selectedLang={selectedLang}
-                                        />
-                                    ),
-                                    icon: <FileCode size={14} />,
-                                },
-                            ]}
-                            onChange={setSelectedLang}
-                        />
-                    </div>
-                </div>
-            </Drawer>
-
-            <DeploymentHistoryModal
-                open={isHistoryModalOpen}
-                onCancel={() => setIsHistoryModalOpen(false)}
-                setIsHistoryModalOpen={setIsHistoryModalOpen}
-                selectedEnvironment={selectedEnvironment}
-            />
-        </>
-    )
-}
-
-export default DeploymentDrawer
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
deleted file mode 100644
index 81f1d2bb0..000000000
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import {Environment, JSSTheme, Variant} from "@/lib/Types"
-import {fetchEnvironments} from "@/services/deployment/api"
-import {MoreOutlined} from "@ant-design/icons"
-import {Button, Card, Dropdown, Skeleton, Tag, Typography} from "antd"
-import {useRouter} from "next/router"
-import {useEffect, useState} from "react"
-import {createUseStyles} from "react-jss"
-import DeploymentDrawer from "./DeploymentDrawer"
-import {useQueryParam} from "@/hooks/useQuery"
-import {Code, Rocket, Swap} from "@phosphor-icons/react"
-import ChangeVariantModal from "./ChangeVariantModal"
-import {fetchVariants} from "@/services/api"
-
-const {Title, Text} = Typography
-
-interface DeploymentOverviewProps {
-    variants: Variant[]
-}
-
-const useStyles = createUseStyles((theme: JSSTheme) => ({
-    container: {
-        display: "flex",
-        flexDirection: "column",
-        gap: theme.paddingXS,
-        "& > h1.ant-typography": {
-            fontSize: theme.fontSize,
-        },
-    },
-    cardContainer: {
-        display: "flex",
-        gap: theme.paddingXS,
-        "& .ant-card": {
-            width: "100%",
-            position: "relative",
-            "& .ant-card-body": {
-                padding: theme.padding,
-                display: "flex",
-                flexDirection: "column",
-                gap: theme.paddingXS,
-                "& > span.ant-typography:first-of-type": {
-                    textTransform: "capitalize",
-                },
-            },
-        },
-    },
-}))
-
-const DeploymentOverview = ({variants}: DeploymentOverviewProps) => {
-    const classes = useStyles()
-    const router = useRouter()
-    const [queryEnv, setQueryEnv] = useQueryParam("environment")
-    const appId = router.query.app_id as string
-    const [environments, setEnvironments] = useState<Environment[]>([])
-    const [selectedEnvironment, setSelectedEnvironment] = useState<Environment>()
-    const [isDeploymentLoading, setIsDeploymentLoading] = useState(true)
-    const [openChangeVariantModal, setOpenChangeVariantModal] = useState(false)
-
-    useEffect(() => {
-        if (!appId) return
-
-        const loadEnvironments = async () => {
-            try {
-                setIsDeploymentLoading(true)
-                const response = await fetchEnvironments(appId)
-                setEnvironments(response)
-            } catch (error) {
-                console.error(error)
-            } finally {
-                setIsDeploymentLoading(false)
-            }
-        }
-
-        loadEnvironments()
-    }, [appId])
-
-    return (
-        <div className={classes.container}>
-            <Title>Deployment</Title>
-
-            {isDeploymentLoading ? (
-                <div className="flex gap-2">
-                    {Array.from({length: 3}).map((_, index) => (
-                        <Skeleton key={index} />
-                    ))}
-                </div>
-            ) : (
-                <div className={classes.cardContainer}>
-                    {environments.map((env, index) => (
-                        <Card key={index}>
-                            <Dropdown
-                                trigger={["click"]}
-                                menu={{
-                                    items: [
-                                        {
-                                            key: "use_api",
-                                            label: "Use API",
-                                            icon: <Code size={16} />,
-                                            onClick: () => {
-                                                setQueryEnv(env.name)
-                                                setSelectedEnvironment(env)
-                                            },
-                                        },
-                                        {
-                                            key: "change_variant",
-                                            label: "Change Variant",
-                                            icon: <Swap size={16} />,
-                                            onClick: () => setOpenChangeVariantModal(true),
-                                        },
-                                        {type: "divider"},
-                                        {
-                                            key: "open_playground",
-                                            label: "Open in playground",
-                                            icon: <Rocket size={16} />,
-                                        },
-                                    ],
-                                }}
-                            >
-                                <Button
-                                    type="text"
-                                    icon={<MoreOutlined />}
-                                    size="small"
-                                    className="absolute right-2"
-                                />
-                            </Dropdown>
-                            <Text>{env.name}</Text>
-                            {env.deployed_variant_name ? (
-                                <Tag className="w-fit" color="green">
-                                    {env.deployed_variant_name}
-                                </Tag>
-                            ) : (
-                                <Tag className="w-fit">No deployment</Tag>
-                            )}
-                        </Card>
-                    ))}
-                </div>
-            )}
-
-            {selectedEnvironment && (
-                <DeploymentDrawer
-                    selectedEnvironment={selectedEnvironment}
-                    open={!!queryEnv}
-                    onClose={() => setQueryEnv("")}
-                    variants={variants}
-                />
-            )}
-
-            <ChangeVariantModal
-                open={openChangeVariantModal}
-                onCancel={() => setOpenChangeVariantModal(false)}
-                variants={variants}
-            />
-        </div>
-    )
-}
-
-export default DeploymentOverview
diff --git a/agenta-web/src/lib/helpers/utils.ts b/agenta-web/src/lib/helpers/utils.ts
index 63e616850..7967a39a7 100644
--- a/agenta-web/src/lib/helpers/utils.ts
+++ b/agenta-web/src/lib/helpers/utils.ts
@@ -16,6 +16,8 @@ if (typeof window !== "undefined") {
     }
 }
 
+export const ENABLE_UNFINISHED_FEATURES = false
+
 export const renameVariables = (name: string) => {
     if (name === "inputs") {
         return "Prompt Variables"
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 45e6e195f..ef9fc98e7 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -1,12 +1,11 @@
 import AbTestingEvalOverview from "@/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview"
 import AutomaticEvalOverview from "@/components/pages/overview/automaticEvaluation/AutomaticEvalOverview"
-import DeploymentOverview from "@/components/pages/overview/deployments/DeploymentOverview"
 import SingleModelEvalOverview from "@/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview"
 import VariantsOverview from "@/components/pages/overview/variants/VariantsOverview"
 import {useAppsData} from "@/contexts/app.context"
 import {useAppId} from "@/hooks/useAppId"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
-import {renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
+import {ENABLE_UNFINISHED_FEATURES, renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
 import {JSSTheme, Variant} from "@/lib/Types"
 import {fetchVariants} from "@/services/api"
 import {MoreOutlined} from "@ant-design/icons"
@@ -88,9 +87,9 @@ export default function Overview() {
 
             <ObservabilityOverview variants={variants} />
 
-            {/* <DeploymentOverview variants={variants} /> */}
-
-            {/* <VariantsOverview variantList={variants} isVariantLoading={isVariantLoading} /> */}
+            {ENABLE_UNFINISHED_FEATURES && (
+                <VariantsOverview variantList={variants} isVariantLoading={isVariantLoading} />
+            )}
 
             <AutomaticEvalOverview />
 

From 2651d42a7faae1df54cd784bb153a65dff53bc96 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 13 Aug 2024 15:00:43 +0100
Subject: [PATCH 050/117] fix(frontend): updated antd theme config and improved
 ui

---
 .../src/components/AppSelector/AppCard.tsx    | 44 ++++++++++++-------
 .../Layout/ThemeContextProvider.tsx           | 15 +------
 .../AbTestingEvalOverview.tsx                 | 28 +++++++-----
 .../AutomaticEvalOverview.tsx                 |  4 ++
 .../SingleModelEvalOverview.tsx               | 12 +++--
 .../overview/variants/VariantsOverview.tsx    |  4 ++
 .../pages/apps/[app_id]/overview/index.tsx    | 12 ++---
 .../src/styles/tokens/antd-themeConfig.json   | 12 ++---
 8 files changed, 73 insertions(+), 58 deletions(-)

diff --git a/agenta-web/src/components/AppSelector/AppCard.tsx b/agenta-web/src/components/AppSelector/AppCard.tsx
index 0ae8b9580..4153dfa11 100644
--- a/agenta-web/src/components/AppSelector/AppCard.tsx
+++ b/agenta-web/src/components/AppSelector/AppCard.tsx
@@ -2,7 +2,6 @@ import {Modal, Card, Dropdown, Button, Typography, Tag} from "antd"
 import {MoreOutlined} from "@ant-design/icons"
 import {deleteApp} from "@/services/app-selector/api"
 import {useState} from "react"
-import Link from "next/link"
 import {renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
 import {createUseStyles} from "react-jss"
 import {JSSTheme, ListAppsItem} from "@/lib/Types"
@@ -18,7 +17,8 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         width: 300,
         display: "flex",
         flexDirection: "column",
-        transition: "all 0.3s ease-in",
+        transition: "all 0.025s ease-in",
+        cursor: "pointer",
         "& > .ant-card-head": {
             minHeight: 0,
             padding: theme.paddingSM,
@@ -104,6 +104,7 @@ const AppCard: React.FC<{
             <Card
                 className={classes.card}
                 title={renameVariablesCapitalizeAll(app.app_name)}
+                onClick={() => router.push(`/apps/${app.app_id}/overview`)}
                 extra={
                     <Dropdown
                         trigger={["hover"]}
@@ -114,34 +115,43 @@ const AppCard: React.FC<{
                                     key: "open_app",
                                     label: "Open",
                                     icon: <Note size={16} />,
-                                    onClick: () => router.push(`/apps/${app.app_id}/overview`),
+                                    onClick: (e: any) => {
+                                        e.domEvent.stopPropagation()
+                                        router.push(`/apps/${app.app_id}/overview`)
+                                    },
                                 },
-
                                 {type: "divider"},
-                                {
-                                    key: "rename_app",
-                                    label: "Rename",
-                                    icon: <PencilLine size={16} />,
-                                },
+                                // {
+                                //     key: "rename_app",
+                                //     label: "Rename",
+                                //     icon: <PencilLine size={16} />,
+                                //     onClick: (e: any) => {
+                                //         e.domEvent.stopPropagation()
+                                //     },
+                                // },
                                 {
                                     key: "delete_app",
                                     label: "Delete",
                                     icon: <Trash size={16} />,
                                     danger: true,
-                                    onClick: () => setVisibleDelete(true),
+                                    onClick: (e: any) => {
+                                        e.domEvent.stopPropagation()
+                                        setVisibleDelete(true)
+                                    },
                                 },
                             ],
                         }}
                     >
-                        <Button type="text" icon={<MoreOutlined />} size="small" />
+                        <Button
+                            type="text"
+                            onClick={(e) => e.stopPropagation()}
+                            icon={<MoreOutlined />}
+                            size="small"
+                        />
                     </Dropdown>
                 }
             >
-                <Link
-                    data-cy="app-card-link"
-                    href={`/apps/${app.app_id}/overview`}
-                    className={classes.app_card_link}
-                >
+                <div data-cy="app-card-link" className={classes.app_card_link}>
                     <div>
                         <Text>Type</Text>
                         <Tag className="mr-0">Single Prompt</Tag>
@@ -150,7 +160,7 @@ const AppCard: React.FC<{
                         <Text>Last modified:</Text>
                         <Text>{formatDay("2024-08-05T22:32:19.593503Z")}</Text>
                     </div>
-                </Link>
+                </div>
             </Card>
 
             <DeleteModal
diff --git a/agenta-web/src/components/Layout/ThemeContextProvider.tsx b/agenta-web/src/components/Layout/ThemeContextProvider.tsx
index f49712575..4f4da66fd 100644
--- a/agenta-web/src/components/Layout/ThemeContextProvider.tsx
+++ b/agenta-web/src/components/Layout/ThemeContextProvider.tsx
@@ -1,19 +1,8 @@
-import {ConfigProvider, theme, ThemeConfig} from "antd"
+import {ConfigProvider, theme} from "antd"
 import {PropsWithChildren, createContext, useState, useContext, useEffect} from "react"
 import {useLocalStorage, useUpdateEffect} from "usehooks-ts"
 import antdTokens from "@/styles/tokens/antd-themeConfig.json"
 
-export const AntdThemeConfig: ThemeConfig = {
-    token: {
-        // Seed Token
-        ...antdTokens.token,
-    },
-    // @ts-ignore
-    components: {
-        ...antdTokens.components,
-    },
-}
-
 export enum ThemeMode {
     Light = "light",
     Dark = "dark",
@@ -80,7 +69,7 @@ const ThemeContextProvider: React.FC<PropsWithChildren> = ({children}) => {
                 theme={{
                     algorithm:
                         val === ThemeMode.Dark ? theme.darkAlgorithm : theme.defaultAlgorithm,
-                    ...AntdThemeConfig,
+                    ...antdTokens,
                 }}
             >
                 {children}
diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
index ae1150749..4e4252200 100644
--- a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -34,32 +34,32 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
     statFlag: {
         "& .ant-statistic-content-value": {
-            fontSize: 20,
-            color: "#cf1322",
+            fontSize: 16,
+            color: theme.colorError,
         },
         "& .ant-statistic-content-suffix": {
-            fontSize: 20,
-            color: "#cf1322",
+            fontSize: 16,
+            color: theme.colorError,
         },
     },
     stat: {
         "& .ant-statistic-content-value": {
-            fontSize: 20,
-            color: "#1677ff",
+            fontSize: 16,
+            color: theme.colorPrimary,
         },
         "& .ant-statistic-content-suffix": {
-            fontSize: 20,
-            color: "#1677ff",
+            fontSize: 16,
+            color: theme.colorPrimary,
         },
     },
     statGood: {
         "& .ant-statistic-content-value": {
-            fontSize: 20,
-            color: "#3f8600",
+            fontSize: 16,
+            color: theme.colorSuccess,
         },
         "& .ant-statistic-content-suffix": {
-            fontSize: 20,
-            color: "#3f8600",
+            fontSize: 16,
+            color: theme.colorSuccess,
         },
     },
 }))
@@ -295,10 +295,12 @@ const AbTestingEvalOverview = () => {
                 key: "key",
                 width: 56,
                 fixed: "right",
+                align: "center",
                 render: (_: any, record: HumanEvaluationListTableDataType) => {
                     return (
                         <Dropdown
                             trigger={["click"]}
+                            overlayStyle={{width: 180}}
                             menu={{
                                 items: [
                                     {
@@ -386,6 +388,8 @@ const AbTestingEvalOverview = () => {
                     columns={columns}
                     dataSource={evaluationsList}
                     scroll={{x: true}}
+                    bordered
+                    pagination={false}
                 />
             </Spin>
 
diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index e97cbf428..514419f55 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -337,10 +337,12 @@ const AutomaticEvalOverview = () => {
             key: "key",
             width: 56,
             fixed: "right",
+            align: "center",
             render: (_, record) => {
                 return (
                     <Dropdown
                         trigger={["click"]}
+                        overlayStyle={{width: 180}}
                         menu={{
                             items: [
                                 {
@@ -436,6 +438,8 @@ const AutomaticEvalOverview = () => {
                     rowKey={"id"}
                     dataSource={evaluationList}
                     scroll={{x: true}}
+                    bordered
+                    pagination={false}
                 />
             </Spin>
 
diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
index 51dc78f95..31d06943e 100644
--- a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -34,12 +34,12 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
     stat: {
         "& .ant-statistic-content-value": {
-            fontSize: 20,
-            color: "#1677ff",
+            fontSize: 16,
+            color: theme.colorPrimary,
         },
         "& .ant-statistic-content-suffix": {
-            fontSize: 20,
-            color: "#1677ff",
+            fontSize: 16,
+            color: theme.colorPrimary,
         },
     },
 }))
@@ -203,10 +203,12 @@ const SingleModelEvalOverview = () => {
             key: "key",
             width: 56,
             fixed: "right",
+            align: "center",
             render: (_, record) => {
                 return (
                     <Dropdown
                         trigger={["click"]}
+                        overlayStyle={{width: 180}}
                         menu={{
                             items: [
                                 {
@@ -284,6 +286,8 @@ const SingleModelEvalOverview = () => {
                     columns={columns}
                     dataSource={evaluationsList}
                     scroll={{x: true}}
+                    bordered
+                    pagination={false}
                 />
             </Spin>
 
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 422c1761e..b1d5531ce 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -112,10 +112,12 @@ const VariantsOverview = ({variantList, isVariantLoading}: VariantsOverviewProps
             key: "key",
             width: 56,
             fixed: "right",
+            align: "center",
             render: (_, record) => {
                 return (
                     <Dropdown
                         trigger={["click"]}
+                        overlayStyle={{width: 180}}
                         menu={{
                             items: [
                                 {
@@ -186,6 +188,8 @@ const VariantsOverview = ({variantList, isVariantLoading}: VariantsOverviewProps
                     columns={columns}
                     dataSource={variantList}
                     scroll={{x: true}}
+                    bordered
+                    pagination={false}
                 />
             </Spin>
         </div>
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index ef9fc98e7..3dee9f1ae 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -24,7 +24,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     container: {
         display: "flex",
         flexDirection: "column",
-        gap: theme.paddingLG,
+        gap: 40,
         "& h1": {
             fontSize: theme.fontSizeHeading4,
             fontWeight: 500,
@@ -67,11 +67,11 @@ export default function Overview() {
                     overlayStyle={{width: 180}}
                     menu={{
                         items: [
-                            {
-                                key: "rename_app",
-                                label: "Rename",
-                                icon: <PencilLine size={16} />,
-                            },
+                            // {
+                            //     key: "rename_app",
+                            //     label: "Rename",
+                            //     icon: <PencilLine size={16} />,
+                            // },
                             {
                                 key: "delete_app",
                                 label: "Delete",
diff --git a/agenta-web/src/styles/tokens/antd-themeConfig.json b/agenta-web/src/styles/tokens/antd-themeConfig.json
index 3d5a33a17..34ee97e37 100644
--- a/agenta-web/src/styles/tokens/antd-themeConfig.json
+++ b/agenta-web/src/styles/tokens/antd-themeConfig.json
@@ -641,7 +641,7 @@
         "Table": {
             "stickyScrollBarBorderRadius": 100,
             "headerSplitColor": "#f0f0f0",
-            "headerBg": "rgba(0, 0, 0, 0.02)",
+            "headerBg": "#fafafa",
             "footerBg": "rgba(0, 0, 0, 0.02)",
             "paddingXXS": 4,
             "paddingXS": 8,
@@ -680,7 +680,7 @@
             "colorBorderSecondary": "#f0f0f0",
             "colorBgContainer": "#ffffff",
             "rowSelectedHoverBg": "#bae0ff",
-            "headerFilterHoverBg": "rgba(0, 0, 0, 0.06)",
+            "headerFilterHoverBg": "#f0f0f0",
             "headerColor": "rgba(0, 0, 0, 0.88)",
             "headerBorderRadius": 8,
             "footerColor": "rgba(0, 0, 0, 0.88)",
@@ -694,9 +694,9 @@
             "cellPaddingBlock": 8,
             "borderColor": "#f0f0f0",
             "rowHoverBg": "#fafafa",
-            "headerSortActiveBg": "rgba(0, 0, 0, 0.06)",
+            "headerSortActiveBg": "#f0f0f0",
             "bodySortBg": "#fafafa",
-            "headerSortHoverBg": "rgba(0, 0, 0, 0.06)",
+            "headerSortHoverBg": "#f0f0f0",
             "cellFontSize": 12,
             "cellFontSizeMD": 12,
             "cellFontSizeSM": 12,
@@ -1615,7 +1615,7 @@
             "selectorBg": "#ffffff",
             "optionSelectedColor": "rgba(0, 0, 0, 0.88)",
             "optionSelectedBg": "#e6f4ff",
-            "optionLineHeight": null,
+            "optionLineHeight": 1.6,
             "optionHeight": 28,
             "optionActiveBg": "rgba(0, 0, 0, 0.04)",
             "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
@@ -1626,7 +1626,7 @@
             "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
             "multipleItemBg": "rgba(0, 0, 0, 0.06)",
             "clearBg": "#ffffff",
-            "optionFontSize": "Inter",
+            "optionFontSize": 12,
             "optionSelectedFontWeight": 600,
             "fontFamily": "Inter"
         },

From d5652b5515f44321d8ad8bebf946aee0c5c8a5f5 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 14 Aug 2024 01:11:57 +0100
Subject: [PATCH 051/117] fix(frontend): made delete app modal generic and
 added delete app func in overview page

---
 .../src/components/AppSelector/AppCard.tsx    |  31 +-----
 .../AppSelector/modals/DeleteAppModal.tsx     |  23 ++++
 .../Evaluations/AutomaticEvaluationResult.tsx |   4 +-
 .../pages/apps/[app_id]/overview/index.tsx    | 100 ++++++++++++------
 4 files changed, 97 insertions(+), 61 deletions(-)
 create mode 100644 agenta-web/src/components/AppSelector/modals/DeleteAppModal.tsx

diff --git a/agenta-web/src/components/AppSelector/AppCard.tsx b/agenta-web/src/components/AppSelector/AppCard.tsx
index 4153dfa11..89588f617 100644
--- a/agenta-web/src/components/AppSelector/AppCard.tsx
+++ b/agenta-web/src/components/AppSelector/AppCard.tsx
@@ -1,4 +1,4 @@
-import {Modal, Card, Dropdown, Button, Typography, Tag} from "antd"
+import {Card, Dropdown, Button, Typography, Tag} from "antd"
 import {MoreOutlined} from "@ant-design/icons"
 import {deleteApp} from "@/services/app-selector/api"
 import {useState} from "react"
@@ -9,6 +9,7 @@ import {useAppsData} from "@/contexts/app.context"
 import {Note, PencilLine, Trash} from "@phosphor-icons/react"
 import {useRouter} from "next/router"
 import {formatDay} from "@/lib/helpers/dateTimeHelper"
+import DeleteAppModal from "./modals/DeleteAppModal"
 
 const {Text} = Typography
 
@@ -49,28 +50,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
 }))
 
-const DeleteModal: React.FC<{
-    open: boolean
-    handleOk: () => Promise<void>
-    handleCancel: () => void
-    appName: string
-    confirmLoading: boolean
-}> = ({open, handleOk, handleCancel, appName, confirmLoading}) => {
-    return (
-        <Modal
-            title="Are you sure?"
-            open={open}
-            onOk={handleOk}
-            confirmLoading={confirmLoading} // add this line
-            onCancel={handleCancel}
-            okText="Yes"
-            cancelText="No"
-        >
-            <p>Are you sure you want to delete {appName}?</p>
-        </Modal>
-    )
-}
-
 const AppCard: React.FC<{
     app: ListAppsItem
 }> = ({app}) => {
@@ -163,10 +142,10 @@ const AppCard: React.FC<{
                 </div>
             </Card>
 
-            <DeleteModal
+            <DeleteAppModal
                 open={visibleDelete}
-                handleOk={handleDeleteOk}
-                handleCancel={handleDeleteCancel}
+                onOk={handleDeleteOk}
+                onCancel={handleDeleteCancel}
                 appName={app.app_name}
                 confirmLoading={confirmLoading}
             />
diff --git a/agenta-web/src/components/AppSelector/modals/DeleteAppModal.tsx b/agenta-web/src/components/AppSelector/modals/DeleteAppModal.tsx
new file mode 100644
index 000000000..5c2095a9b
--- /dev/null
+++ b/agenta-web/src/components/AppSelector/modals/DeleteAppModal.tsx
@@ -0,0 +1,23 @@
+import React from "react"
+import {Modal} from "antd"
+
+type DeleteAppModalProps = {
+    appName: string
+    confirmLoading: boolean
+} & React.ComponentProps<typeof Modal>
+
+const DeleteAppModal = ({appName, confirmLoading, ...props}: DeleteAppModalProps) => {
+    return (
+        <Modal
+            title="Are you sure?"
+            confirmLoading={confirmLoading}
+            okText="Yes"
+            cancelText="No"
+            {...props}
+        >
+            <p>Are you sure you want to delete {appName}?</p>
+        </Modal>
+    )
+}
+
+export default DeleteAppModal
diff --git a/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx b/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx
index 740a43a28..5d7120e74 100644
--- a/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx
+++ b/agenta-web/src/components/Evaluations/AutomaticEvaluationResult.tsx
@@ -240,8 +240,8 @@ export default function AutomaticEvaluationResult({
             )
 
             setSelectedRowKeys([])
-        } catch {
-        } finally {
+        } catch (error) {
+            console.error(error)
         }
     }
 
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 3dee9f1ae..09f76ee63 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -1,3 +1,4 @@
+import DeleteAppModal from "@/components/AppSelector/modals/DeleteAppModal"
 import AbTestingEvalOverview from "@/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview"
 import AutomaticEvalOverview from "@/components/pages/overview/automaticEvaluation/AutomaticEvalOverview"
 import SingleModelEvalOverview from "@/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview"
@@ -8,9 +9,11 @@ import {dynamicComponent} from "@/lib/helpers/dynamic"
 import {ENABLE_UNFINISHED_FEATURES, renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
 import {JSSTheme, Variant} from "@/lib/Types"
 import {fetchVariants} from "@/services/api"
+import {deleteApp} from "@/services/app-selector/api"
 import {MoreOutlined} from "@ant-design/icons"
 import {PencilLine, Trash} from "@phosphor-icons/react"
 import {Button, Dropdown, Space, Typography} from "antd"
+import {useRouter} from "next/router"
 import {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 
@@ -34,12 +37,15 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
 }))
 
 export default function Overview() {
+    const router = useRouter()
     const appId = useAppId()
     const classes = useStyles()
     const {currentApp} = useAppsData()
     const capitalizedAppName = renameVariablesCapitalizeAll(currentApp?.app_name || "")
     const [variants, setVariants] = useState<Variant[]>([])
     const [isVariantLoading, setIsVariantLoading] = useState(false)
+    const [isDeleteAppModalOpen, setIsDeleteAppModalOpen] = useState(false)
+    const [isDelAppLoading, setIsDelAppLoading] = useState(false)
 
     useEffect(() => {
         const fetchAllVariants = async () => {
@@ -57,45 +63,73 @@ export default function Overview() {
         fetchAllVariants()
     }, [appId])
 
+    const handleDeleteOk = async () => {
+        if (!currentApp) return
+
+        setIsDelAppLoading(true)
+        try {
+            await deleteApp(currentApp.app_id)
+            router.push("/apps")
+        } catch (error) {
+            console.error(error)
+        } finally {
+            localStorage.removeItem(`tabIndex_${currentApp.app_id}`)
+            setIsDeleteAppModalOpen(false)
+            setIsVariantLoading(false)
+        }
+    }
+
     return (
-        <div className={classes.container}>
-            <Space className="justify-between">
-                <Title>{capitalizedAppName}</Title>
+        <>
+            <div className={classes.container}>
+                <Space className="justify-between">
+                    <Title>{capitalizedAppName}</Title>
 
-                <Dropdown
-                    trigger={["click"]}
-                    overlayStyle={{width: 180}}
-                    menu={{
-                        items: [
-                            // {
-                            //     key: "rename_app",
-                            //     label: "Rename",
-                            //     icon: <PencilLine size={16} />,
-                            // },
-                            {
-                                key: "delete_app",
-                                label: "Delete",
-                                icon: <Trash size={16} />,
-                                danger: true,
-                            },
-                        ],
-                    }}
-                >
-                    <Button type="text" icon={<MoreOutlined />} size="small" />
-                </Dropdown>
-            </Space>
+                    <Dropdown
+                        trigger={["click"]}
+                        overlayStyle={{width: 180}}
+                        menu={{
+                            items: [
+                                // {
+                                //     key: "rename_app",
+                                //     label: "Rename",
+                                //     icon: <PencilLine size={16} />,
+                                // },
+                                {
+                                    key: "delete_app",
+                                    label: "Delete",
+                                    icon: <Trash size={16} />,
+                                    danger: true,
+                                    onClick: () => setIsDeleteAppModalOpen(true),
+                                },
+                            ],
+                        }}
+                    >
+                        <Button type="text" icon={<MoreOutlined />} size="small" />
+                    </Dropdown>
+                </Space>
 
-            <ObservabilityOverview variants={variants} />
+                <ObservabilityOverview variants={variants} />
 
-            {ENABLE_UNFINISHED_FEATURES && (
-                <VariantsOverview variantList={variants} isVariantLoading={isVariantLoading} />
-            )}
+                {ENABLE_UNFINISHED_FEATURES && (
+                    <VariantsOverview variantList={variants} isVariantLoading={isVariantLoading} />
+                )}
 
-            <AutomaticEvalOverview />
+                <AutomaticEvalOverview />
 
-            <AbTestingEvalOverview />
+                <AbTestingEvalOverview />
 
-            <SingleModelEvalOverview />
-        </div>
+                <SingleModelEvalOverview />
+            </div>
+            {currentApp && (
+                <DeleteAppModal
+                    open={isDeleteAppModalOpen}
+                    onOk={handleDeleteOk}
+                    onCancel={() => setIsDeleteAppModalOpen(false)}
+                    confirmLoading={isDelAppLoading}
+                    appName={currentApp?.app_name}
+                />
+            )}
+        </>
     )
 }

From 59088fe98120ded16496c0ef4edea26f756dad6a Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 14 Aug 2024 04:11:14 +0100
Subject: [PATCH 052/117] fix(frontend): sorted table by createdAt and sliced
 array to length of 5 items

---
 .../abTestingEvaluation/AbTestingEvalOverview.tsx         | 8 +++++---
 .../automaticEvaluation/AutomaticEvalOverview.tsx         | 6 ++++++
 .../singleModelEvaluation/SingleModelEvalOverview.tsx     | 8 +++++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
index 4e4252200..772cbe0c3 100644
--- a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -97,10 +97,12 @@ const AbTestingEvalOverview = () => {
 
                 const results = (await Promise.all(fetchPromises))
                     .filter((evaluation) => evaluation !== undefined)
-                    // shortend array to have 5 items (length 5)
+                    .sort(
+                        (a, b) =>
+                            new Date(b.createdAt || 0).getTime() -
+                            new Date(a.createdAt || 0).getTime(),
+                    )
                     .slice(0, 5)
-                    // reverse array to have from new to old
-                    .reverse()
 
                 setEvaluationsList(results)
             } catch (error) {
diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index 514419f55..afa29dc3d 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -150,6 +150,12 @@ const AutomaticEvalOverview = () => {
                 fetchAllEvaluatorConfigs(appId),
             ])
             const result = allEvaluations
+                .sort(
+                    (a, b) =>
+                        new Date(b.created_at || 0).getTime() -
+                        new Date(a.created_at || 0).getTime(),
+                )
+                .slice(0, 5)
             setEvaluationList(result)
             setEvaluators(allEvaluators)
             setEvaluatorConfigs(allEvaluatorConfigs)
diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
index 31d06943e..a33bf830b 100644
--- a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -83,10 +83,12 @@ const SingleModelEvalOverview = () => {
                             !(Object.keys(item.scoresData || {}).length === 0) ||
                             item.avgScore !== undefined,
                     )
-                    // shortend array to have 5 items (length 5)
+                    .sort(
+                        (a, b) =>
+                            new Date(b.createdAt || 0).getTime() -
+                            new Date(a.createdAt || 0).getTime(),
+                    )
                     .slice(0, 5)
-                    // reverse array to have from new to old
-                    .reverse()
 
                 setEvaluationsList(newEvalResults as any)
             } catch (error) {

From a2881cf65460f7a810351dedce9854c4d1a14b0f Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 14 Aug 2024 04:16:48 +0100
Subject: [PATCH 053/117] lint and build fix(frontend)

---
 .../singleModelEvaluation/SingleModelEvalOverview.tsx         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
index a33bf830b..b21af4958 100644
--- a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -85,8 +85,8 @@ const SingleModelEvalOverview = () => {
                     )
                     .sort(
                         (a, b) =>
-                            new Date(b.createdAt || 0).getTime() -
-                            new Date(a.createdAt || 0).getTime(),
+                            new Date(b?.createdAt ?? 0).getTime() -
+                            new Date(a?.createdAt ?? 0).getTime(),
                     )
                     .slice(0, 5)
 

From 8c35ff946fdbef2569b175813703ec0a95d961ae Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 14 Aug 2024 04:48:27 +0100
Subject: [PATCH 054/117] feat(frontend): added recently visited feature for
 sidebar

---
 agenta-web/src/components/Sidebar/config.tsx | 51 ++++++++++++--------
 agenta-web/src/contexts/app.context.tsx      | 19 ++++++--
 2 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/agenta-web/src/components/Sidebar/config.tsx b/agenta-web/src/components/Sidebar/config.tsx
index de10a43ce..6e8bf28a9 100644
--- a/agenta-web/src/components/Sidebar/config.tsx
+++ b/agenta-web/src/components/Sidebar/config.tsx
@@ -41,7 +41,7 @@ export type SidebarConfig = {
 export const useSidebarConfig = () => {
     const appId = useAppId()
     const {doesSessionExist} = useSession()
-    const {currentApp} = useAppsData()
+    const {currentApp, apps} = useAppsData()
     const capitalizedAppName = renameVariablesCapitalizeAll(currentApp?.app_name || "")
     const isOss = !isDemo()
     const [useOrgData, setUseOrgData] = useState<Function>(() => () => "")
@@ -54,6 +54,19 @@ export const useSidebarConfig = () => {
 
     const {selectedOrg} = useOrgData()
 
+    const recentlyVisitedAppId = localStorage.getItem("recentlyVisitedApp")
+    const recentlyVisitedApp = apps.find((app) => app.app_id === recentlyVisitedAppId)
+
+    if (!recentlyVisitedApp) {
+        localStorage.removeItem("recentlyVisitedApp")
+    }
+
+    useEffect(() => {
+        if (appId) {
+            localStorage.setItem("recentlyVisitedApp", appId)
+        }
+    }, [appId])
+
     const sidebarConfig: SidebarConfig[] = [
         {
             key: "app-management-link",
@@ -72,46 +85,46 @@ export const useSidebarConfig = () => {
         {
             key: "overview-link",
             title: "Overview",
-            link: `/apps/${appId}/overview`,
+            link: `/apps/${appId || recentlyVisitedAppId}/overview`,
             icon: <Desktop size={16} />,
-            isHidden: !appId,
+            isHidden: !appId && !recentlyVisitedAppId,
         },
         {
             key: "app-playground-link",
             title: "Playground",
             tooltip:
                 "Experiment with real data and optimize your parameters including prompts, methods, and configuration settings.",
-            link: `/apps/${appId}/playground`,
+            link: `/apps/${appId || recentlyVisitedAppId}/playground`,
             icon: <RocketOutlined />,
-            isHidden: !appId,
+            isHidden: !appId && !recentlyVisitedAppId,
         },
         {
             key: "app-testsets-link",
             title: "Test Sets",
             tooltip: "Create and manage testsets for evaluation purposes.",
-            link: `/apps/${appId}/testsets`,
+            link: `/apps/${appId || recentlyVisitedAppId}/testsets`,
             icon: <DatabaseOutlined />,
-            isHidden: !appId,
+            isHidden: !appId && !recentlyVisitedAppId,
         },
         {
             key: "app-auto-evaluations-link",
             title: "Automatic Evaluation",
             icon: <ChartDonut size={16} />,
-            isHidden: !appId,
+            isHidden: !appId && !recentlyVisitedAppId,
             submenu: [
                 {
                     key: "app-evaluators-link",
                     title: "Evaluators",
                     tooltip:
                         "Select and customize evaluators such as custom code or regex evaluators.",
-                    link: `/apps/${appId}/evaluations/new-evaluator`,
+                    link: `/apps/${appId || recentlyVisitedAppId}/evaluations/new-evaluator`,
                     icon: <Dot size={16} />,
                 },
                 {
                     key: "app-evaluations-results-link",
                     title: "Results",
                     tooltip: "Choose your variants and evaluators to start the evaluation process.",
-                    link: `/apps/${appId}/evaluations/results`,
+                    link: `/apps/${appId || recentlyVisitedAppId}/evaluations/results`,
                     icon: <Dot size={16} />,
                 },
             ],
@@ -120,14 +133,14 @@ export const useSidebarConfig = () => {
             key: "app-human-evaluations-link",
             title: "Human Evaluation",
             icon: <PersonSimpleRun size={16} />,
-            isHidden: !appId,
+            isHidden: !appId && !recentlyVisitedAppId,
             submenu: [
                 {
                     key: "app-human-ab-testing-link",
                     title: "A/B Evaluation",
                     tooltip:
                         "A/B tests allow you to compare the performance of two different variants manually.",
-                    link: `/apps/${appId}/annotations/human_a_b_testing`,
+                    link: `/apps/${appId || recentlyVisitedAppId}/annotations/human_a_b_testing`,
                     icon: <Dot size={16} />,
                 },
                 {
@@ -135,7 +148,7 @@ export const useSidebarConfig = () => {
                     title: "Single Model Eval.",
                     tooltip:
                         "Single model test allows you to score the performance of a single LLM app manually.",
-                    link: `/apps/${appId}/annotations/single_model_test`,
+                    link: `/apps/${appId || recentlyVisitedAppId}/annotations/single_model_test`,
                     icon: <Dot size={16} />,
                 },
             ],
@@ -144,7 +157,7 @@ export const useSidebarConfig = () => {
             key: "app-observability-link",
             title: "Observability",
             icon: <ChartLineUp size={16} />,
-            isHidden: !appId,
+            isHidden: !appId && !recentlyVisitedAppId,
             isCloudFeature: true && isOss,
             cloudFeatureTooltip: "Observability available in Cloud/Enterprise editions only",
             tag: "beta",
@@ -153,21 +166,21 @@ export const useSidebarConfig = () => {
                     key: "app-observability-dashboard-link",
                     title: "Dashboard",
                     tooltip: "Dashboard view of traces and generations",
-                    link: `/apps/${appId}/observability`,
+                    link: `/apps/${appId || recentlyVisitedAppId}/observability`,
                     icon: <Dot size={16} />,
                 },
                 {
                     key: "app-observability-traces-link",
                     title: "Traces",
                     tooltip: "Traces and their details",
-                    link: `/apps/${appId}/observability/traces`,
+                    link: `/apps/${appId || recentlyVisitedAppId}/observability/traces`,
                     icon: <Dot size={16} />,
                 },
                 {
                     key: "app-observability-generations-link",
                     title: "Generations",
                     tooltip: "Generations and their details",
-                    link: `/apps/${appId}/observability/generations`,
+                    link: `/apps/${appId || recentlyVisitedAppId}/observability/generations`,
                     icon: <Dot size={16} />,
                 },
             ],
@@ -176,13 +189,13 @@ export const useSidebarConfig = () => {
             key: "app-deployment-link",
             title: "Deployment",
             icon: <CloudArrowUp size={16} />,
-            isHidden: !appId,
+            isHidden: !appId && !recentlyVisitedAppId,
             submenu: [
                 {
                     key: "app-endpoints-link",
                     title: "Endpoints",
                     tooltip: "Deploy your applications to different environments.",
-                    link: `/apps/${appId}/endpoints`,
+                    link: `/apps/${appId || recentlyVisitedAppId}/endpoints`,
                     icon: <Dot size={16} />,
                 },
             ],
diff --git a/agenta-web/src/contexts/app.context.tsx b/agenta-web/src/contexts/app.context.tsx
index 67314cbad..494f84dea 100644
--- a/agenta-web/src/contexts/app.context.tsx
+++ b/agenta-web/src/contexts/app.context.tsx
@@ -69,10 +69,21 @@ const AppContextProvider: React.FC<PropsWithChildren> = ({children}) => {
     const router = useRouter()
     const appId = router.query?.app_id as string
 
-    const currentApp = useMemo(
-        () => (!appId ? null : apps.find((item: ListAppsItem) => item.app_id === appId) || null),
-        [apps, appId],
-    )
+    const recentlyVisitedAppId = useMemo(() => {
+        if (typeof window !== "undefined") {
+            return localStorage.getItem("recentlyVisitedApp")
+        }
+        return null
+    }, [appId])
+
+    const currentApp = useMemo(() => {
+        if (!appId) {
+            return recentlyVisitedAppId
+                ? apps.find((item: ListAppsItem) => item.app_id === recentlyVisitedAppId) || null
+                : null
+        }
+        return apps.find((item: ListAppsItem) => item.app_id === appId) || null
+    }, [apps, appId, recentlyVisitedAppId])
 
     const [modalInstance, setModalInstance] = useState()
 

From 30a99a3d95017afb035feee513edfa7c54c77c8e Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 14 Aug 2024 12:15:11 +0100
Subject: [PATCH 055/117] fix(frontend): improve logic for recently visited app
 feature

---
 agenta-web/src/components/Sidebar/config.tsx | 15 +--------
 agenta-web/src/contexts/app.context.tsx      | 34 ++++++++++++++++----
 2 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/agenta-web/src/components/Sidebar/config.tsx b/agenta-web/src/components/Sidebar/config.tsx
index 6e8bf28a9..bbaa24ea5 100644
--- a/agenta-web/src/components/Sidebar/config.tsx
+++ b/agenta-web/src/components/Sidebar/config.tsx
@@ -41,7 +41,7 @@ export type SidebarConfig = {
 export const useSidebarConfig = () => {
     const appId = useAppId()
     const {doesSessionExist} = useSession()
-    const {currentApp, apps} = useAppsData()
+    const {currentApp, recentlyVisitedAppId} = useAppsData()
     const capitalizedAppName = renameVariablesCapitalizeAll(currentApp?.app_name || "")
     const isOss = !isDemo()
     const [useOrgData, setUseOrgData] = useState<Function>(() => () => "")
@@ -54,19 +54,6 @@ export const useSidebarConfig = () => {
 
     const {selectedOrg} = useOrgData()
 
-    const recentlyVisitedAppId = localStorage.getItem("recentlyVisitedApp")
-    const recentlyVisitedApp = apps.find((app) => app.app_id === recentlyVisitedAppId)
-
-    if (!recentlyVisitedApp) {
-        localStorage.removeItem("recentlyVisitedApp")
-    }
-
-    useEffect(() => {
-        if (appId) {
-            localStorage.setItem("recentlyVisitedApp", appId)
-        }
-    }, [appId])
-
     const sidebarConfig: SidebarConfig[] = [
         {
             key: "app-management-link",
diff --git a/agenta-web/src/contexts/app.context.tsx b/agenta-web/src/contexts/app.context.tsx
index 494f84dea..b7087542e 100644
--- a/agenta-web/src/contexts/app.context.tsx
+++ b/agenta-web/src/contexts/app.context.tsx
@@ -6,6 +6,7 @@ import {PropsWithChildren, createContext, useContext, useEffect, useMemo, useSta
 import useSWR from "swr"
 import {dynamicContext} from "@/lib/helpers/dynamic"
 import {HookAPI} from "antd/es/modal/useModal"
+import {useLocalStorage} from "usehooks-ts"
 
 type AppContextType = {
     currentApp: ListAppsItem | null
@@ -13,7 +14,7 @@ type AppContextType = {
     error: any
     isLoading: boolean
     mutate: () => void
-
+    recentlyVisitedAppId: string | null
     modalInstance?: HookAPI
     setModalInstance: (context: any) => void
 }
@@ -24,7 +25,7 @@ const initialValues: AppContextType = {
     error: null,
     isLoading: false,
     mutate: () => {},
-
+    recentlyVisitedAppId: null,
     setModalInstance: (context) => {},
 }
 
@@ -68,12 +69,15 @@ const AppContextProvider: React.FC<PropsWithChildren> = ({children}) => {
     const {data: apps, error, isLoading, mutate} = useApps()
     const router = useRouter()
     const appId = router.query?.app_id as string
+    const [recentlyVisitedAppId, setRecentlyVisitedAppId] = useLocalStorage<string | null>(
+        "recentlyVisitedApp",
+        null,
+    )
 
-    const recentlyVisitedAppId = useMemo(() => {
-        if (typeof window !== "undefined") {
-            return localStorage.getItem("recentlyVisitedApp")
+    useEffect(() => {
+        if (appId) {
+            setRecentlyVisitedAppId(appId)
         }
-        return null
     }, [appId])
 
     const currentApp = useMemo(() => {
@@ -85,9 +89,16 @@ const AppContextProvider: React.FC<PropsWithChildren> = ({children}) => {
         return apps.find((item: ListAppsItem) => item.app_id === appId) || null
     }, [apps, appId, recentlyVisitedAppId])
 
+    useEffect(() => {
+        if (!currentApp) {
+            setRecentlyVisitedAppId(null)
+        }
+    }, [currentApp])
+
     const [modalInstance, setModalInstance] = useState()
 
     appContextValues.currentApp = currentApp
+    appContextValues.recentlyVisitedAppId = recentlyVisitedAppId
     appContextValues.apps = apps
     appContextValues.error = error
     appContextValues.isLoading = isLoading
@@ -97,7 +108,16 @@ const AppContextProvider: React.FC<PropsWithChildren> = ({children}) => {
 
     return (
         <AppContext.Provider
-            value={{currentApp, apps, error, isLoading, mutate, modalInstance, setModalInstance}}
+            value={{
+                currentApp,
+                apps,
+                error,
+                isLoading,
+                mutate,
+                modalInstance,
+                setModalInstance,
+                recentlyVisitedAppId,
+            }}
         >
             {children}
         </AppContext.Provider>

From 007795ee5e2d48f360aaa2ea3a3c6a9bdc8e3004 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Wed, 14 Aug 2024 17:24:26 +0600
Subject: [PATCH 056/117] test(frontend): improve logic of the createVariant
 function

---
 agenta-web/cypress/support/commands/evaluations.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/agenta-web/cypress/support/commands/evaluations.ts b/agenta-web/cypress/support/commands/evaluations.ts
index 71be863e6..519d6291b 100644
--- a/agenta-web/cypress/support/commands/evaluations.ts
+++ b/agenta-web/cypress/support/commands/evaluations.ts
@@ -45,13 +45,12 @@ Cypress.Commands.add("createVariant", () => {
 
     cy.get('[data-cy="enter-app-name-modal-button"]').click()
 
-    cy.url().should("include", "/playground")
+    cy.url().should("include", "/overview")
     cy.url().then((url) => {
-        app_id = url.match(/\/apps\/([a-fA-F0-9-]+)\/playground/)[1]
+        app_id = url.match(/\/apps\/([a-fA-F0-9-]+)\/overview/)[1]
 
         cy.wrap(app_id).as("app_id")
     })
-    cy.contains(/modify parameters/i)
     cy.removeLlmProviderKey()
 })
 

From fc3d6b06ec241bb91bea27642b9eef20f3eebe74 Mon Sep 17 00:00:00 2001
From: ashrafchowdury <ashrafdev365@gmail.com>
Date: Wed, 14 Aug 2024 18:53:37 +0600
Subject: [PATCH 057/117] test(frontend): adjusted the test according to new
 changes

---
 agenta-web/cypress/e2e/eval.comparison.cy.ts       | 1 -
 agenta-web/cypress/e2e/eval.evaluations.cy.ts      | 1 -
 agenta-web/cypress/e2e/eval.scenarios.cy.ts        | 1 -
 agenta-web/cypress/e2e/playground.cy.ts            | 8 +++++++-
 agenta-web/cypress/support/commands/evaluations.ts | 2 +-
 5 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/agenta-web/cypress/e2e/eval.comparison.cy.ts b/agenta-web/cypress/e2e/eval.comparison.cy.ts
index 5e972bc2e..cf97725ac 100644
--- a/agenta-web/cypress/e2e/eval.comparison.cy.ts
+++ b/agenta-web/cypress/e2e/eval.comparison.cy.ts
@@ -8,7 +8,6 @@ describe("Evaluation Comparison Test", function () {
         cy.get("@app_id").then((appId) => {
             app_id = appId
         })
-        cy.get('[data-cy="playground-save-changes-button"]').eq(0).click()
     })
 
     context("When creating an app variant", () => {
diff --git a/agenta-web/cypress/e2e/eval.evaluations.cy.ts b/agenta-web/cypress/e2e/eval.evaluations.cy.ts
index 2192e9a7e..248a4e477 100644
--- a/agenta-web/cypress/e2e/eval.evaluations.cy.ts
+++ b/agenta-web/cypress/e2e/eval.evaluations.cy.ts
@@ -5,7 +5,6 @@ describe("Evaluations CRUD Operations Test", function () {
         cy.get("@app_id").then((appId) => {
             app_id = appId
         })
-        cy.get('[data-cy="playground-save-changes-button"]').eq(0).click()
     })
 
     context("Executing Evaluations CRUD operations", () => {
diff --git a/agenta-web/cypress/e2e/eval.scenarios.cy.ts b/agenta-web/cypress/e2e/eval.scenarios.cy.ts
index 9419dd2c6..51d9bf371 100644
--- a/agenta-web/cypress/e2e/eval.scenarios.cy.ts
+++ b/agenta-web/cypress/e2e/eval.scenarios.cy.ts
@@ -5,7 +5,6 @@ describe("Evaluation Scenarios Test", function () {
         cy.get("@app_id").then((appId) => {
             app_id = appId
         })
-        cy.get('[data-cy="playground-save-changes-button"]').eq(0).click()
     })
 
     context("Executing Evaluation Scenarios Workflow", () => {
diff --git a/agenta-web/cypress/e2e/playground.cy.ts b/agenta-web/cypress/e2e/playground.cy.ts
index 871b2d2b6..55617d1bb 100644
--- a/agenta-web/cypress/e2e/playground.cy.ts
+++ b/agenta-web/cypress/e2e/playground.cy.ts
@@ -1,9 +1,15 @@
 describe("Playground Prompt Test", function () {
+    let app_id
     before(() => {
         cy.createVariant()
+        cy.get("@app_id").then((appId) => {
+            app_id = appId
+        })
     })
-
     it("Should test prompt functionality in the Playground", () => {
+        cy.visit(`/apps/${app_id}/playground`)
+        cy.url().should("include", "/playground")
+        cy.contains(/modify parameters/i)
         cy.get('[data-cy^="testview-input-parameters"]').eq(0).type("Germany")
         cy.get('[data-cy="testview-input-parameters-run-button"]').click()
         cy.intercept("POST", "**/demo/app/generate", {
diff --git a/agenta-web/cypress/support/commands/evaluations.ts b/agenta-web/cypress/support/commands/evaluations.ts
index 519d6291b..b67132def 100644
--- a/agenta-web/cypress/support/commands/evaluations.ts
+++ b/agenta-web/cypress/support/commands/evaluations.ts
@@ -28,7 +28,7 @@ Cypress.Commands.add("createVariant", () => {
         }
     })
 
-    cy.contains("Single Prompt")
+    cy.contains("Single Prompt OpenAI")
         .parentsUntil('[data-cy^="app-template-card"]')
         .last()
         .contains("create app", {matchCase: false})

From a8143c696fb11c64bf0ad5d6299640b2ac483168 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 14 Aug 2024 20:17:29 +0100
Subject: [PATCH 058/117] fix(frontend): moved deployment view from sidebar to
 overview page

---
 agenta-web/src/components/Sidebar/config.tsx  |  16 -
 .../deployments/ChangeVariantModal.tsx        |  98 ++++++
 .../overview/deployments/DeploymentDrawer.tsx | 314 ++++++++++++++++++
 .../deployments/DeploymentOverview.tsx        | 163 +++++++++
 .../pages/apps/[app_id]/overview/index.tsx    |   3 +
 5 files changed, 578 insertions(+), 16 deletions(-)
 create mode 100644 agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
 create mode 100644 agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
 create mode 100644 agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx

diff --git a/agenta-web/src/components/Sidebar/config.tsx b/agenta-web/src/components/Sidebar/config.tsx
index bbaa24ea5..07c4bc06b 100644
--- a/agenta-web/src/components/Sidebar/config.tsx
+++ b/agenta-web/src/components/Sidebar/config.tsx
@@ -7,7 +7,6 @@ import {useEffect, useState} from "react"
 import {
     ChartDonut,
     ChartLineUp,
-    CloudArrowUp,
     Desktop,
     GithubLogo,
     PaperPlane,
@@ -172,21 +171,6 @@ export const useSidebarConfig = () => {
                 },
             ],
         },
-        {
-            key: "app-deployment-link",
-            title: "Deployment",
-            icon: <CloudArrowUp size={16} />,
-            isHidden: !appId && !recentlyVisitedAppId,
-            submenu: [
-                {
-                    key: "app-endpoints-link",
-                    title: "Endpoints",
-                    tooltip: "Deploy your applications to different environments.",
-                    link: `/apps/${appId || recentlyVisitedAppId}/endpoints`,
-                    icon: <Dot size={16} />,
-                },
-            ],
-        },
         {
             key: "invite-teammate-link",
             title: "Invite Teammate",
diff --git a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
new file mode 100644
index 000000000..9ab04d82c
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
@@ -0,0 +1,98 @@
+import {Environment, JSSTheme, Variant} from "@/lib/Types"
+import {CaretRight} from "@phosphor-icons/react"
+import {Input, Modal, Table, Tag, Typography} from "antd"
+import Link from "next/link"
+import React, {useMemo, useState} from "react"
+import {createUseStyles} from "react-jss"
+
+const {Search} = Input
+
+type ChangeVariantModalProps = {
+    variants: Variant[]
+    selectedEnvironment: Environment
+} & React.ComponentProps<typeof Modal>
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    title: {
+        fontSize: theme.fontSizeLG,
+        lineHeight: theme.lineHeightLG,
+        fontWeight: theme.fontWeightStrong,
+    },
+    table: {
+        "& .ant-table-thead > tr > th": {
+            height: 32,
+            padding: "0 16px",
+        },
+        "& .ant-table-tbody > tr > td": {
+            height: 48,
+            padding: "0 16px",
+        },
+    },
+}))
+
+const ChangeVariantModal = ({variants, selectedEnvironment, ...props}: ChangeVariantModalProps) => {
+    const classes = useStyles()
+    const [searchTerm, setSearchTerm] = useState<string>("")
+
+    const filtered = useMemo(() => {
+        if (!searchTerm) return variants
+        return variants.filter((item) =>
+            item.variantName.toLowerCase().includes(searchTerm.toLowerCase()),
+        )
+    }, [searchTerm, variants])
+
+    return (
+        <Modal width={520} centered destroyOnClose footer={null} {...props}>
+            <div>
+                <Typography.Text className={classes.title}>
+                    Deploy to {selectedEnvironment.name}
+                </Typography.Text>
+
+                <div className="flex flex-col gap-4 mt-2">
+                    <Typography.Text>Choose a variant for deployment</Typography.Text>
+
+                    <Search
+                        value={searchTerm}
+                        onChange={(e) => setSearchTerm(e.target.value)}
+                        placeholder="Search"
+                        allowClear
+                    />
+
+                    <Table
+                        bordered
+                        pagination={false}
+                        dataSource={filtered}
+                        columns={[
+                            {
+                                title: "Variants",
+                                dataIndex: "variantName",
+                                key: "variantName",
+                                render: (_, record) => {
+                                    return (
+                                        <div className="flex items-center justify-between">
+                                            <div>{record.variantName}</div>
+
+                                            <div className="flex items-center">
+                                                <Tag>{record.variantId}</Tag>
+                                                <CaretRight />
+                                            </div>
+                                        </div>
+                                    )
+                                },
+                            },
+                        ]}
+                        onRow={(record) => ({
+                            onClick: () => {},
+                            style: {cursor: "pointer"},
+                        })}
+                        className={classes.table}
+                        scroll={{y: 300}}
+                        style={{height: 330}}
+                    />
+                </div>
+            </div>
+        </Modal>
+    )
+}
+
+export default ChangeVariantModal
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
new file mode 100644
index 000000000..2a82ef718
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -0,0 +1,314 @@
+import CopyButton from "@/components/CopyButton/CopyButton"
+import {Environment, JSSTheme, Variant} from "@/lib/Types"
+import {createParams} from "@/pages/apps/[app_id]/endpoints"
+import {CloseOutlined, MoreOutlined, PythonOutlined} from "@ant-design/icons"
+import {
+    ArrowRight,
+    ClockClockwise,
+    CloudWarning,
+    FileCode,
+    FileTs,
+    Rocket,
+    Swap,
+} from "@phosphor-icons/react"
+import {Button, Drawer, DrawerProps, Dropdown, Space, Tabs, Tag, Tooltip, Typography} from "antd"
+import React, {useEffect, useState} from "react"
+import {createUseStyles} from "react-jss"
+import fetchConfigcURLCode from "@/code_snippets/endpoints/fetch_config/curl"
+import fetchConfigpythonCode from "@/code_snippets/endpoints/fetch_config/python"
+import fetchConfigtsCode from "@/code_snippets/endpoints/fetch_config/typescript"
+import invokeLlmAppcURLCode from "@/code_snippets/endpoints/invoke_llm_app/curl"
+import invokeLlmApppythonCode from "@/code_snippets/endpoints/invoke_llm_app/python"
+import invokeLlmApptsCode from "@/code_snippets/endpoints/invoke_llm_app/typescript"
+import CodeBlock from "@/components/DynamicCodeBlock/CodeBlock"
+import {useRouter} from "next/router"
+import {fetchAppContainerURL} from "@/services/api"
+import {useVariant} from "@/lib/hooks/useVariant"
+import {isDemo} from "@/lib/helpers/utils"
+import {dynamicComponent} from "@/lib/helpers/dynamic"
+
+const DeploymentHistoryModal: any = dynamicComponent(
+    "pages/overview/deployments/DeploymentHistoryModal",
+)
+
+interface DeploymentDrawerProps {
+    selectedEnvironment: Environment
+    variants: Variant[]
+}
+
+interface LanguageCodeBlockProps {
+    selectedLang: string
+    fetchConfigCodeSnippet: Record<string, string>
+    invokeLlmAppCodeSnippet: Record<string, string>
+}
+
+const {Title, Text} = Typography
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    drawerTitleContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        "& h1.ant-typography": {
+            fontSize: theme.fontSizeHeading5,
+            fontWeight: 500,
+            textTransform: "capitalize",
+        },
+    },
+    drawerTabs: {
+        "& .ant-tabs-content-holder": {
+            maxHeight: 700,
+            overflowY: "scroll",
+        },
+    },
+    noDataContainer: {
+        height: 200,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 16,
+    },
+}))
+
+const LanguageCodeBlock = ({
+    selectedLang,
+    fetchConfigCodeSnippet,
+    invokeLlmAppCodeSnippet,
+}: LanguageCodeBlockProps) => {
+    return (
+        <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                    <Text className="font-[500]">Fetch Prompt/Config</Text>
+                    <CopyButton
+                        buttonText={null}
+                        text={fetchConfigCodeSnippet[selectedLang]}
+                        icon={true}
+                    />
+                </div>
+
+                <CodeBlock
+                    key={selectedLang}
+                    language={selectedLang}
+                    value={fetchConfigCodeSnippet[selectedLang]}
+                />
+            </div>
+
+            <div className="flex flex-col gap-2">
+                <div className="flex items-center justify-between">
+                    <Text className="font-[500]">Invoke LLM</Text>
+                    <CopyButton
+                        buttonText={null}
+                        text={invokeLlmAppCodeSnippet[selectedLang]}
+                        icon={true}
+                    />
+                </div>
+
+                <CodeBlock
+                    key={selectedLang}
+                    language={selectedLang}
+                    value={invokeLlmAppCodeSnippet[selectedLang]}
+                />
+            </div>
+        </div>
+    )
+}
+
+const DeploymentDrawer = ({
+    variants,
+
+    selectedEnvironment,
+    ...props
+}: DeploymentDrawerProps & DrawerProps) => {
+    const classes = useStyles()
+    const router = useRouter()
+    const appId = router.query.app_id as string
+    const [selectedLang, setSelectedLang] = useState("python")
+    const [uri, setURI] = useState<string | null>(null)
+    const [variant, setVariant] = useState<Variant | null>(null)
+    const [isHistoryModalOpen, setIsHistoryModalOpen] = useState(false)
+
+    useEffect(() => {
+        loadURL(selectedEnvironment)
+    }, [selectedEnvironment, appId])
+
+    useEffect(() => {
+        const variant = variants.find(
+            (variant) => variant.variantId === selectedEnvironment.deployed_app_variant_id,
+        )
+        if (!variant) return
+
+        setVariant(variant)
+    }, [selectedEnvironment, variants])
+
+    const loadURL = async (environment: Environment) => {
+        if (environment.deployed_app_variant_id) {
+            const url = await fetchAppContainerURL(appId, environment.deployed_app_variant_id)
+            setURI(`${url}/generate_deployed`)
+        }
+    }
+
+    const {inputParams, isChatVariant} = useVariant(appId, variant!)
+
+    const params = createParams(
+        inputParams,
+        selectedEnvironment?.name || "none",
+        "add_a_value",
+        isChatVariant,
+    )
+
+    const invokeLlmAppCodeSnippet: Record<string, string> = {
+        python: invokeLlmApppythonCode(uri!, params),
+        bash: invokeLlmAppcURLCode(uri!, params),
+        typescript: invokeLlmApptsCode(uri!, params),
+    }
+
+    const fetchConfigCodeSnippet: Record<string, string> = {
+        python: fetchConfigpythonCode(variant?.baseId!, selectedEnvironment?.name!),
+        bash: fetchConfigcURLCode(variant?.baseId!, selectedEnvironment?.name!),
+        typescript: fetchConfigtsCode(variant?.baseId!, selectedEnvironment?.name!),
+    }
+
+    return (
+        <>
+            <Drawer
+                width={560}
+                {...props}
+                destroyOnClose
+                closeIcon={null}
+                title={
+                    <Space className={classes.drawerTitleContainer}>
+                        <Space className="gap-3">
+                            <Button
+                                onClick={() => props.onClose?.({} as any)}
+                                type="text"
+                                icon={<CloseOutlined />}
+                            />
+                            <Title>{selectedEnvironment?.name} environment</Title>
+                        </Space>
+
+                        {selectedEnvironment.deployed_variant_name && (
+                            <Space direction="horizontal">
+                                <Tooltip
+                                    title={
+                                        isDemo()
+                                            ? ""
+                                            : "History available in Cloud/Enterprise editions only"
+                                    }
+                                >
+                                    <Button
+                                        size="small"
+                                        className="flex items-center gap-2"
+                                        disabled={!isDemo()}
+                                        onClick={() => setIsHistoryModalOpen(true)}
+                                    >
+                                        <ClockClockwise size={16} />
+                                        View history
+                                    </Button>
+                                </Tooltip>
+                                <Dropdown
+                                    trigger={["hover"]}
+                                    menu={{
+                                        items: [
+                                            {
+                                                key: "change_variant",
+                                                label: "Change Variant",
+                                                icon: <Swap size={16} />,
+                                            },
+                                            {
+                                                key: "open_playground",
+                                                label: "Open in playground",
+                                                icon: <Rocket size={16} />,
+                                            },
+                                        ],
+                                    }}
+                                >
+                                    <Button type="text" icon={<MoreOutlined />} size="small" />
+                                </Dropdown>
+                            </Space>
+                        )}
+                    </Space>
+                }
+            >
+                {selectedEnvironment.deployed_variant_name ? (
+                    <div className="flex flex-col gap-6">
+                        <div className="flex justify-between">
+                            <Text className="font-[500]">Variant Deployed</Text>
+
+                            <Tag>{selectedEnvironment?.deployed_variant_name}</Tag>
+                        </div>
+
+                        <div>
+                            <Tabs
+                                destroyInactiveTabPane
+                                defaultActiveKey={selectedLang}
+                                className={classes.drawerTabs}
+                                items={[
+                                    {
+                                        key: "python",
+                                        label: "Python",
+                                        children: (
+                                            <LanguageCodeBlock
+                                                fetchConfigCodeSnippet={fetchConfigCodeSnippet}
+                                                invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
+                                                selectedLang={selectedLang}
+                                            />
+                                        ),
+                                        icon: <PythonOutlined />,
+                                    },
+                                    {
+                                        key: "typescript",
+                                        label: "TypeScript",
+                                        children: (
+                                            <LanguageCodeBlock
+                                                fetchConfigCodeSnippet={fetchConfigCodeSnippet}
+                                                invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
+                                                selectedLang={selectedLang}
+                                            />
+                                        ),
+                                        icon: <FileTs size={14} />,
+                                    },
+                                    {
+                                        key: "bash",
+                                        label: "cURL",
+                                        children: (
+                                            <LanguageCodeBlock
+                                                fetchConfigCodeSnippet={fetchConfigCodeSnippet}
+                                                invokeLlmAppCodeSnippet={invokeLlmAppCodeSnippet}
+                                                selectedLang={selectedLang}
+                                            />
+                                        ),
+                                        icon: <FileCode size={14} />,
+                                    },
+                                ]}
+                                onChange={setSelectedLang}
+                            />
+                        </div>
+                    </div>
+                ) : (
+                    <div className={classes.noDataContainer}>
+                        <CloudWarning size={40} />
+
+                        <Typography.Text>
+                            No deployment has been done on {selectedEnvironment.name} environment
+                        </Typography.Text>
+
+                        <Button className="flex items-center gap-2">
+                            Deploy now <ArrowRight size={14} />
+                        </Button>
+                    </div>
+                )}
+            </Drawer>
+
+            <DeploymentHistoryModal
+                open={isHistoryModalOpen}
+                onCancel={() => setIsHistoryModalOpen(false)}
+                setIsHistoryModalOpen={setIsHistoryModalOpen}
+                selectedEnvironment={selectedEnvironment}
+            />
+        </>
+    )
+}
+
+export default DeploymentDrawer
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
new file mode 100644
index 000000000..f0eb3731d
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -0,0 +1,163 @@
+import {Environment, JSSTheme, Variant} from "@/lib/Types"
+import {fetchEnvironments} from "@/services/deployment/api"
+import {MoreOutlined} from "@ant-design/icons"
+import {Button, Card, Dropdown, Skeleton, Tag, Typography} from "antd"
+import {useRouter} from "next/router"
+import {useEffect, useState} from "react"
+import {createUseStyles} from "react-jss"
+import DeploymentDrawer from "./DeploymentDrawer"
+import {useQueryParam} from "@/hooks/useQuery"
+import {Code, Rocket, Swap} from "@phosphor-icons/react"
+import ChangeVariantModal from "./ChangeVariantModal"
+import {fetchVariants} from "@/services/api"
+
+const {Title, Text} = Typography
+
+interface DeploymentOverviewProps {
+    variants: Variant[]
+}
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    container: {
+        display: "flex",
+        flexDirection: "column",
+        gap: theme.paddingXS,
+        "& > h1.ant-typography": {
+            fontSize: theme.fontSize,
+        },
+    },
+    cardContainer: {
+        display: "flex",
+        gap: theme.paddingXS,
+        "& .ant-card": {
+            width: "100%",
+            position: "relative",
+            "& .ant-card-body": {
+                padding: theme.padding,
+                display: "flex",
+                flexDirection: "column",
+                gap: theme.paddingXS,
+                "& > span.ant-typography:first-of-type": {
+                    textTransform: "capitalize",
+                },
+            },
+        },
+    },
+}))
+
+const DeploymentOverview = ({variants}: DeploymentOverviewProps) => {
+    const classes = useStyles()
+    const router = useRouter()
+    const [queryEnv, setQueryEnv] = useQueryParam("environment")
+    const appId = router.query.app_id as string
+    const [environments, setEnvironments] = useState<Environment[]>([])
+    const [selectedEnvironment, setSelectedEnvironment] = useState<Environment>()
+    const [isDeploymentLoading, setIsDeploymentLoading] = useState(true)
+    const [openChangeVariantModal, setOpenChangeVariantModal] = useState(false)
+    const [changeVariantEnv, setChangeVariantEnv] = useState<Environment>()
+
+    useEffect(() => {
+        if (!appId) return
+
+        const loadEnvironments = async () => {
+            try {
+                setIsDeploymentLoading(true)
+                const response = await fetchEnvironments(appId)
+                setEnvironments(response)
+            } catch (error) {
+                console.error(error)
+            } finally {
+                setIsDeploymentLoading(false)
+            }
+        }
+
+        loadEnvironments()
+    }, [appId])
+
+    return (
+        <div className={classes.container}>
+            <Title>Deployment</Title>
+
+            {isDeploymentLoading ? (
+                <div className="flex gap-2">
+                    {Array.from({length: 3}).map((_, index) => (
+                        <Skeleton key={index} />
+                    ))}
+                </div>
+            ) : (
+                <div className={classes.cardContainer}>
+                    {environments.map((env, index) => (
+                        <Card key={index}>
+                            <Dropdown
+                                trigger={["click"]}
+                                menu={{
+                                    items: [
+                                        {
+                                            key: "use_api",
+                                            label: "Use API",
+                                            icon: <Code size={16} />,
+                                            onClick: () => {
+                                                setQueryEnv(env.name)
+                                                setSelectedEnvironment(env)
+                                            },
+                                        },
+                                        {
+                                            key: "change_variant",
+                                            label: "Change Variant",
+                                            icon: <Swap size={16} />,
+                                            onClick: () => {
+                                                setChangeVariantEnv(env)
+                                                setOpenChangeVariantModal(true)
+                                            },
+                                        },
+                                        {type: "divider"},
+                                        {
+                                            key: "open_playground",
+                                            label: "Open in playground",
+                                            icon: <Rocket size={16} />,
+                                        },
+                                    ],
+                                }}
+                            >
+                                <Button
+                                    type="text"
+                                    icon={<MoreOutlined />}
+                                    size="small"
+                                    className="absolute right-2"
+                                />
+                            </Dropdown>
+                            <Text>{env.name}</Text>
+                            {env.deployed_variant_name ? (
+                                <Tag className="w-fit" color="green">
+                                    {env.deployed_variant_name}
+                                </Tag>
+                            ) : (
+                                <Tag className="w-fit">No deployment</Tag>
+                            )}
+                        </Card>
+                    ))}
+                </div>
+            )}
+
+            {selectedEnvironment && (
+                <DeploymentDrawer
+                    selectedEnvironment={selectedEnvironment}
+                    open={!!queryEnv}
+                    onClose={() => setQueryEnv("")}
+                    variants={variants}
+                />
+            )}
+
+            {changeVariantEnv && (
+                <ChangeVariantModal
+                    open={openChangeVariantModal}
+                    onCancel={() => setOpenChangeVariantModal(false)}
+                    variants={variants}
+                    selectedEnvironment={changeVariantEnv}
+                />
+            )}
+        </div>
+    )
+}
+
+export default DeploymentOverview
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 09f76ee63..7e8c09052 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -1,6 +1,7 @@
 import DeleteAppModal from "@/components/AppSelector/modals/DeleteAppModal"
 import AbTestingEvalOverview from "@/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview"
 import AutomaticEvalOverview from "@/components/pages/overview/automaticEvaluation/AutomaticEvalOverview"
+import DeploymentOverview from "@/components/pages/overview/deployments/DeploymentOverview"
 import SingleModelEvalOverview from "@/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview"
 import VariantsOverview from "@/components/pages/overview/variants/VariantsOverview"
 import {useAppsData} from "@/contexts/app.context"
@@ -111,6 +112,8 @@ export default function Overview() {
 
                 <ObservabilityOverview variants={variants} />
 
+                <DeploymentOverview variants={variants} />
+
                 {ENABLE_UNFINISHED_FEATURES && (
                     <VariantsOverview variantList={variants} isVariantLoading={isVariantLoading} />
                 )}

From 306c43385afceda2bb1975b546a7f4964ff4091a Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 14 Aug 2024 23:47:51 +0100
Subject: [PATCH 059/117] fix(frontend): added deployment section and publish
 variant func

---
 .../deployments/ChangeVariantModal.tsx        | 117 +++++++++++-------
 .../overview/deployments/DeploymentDrawer.tsx |  17 ++-
 .../overview/deployments/DeploymentModal.tsx  |  99 +++++++++++++++
 .../deployments/DeploymentOverview.tsx        |  45 ++++---
 4 files changed, 212 insertions(+), 66 deletions(-)
 create mode 100644 agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx

diff --git a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
index 9ab04d82c..008feb995 100644
--- a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
@@ -2,14 +2,17 @@ import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {CaretRight} from "@phosphor-icons/react"
 import {Input, Modal, Table, Tag, Typography} from "antd"
 import Link from "next/link"
-import React, {useMemo, useState} from "react"
+import React, {SetStateAction, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
+import DeploymentModal from "./DeploymentModal"
 
 const {Search} = Input
 
 type ChangeVariantModalProps = {
     variants: Variant[]
     selectedEnvironment: Environment
+    setOpenChangeVariantModal: (value: SetStateAction<boolean>) => void
+    loadEnvironments: () => Promise<void>
 } & React.ComponentProps<typeof Modal>
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
@@ -30,9 +33,17 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
 }))
 
-const ChangeVariantModal = ({variants, selectedEnvironment, ...props}: ChangeVariantModalProps) => {
+const ChangeVariantModal = ({
+    variants,
+    selectedEnvironment,
+    setOpenChangeVariantModal,
+    loadEnvironments,
+    ...props
+}: ChangeVariantModalProps) => {
     const classes = useStyles()
     const [searchTerm, setSearchTerm] = useState<string>("")
+    const [isDeploymentModalOpen, setIsDeploymentModalOpen] = useState(false)
+    const [selectedVariant, setSelectedVariant] = useState<Variant>()
 
     const filtered = useMemo(() => {
         if (!searchTerm) return variants
@@ -42,56 +53,72 @@ const ChangeVariantModal = ({variants, selectedEnvironment, ...props}: ChangeVar
     }, [searchTerm, variants])
 
     return (
-        <Modal width={520} centered destroyOnClose footer={null} {...props}>
-            <div>
-                <Typography.Text className={classes.title}>
-                    Deploy to {selectedEnvironment.name}
-                </Typography.Text>
+        <>
+            <Modal width={520} centered destroyOnClose footer={null} {...props}>
+                <div>
+                    <Typography.Text className={classes.title}>
+                        Deploy to {selectedEnvironment.name}
+                    </Typography.Text>
 
-                <div className="flex flex-col gap-4 mt-2">
-                    <Typography.Text>Choose a variant for deployment</Typography.Text>
+                    <div className="flex flex-col gap-4 mt-2">
+                        <Typography.Text>Choose a variant for deployment</Typography.Text>
 
-                    <Search
-                        value={searchTerm}
-                        onChange={(e) => setSearchTerm(e.target.value)}
-                        placeholder="Search"
-                        allowClear
-                    />
+                        <Search
+                            value={searchTerm}
+                            onChange={(e) => setSearchTerm(e.target.value)}
+                            placeholder="Search"
+                            allowClear
+                        />
 
-                    <Table
-                        bordered
-                        pagination={false}
-                        dataSource={filtered}
-                        columns={[
-                            {
-                                title: "Variants",
-                                dataIndex: "variantName",
-                                key: "variantName",
-                                render: (_, record) => {
-                                    return (
-                                        <div className="flex items-center justify-between">
-                                            <div>{record.variantName}</div>
+                        <Table
+                            bordered
+                            pagination={false}
+                            dataSource={filtered}
+                            columns={[
+                                {
+                                    title: "Variants",
+                                    dataIndex: "variantName",
+                                    key: "variantName",
+                                    render: (_, record) => {
+                                        return (
+                                            <div className="flex items-center justify-between">
+                                                <div>{record.variantName}</div>
 
-                                            <div className="flex items-center">
-                                                <Tag>{record.variantId}</Tag>
-                                                <CaretRight />
+                                                <div className="flex items-center">
+                                                    <Tag>{record.variantId}</Tag>
+                                                    <CaretRight />
+                                                </div>
                                             </div>
-                                        </div>
-                                    )
+                                        )
+                                    },
                                 },
-                            },
-                        ]}
-                        onRow={(record) => ({
-                            onClick: () => {},
-                            style: {cursor: "pointer"},
-                        })}
-                        className={classes.table}
-                        scroll={{y: 300}}
-                        style={{height: 330}}
-                    />
+                            ]}
+                            onRow={(record) => ({
+                                onClick: () => {
+                                    setIsDeploymentModalOpen(true)
+                                    setOpenChangeVariantModal(false)
+                                    setSelectedVariant(record)
+                                },
+                                style: {cursor: "pointer"},
+                            })}
+                            className={classes.table}
+                            scroll={{y: 300}}
+                            style={{height: 330}}
+                        />
+                    </div>
                 </div>
-            </div>
-        </Modal>
+            </Modal>
+            {selectedVariant && (
+                <DeploymentModal
+                    selectedEnvironment={selectedEnvironment}
+                    open={isDeploymentModalOpen}
+                    onCancel={() => setIsDeploymentModalOpen(false)}
+                    selectedVariant={selectedVariant}
+                    loadEnvironments={loadEnvironments}
+                    setIsDeploymentModalOpen={setIsDeploymentModalOpen}
+                />
+            )}
+        </>
     )
 }
 
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
index 2a82ef718..b518f9444 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -12,7 +12,7 @@ import {
     Swap,
 } from "@phosphor-icons/react"
 import {Button, Drawer, DrawerProps, Dropdown, Space, Tabs, Tag, Tooltip, Typography} from "antd"
-import React, {useEffect, useState} from "react"
+import React, {Dispatch, SetStateAction, useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 import fetchConfigcURLCode from "@/code_snippets/endpoints/fetch_config/curl"
 import fetchConfigpythonCode from "@/code_snippets/endpoints/fetch_config/python"
@@ -34,6 +34,9 @@ const DeploymentHistoryModal: any = dynamicComponent(
 interface DeploymentDrawerProps {
     selectedEnvironment: Environment
     variants: Variant[]
+    loadEnvironments: () => Promise<void>
+    setQueryEnv: (val: string) => void
+    setOpenChangeVariantModal: Dispatch<SetStateAction<boolean>>
 }
 
 interface LanguageCodeBlockProps {
@@ -117,8 +120,10 @@ const LanguageCodeBlock = ({
 
 const DeploymentDrawer = ({
     variants,
-
     selectedEnvironment,
+    loadEnvironments,
+    setQueryEnv,
+    setOpenChangeVariantModal,
     ...props
 }: DeploymentDrawerProps & DrawerProps) => {
     const classes = useStyles()
@@ -215,11 +220,19 @@ const DeploymentDrawer = ({
                                                 key: "change_variant",
                                                 label: "Change Variant",
                                                 icon: <Swap size={16} />,
+                                                onClick: () => {
+                                                    setOpenChangeVariantModal(true)
+                                                    setQueryEnv("")
+                                                },
                                             },
                                             {
                                                 key: "open_playground",
                                                 label: "Open in playground",
                                                 icon: <Rocket size={16} />,
+                                                onClick: () =>
+                                                    router.push(
+                                                        `/apps/${appId}/playground?variant=${selectedEnvironment.deployed_variant_name}`,
+                                                    ),
                                             },
                                         ],
                                     }}
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx
new file mode 100644
index 000000000..e91d9e4a9
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx
@@ -0,0 +1,99 @@
+import {Environment, JSSTheme, Variant} from "@/lib/Types"
+import {createPublishVariant} from "@/services/deployment/api"
+import {Rocket} from "@phosphor-icons/react"
+import {message, Modal, Typography} from "antd"
+import React, {useState} from "react"
+import {createUseStyles} from "react-jss"
+
+type DeploymentModalProps = {
+    selectedEnvironment: Environment
+    selectedVariant: Variant
+    loadEnvironments: () => Promise<void>
+    setIsDeploymentModalOpen: (value: React.SetStateAction<boolean>) => void
+} & React.ComponentProps<typeof Modal>
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    container: {
+        "& .ant-modal-footer": {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+        },
+    },
+    wrapper: {
+        "& h1": {
+            fontSize: theme.fontSizeLG,
+            fontWeight: theme.fontWeightStrong,
+            lineHeight: theme.lineHeightLG,
+            marginBottom: 8,
+        },
+        "& span": {
+            color: theme.colorPrimary,
+            fontSize: theme.fontSizeLG,
+            lineHeight: theme.lineHeightLG,
+            fontWeight: 500,
+        },
+    },
+}))
+
+const DeploymentModal = ({
+    selectedEnvironment,
+    selectedVariant,
+    loadEnvironments,
+    setIsDeploymentModalOpen,
+    ...props
+}: DeploymentModalProps) => {
+    const classes = useStyles()
+    const [isPublishVariantLoading, setIsPublishVariantLoading] = useState(false)
+
+    const publishVariant = async () => {
+        try {
+            setIsPublishVariantLoading(true)
+            await createPublishVariant(selectedVariant.variantId, selectedEnvironment.name)
+            await loadEnvironments()
+            message.success(
+                `Published ${selectedVariant.variantName} to ${selectedEnvironment.name}`,
+            )
+        } catch (error) {
+            console.error(error)
+        } finally {
+            setIsPublishVariantLoading(false)
+            setIsDeploymentModalOpen(false)
+        }
+    }
+
+    return (
+        <Modal
+            className={classes.container}
+            okText={
+                <div className="flex gap-2 items-center">
+                    <Rocket size={16} />
+                    Deploy
+                </div>
+            }
+            onOk={publishVariant}
+            okButtonProps={{loading: isPublishVariantLoading}}
+            centered
+            {...props}
+        >
+            <div className={classes.wrapper}>
+                <Typography.Title>Confirm Deployment</Typography.Title>
+
+                <div className="flex flex-col gap-4">
+                    <div>
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione molestiae
+                        quas, vel minus corporis dolores velit quos tempora est dolorem animi
+                        obcaecati dolor, quibusdam illum earum assumenda quasi aspernatur.
+                        Voluptatibus.
+                    </div>
+                    <div className="flex flex-col">
+                        You are about to deploy {selectedEnvironment.name} environment:
+                        <span>Revision v{selectedEnvironment.revision || 0}</span>
+                    </div>
+                </div>
+            </div>
+        </Modal>
+    )
+}
+
+export default DeploymentModal
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
index f0eb3731d..7f2aff7cc 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -3,7 +3,7 @@ import {fetchEnvironments} from "@/services/deployment/api"
 import {MoreOutlined} from "@ant-design/icons"
 import {Button, Card, Dropdown, Skeleton, Tag, Typography} from "antd"
 import {useRouter} from "next/router"
-import {useEffect, useState} from "react"
+import {useCallback, useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 import DeploymentDrawer from "./DeploymentDrawer"
 import {useQueryParam} from "@/hooks/useQuery"
@@ -54,25 +54,23 @@ const DeploymentOverview = ({variants}: DeploymentOverviewProps) => {
     const [selectedEnvironment, setSelectedEnvironment] = useState<Environment>()
     const [isDeploymentLoading, setIsDeploymentLoading] = useState(true)
     const [openChangeVariantModal, setOpenChangeVariantModal] = useState(false)
-    const [changeVariantEnv, setChangeVariantEnv] = useState<Environment>()
 
-    useEffect(() => {
-        if (!appId) return
-
-        const loadEnvironments = async () => {
-            try {
-                setIsDeploymentLoading(true)
-                const response = await fetchEnvironments(appId)
-                setEnvironments(response)
-            } catch (error) {
-                console.error(error)
-            } finally {
-                setIsDeploymentLoading(false)
-            }
+    const loadEnvironments = useCallback(async () => {
+        try {
+            setIsDeploymentLoading(true)
+            const response = await fetchEnvironments(appId)
+            setEnvironments(response)
+        } catch (error) {
+            console.error(error)
+        } finally {
+            setIsDeploymentLoading(false)
         }
+    }, [appId])
 
+    useEffect(() => {
+        if (!appId) return
         loadEnvironments()
-    }, [appId])
+    }, [appId, loadEnvironments])
 
     return (
         <div className={classes.container}>
@@ -106,7 +104,7 @@ const DeploymentOverview = ({variants}: DeploymentOverviewProps) => {
                                             label: "Change Variant",
                                             icon: <Swap size={16} />,
                                             onClick: () => {
-                                                setChangeVariantEnv(env)
+                                                setSelectedEnvironment(env)
                                                 setOpenChangeVariantModal(true)
                                             },
                                         },
@@ -115,6 +113,10 @@ const DeploymentOverview = ({variants}: DeploymentOverviewProps) => {
                                             key: "open_playground",
                                             label: "Open in playground",
                                             icon: <Rocket size={16} />,
+                                            onClick: () =>
+                                                router.push(
+                                                    `/apps/${appId}/playground?variant=${env.deployed_variant_name}`,
+                                                ),
                                         },
                                     ],
                                 }}
@@ -145,15 +147,20 @@ const DeploymentOverview = ({variants}: DeploymentOverviewProps) => {
                     open={!!queryEnv}
                     onClose={() => setQueryEnv("")}
                     variants={variants}
+                    loadEnvironments={loadEnvironments}
+                    setQueryEnv={setQueryEnv}
+                    setOpenChangeVariantModal={setOpenChangeVariantModal}
                 />
             )}
 
-            {changeVariantEnv && (
+            {selectedEnvironment && (
                 <ChangeVariantModal
                     open={openChangeVariantModal}
+                    setOpenChangeVariantModal={setOpenChangeVariantModal}
                     onCancel={() => setOpenChangeVariantModal(false)}
                     variants={variants}
-                    selectedEnvironment={changeVariantEnv}
+                    selectedEnvironment={selectedEnvironment}
+                    loadEnvironments={loadEnvironments}
                 />
             )}
         </div>

From e8998c55af9743a4a6f5b126e93716d2e714fd3f Mon Sep 17 00:00:00 2001
From: Abram <israelvictory87@gmail.com>
Date: Thu, 15 Aug 2024 11:25:43 +0100
Subject: [PATCH 060/117] feat (backend): add ModifiedBy API model and update
 app_variant_db_to_output response accordingly

---
 agenta-backend/agenta_backend/models/api/api_models.py | 9 +++++++++
 agenta-backend/agenta_backend/models/converters.py     | 8 ++++++++
 2 files changed, 17 insertions(+)

diff --git a/agenta-backend/agenta_backend/models/api/api_models.py b/agenta-backend/agenta_backend/models/api/api_models.py
index 540b754db..4ae1c5838 100644
--- a/agenta-backend/agenta_backend/models/api/api_models.py
+++ b/agenta-backend/agenta_backend/models/api/api_models.py
@@ -87,6 +87,13 @@ class AppVariantFromImagePayload(BaseModel):
     variant_name: str
 
 
+class ModifiedBy(BaseModel):
+    id: str
+    uid: str
+    username: str
+    profile_picture: Optional[str] = None
+
+
 class AppVariantResponse(BaseModel):
     app_id: str
     app_name: str
@@ -99,6 +106,8 @@ class AppVariantResponse(BaseModel):
     config_name: str
     uri: Optional[str]
     revision: int
+    date_modified: str
+    modified_by: ModifiedBy
 
 
 class AppVariantRevision(BaseModel):
diff --git a/agenta-backend/agenta_backend/models/converters.py b/agenta-backend/agenta_backend/models/converters.py
index 72a0d174d..5d3393e55 100644
--- a/agenta-backend/agenta_backend/models/converters.py
+++ b/agenta-backend/agenta_backend/models/converters.py
@@ -78,6 +78,7 @@
 from agenta_backend.models.api.api_models import (
     App,
     Template,
+    ModifiedBy,
     BaseOutput,
     TestSetOutput,
     TemplateImageInfo,
@@ -331,6 +332,13 @@ async def app_variant_db_to_output(app_variant_db: AppVariantDB) -> AppVariantRe
         config_name=app_variant_db.config_name,  # type: ignore
         uri=uri,
         revision=app_variant_db.revision,  # type: ignore
+        date_modified=str(app_variant_db.updated_at),
+        modified_by=ModifiedBy(
+            id=str(app_variant_db.modified_by.id),
+            uid=app_variant_db.modified_by.uid,
+            username=app_variant_db.modified_by.username,
+            profile_picture=None,
+        ),
     )
 
     if isCloudEE():

From c530aa5773b52239d3d7e70ef909e3a9792094da Mon Sep 17 00:00:00 2001
From: Abram <israelvictory87@gmail.com>
Date: Thu, 15 Aug 2024 11:29:56 +0100
Subject: [PATCH 061/117] perf (backend): optimize 3 DB functions using
 joinedload to reduce query count

---
 .../agenta_backend/services/db_manager.py         | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/agenta-backend/agenta_backend/services/db_manager.py b/agenta-backend/agenta_backend/services/db_manager.py
index 08ac7b00f..4906eaae3 100644
--- a/agenta-backend/agenta_backend/services/db_manager.py
+++ b/agenta-backend/agenta_backend/services/db_manager.py
@@ -209,7 +209,11 @@ async def fetch_app_variant_by_id(
     assert app_variant_id is not None, "app_variant_id cannot be None"
     async with db_engine.get_session() as session:
         base_query = select(AppVariantDB).options(
-            joinedload(AppVariantDB.base), joinedload(AppVariantDB.app)
+            joinedload(AppVariantDB.base),
+            joinedload(AppVariantDB.app),
+            joinedload(AppVariantDB.modified_by.of_type(UserDB)).load_only(
+                UserDB.id, UserDB.uid, UserDB.username
+            ),
         )
         if isCloudEE():
             query = base_query.options(
@@ -470,6 +474,7 @@ async def create_new_app_variant(
             "image",
             "user",
             "base",
+            "modified_by",
         ]
         if isCloudEE():
             attributes_to_refresh.extend(["organization", "workspace"])
@@ -1124,7 +1129,13 @@ async def list_app_variants(app_id: str):
     async with db_engine.get_session() as session:
         result = await session.execute(
             select(AppVariantDB)
-            .options(joinedload(AppVariantDB.app), joinedload(AppVariantDB.base))
+            .options(
+                joinedload(AppVariantDB.app),
+                joinedload(AppVariantDB.base),
+                joinedload(AppVariantDB.modified_by.of_type(UserDB)).load_only(
+                    UserDB.id, UserDB.uid, UserDB.username
+                ),
+            )
             .filter_by(app_id=uuid.UUID(app_uuid))
         )
         app_variants = result.scalars().all()

From adfd4878774c28a467dfe2467a591b9b937e42c8 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 15 Aug 2024 14:00:11 +0100
Subject: [PATCH 062/117] fix(frontend): added filterVariantParameters helper

---
 agenta-web/src/lib/helpers/utils.ts | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/agenta-web/src/lib/helpers/utils.ts b/agenta-web/src/lib/helpers/utils.ts
index dc87df9d3..0dd5b7005 100644
--- a/agenta-web/src/lib/helpers/utils.ts
+++ b/agenta-web/src/lib/helpers/utils.ts
@@ -16,8 +16,6 @@ if (typeof window !== "undefined") {
     }
 }
 
-export const ENABLE_UNFINISHED_FEATURES = false
-
 export const renameVariables = (name: string) => {
     if (name === "inputs") {
         return "Prompt Variables"
@@ -346,3 +344,24 @@ export const getStringOrJson = (value: any) => {
           ? value?.data
           : JSON.stringify(value, null, 2)
 }
+
+export const filterVariantParameters = ({
+    record,
+    key,
+    include = true,
+}: {
+    record: Record<string, any>
+    key: string
+    include?: boolean
+}) => {
+    return Object.keys(record).reduce(
+        (acc, curr) => {
+            const condition = curr.includes(key)
+            if ((record.hasOwnProperty(curr) && include && condition) || (!include && !condition)) {
+                acc[curr] = record[curr]
+            }
+            return acc
+        },
+        {} as Record<string, any>,
+    )
+}

From 364f441e3f2218daf4706bc47a347d0604cbbb69 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 15 Aug 2024 14:08:47 +0100
Subject: [PATCH 063/117] fix(frontend): on row click triggers primary action

---
 .../AbTestingEvalOverview.tsx                 |  43 ++++--
 .../AutomaticEvalOverview.tsx                 |  54 +++++--
 .../deployments/DeploymentOverview.tsx        |  22 ++-
 .../SingleModelEvalOverview.tsx               |  37 +++--
 .../pages/overview/variants/VariantDrawer.tsx |  10 ++
 .../overview/variants/VariantsOverview.tsx    | 133 ++++++++++++------
 .../pages/apps/[app_id]/overview/index.tsx    |   6 +-
 7 files changed, 217 insertions(+), 88 deletions(-)
 create mode 100644 agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx

diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
index 772cbe0c3..6d65be54a 100644
--- a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -309,39 +309,47 @@ const AbTestingEvalOverview = () => {
                                         key: "details",
                                         label: "Open details",
                                         icon: <Note size={16} />,
-                                        onClick: () =>
+                                        onClick: (e) => {
+                                            e.domEvent.stopPropagation()
                                             router.push(
-                                                `/apps/${appId}/annotations/single_model_test/${record.key}`,
-                                            ),
+                                                `/apps/${appId}/annotations/human_a_b_testing/${record.key}`,
+                                            )
+                                        },
                                     },
                                     {
                                         key: "variant1",
                                         label: "View variant 1",
                                         icon: <Rocket size={16} />,
-                                        onClick: () =>
+                                        onClick: (e) => {
+                                            e.domEvent.stopPropagation()
                                             handleNavigation(
                                                 record.variantNames[0],
                                                 record.revisions[0],
-                                            ),
+                                            )
+                                        },
                                     },
                                     {
                                         key: "variant2",
                                         label: "View variant 2",
                                         icon: <Rocket size={16} />,
-                                        onClick: () =>
+                                        onClick: (e) => {
+                                            e.domEvent.stopPropagation()
                                             handleNavigation(
                                                 record.variantNames[1],
                                                 record.revisions[1],
-                                            ),
+                                            )
+                                        },
                                     },
                                     {
                                         key: "view_testset",
                                         label: "View test set",
                                         icon: <Database size={16} />,
-                                        onClick: () =>
+                                        onClick: (e) => {
+                                            e.domEvent.stopPropagation()
                                             router.push(
                                                 `/apps/${appId}/testsets/${record.testset._id}`,
-                                            ),
+                                            )
+                                        },
                                     },
                                     {type: "divider"},
                                     {
@@ -349,7 +357,8 @@ const AbTestingEvalOverview = () => {
                                         label: "Delete",
                                         icon: <Trash size={16} />,
                                         danger: true,
-                                        onClick: () => {
+                                        onClick: (e) => {
+                                            e.domEvent.stopPropagation()
                                             setSelectedEvalRecord(record)
                                             setIsDeleteEvalModalOpen(true)
                                         },
@@ -357,7 +366,12 @@ const AbTestingEvalOverview = () => {
                                 ],
                             }}
                         >
-                            <Button type="text" icon={<MoreOutlined />} size="small" />
+                            <Button
+                                onClick={(e) => e.stopPropagation()}
+                                type="text"
+                                icon={<MoreOutlined />}
+                                size="small"
+                            />
                         </Dropdown>
                     )
                 },
@@ -392,6 +406,13 @@ const AbTestingEvalOverview = () => {
                     scroll={{x: true}}
                     bordered
                     pagination={false}
+                    onRow={(record) => ({
+                        style: {cursor: "pointer"},
+                        onClick: () =>
+                            router.push(
+                                `/apps/${appId}/annotations/human_a_b_testing/${record.key}`,
+                            ),
+                    })}
                 />
             </Spin>
 
diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index afa29dc3d..0113e06d9 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -261,7 +261,11 @@ const AutomaticEvalOverview = () => {
                                     }
                                     title={result.result.error?.message}
                                 >
-                                    <Button icon={<InfoCircleOutlined />} type="link">
+                                    <Button
+                                        onClick={(e) => e.stopPropagation()}
+                                        icon={<InfoCircleOutlined />}
+                                        type="link"
+                                    >
                                         Read more
                                     </Button>
                                 </Popover>
@@ -272,7 +276,7 @@ const AutomaticEvalOverview = () => {
                                     trigger={"click"}
                                     arrow={false}
                                     content={
-                                        <div className="w-[256px] flex flex-col gap-1">
+                                        <div className="w-[256px] flex flex-col gap-1" onClick={(e) => e.stopPropagation()}>
                                             <div className="font-[500]">
                                                 {result.evaluator_config.name}
                                             </div>
@@ -280,13 +284,17 @@ const AutomaticEvalOverview = () => {
                                         </div>
                                     }
                                     title={
-                                        <div className="flex items-center justify-between">
+                                        <div
+                                            className="flex items-center justify-between"
+                                            onClick={(e) => e.stopPropagation()}
+                                        >
                                             <Tag color={evaluator?.color}>{evaluator?.name}</Tag>
 
                                             <Button
                                                 icon={<EditOutlined />}
                                                 size="small"
-                                                onClick={() => {
+                                                onClick={(e) => {
+                                                    e.stopPropagation()
                                                     setSelectedConfigEdit(result.evaluator_config)
                                                     setIsEditEvalConfigOpen(true)
                                                 }}
@@ -294,7 +302,10 @@ const AutomaticEvalOverview = () => {
                                         </div>
                                     }
                                 >
-                                    <div className={classes.resultTag}>
+                                    <div
+                                        onClick={(e) => e.stopPropagation()}
+                                        className={classes.resultTag}
+                                    >
                                         <div>{result.evaluator_config.name}</div>
                                         <div>{getTypedValue(result.result)}</div>
                                     </div>
@@ -355,27 +366,33 @@ const AutomaticEvalOverview = () => {
                                     key: "details",
                                     label: "Open details",
                                     icon: <Note size={16} />,
-                                    onClick: () =>
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
                                         router.push(
                                             `/apps/${appId}/evaluations/results/${record.id}`,
-                                        ),
+                                        )
+                                    },
                                 },
                                 {
                                     key: "variant",
                                     label: "View variant",
                                     icon: <Rocket size={16} />,
-                                    onClick: () =>
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
                                         handleNavigation(
                                             record.variants[0].variantName,
                                             record.revisions[0],
-                                        ),
+                                        )
+                                    },
                                 },
                                 {
                                     key: "view_testset",
                                     label: "View test set",
                                     icon: <Database size={16} />,
-                                    onClick: () =>
-                                        router.push(`/apps/${appId}/testsets/${record.testset.id}`),
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
+                                        router.push(`/apps/${appId}/testsets/${record.testset.id}`)
+                                    },
                                 },
                                 {type: "divider"},
                                 {
@@ -383,7 +400,8 @@ const AutomaticEvalOverview = () => {
                                     label: "Delete",
                                     icon: <Trash size={16} />,
                                     danger: true,
-                                    onClick: () => {
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
                                         setSelectedEvalRecord(record)
                                         setIsDeleteEvalModalOpen(true)
                                     },
@@ -391,7 +409,12 @@ const AutomaticEvalOverview = () => {
                             ],
                         }}
                     >
-                        <Button type="text" icon={<MoreOutlined />} size="small" />
+                        <Button
+                            onClick={(e) => e.stopPropagation()}
+                            type="text"
+                            icon={<MoreOutlined />}
+                            size="small"
+                        />
                     </Dropdown>
                 )
             },
@@ -446,6 +469,11 @@ const AutomaticEvalOverview = () => {
                     scroll={{x: true}}
                     bordered
                     pagination={false}
+                    onRow={(record) => ({
+                        style: {cursor: "pointer"},
+                        onClick: () =>
+                            router.push(`/apps/${appId}/evaluations/results/${record.id}`),
+                    })}
                 />
             </Spin>
 
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
index 7f2aff7cc..830dc9596 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -85,7 +85,14 @@ const DeploymentOverview = ({variants}: DeploymentOverviewProps) => {
             ) : (
                 <div className={classes.cardContainer}>
                     {environments.map((env, index) => (
-                        <Card key={index}>
+                        <Card
+                            key={index}
+                            onClick={() => {
+                                setQueryEnv(env.name)
+                                setSelectedEnvironment(env)
+                            }}
+                            className="cursor-pointer"
+                        >
                             <Dropdown
                                 trigger={["click"]}
                                 menu={{
@@ -94,7 +101,8 @@ const DeploymentOverview = ({variants}: DeploymentOverviewProps) => {
                                             key: "use_api",
                                             label: "Use API",
                                             icon: <Code size={16} />,
-                                            onClick: () => {
+                                            onClick: (e) => {
+                                                e.domEvent.stopPropagation()
                                                 setQueryEnv(env.name)
                                                 setSelectedEnvironment(env)
                                             },
@@ -103,7 +111,8 @@ const DeploymentOverview = ({variants}: DeploymentOverviewProps) => {
                                             key: "change_variant",
                                             label: "Change Variant",
                                             icon: <Swap size={16} />,
-                                            onClick: () => {
+                                            onClick: (e) => {
+                                                e.domEvent.stopPropagation()
                                                 setSelectedEnvironment(env)
                                                 setOpenChangeVariantModal(true)
                                             },
@@ -113,16 +122,19 @@ const DeploymentOverview = ({variants}: DeploymentOverviewProps) => {
                                             key: "open_playground",
                                             label: "Open in playground",
                                             icon: <Rocket size={16} />,
-                                            onClick: () =>
+                                            onClick: (e) => {
+                                                e.domEvent.stopPropagation()
                                                 router.push(
                                                     `/apps/${appId}/playground?variant=${env.deployed_variant_name}`,
-                                                ),
+                                                )
+                                            },
                                         },
                                     ],
                                 }}
                             >
                                 <Button
                                     type="text"
+                                    onClick={(e) => e.stopPropagation()}
                                     icon={<MoreOutlined />}
                                     size="small"
                                     className="absolute right-2"
diff --git a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
index b21af4958..02d496128 100644
--- a/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/singleModelEvaluation/SingleModelEvalOverview.tsx
@@ -217,29 +217,33 @@ const SingleModelEvalOverview = () => {
                                     key: "details",
                                     label: "Open details",
                                     icon: <Note size={16} />,
-                                    onClick: () =>
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
                                         router.push(
                                             `/apps/${appId}/annotations/single_model_test/${record.key}`,
-                                        ),
+                                        )
+                                    },
                                 },
                                 {
                                     key: "variant",
                                     label: "View variant",
                                     icon: <Rocket size={16} />,
-                                    onClick: () =>
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
                                         handleNavigation(
                                             record.variants[0].variantName,
                                             record.revisions[0],
-                                        ),
+                                        )
+                                    },
                                 },
                                 {
                                     key: "view_testset",
                                     label: "View test set",
                                     icon: <Database size={16} />,
-                                    onClick: () =>
-                                        router.push(
-                                            `/apps/${appId}/testsets/${record.testset._id}`,
-                                        ),
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
+                                        router.push(`/apps/${appId}/testsets/${record.testset._id}`)
+                                    },
                                 },
                                 {type: "divider"},
                                 {
@@ -247,7 +251,8 @@ const SingleModelEvalOverview = () => {
                                     label: "Delete",
                                     icon: <Trash size={16} />,
                                     danger: true,
-                                    onClick: () => {
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
                                         setSelectedEvalRecord(record)
                                         setIsDeleteEvalModalOpen(true)
                                     },
@@ -255,7 +260,12 @@ const SingleModelEvalOverview = () => {
                             ],
                         }}
                     >
-                        <Button type="text" icon={<MoreOutlined />} size="small" />
+                        <Button
+                            onClick={(e) => e.stopPropagation()}
+                            type="text"
+                            icon={<MoreOutlined />}
+                            size="small"
+                        />
                     </Dropdown>
                 )
             },
@@ -290,6 +300,13 @@ const SingleModelEvalOverview = () => {
                     scroll={{x: true}}
                     bordered
                     pagination={false}
+                    onRow={(record) => ({
+                        style: {cursor: "pointer"},
+                        onClick: () =>
+                            router.push(
+                                `/apps/${appId}/annotations/single_model_test/${record.key}`,
+                            ),
+                    })}
                 />
             </Spin>
 
diff --git a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
new file mode 100644
index 000000000..37d617b6b
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
@@ -0,0 +1,10 @@
+import {Drawer} from "antd"
+import React from "react"
+
+type VariantDrawerProps = {} & React.ComponentProps<typeof Drawer>
+
+const VariantDrawer = ({...props}: VariantDrawerProps) => {
+    return <Drawer width={560} destroyOnClose {...props}></Drawer>
+}
+
+export default VariantDrawer
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index b1d5531ce..13edce7c4 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -8,6 +8,9 @@ import Link from "next/link"
 import {useRouter} from "next/router"
 import React, {useState} from "react"
 import {createUseStyles} from "react-jss"
+import VariantDrawer from "./VariantDrawer"
+import {useQueryParam} from "@/hooks/useQuery"
+import {filterVariantParameters} from "@/lib/helpers/utils"
 
 const {Title} = Typography
 
@@ -44,6 +47,7 @@ const VariantsOverview = ({variantList, isVariantLoading}: VariantsOverviewProps
     const classes = useStyles()
     const router = useRouter()
     const appId = router.query.app_id as string
+    const [queryVariant, setQueryVariant] = useQueryParam("variant")
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
 
     const rowSelection = {
@@ -89,17 +93,26 @@ const VariantsOverview = ({variantList, isVariantLoading}: VariantsOverviewProps
                 style: {minWidth: 160},
             }),
         },
-        {
-            title: "Tags",
-            onHeaderCell: () => ({
-                style: {minWidth: 160},
-            }),
-        },
+        // {
+        //     title: "Tags",
+        //     onHeaderCell: () => ({
+        //         style: {minWidth: 160},
+        //     }),
+        // },
         {
             title: "Model",
+            dataIndex: "parameters",
+            key: "model",
             onHeaderCell: () => ({
                 style: {minWidth: 160},
             }),
+            render: (_, record) => {
+                return record.parameters && Object.keys(record.parameters).length
+                    ? Object.values(
+                          filterVariantParameters({record: record.parameters, key: "model"}),
+                      ).map((value, index) => <div key={index}>{value}</div>)
+                    : "-"
+            },
         },
         {
             title: "Created on",
@@ -124,36 +137,57 @@ const VariantsOverview = ({variantList, isVariantLoading}: VariantsOverviewProps
                                     key: "details",
                                     label: "Open details",
                                     icon: <Note size={16} />,
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
+                                        setQueryVariant(record.variantId)
+                                    },
                                 },
                                 {
                                     key: "open_variant",
                                     label: "Open in playground",
                                     icon: <Rocket size={16} />,
-                                    onClick: () =>
-                                        handleNavigation(record.variantName, record.revision),
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
+                                        handleNavigation(record.variantName, record.revision)
+                                    },
                                 },
                                 {
                                     key: "deploy",
                                     label: "Deploy",
                                     icon: <CloudArrowUp size={16} />,
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
+                                    },
                                 },
                                 {type: "divider"},
-                                {
-                                    key: "rename",
-                                    label: "Rename",
-                                    icon: <PencilLine size={16} />,
-                                },
+                                // {
+                                //     key: "rename",
+                                //     label: "Rename",
+                                //     icon: <PencilLine size={16} />,
+                                //     onClick: (e) => {
+                                //         e.domEvent.stopPropagation()
+
+                                //     },
+                                // },
                                 {
                                     key: "delete_eval",
                                     label: "Delete",
                                     icon: <Trash size={16} />,
                                     danger: true,
-                                    onClick: () => handleDeleteEvaluation(record),
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
+                                        handleDeleteEvaluation(record)
+                                    },
                                 },
                             ],
                         }}
                     >
-                        <Button type="text" icon={<MoreOutlined />} size="small" />
+                        <Button
+                            onClick={(e) => e.stopPropagation()}
+                            type="text"
+                            icon={<MoreOutlined />}
+                            size="small"
+                        />
                     </Dropdown>
                 )
             },
@@ -161,38 +195,47 @@ const VariantsOverview = ({variantList, isVariantLoading}: VariantsOverviewProps
     ]
 
     return (
-        <div className={classes.container}>
-            <div className="flex items-center justify-between">
-                <Title>Variants</Title>
+        <>
+            <div className={classes.container}>
+                <div className="flex items-center justify-between">
+                    <Title>Variants</Title>
 
-                <Space>
-                    <Button size="small" type="link" icon={<SwapOutlined />}>
-                        Compare variants
-                    </Button>
-                    <Link href={`/apps/${appId}/playground`} className={classes.titleLink}>
-                        <Rocket size={14} />
-                        Playground
-                    </Link>
-                </Space>
-            </div>
+                    <Space>
+                        <Button size="small" type="link" icon={<SwapOutlined />}>
+                            Compare variants
+                        </Button>
+                        <Link href={`/apps/${appId}/playground`} className={classes.titleLink}>
+                            <Rocket size={14} />
+                            Playground
+                        </Link>
+                    </Space>
+                </div>
 
-            <Spin spinning={isVariantLoading}>
-                <Table
-                    rowSelection={{
-                        type: "checkbox",
-                        columnWidth: 48,
-                        ...rowSelection,
-                    }}
-                    className="ph-no-capture"
-                    rowKey={"variantId"}
-                    columns={columns}
-                    dataSource={variantList}
-                    scroll={{x: true}}
-                    bordered
-                    pagination={false}
-                />
-            </Spin>
-        </div>
+                <Spin spinning={isVariantLoading}>
+                    <Table
+                        rowSelection={{
+                            type: "checkbox",
+                            columnWidth: 48,
+                            ...rowSelection,
+                        }}
+                        className="ph-no-capture"
+                        rowKey={"variantId"}
+                        columns={columns}
+                        dataSource={variantList}
+                        scroll={{x: true}}
+                        bordered
+                        pagination={false}
+                        onRow={(record) => ({
+                            style: {cursor: "pointer"},
+                            onClick: () => {
+                                setQueryVariant(record.variantId)
+                            },
+                        })}
+                    />
+                </Spin>
+            </div>
+            <VariantDrawer open={!!queryVariant} onClose={() => setQueryVariant("")} />
+        </>
     )
 }
 
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 7e8c09052..28c169b2b 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -7,7 +7,7 @@ import VariantsOverview from "@/components/pages/overview/variants/VariantsOverv
 import {useAppsData} from "@/contexts/app.context"
 import {useAppId} from "@/hooks/useAppId"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
-import {ENABLE_UNFINISHED_FEATURES, renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
+import {renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
 import {JSSTheme, Variant} from "@/lib/Types"
 import {fetchVariants} from "@/services/api"
 import {deleteApp} from "@/services/app-selector/api"
@@ -114,9 +114,7 @@ export default function Overview() {
 
                 <DeploymentOverview variants={variants} />
 
-                {ENABLE_UNFINISHED_FEATURES && (
-                    <VariantsOverview variantList={variants} isVariantLoading={isVariantLoading} />
-                )}
+                <VariantsOverview variantList={variants} isVariantLoading={isVariantLoading} />
 
                 <AutomaticEvalOverview />
 

From dfe26daa00d4c3cd54aca4b156a0016828f75ef4 Mon Sep 17 00:00:00 2001
From: Abram <israelvictory87@gmail.com>
Date: Thu, 15 Aug 2024 14:19:29 +0100
Subject: [PATCH 064/117] perf (backend): optimize db function
 'get_app_variant_instance_by_id' using joinedload to to reduce query count

---
 agenta-backend/agenta_backend/services/db_manager.py | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/agenta-backend/agenta_backend/services/db_manager.py b/agenta-backend/agenta_backend/services/db_manager.py
index 4906eaae3..44067b130 100644
--- a/agenta-backend/agenta_backend/services/db_manager.py
+++ b/agenta-backend/agenta_backend/services/db_manager.py
@@ -1832,7 +1832,13 @@ async def get_app_variant_instance_by_id(variant_id: str) -> AppVariantDB:
     async with db_engine.get_session() as session:
         result = await session.execute(
             select(AppVariantDB)
-            .options(joinedload(AppVariantDB.base), joinedload(AppVariantDB.app))
+            .options(
+                joinedload(AppVariantDB.base),
+                joinedload(AppVariantDB.app),
+                joinedload(AppVariantDB.modified_by.of_type(UserDB)).load_only(
+                    UserDB.id, UserDB.uid, UserDB.username
+                ),
+            )
             .filter_by(id=uuid.UUID(variant_id))
         )
         app_variant_db = result.scalars().first()

From d98ecd1417173ee0648eae1b0da8049f9ef22814 Mon Sep 17 00:00:00 2001
From: Abram <israelvictory87@gmail.com>
Date: Thu, 15 Aug 2024 14:22:26 +0100
Subject: [PATCH 065/117] refactor (cli): extend AppVariantResponse in
 agenta-cli client backend

---
 .../agenta/client/backend/types/app_variant_response.py  | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/agenta-cli/agenta/client/backend/types/app_variant_response.py b/agenta-cli/agenta/client/backend/types/app_variant_response.py
index 9ce97e20c..cc11aa420 100644
--- a/agenta-cli/agenta/client/backend/types/app_variant_response.py
+++ b/agenta-cli/agenta/client/backend/types/app_variant_response.py
@@ -11,6 +11,13 @@
     import pydantic  # type: ignore
 
 
+class ModifiedBy(pydantic.BaseModel):
+    id: str
+    uid: str
+    username: str
+    profile_picture: typing.Optional[str] = None
+
+
 class AppVariantResponse(pydantic.BaseModel):
     app_id: str
     app_name: str
@@ -26,6 +33,8 @@ class AppVariantResponse(pydantic.BaseModel):
     revision: int
     organization_id: typing.Optional[str]
     workspace_id: typing.Optional[str]
+    date_modified: dt.datetime
+    modified_by: ModifiedBy
 
     def json(self, **kwargs: typing.Any) -> str:
         kwargs_with_defaults: typing.Any = {

From bb34e144d378fa963bcd5c819a5618c2f0aa6ec5 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 15 Aug 2024 18:15:34 +0100
Subject: [PATCH 066/117] fix(frontend): updated Variant type

---
 agenta-web/src/lib/Types.ts    | 7 +++++++
 agenta-web/src/services/api.ts | 3 +++
 2 files changed, 10 insertions(+)

diff --git a/agenta-web/src/lib/Types.ts b/agenta-web/src/lib/Types.ts
index 9f3529963..2ea3b693f 100644
--- a/agenta-web/src/lib/Types.ts
+++ b/agenta-web/src/lib/Types.ts
@@ -40,6 +40,13 @@ export interface Variant {
     baseName: string
     configName: string
     revision: number
+    lastModified: string
+    modifiedBy: {
+        id: string
+        uid: string
+        username: string
+        profilePicture: string | null
+    }
 }
 
 // Define the interface for the tabs item in playground page
diff --git a/agenta-web/src/services/api.ts b/agenta-web/src/services/api.ts
index 4256698ee..4cb27ef6c 100644
--- a/agenta-web/src/services/api.ts
+++ b/agenta-web/src/services/api.ts
@@ -1,4 +1,5 @@
 import axios from "@/lib//helpers/axiosConfig"
+import {formatDay} from "@/lib/helpers/dateTimeHelper"
 import {
     detectChatVariantFromOpenAISchema,
     openAISchemaToParameters,
@@ -47,6 +48,8 @@ export async function fetchVariants(
                 baseName: variant.base_name,
                 configName: variant.config_name,
                 revision: variant.revision,
+                lastModified: formatDay(variant.date_modified),
+                modifiedBy: variant.modified_by,
             }
             return v
         })

From b530ff375c6cd62ee451c0a06a17f85b649068c3 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 15 Aug 2024 18:47:39 +0100
Subject: [PATCH 067/117] fix(backend): added date_created to Variant model

---
 agenta-backend/agenta_backend/models/api/api_models.py         | 1 +
 agenta-backend/agenta_backend/models/converters.py             | 1 +
 agenta-cli/agenta/client/backend/types/app_variant_response.py | 1 +
 3 files changed, 3 insertions(+)

diff --git a/agenta-backend/agenta_backend/models/api/api_models.py b/agenta-backend/agenta_backend/models/api/api_models.py
index 4ae1c5838..1dc1d7f43 100644
--- a/agenta-backend/agenta_backend/models/api/api_models.py
+++ b/agenta-backend/agenta_backend/models/api/api_models.py
@@ -107,6 +107,7 @@ class AppVariantResponse(BaseModel):
     uri: Optional[str]
     revision: int
     date_modified: str
+    date_created: str
     modified_by: ModifiedBy
 
 
diff --git a/agenta-backend/agenta_backend/models/converters.py b/agenta-backend/agenta_backend/models/converters.py
index 5d3393e55..8ffab9b86 100644
--- a/agenta-backend/agenta_backend/models/converters.py
+++ b/agenta-backend/agenta_backend/models/converters.py
@@ -333,6 +333,7 @@ async def app_variant_db_to_output(app_variant_db: AppVariantDB) -> AppVariantRe
         uri=uri,
         revision=app_variant_db.revision,  # type: ignore
         date_modified=str(app_variant_db.updated_at),
+        date_created=str(app_variant_db.created_at),
         modified_by=ModifiedBy(
             id=str(app_variant_db.modified_by.id),
             uid=app_variant_db.modified_by.uid,
diff --git a/agenta-cli/agenta/client/backend/types/app_variant_response.py b/agenta-cli/agenta/client/backend/types/app_variant_response.py
index cc11aa420..95a428535 100644
--- a/agenta-cli/agenta/client/backend/types/app_variant_response.py
+++ b/agenta-cli/agenta/client/backend/types/app_variant_response.py
@@ -34,6 +34,7 @@ class AppVariantResponse(pydantic.BaseModel):
     organization_id: typing.Optional[str]
     workspace_id: typing.Optional[str]
     date_modified: dt.datetime
+    date_created: dt.datetime
     modified_by: ModifiedBy
 
     def json(self, **kwargs: typing.Any) -> str:

From 56a7798eac3d0a01a316c546de086eff1c97d95d Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 15 Aug 2024 22:48:31 +0100
Subject: [PATCH 068/117] updated Variant types

---
 agenta-web/src/lib/Types.ts    | 1 +
 agenta-web/src/services/api.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/agenta-web/src/lib/Types.ts b/agenta-web/src/lib/Types.ts
index 2ea3b693f..48bbac14c 100644
--- a/agenta-web/src/lib/Types.ts
+++ b/agenta-web/src/lib/Types.ts
@@ -41,6 +41,7 @@ export interface Variant {
     configName: string
     revision: number
     lastModified: string
+    createdAt: string
     modifiedBy: {
         id: string
         uid: string
diff --git a/agenta-web/src/services/api.ts b/agenta-web/src/services/api.ts
index 4cb27ef6c..437e0c371 100644
--- a/agenta-web/src/services/api.ts
+++ b/agenta-web/src/services/api.ts
@@ -50,6 +50,7 @@ export async function fetchVariants(
                 revision: variant.revision,
                 lastModified: formatDay(variant.date_modified),
                 modifiedBy: variant.modified_by,
+                createdAt: formatDay(variant.date_created),
             }
             return v
         })

From 09be4ad06ba0c81928a5f27c5517709fb1002d94 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 15 Aug 2024 22:50:28 +0100
Subject: [PATCH 069/117] fix(frontend): moved fetch environments to parent
 level

---
 .../deployments/DeploymentOverview.tsx        | 25 ++++++---------
 .../pages/apps/[app_id]/overview/index.tsx    | 32 ++++++++++++++++---
 2 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
index 830dc9596..5ffcac5c4 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -9,12 +9,14 @@ import DeploymentDrawer from "./DeploymentDrawer"
 import {useQueryParam} from "@/hooks/useQuery"
 import {Code, Rocket, Swap} from "@phosphor-icons/react"
 import ChangeVariantModal from "./ChangeVariantModal"
-import {fetchVariants} from "@/services/api"
 
 const {Title, Text} = Typography
 
 interface DeploymentOverviewProps {
     variants: Variant[]
+    isDeploymentLoading: boolean
+    environments: Environment[]
+    loadEnvironments: () => Promise<void>
 }
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
@@ -45,28 +47,19 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
 }))
 
-const DeploymentOverview = ({variants}: DeploymentOverviewProps) => {
+const DeploymentOverview = ({
+    variants,
+    isDeploymentLoading,
+    environments,
+    loadEnvironments,
+}: DeploymentOverviewProps) => {
     const classes = useStyles()
     const router = useRouter()
     const [queryEnv, setQueryEnv] = useQueryParam("environment")
     const appId = router.query.app_id as string
-    const [environments, setEnvironments] = useState<Environment[]>([])
     const [selectedEnvironment, setSelectedEnvironment] = useState<Environment>()
-    const [isDeploymentLoading, setIsDeploymentLoading] = useState(true)
     const [openChangeVariantModal, setOpenChangeVariantModal] = useState(false)
 
-    const loadEnvironments = useCallback(async () => {
-        try {
-            setIsDeploymentLoading(true)
-            const response = await fetchEnvironments(appId)
-            setEnvironments(response)
-        } catch (error) {
-            console.error(error)
-        } finally {
-            setIsDeploymentLoading(false)
-        }
-    }, [appId])
-
     useEffect(() => {
         if (!appId) return
         loadEnvironments()
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 28c169b2b..35167f5ab 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -8,14 +8,15 @@ import {useAppsData} from "@/contexts/app.context"
 import {useAppId} from "@/hooks/useAppId"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
 import {renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
-import {JSSTheme, Variant} from "@/lib/Types"
+import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {fetchVariants} from "@/services/api"
 import {deleteApp} from "@/services/app-selector/api"
+import {fetchEnvironments} from "@/services/deployment/api"
 import {MoreOutlined} from "@ant-design/icons"
 import {PencilLine, Trash} from "@phosphor-icons/react"
 import {Button, Dropdown, Space, Typography} from "antd"
 import {useRouter} from "next/router"
-import {useEffect, useState} from "react"
+import {useCallback, useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 
 const ObservabilityOverview: any = dynamicComponent(
@@ -47,6 +48,20 @@ export default function Overview() {
     const [isVariantLoading, setIsVariantLoading] = useState(false)
     const [isDeleteAppModalOpen, setIsDeleteAppModalOpen] = useState(false)
     const [isDelAppLoading, setIsDelAppLoading] = useState(false)
+    const [environments, setEnvironments] = useState<Environment[]>([])
+    const [isDeploymentLoading, setIsDeploymentLoading] = useState(true)
+
+    const loadEnvironments = useCallback(async () => {
+        try {
+            setIsDeploymentLoading(true)
+            const response = await fetchEnvironments(appId)
+            setEnvironments(response)
+        } catch (error) {
+            console.error(error)
+        } finally {
+            setIsDeploymentLoading(false)
+        }
+    }, [appId])
 
     useEffect(() => {
         const fetchAllVariants = async () => {
@@ -112,9 +127,18 @@ export default function Overview() {
 
                 <ObservabilityOverview variants={variants} />
 
-                <DeploymentOverview variants={variants} />
+                <DeploymentOverview
+                    variants={variants}
+                    isDeploymentLoading={isDeploymentLoading}
+                    loadEnvironments={loadEnvironments}
+                    environments={environments}
+                />
 
-                <VariantsOverview variantList={variants} isVariantLoading={isVariantLoading} />
+                <VariantsOverview
+                    variantList={variants}
+                    isVariantLoading={isVariantLoading}
+                    environments={environments}
+                />
 
                 <AutomaticEvalOverview />
 

From 323835f81903f50091051d4896acde5702f6e3d2 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 15 Aug 2024 22:51:00 +0100
Subject: [PATCH 070/117] updated variant table values

---
 .../overview/variants/VariantsOverview.tsx    | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 13edce7c4..aa30a12d5 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -1,8 +1,8 @@
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
-import {JSSTheme, Variant} from "@/lib/Types"
+import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {MoreOutlined, SwapOutlined} from "@ant-design/icons"
 import {CloudArrowUp, GearSix, Note, PencilLine, Rocket, Trash} from "@phosphor-icons/react"
-import {Button, Dropdown, Space, Spin, Table, Typography} from "antd"
+import {Badge, Button, Dropdown, Space, Spin, Table, Tag, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import Link from "next/link"
 import {useRouter} from "next/router"
@@ -17,6 +17,7 @@ const {Title} = Typography
 interface VariantsOverviewProps {
     isVariantLoading: boolean
     variantList: Variant[]
+    environments: Environment[]
 }
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
@@ -43,12 +44,13 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         },
     },
 }))
-const VariantsOverview = ({variantList, isVariantLoading}: VariantsOverviewProps) => {
+const VariantsOverview = ({variantList, isVariantLoading, environments}: VariantsOverviewProps) => {
     const classes = useStyles()
     const router = useRouter()
     const appId = router.query.app_id as string
     const [queryVariant, setQueryVariant] = useQueryParam("variant")
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
+    const [selectedVariant, setSelectedVariant] = useState<Variant>()
 
     const rowSelection = {
         onChange: (selectedRowKeys: React.Key[]) => {
@@ -83,15 +85,25 @@ const VariantsOverview = ({variantList, isVariantLoading}: VariantsOverviewProps
         },
         {
             title: "Last modified",
+            dataIndex: "lastModified",
+            key: "lastModified",
             onHeaderCell: () => ({
                 style: {minWidth: 160},
             }),
+            render: (_, record) => {
+                return <div>{record.lastModified}</div>
+            },
         },
         {
             title: "Modified by",
+            dataIndex: "modifiedBy",
+            key: "modifiedBy",
             onHeaderCell: () => ({
                 style: {minWidth: 160},
             }),
+            render: (_, record) => {
+                return <div>{record.modifiedBy.username}</div>
+            },
         },
         // {
         //     title: "Tags",
@@ -110,15 +122,20 @@ const VariantsOverview = ({variantList, isVariantLoading}: VariantsOverviewProps
                 return record.parameters && Object.keys(record.parameters).length
                     ? Object.values(
                           filterVariantParameters({record: record.parameters, key: "model"}),
-                      ).map((value, index) => <div key={index}>{value}</div>)
+                      ).map((value, index) => <Tag key={index}>{value}</Tag>)
                     : "-"
             },
         },
         {
             title: "Created on",
+            dataIndex: "createdAt",
+            key: "createdAt",
             onHeaderCell: () => ({
                 style: {minWidth: 160},
             }),
+            render: (_, record) => {
+                return <div>{record.createdAt}</div>
+            },
         },
         {
             title: <GearSix size={16} />,
@@ -140,6 +157,7 @@ const VariantsOverview = ({variantList, isVariantLoading}: VariantsOverviewProps
                                     onClick: (e) => {
                                         e.domEvent.stopPropagation()
                                         setQueryVariant(record.variantId)
+                                        setSelectedVariant(record)
                                     },
                                 },
                                 {
@@ -234,7 +252,15 @@ const VariantsOverview = ({variantList, isVariantLoading}: VariantsOverviewProps
                     />
                 </Spin>
             </div>
-            <VariantDrawer open={!!queryVariant} onClose={() => setQueryVariant("")} />
+
+            {selectedVariant && (
+                <VariantDrawer
+                    open={!!queryVariant}
+                    onClose={() => setQueryVariant("")}
+                    selectedVariant={selectedVariant}
+                    environments={environments}
+                />
+            )}
         </>
     )
 }

From 7267650883ed8dfbc068444b1af5086fcda361ed Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 15 Aug 2024 22:51:19 +0100
Subject: [PATCH 071/117] added variant drawer content

---
 .../pages/overview/variants/VariantDrawer.tsx | 231 +++++++++++++++++-
 1 file changed, 227 insertions(+), 4 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
index 37d617b6b..c4586707d 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
@@ -1,10 +1,233 @@
-import {Drawer} from "antd"
+import {useAppId} from "@/hooks/useAppId"
+import {filterVariantParameters} from "@/lib/helpers/utils"
+import {variantNameWithRev} from "@/lib/helpers/variantHelper"
+import {Environment, JSSTheme, Variant} from "@/lib/Types"
+import {CloseOutlined, MoreOutlined} from "@ant-design/icons"
+import {CloudArrowUp, Lightning, Rocket, Trash} from "@phosphor-icons/react"
+import {Badge, Button, Drawer, Dropdown, Tabs, Tag, Typography} from "antd"
 import React from "react"
+import {createUseStyles} from "react-jss"
 
-type VariantDrawerProps = {} & React.ComponentProps<typeof Drawer>
+type VariantDrawerProps = {
+    selectedVariant: Variant
+    environments: Environment[]
+} & React.ComponentProps<typeof Drawer>
 
-const VariantDrawer = ({...props}: VariantDrawerProps) => {
-    return <Drawer width={560} destroyOnClose {...props}></Drawer>
+const {Title} = Typography
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    drawerTitleContainer: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        "& h1.ant-typography": {
+            fontSize: theme.fontSizeHeading5,
+            lineHeight: theme.lineHeightHeading5,
+            fontWeight: 500,
+        },
+    },
+    subTitle: {
+        fontSize: theme.fontSize,
+        lineHeight: theme.lineHeight,
+        fontWeight: 500,
+    },
+    resultTag: {
+        minWidth: 150,
+        display: "flex",
+        borderRadius: theme.borderRadiusSM,
+        border: `1px solid ${theme.colorBorder}`,
+        textAlign: "center",
+        "& > div:nth-child(1)": {
+            backgroundColor: "rgba(0, 0, 0, 0.02)",
+            lineHeight: theme.lineHeight,
+            flex: 1,
+            minWidth: 50,
+            borderRight: `1px solid ${theme.colorBorder}`,
+            padding: "0 7px",
+        },
+        "& > div:nth-child(2)": {
+            padding: "0 7px",
+        },
+    },
+    promptTextField: {
+        padding: theme.paddingXS,
+        backgroundColor: theme.colorBgContainerDisabled,
+        borderRadius: theme.borderRadius,
+    },
+    noParams: {
+        color: theme.colorTextDescription,
+        fontWeight: 500,
+        textAlign: "center",
+        marginTop: 48,
+    },
+    drawerTabs: {
+        "& .ant-tabs-content-holder": {
+            maxHeight: 700,
+            overflowY: "scroll",
+        },
+    },
+}))
+
+const VariantDrawer = ({selectedVariant, environments, ...props}: VariantDrawerProps) => {
+    const classes = useStyles()
+    const appId = useAppId()
+
+    return (
+        <Drawer
+            closeIcon={null}
+            width={560}
+            destroyOnClose
+            {...props}
+            title={
+                <div className={classes.drawerTitleContainer}>
+                    <div className="flex items-center gap-3">
+                        <Button
+                            onClick={() => props.onClose?.({} as any)}
+                            type="text"
+                            icon={<CloseOutlined />}
+                        />
+
+                        <div className="flex items-center gap-2">
+                            <Lightning size={20} />
+                            <Title>
+                                {variantNameWithRev({
+                                    variant_name: selectedVariant.variantName,
+                                    revision: selectedVariant.revision,
+                                })}
+                            </Title>
+                            <Tag>#161661</Tag>
+                        </div>
+                    </div>
+
+                    <div className="flex items-center gap-3">
+                        <Button
+                            className="flex items-center gap-2"
+                            href={`/apps/${appId}/playground?variant=${selectedVariant.variantName}`}
+                        >
+                            <Rocket size={14} />
+                            Playground
+                        </Button>
+                        <Dropdown
+                            trigger={["hover"]}
+                            overlayStyle={{width: 180}}
+                            menu={{
+                                items: [
+                                    {
+                                        key: "deploy",
+                                        label: "Deploy",
+                                        icon: <CloudArrowUp size={16} />,
+                                        onClick: () => {},
+                                    },
+                                    {
+                                        key: "delete",
+                                        label: "Delete",
+                                        icon: <Trash size={16} />,
+                                        onClick: () => {},
+                                        danger: true,
+                                    },
+                                ],
+                            }}
+                        >
+                            <Button type="text" icon={<MoreOutlined />} size="small" />
+                        </Dropdown>
+                    </div>
+                </div>
+            }
+        >
+            <div className="flex flex-col gap-6">
+                <div className="flex flex-col gap-2">
+                    <Typography.Text>Deployment</Typography.Text>
+                    <div>
+                        {environments.map((env, idx) =>
+                            env.deployed_app_variant_id ? (
+                                <Tag key={idx}>
+                                    <Badge color="blue" text={env.name} />
+                                </Tag>
+                            ) : (
+                                <Tag key={idx}>{env.name}</Tag>
+                            ),
+                        )}
+                    </div>
+                </div>
+                <div>
+                    <Tabs
+                        destroyInactiveTabPane
+                        defaultActiveKey={"configuration"}
+                        className={classes.drawerTabs}
+                        items={[
+                            {
+                                key: "configuration",
+                                label: "Configuration",
+                                children: (
+                                    <div>
+                                        {" "}
+                                        {selectedVariant.parameters &&
+                                        Object.keys(selectedVariant.parameters).length ? (
+                                            <div className="flex flex-col gap-6">
+                                                <div className="flex flex-col gap-2">
+                                                    <Typography.Text className={classes.subTitle}>
+                                                        Parameters
+                                                    </Typography.Text>
+                                                    <div className="flex items-center gap-2 flex-wrap">
+                                                        {selectedVariant.parameters &&
+                                                            Object.entries(
+                                                                filterVariantParameters({
+                                                                    record: selectedVariant.parameters,
+                                                                    key: "prompt",
+                                                                    include: false,
+                                                                }),
+                                                            ).map(([key, value], index) => (
+                                                                <div
+                                                                    className={classes.resultTag}
+                                                                    key={index}
+                                                                >
+                                                                    <div>{key}</div>
+                                                                    <div>
+                                                                        {JSON.stringify(value)}
+                                                                    </div>
+                                                                </div>
+                                                            ))}
+                                                    </div>
+                                                </div>
+
+                                                {selectedVariant.parameters &&
+                                                    Object.entries(
+                                                        filterVariantParameters({
+                                                            record: selectedVariant.parameters,
+                                                            key: "prompt",
+                                                        }),
+                                                    ).map(([key, value], index) => (
+                                                        <div
+                                                            className="flex flex-col gap-2"
+                                                            key={index}
+                                                        >
+                                                            <Typography.Text
+                                                                className={classes.subTitle}
+                                                            >
+                                                                {key}
+                                                            </Typography.Text>
+                                                            <div
+                                                                className={classes.promptTextField}
+                                                            >
+                                                                {JSON.stringify(value)}
+                                                            </div>
+                                                        </div>
+                                                    ))}
+                                            </div>
+                                        ) : (
+                                            <Typography.Text className={classes.noParams}>
+                                                No Parameters
+                                            </Typography.Text>
+                                        )}
+                                    </div>
+                                ),
+                            },
+                        ]}
+                    />
+                </div>
+            </div>
+        </Drawer>
+    )
 }
 
 export default VariantDrawer

From 92b5569abf7c19451157a9b0257c0cacadbbed80 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Thu, 15 Aug 2024 22:53:01 +0100
Subject: [PATCH 072/117] fixed prettier(frontend)

---
 .../overview/automaticEvaluation/AutomaticEvalOverview.tsx   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index 0113e06d9..08dbaf50c 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -276,7 +276,10 @@ const AutomaticEvalOverview = () => {
                                     trigger={"click"}
                                     arrow={false}
                                     content={
-                                        <div className="w-[256px] flex flex-col gap-1" onClick={(e) => e.stopPropagation()}>
+                                        <div
+                                            className="w-[256px] flex flex-col gap-1"
+                                            onClick={(e) => e.stopPropagation()}
+                                        >
                                             <div className="font-[500]">
                                                 {result.evaluator_config.name}
                                             </div>

From 9b6598cb6d2240dcb74e40317f1d3086c494baab Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 16 Aug 2024 00:03:21 +0100
Subject: [PATCH 073/117] increased delete evaluation modal z-index

---
 .../components/DeleteEvaluationModal/DeleteEvaluationModal.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/agenta-web/src/components/DeleteEvaluationModal/DeleteEvaluationModal.tsx b/agenta-web/src/components/DeleteEvaluationModal/DeleteEvaluationModal.tsx
index 99450c7e6..afde209da 100644
--- a/agenta-web/src/components/DeleteEvaluationModal/DeleteEvaluationModal.tsx
+++ b/agenta-web/src/components/DeleteEvaluationModal/DeleteEvaluationModal.tsx
@@ -35,6 +35,7 @@ const DeleteEvaluationModal = ({evaluationType, ...props}: DeleteAutoEvalModalPr
             okType="danger"
             okButtonProps={{icon: <DeleteOutlined />, type: "primary"}}
             centered
+            zIndex={2000}
         >
             <div className={classes.container}>
                 <Typography.Title>Are you sure you want to delete?</Typography.Title>

From d95b5d583d9151e48412dd78632186abaea619ad Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 16 Aug 2024 00:20:09 +0100
Subject: [PATCH 074/117] fix(frontend): improved variant drawer

---
 .../pages/overview/variants/VariantDrawer.tsx | 18 ++++-
 .../overview/variants/VariantsOverview.tsx    | 77 +++++++++++++++----
 .../pages/apps/[app_id]/overview/index.tsx    | 23 +++---
 3 files changed, 87 insertions(+), 31 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
index c4586707d..00b7c5c66 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
@@ -11,6 +11,7 @@ import {createUseStyles} from "react-jss"
 type VariantDrawerProps = {
     selectedVariant: Variant
     environments: Environment[]
+    setIsDeleteEvalModalOpen: React.Dispatch<React.SetStateAction<boolean>>
 } & React.ComponentProps<typeof Drawer>
 
 const {Title} = Typography
@@ -57,8 +58,10 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     noParams: {
         color: theme.colorTextDescription,
         fontWeight: 500,
-        textAlign: "center",
-        marginTop: 48,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: 200,
     },
     drawerTabs: {
         "& .ant-tabs-content-holder": {
@@ -68,7 +71,12 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
 }))
 
-const VariantDrawer = ({selectedVariant, environments, ...props}: VariantDrawerProps) => {
+const VariantDrawer = ({
+    selectedVariant,
+    environments,
+    setIsDeleteEvalModalOpen,
+    ...props
+}: VariantDrawerProps) => {
     const classes = useStyles()
     const appId = useAppId()
 
@@ -122,7 +130,9 @@ const VariantDrawer = ({selectedVariant, environments, ...props}: VariantDrawerP
                                         key: "delete",
                                         label: "Delete",
                                         icon: <Trash size={16} />,
-                                        onClick: () => {},
+                                        onClick: () => {
+                                            setIsDeleteEvalModalOpen(true)
+                                        },
                                         danger: true,
                                     },
                                 ],
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index aa30a12d5..935373aec 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -2,7 +2,7 @@ import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {MoreOutlined, SwapOutlined} from "@ant-design/icons"
 import {CloudArrowUp, GearSix, Note, PencilLine, Rocket, Trash} from "@phosphor-icons/react"
-import {Badge, Button, Dropdown, Space, Spin, Table, Tag, Typography} from "antd"
+import {Button, Dropdown, message, Space, Spin, Table, Tag, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import Link from "next/link"
 import {useRouter} from "next/router"
@@ -10,7 +10,10 @@ import React, {useState} from "react"
 import {createUseStyles} from "react-jss"
 import VariantDrawer from "./VariantDrawer"
 import {useQueryParam} from "@/hooks/useQuery"
-import {filterVariantParameters} from "@/lib/helpers/utils"
+import {filterVariantParameters, isDemo} from "@/lib/helpers/utils"
+import {checkIfResourceValidForDeletion} from "@/lib/helpers/evaluate"
+import {deleteSingleVariant} from "@/services/playground/api"
+import DeleteEvaluationModal from "@/components/DeleteEvaluationModal/DeleteEvaluationModal"
 
 const {Title} = Typography
 
@@ -18,6 +21,7 @@ interface VariantsOverviewProps {
     isVariantLoading: boolean
     variantList: Variant[]
     environments: Environment[]
+    fetchAllVariants: () => void
 }
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
@@ -44,13 +48,20 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         },
     },
 }))
-const VariantsOverview = ({variantList, isVariantLoading, environments}: VariantsOverviewProps) => {
+
+const VariantsOverview = ({
+    variantList,
+    isVariantLoading,
+    environments,
+    fetchAllVariants,
+}: VariantsOverviewProps) => {
     const classes = useStyles()
     const router = useRouter()
     const appId = router.query.app_id as string
     const [queryVariant, setQueryVariant] = useQueryParam("variant")
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
     const [selectedVariant, setSelectedVariant] = useState<Variant>()
+    const [isDeleteEvalModalOpen, setIsDeleteEvalModalOpen] = useState(false)
 
     const rowSelection = {
         onChange: (selectedRowKeys: React.Key[]) => {
@@ -62,7 +73,23 @@ const VariantsOverview = ({variantList, isVariantLoading, environments}: Variant
         router.push(`/apps/${appId}/playground?variant=${variantName}&revision=${revisionNum}`)
     }
 
-    const handleDeleteEvaluation = async (record: Variant) => {}
+    const handleDeleteVariant = async (variantId: string) => {
+        try {
+            if (
+                !(await checkIfResourceValidForDeletion({
+                    resourceType: "variant",
+                    resourceIds: [variantId],
+                }))
+            )
+                return
+
+            await deleteSingleVariant(variantId)
+            message.success("Variant removed successfully!")
+            fetchAllVariants()
+        } catch (error) {
+            console.error(error)
+        }
+    }
 
     const columns: ColumnsType<Variant> = [
         {
@@ -73,14 +100,7 @@ const VariantsOverview = ({variantList, isVariantLoading, environments}: Variant
                 style: {minWidth: 160},
             }),
             render: (_, record) => {
-                return (
-                    <span>
-                        {variantNameWithRev({
-                            variant_name: record.variantName,
-                            revision: record.revision,
-                        })}
-                    </span>
-                )
+                return <span>{record.variantName}</span>
             },
         },
         {
@@ -94,7 +114,10 @@ const VariantsOverview = ({variantList, isVariantLoading, environments}: Variant
                 return <div>{record.lastModified}</div>
             },
         },
-        {
+    ]
+
+    if (isDemo()) {
+        columns.push({
             title: "Modified by",
             dataIndex: "modifiedBy",
             key: "modifiedBy",
@@ -104,7 +127,10 @@ const VariantsOverview = ({variantList, isVariantLoading, environments}: Variant
             render: (_, record) => {
                 return <div>{record.modifiedBy.username}</div>
             },
-        },
+        })
+    }
+
+    columns.push(
         // {
         //     title: "Tags",
         //     onHeaderCell: () => ({
@@ -194,7 +220,8 @@ const VariantsOverview = ({variantList, isVariantLoading, environments}: Variant
                                     danger: true,
                                     onClick: (e) => {
                                         e.domEvent.stopPropagation()
-                                        handleDeleteEvaluation(record)
+                                        setSelectedVariant(record)
+                                        setIsDeleteEvalModalOpen(true)
                                     },
                                 },
                             ],
@@ -210,7 +237,7 @@ const VariantsOverview = ({variantList, isVariantLoading, environments}: Variant
                 )
             },
         },
-    ]
+    )
 
     return (
         <>
@@ -247,6 +274,7 @@ const VariantsOverview = ({variantList, isVariantLoading, environments}: Variant
                             style: {cursor: "pointer"},
                             onClick: () => {
                                 setQueryVariant(record.variantId)
+                                setSelectedVariant(record)
                             },
                         })}
                     />
@@ -259,6 +287,23 @@ const VariantsOverview = ({variantList, isVariantLoading, environments}: Variant
                     onClose={() => setQueryVariant("")}
                     selectedVariant={selectedVariant}
                     environments={environments}
+                    setIsDeleteEvalModalOpen={setIsDeleteEvalModalOpen}
+                />
+            )}
+
+            {selectedVariant && (
+                <DeleteEvaluationModal
+                    open={isDeleteEvalModalOpen}
+                    onCancel={() => setIsDeleteEvalModalOpen(false)}
+                    onOk={async () => {
+                        await handleDeleteVariant(selectedVariant.variantId)
+                        setIsDeleteEvalModalOpen(false)
+                        setQueryVariant("")
+                    }}
+                    evaluationType={variantNameWithRev({
+                        variant_name: selectedVariant.variantName,
+                        revision: selectedVariant.revision,
+                    })}
                 />
             )}
         </>
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 35167f5ab..9aa9d594c 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -63,19 +63,19 @@ export default function Overview() {
         }
     }, [appId])
 
-    useEffect(() => {
-        const fetchAllVariants = async () => {
-            try {
-                setIsVariantLoading(true)
-                const data = await fetchVariants(appId)
-                setVariants(data)
-            } catch (error) {
-                console.error(error)
-            } finally {
-                setIsVariantLoading(false)
-            }
+    const fetchAllVariants = async () => {
+        try {
+            setIsVariantLoading(true)
+            const data = await fetchVariants(appId)
+            setVariants(data)
+        } catch (error) {
+            console.error(error)
+        } finally {
+            setIsVariantLoading(false)
         }
+    }
 
+    useEffect(() => {
         fetchAllVariants()
     }, [appId])
 
@@ -138,6 +138,7 @@ export default function Overview() {
                     variantList={variants}
                     isVariantLoading={isVariantLoading}
                     environments={environments}
+                    fetchAllVariants={fetchAllVariants}
                 />
 
                 <AutomaticEvalOverview />

From 951004a9735d1145796c9a8535aeef7391d28188 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 16 Aug 2024 17:26:24 +0100
Subject: [PATCH 075/117] fix(frontend): disabled sidebar collapse feature

---
 agenta-web/src/components/Sidebar/Sidebar.tsx | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
index bdf933e87..c32116c16 100644
--- a/agenta-web/src/components/Sidebar/Sidebar.tsx
+++ b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -50,7 +50,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         display: "flex",
         flexDirection: "column",
         height: "100%",
-        padding: "0 10px",
+        padding: "0 10px 10px",
         "& > div:nth-of-type(1)": {
             margin: `${theme.padding}px 0`,
             display: "flex",
@@ -337,14 +337,7 @@ const Sidebar: React.FC = () => {
 
     return (
         <div className={classes.siderWrapper}>
-            <Sider
-                theme={appTheme}
-                className={classes.sidebar}
-                width={236}
-                collapsible
-                collapsed={collapsed}
-                onCollapse={(value) => setCollapsed(value)}
-            >
+            <Sider theme={appTheme} className={classes.sidebar} width={236}>
                 <div className={classes.sliderContainer}>
                     <div>
                         {!isDemo() && (

From fb5a74916f2f57f213cc9d386a711a7e10c4526f Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 16 Aug 2024 19:01:34 +0100
Subject: [PATCH 076/117] fix(frontend): updated confirm deployment modal
 helper text

---
 .../pages/overview/deployments/DeploymentModal.tsx         | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx
index e91d9e4a9..be182108a 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx
@@ -81,10 +81,9 @@ const DeploymentModal = ({
 
                 <div className="flex flex-col gap-4">
                     <div>
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione molestiae
-                        quas, vel minus corporis dolores velit quos tempora est dolorem animi
-                        obcaecati dolor, quibusdam illum earum assumenda quasi aspernatur.
-                        Voluptatibus.
+                        You are about to deploy {selectedEnvironment.deployed_variant_name} to{" "}
+                        {selectedEnvironment.name} environment. This will overwrite the existing
+                        configuration. This change will affect all future calls to this environment.
                     </div>
                     <div className="flex flex-col">
                         You are about to deploy {selectedEnvironment.name} environment:

From 294ee189846ff97ba128dc0b375408aef40294a2 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 16 Aug 2024 19:23:16 +0100
Subject: [PATCH 077/117] fix(frontend): on click func for no deployment drawer

---
 .../pages/overview/deployments/DeploymentDrawer.tsx       | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
index b518f9444..dbde9da5c 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -307,7 +307,13 @@ const DeploymentDrawer = ({
                             No deployment has been done on {selectedEnvironment.name} environment
                         </Typography.Text>
 
-                        <Button className="flex items-center gap-2">
+                        <Button
+                            className="flex items-center gap-2"
+                            onClick={() => {
+                                setOpenChangeVariantModal(true)
+                                setQueryEnv("")
+                            }}
+                        >
                             Deploy now <ArrowRight size={14} />
                         </Button>
                     </div>

From 2228e3290da27bc922e3bb76689fec6c5aac41d1 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 16 Aug 2024 19:23:47 +0100
Subject: [PATCH 078/117] design(frontend): added deploy variant modal

---
 .../overview/variants/DeployVariantModal.tsx  | 124 ++++++++++++++++++
 .../overview/variants/VariantsOverview.tsx    |  16 +++
 .../pages/apps/[app_id]/overview/index.tsx    |   1 +
 3 files changed, 141 insertions(+)
 create mode 100644 agenta-web/src/components/pages/overview/variants/DeployVariantModal.tsx

diff --git a/agenta-web/src/components/pages/overview/variants/DeployVariantModal.tsx b/agenta-web/src/components/pages/overview/variants/DeployVariantModal.tsx
new file mode 100644
index 000000000..bf72267be
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/variants/DeployVariantModal.tsx
@@ -0,0 +1,124 @@
+import {Environment, JSSTheme, Variant} from "@/lib/Types"
+import {createPublishVariant} from "@/services/deployment/api"
+import {Rocket} from "@phosphor-icons/react"
+import {Badge, message, Modal, Table, Tag, Typography} from "antd"
+import {ColumnsType} from "antd/es/table"
+import React, {useState} from "react"
+import {createUseStyles} from "react-jss"
+
+type DeployVariantModalProps = {
+    environments: Environment[]
+    selectedVariant: Variant
+    loadEnvironments: () => Promise<void>
+} & React.ComponentProps<typeof Modal>
+
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+    container: {
+        "& .ant-modal-footer": {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end",
+        },
+    },
+    title: {
+        fontSize: theme.fontSizeLG,
+        fontWeight: theme.fontWeightStrong,
+        lineHeight: theme.lineHeightLG,
+        marginBottom: 8,
+    },
+}))
+
+const DeployVariantModal = ({
+    environments,
+    selectedVariant,
+    loadEnvironments,
+    ...props
+}: DeployVariantModalProps) => {
+    const classes = useStyles()
+    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
+    const [isPublishing, setIsPublishing] = useState(false)
+
+    const publishVariants = async () => {
+        setIsPublishing(true)
+        try {
+            for (const envName of selectedRowKeys) {
+                try {
+                    await createPublishVariant(selectedVariant.variantId, envName as string)
+                    props.onCancel?.({} as any)
+                    message.success(`Published ${selectedVariant.variantName} to ${envName}`)
+                } catch (error) {
+                    message.error(`Failed to publish ${selectedVariant.variantName} to ${envName}`)
+                    console.error(error)
+                }
+            }
+        } finally {
+            await loadEnvironments()
+            setIsPublishing(false)
+        }
+    }
+
+    const columns: ColumnsType<Environment> = [
+        {
+            title: "Environment",
+            dataIndex: "name",
+            key: "name",
+            render(_, record) {
+                return <Typography.Text className="capitalize">{record.name}</Typography.Text>
+            },
+        },
+        {
+            title: "Current Deployment",
+            dataIndex: "deployed_variant_name",
+            key: "deployed_variant_name",
+            render(_, record) {
+                return record.deployed_variant_name ? (
+                    <Tag>
+                        <Badge color="blue" text={record.deployed_variant_name} />
+                    </Tag>
+                ) : (
+                    <Tag>No deployment</Tag>
+                )
+            },
+        },
+    ]
+
+    return (
+        <Modal
+            className={classes.container}
+            centered
+            destroyOnClose
+            okText={
+                <div className="flex gap-2 items-center">
+                    <Rocket size={16} />
+                    Deploy
+                </div>
+            }
+            onOk={() => publishVariants()}
+            okButtonProps={{loading: isPublishing}}
+            {...props}
+            title={<Typography.Text className={classes.title}>Deploy Variant</Typography.Text>}
+        >
+            <div className="flex flex-col gap-4">
+                <Typography.Text>
+                    Select an environment to deploy{" "}
+                    <span className="font-semibold">{selectedVariant.variantName}</span>
+                </Typography.Text>
+
+                <Table
+                    rowSelection={{
+                        type: "checkbox",
+                        onChange: (selectedRowKeys: React.Key[]) => {
+                            setSelectedRowKeys(selectedRowKeys)
+                        },
+                    }}
+                    columns={columns}
+                    dataSource={environments}
+                    pagination={false}
+                    rowKey={"name"}
+                />
+            </div>
+        </Modal>
+    )
+}
+
+export default DeployVariantModal
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 935373aec..b7c5164af 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -14,6 +14,7 @@ import {filterVariantParameters, isDemo} from "@/lib/helpers/utils"
 import {checkIfResourceValidForDeletion} from "@/lib/helpers/evaluate"
 import {deleteSingleVariant} from "@/services/playground/api"
 import DeleteEvaluationModal from "@/components/DeleteEvaluationModal/DeleteEvaluationModal"
+import DeployVariantModal from "./DeployVariantModal"
 
 const {Title} = Typography
 
@@ -22,6 +23,7 @@ interface VariantsOverviewProps {
     variantList: Variant[]
     environments: Environment[]
     fetchAllVariants: () => void
+    loadEnvironments: () => Promise<void>
 }
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
@@ -54,6 +56,7 @@ const VariantsOverview = ({
     isVariantLoading,
     environments,
     fetchAllVariants,
+    loadEnvironments,
 }: VariantsOverviewProps) => {
     const classes = useStyles()
     const router = useRouter()
@@ -62,6 +65,7 @@ const VariantsOverview = ({
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
     const [selectedVariant, setSelectedVariant] = useState<Variant>()
     const [isDeleteEvalModalOpen, setIsDeleteEvalModalOpen] = useState(false)
+    const [isDeployVariantModalOpen, setIsDeployVariantModalOpen] = useState(false)
 
     const rowSelection = {
         onChange: (selectedRowKeys: React.Key[]) => {
@@ -201,6 +205,8 @@ const VariantsOverview = ({
                                     icon: <CloudArrowUp size={16} />,
                                     onClick: (e) => {
                                         e.domEvent.stopPropagation()
+                                        setIsDeployVariantModalOpen(true)
+                                        setSelectedVariant(record)
                                     },
                                 },
                                 {type: "divider"},
@@ -306,6 +312,16 @@ const VariantsOverview = ({
                     })}
                 />
             )}
+
+            {selectedVariant && (
+                <DeployVariantModal
+                    open={isDeployVariantModalOpen}
+                    onCancel={() => setIsDeployVariantModalOpen(false)}
+                    environments={environments}
+                    selectedVariant={selectedVariant}
+                    loadEnvironments={loadEnvironments}
+                />
+            )}
         </>
     )
 }
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 9aa9d594c..87de66213 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -139,6 +139,7 @@ export default function Overview() {
                     isVariantLoading={isVariantLoading}
                     environments={environments}
                     fetchAllVariants={fetchAllVariants}
+                    loadEnvironments={loadEnvironments}
                 />
 
                 <AutomaticEvalOverview />

From 94806aec8d278ae59a2aa073f7cc6f8066aa450d Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 16 Aug 2024 22:14:34 +0100
Subject: [PATCH 079/117] minor fix

---
 .../src/components/pages/overview/variants/VariantsOverview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index b7c5164af..4a215acf7 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -152,7 +152,7 @@ const VariantsOverview = ({
                 return record.parameters && Object.keys(record.parameters).length
                     ? Object.values(
                           filterVariantParameters({record: record.parameters, key: "model"}),
-                      ).map((value, index) => <Tag key={index}>{value}</Tag>)
+                      ).map((value, index) => (value ? <Tag key={index}>{value}</Tag> : "-"))
                     : "-"
             },
         },

From 585aee68d5476ab035604a79f647e417eab3236e Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 16 Aug 2024 22:56:46 +0100
Subject: [PATCH 080/117] fix(frontend): added func to deploy button in variant
 drawer

---
 .../components/pages/overview/variants/VariantDrawer.tsx   | 7 ++++++-
 .../pages/overview/variants/VariantsOverview.tsx           | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
index 00b7c5c66..8cc12878c 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
@@ -12,6 +12,7 @@ type VariantDrawerProps = {
     selectedVariant: Variant
     environments: Environment[]
     setIsDeleteEvalModalOpen: React.Dispatch<React.SetStateAction<boolean>>
+    setIsDeployVariantModalOpen: React.Dispatch<React.SetStateAction<boolean>>
 } & React.ComponentProps<typeof Drawer>
 
 const {Title} = Typography
@@ -75,6 +76,7 @@ const VariantDrawer = ({
     selectedVariant,
     environments,
     setIsDeleteEvalModalOpen,
+    setIsDeployVariantModalOpen,
     ...props
 }: VariantDrawerProps) => {
     const classes = useStyles()
@@ -124,7 +126,10 @@ const VariantDrawer = ({
                                         key: "deploy",
                                         label: "Deploy",
                                         icon: <CloudArrowUp size={16} />,
-                                        onClick: () => {},
+                                        onClick: () => {
+                                            props.onClose?.({} as any)
+                                            setIsDeployVariantModalOpen(true)
+                                        },
                                     },
                                     {
                                         key: "delete",
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 4a215acf7..1957082e3 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -294,6 +294,7 @@ const VariantsOverview = ({
                     selectedVariant={selectedVariant}
                     environments={environments}
                     setIsDeleteEvalModalOpen={setIsDeleteEvalModalOpen}
+                    setIsDeployVariantModalOpen={setIsDeployVariantModalOpen}
                 />
             )}
 

From 237d5ed1733fbdd24313b26fd2110778272bba98 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Fri, 16 Aug 2024 23:31:07 +0100
Subject: [PATCH 081/117] fix(frontend): prompt variable input size

---
 agenta-web/src/components/Playground/Views/ParametersCards.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/agenta-web/src/components/Playground/Views/ParametersCards.tsx b/agenta-web/src/components/Playground/Views/ParametersCards.tsx
index c667e7874..486b7c60e 100644
--- a/agenta-web/src/components/Playground/Views/ParametersCards.tsx
+++ b/agenta-web/src/components/Playground/Views/ParametersCards.tsx
@@ -287,7 +287,6 @@ export const ObjectParameters: React.FC<ObjectParametersProps> = ({
                                             placeholder={"variable name"}
                                             maxLength={200}
                                             autoSize={false}
-                                            size="small"
                                             onChange={(e) =>
                                                 handleVariableNameChange(
                                                     param,

From 51ecf5a0d095fd665bc1d24de878de786338516b Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sat, 17 Aug 2024 22:27:11 +0100
Subject: [PATCH 082/117] fix(frontend): added helper func to split and display
 variant id

---
 .../pages/overview/deployments/ChangeVariantModal.tsx         | 4 ++--
 .../src/components/pages/overview/variants/VariantDrawer.tsx  | 4 ++--
 agenta-web/src/lib/helpers/utils.ts                           | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
index 008feb995..89ef2aadf 100644
--- a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
@@ -1,10 +1,10 @@
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {CaretRight} from "@phosphor-icons/react"
 import {Input, Modal, Table, Tag, Typography} from "antd"
-import Link from "next/link"
 import React, {SetStateAction, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
 import DeploymentModal from "./DeploymentModal"
+import {splitVariantId} from "@/lib/helpers/utils"
 
 const {Search} = Input
 
@@ -85,7 +85,7 @@ const ChangeVariantModal = ({
                                                 <div>{record.variantName}</div>
 
                                                 <div className="flex items-center">
-                                                    <Tag>{record.variantId}</Tag>
+                                                    <Tag>{splitVariantId(record.variantId)}</Tag>
                                                     <CaretRight />
                                                 </div>
                                             </div>
diff --git a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
index 8cc12878c..6cd189267 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
@@ -1,5 +1,5 @@
 import {useAppId} from "@/hooks/useAppId"
-import {filterVariantParameters} from "@/lib/helpers/utils"
+import {filterVariantParameters, splitVariantId} from "@/lib/helpers/utils"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {CloseOutlined, MoreOutlined} from "@ant-design/icons"
@@ -105,7 +105,7 @@ const VariantDrawer = ({
                                     revision: selectedVariant.revision,
                                 })}
                             </Title>
-                            <Tag>#161661</Tag>
+                            <Tag>{splitVariantId(selectedVariant.variantId)}</Tag>
                         </div>
                     </div>
 
diff --git a/agenta-web/src/lib/helpers/utils.ts b/agenta-web/src/lib/helpers/utils.ts
index 0dd5b7005..14eec96c6 100644
--- a/agenta-web/src/lib/helpers/utils.ts
+++ b/agenta-web/src/lib/helpers/utils.ts
@@ -365,3 +365,7 @@ export const filterVariantParameters = ({
         {} as Record<string, any>,
     )
 }
+
+export const splitVariantId = (variantId: string) => {
+    return `# ${variantId.split("-")[0]}`
+}

From 0fbba6b8ef18624049217bfbe974a4da1401ac6b Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sat, 17 Aug 2024 22:38:11 +0100
Subject: [PATCH 083/117] design(frontend): variant popover to display variant
 info

---
 .../deployments/DeploymentOverview.tsx        | 146 ++++++++++--------
 .../overview/variants/VariantPopover.tsx      |  50 ++++++
 2 files changed, 131 insertions(+), 65 deletions(-)
 create mode 100644 agenta-web/src/components/pages/overview/variants/VariantPopover.tsx

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
index 5ffcac5c4..582caf9b7 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -1,14 +1,14 @@
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
-import {fetchEnvironments} from "@/services/deployment/api"
 import {MoreOutlined} from "@ant-design/icons"
 import {Button, Card, Dropdown, Skeleton, Tag, Typography} from "antd"
 import {useRouter} from "next/router"
-import {useCallback, useEffect, useState} from "react"
+import {useEffect, useState} from "react"
 import {createUseStyles} from "react-jss"
 import DeploymentDrawer from "./DeploymentDrawer"
 import {useQueryParam} from "@/hooks/useQuery"
 import {Code, Rocket, Swap} from "@phosphor-icons/react"
 import ChangeVariantModal from "./ChangeVariantModal"
+import VariantPopover from "../variants/VariantPopover"
 
 const {Title, Text} = Typography
 
@@ -45,6 +45,13 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             },
         },
     },
+    deploymentCard: {
+        cursor: "pointer",
+        transition: "all 0.025s ease-in",
+        "&:hover": {
+            boxShadow: theme.boxShadowTertiary,
+        },
+    },
 }))
 
 const DeploymentOverview = ({
@@ -77,72 +84,81 @@ const DeploymentOverview = ({
                 </div>
             ) : (
                 <div className={classes.cardContainer}>
-                    {environments.map((env, index) => (
-                        <Card
-                            key={index}
-                            onClick={() => {
-                                setQueryEnv(env.name)
-                                setSelectedEnvironment(env)
-                            }}
-                            className="cursor-pointer"
-                        >
-                            <Dropdown
-                                trigger={["click"]}
-                                menu={{
-                                    items: [
-                                        {
-                                            key: "use_api",
-                                            label: "Use API",
-                                            icon: <Code size={16} />,
-                                            onClick: (e) => {
-                                                e.domEvent.stopPropagation()
-                                                setQueryEnv(env.name)
-                                                setSelectedEnvironment(env)
+                    {environments.map((env, index) => {
+                        const selectedDeployedVariant = variants.find(
+                            (variant) => variant.variantId === env.deployed_app_variant_id,
+                        )
+
+                        return (
+                            <Card
+                                key={index}
+                                onClick={() => {
+                                    setQueryEnv(env.name)
+                                    setSelectedEnvironment(env)
+                                }}
+                                className={classes.deploymentCard}
+                            >
+                                <Dropdown
+                                    trigger={["click"]}
+                                    menu={{
+                                        items: [
+                                            {
+                                                key: "use_api",
+                                                label: "Use API",
+                                                icon: <Code size={16} />,
+                                                onClick: (e) => {
+                                                    e.domEvent.stopPropagation()
+                                                    setQueryEnv(env.name)
+                                                    setSelectedEnvironment(env)
+                                                },
                                             },
-                                        },
-                                        {
-                                            key: "change_variant",
-                                            label: "Change Variant",
-                                            icon: <Swap size={16} />,
-                                            onClick: (e) => {
-                                                e.domEvent.stopPropagation()
-                                                setSelectedEnvironment(env)
-                                                setOpenChangeVariantModal(true)
+                                            {
+                                                key: "change_variant",
+                                                label: "Change Variant",
+                                                icon: <Swap size={16} />,
+                                                onClick: (e) => {
+                                                    e.domEvent.stopPropagation()
+                                                    setSelectedEnvironment(env)
+                                                    setOpenChangeVariantModal(true)
+                                                },
                                             },
-                                        },
-                                        {type: "divider"},
-                                        {
-                                            key: "open_playground",
-                                            label: "Open in playground",
-                                            icon: <Rocket size={16} />,
-                                            onClick: (e) => {
-                                                e.domEvent.stopPropagation()
-                                                router.push(
-                                                    `/apps/${appId}/playground?variant=${env.deployed_variant_name}`,
-                                                )
+                                            {type: "divider"},
+                                            {
+                                                key: "open_playground",
+                                                label: "Open in playground",
+                                                icon: <Rocket size={16} />,
+                                                onClick: (e) => {
+                                                    e.domEvent.stopPropagation()
+                                                    router.push(
+                                                        `/apps/${appId}/playground?variant=${env.deployed_variant_name}`,
+                                                    )
+                                                },
                                             },
-                                        },
-                                    ],
-                                }}
-                            >
-                                <Button
-                                    type="text"
-                                    onClick={(e) => e.stopPropagation()}
-                                    icon={<MoreOutlined />}
-                                    size="small"
-                                    className="absolute right-2"
-                                />
-                            </Dropdown>
-                            <Text>{env.name}</Text>
-                            {env.deployed_variant_name ? (
-                                <Tag className="w-fit" color="green">
-                                    {env.deployed_variant_name}
-                                </Tag>
-                            ) : (
-                                <Tag className="w-fit">No deployment</Tag>
-                            )}
-                        </Card>
-                    ))}
+                                        ],
+                                    }}
+                                >
+                                    <Button
+                                        type="text"
+                                        onClick={(e) => e.stopPropagation()}
+                                        icon={<MoreOutlined />}
+                                        size="small"
+                                        className="absolute right-2"
+                                    />
+                                </Dropdown>
+                                <Text>{env.name}</Text>
+                                {env.deployed_variant_name ? (
+                                    <VariantPopover
+                                        selectedDeployedVariant={selectedDeployedVariant}
+                                        env={env}
+                                    />
+                                ) : (
+                                    <Tag className="w-fit" onClick={(e) => e.stopPropagation()}>
+                                        No deployment
+                                    </Tag>
+                                )}
+                            </Card>
+                        )
+                    })}
                 </div>
             )}
 
diff --git a/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx b/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx
new file mode 100644
index 000000000..3023bc097
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx
@@ -0,0 +1,50 @@
+import {isDemo, splitVariantId} from "@/lib/helpers/utils"
+import {Environment, Variant} from "@/lib/Types"
+import {ArrowSquareOut} from "@phosphor-icons/react"
+import {Button, Popover, Tag, Typography} from "antd"
+import {useRouter} from "next/router"
+import React from "react"
+
+type VariantPopoverProps = {
+    env: Environment
+    selectedDeployedVariant: Variant | undefined
+} & React.ComponentProps<typeof Popover>
+
+const VariantPopover = ({env, selectedDeployedVariant, ...props}: VariantPopoverProps) => {
+    const router = useRouter()
+    const appId = router.query.app_id as string
+    return (
+        <Popover
+            {...props}
+            placement="bottom"
+            trigger={"hover"}
+            overlayStyle={{width: 256}}
+            arrow={false}
+            title={
+                <div onClick={(e) => e.stopPropagation()} className="flex flex-col gap-2">
+                    <div className="flex items-center justify-between">
+                        <Typography.Text>{env.deployed_variant_name}</Typography.Text>
+
+                        <Button
+                            size="small"
+                            icon={<ArrowSquareOut size={14} />}
+                            className="flex items-center justify-center"
+                            href={`/apps/${appId}/playground?variant=${env.deployed_variant_name}`}
+                        />
+                    </div>
+                    {selectedDeployedVariant && isDemo() && (
+                        <Typography.Text className="font-normal">
+                            {selectedDeployedVariant.modifiedBy.username}
+                        </Typography.Text>
+                    )}
+                </div>
+            }
+        >
+            <Tag className="w-fit" onClick={(e) => e.stopPropagation()}>
+                {splitVariantId(env.deployed_app_variant_id as string)}
+            </Tag>
+        </Popover>
+    )
+}
+
+export default VariantPopover

From bed8b1fb78619e1dc1a516242a8d24c9956d5464 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sat, 17 Aug 2024 23:13:27 +0100
Subject: [PATCH 084/117] fix(frontend): replaced tag in deployment drawer with
 variant popover

---
 .../pages/overview/deployments/DeploymentDrawer.tsx       | 8 +++++++-
 .../components/pages/overview/variants/VariantPopover.tsx | 6 +++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
index dbde9da5c..95d340f05 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -26,6 +26,7 @@ import {fetchAppContainerURL} from "@/services/api"
 import {useVariant} from "@/lib/hooks/useVariant"
 import {isDemo} from "@/lib/helpers/utils"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
+import VariantPopover from "../variants/VariantPopover"
 
 const DeploymentHistoryModal: any = dynamicComponent(
     "pages/overview/deployments/DeploymentHistoryModal",
@@ -249,7 +250,12 @@ const DeploymentDrawer = ({
                         <div className="flex justify-between">
                             <Text className="font-[500]">Variant Deployed</Text>
 
-                            <Tag>{selectedEnvironment?.deployed_variant_name}</Tag>
+                            {variant && (
+                                <VariantPopover
+                                    env={selectedEnvironment}
+                                    selectedDeployedVariant={variant}
+                                />
+                            )}
                         </div>
 
                         <div>
diff --git a/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx b/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx
index 3023bc097..8ebd8a95f 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx
@@ -1,7 +1,7 @@
 import {isDemo, splitVariantId} from "@/lib/helpers/utils"
 import {Environment, Variant} from "@/lib/Types"
 import {ArrowSquareOut} from "@phosphor-icons/react"
-import {Button, Popover, Tag, Typography} from "antd"
+import {Badge, Button, Popover, Tag, Typography} from "antd"
 import {useRouter} from "next/router"
 import React from "react"
 
@@ -40,8 +40,8 @@ const VariantPopover = ({env, selectedDeployedVariant, ...props}: VariantPopover
                 </div>
             }
         >
-            <Tag className="w-fit" onClick={(e) => e.stopPropagation()}>
-                {splitVariantId(env.deployed_app_variant_id as string)}
+            <Tag className="w-fit cursor-pointer" onClick={(e) => e.stopPropagation()}>
+                <Badge color="blue" text={splitVariantId(env.deployed_app_variant_id as string)} />
             </Tag>
         </Popover>
     )

From ffb66fc74420b8d126ec2ae5b5f75b1f94444566 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 18 Aug 2024 15:13:53 +0100
Subject: [PATCH 085/117] fix(frontend): passed prop and updated ui

---
 agenta-web/src/components/Sidebar/Sidebar.tsx     | 15 +++++++--------
 .../overview/deployments/DeploymentDrawer.tsx     |  1 +
 .../pages/overview/variants/VariantsOverview.tsx  | 10 +++++++++-
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
index c32116c16..d014a8fb4 100644
--- a/agenta-web/src/components/Sidebar/Sidebar.tsx
+++ b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -103,6 +103,10 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             },
         },
     },
+    userAvatar: {
+        backgroundColor: theme.colorPrimaryBgHover,
+        color: theme.colorPrimary,
+    },
     menuHeader: {
         padding: `${theme.paddingXS}px ${theme.padding}px`,
         color: theme.colorTextDescription,
@@ -356,12 +360,8 @@ const Sidebar: React.FC = () => {
                                                 <Space>
                                                     <Avatar
                                                         size={"small"}
-                                                        style={{
-                                                            backgroundColor: getColorFromStr(
-                                                                org.id,
-                                                            ),
-                                                            color: "#fff",
-                                                        }}
+                                                        className={classes.userAvatar}
+                                                        shape="square"
                                                     >
                                                         {getInitials(org.name)}
                                                     </Avatar>
@@ -414,10 +414,9 @@ const Sidebar: React.FC = () => {
                                         <Avatar
                                             shape="square"
                                             style={{
-                                                backgroundColor: getColorFromStr(selectedOrg.id),
-                                                color: "#fff",
                                                 fontSize: 18,
                                             }}
+                                            className={classes.userAvatar}
                                         >
                                             {getInitials(selectedOrg.name)}
                                         </Avatar>
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
index 95d340f05..450ece39a 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -331,6 +331,7 @@ const DeploymentDrawer = ({
                 onCancel={() => setIsHistoryModalOpen(false)}
                 setIsHistoryModalOpen={setIsHistoryModalOpen}
                 selectedEnvironment={selectedEnvironment}
+                variant={variant}
             />
         </>
     )
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 1957082e3..079f811ca 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -1,7 +1,7 @@
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {MoreOutlined, SwapOutlined} from "@ant-design/icons"
-import {CloudArrowUp, GearSix, Note, PencilLine, Rocket, Trash} from "@phosphor-icons/react"
+import {CloudArrowUp, Copy, GearSix, Note, PencilLine, Rocket, Trash} from "@phosphor-icons/react"
 import {Button, Dropdown, message, Space, Spin, Table, Tag, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import Link from "next/link"
@@ -209,6 +209,14 @@ const VariantsOverview = ({
                                         setSelectedVariant(record)
                                     },
                                 },
+                                {
+                                    key: "clone",
+                                    label: "Clone",
+                                    icon: <Copy size={16} />,
+                                    onClick: (e) => {
+                                        e.domEvent.stopPropagation()
+                                    },
+                                },
                                 {type: "divider"},
                                 // {
                                 //     key: "rename",

From 3f2ffa58372a1654a709061dec408f617838211f Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 18 Aug 2024 18:38:45 +0100
Subject: [PATCH 086/117] fix(frontend): confirm deployment modal helper text

---
 .../pages/overview/deployments/ChangeVariantModal.tsx    | 9 +++++++--
 .../pages/overview/deployments/DeploymentModal.tsx       | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
index 89ef2aadf..88010adc5 100644
--- a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
@@ -1,6 +1,6 @@
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {CaretRight} from "@phosphor-icons/react"
-import {Input, Modal, Table, Tag, Typography} from "antd"
+import {Badge, Input, Modal, Table, Tag, Typography} from "antd"
 import React, {SetStateAction, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
 import DeploymentModal from "./DeploymentModal"
@@ -85,7 +85,12 @@ const ChangeVariantModal = ({
                                                 <div>{record.variantName}</div>
 
                                                 <div className="flex items-center">
-                                                    <Tag>{splitVariantId(record.variantId)}</Tag>
+                                                    <Tag>
+                                                        <Badge
+                                                            color="blue"
+                                                            text={splitVariantId(record.variantId)}
+                                                        />
+                                                    </Tag>
                                                     <CaretRight />
                                                 </div>
                                             </div>
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx
index be182108a..297c80f3e 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx
@@ -81,7 +81,7 @@ const DeploymentModal = ({
 
                 <div className="flex flex-col gap-4">
                     <div>
-                        You are about to deploy {selectedEnvironment.deployed_variant_name} to{" "}
+                        You are about to deploy {selectedVariant.variantName} to{" "}
                         {selectedEnvironment.name} environment. This will overwrite the existing
                         configuration. This change will affect all future calls to this environment.
                     </div>

From c86e2d5d5ff99f074d5f9ad734bf8cb463f9d8b1 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Sun, 18 Aug 2024 21:09:03 +0100
Subject: [PATCH 087/117] design(frontend): added Editor diff to compare
 variants

---
 .../variants/VariantComparisonModal.tsx       | 23 ++++++++++++++
 .../overview/variants/VariantsOverview.tsx    | 30 +++++++++++++++++--
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 agenta-web/src/components/pages/overview/variants/VariantComparisonModal.tsx

diff --git a/agenta-web/src/components/pages/overview/variants/VariantComparisonModal.tsx b/agenta-web/src/components/pages/overview/variants/VariantComparisonModal.tsx
new file mode 100644
index 000000000..7ba86d912
--- /dev/null
+++ b/agenta-web/src/components/pages/overview/variants/VariantComparisonModal.tsx
@@ -0,0 +1,23 @@
+import {Variant} from "@/lib/Types"
+import {Modal} from "antd"
+import React from "react"
+import {DiffEditor} from "@monaco-editor/react"
+
+type VariantComparisonModalProps = {
+    compareVariantList: Variant[]
+} & React.ComponentProps<typeof Modal>
+
+const VariantComparisonModal = ({compareVariantList, ...props}: VariantComparisonModalProps) => {
+    return (
+        <Modal centered width={1200} footer={null} {...props}>
+            <DiffEditor
+                language="json"
+                original={JSON.stringify(compareVariantList[0].parameters, null, 2)}
+                modified={JSON.stringify(compareVariantList[1].parameters, null, 2)}
+                height="50vh"
+            />
+        </Modal>
+    )
+}
+
+export default VariantComparisonModal
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 079f811ca..7f3e13245 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -6,7 +6,7 @@ import {Button, Dropdown, message, Space, Spin, Table, Tag, Typography} from "an
 import {ColumnsType} from "antd/es/table"
 import Link from "next/link"
 import {useRouter} from "next/router"
-import React, {useState} from "react"
+import React, {useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
 import VariantDrawer from "./VariantDrawer"
 import {useQueryParam} from "@/hooks/useQuery"
@@ -15,6 +15,7 @@ import {checkIfResourceValidForDeletion} from "@/lib/helpers/evaluate"
 import {deleteSingleVariant} from "@/services/playground/api"
 import DeleteEvaluationModal from "@/components/DeleteEvaluationModal/DeleteEvaluationModal"
 import DeployVariantModal from "./DeployVariantModal"
+import VariantComparisonModal from "./VariantComparisonModal"
 
 const {Title} = Typography
 
@@ -66,6 +67,17 @@ const VariantsOverview = ({
     const [selectedVariant, setSelectedVariant] = useState<Variant>()
     const [isDeleteEvalModalOpen, setIsDeleteEvalModalOpen] = useState(false)
     const [isDeployVariantModalOpen, setIsDeployVariantModalOpen] = useState(false)
+    const [isComparisonModalOpen, setIsComparisonModalOpen] = useState(false)
+
+    const selectedVariantsToCompare = useMemo(() => {
+        const variants = variantList.filter((variant) =>
+            selectedRowKeys.includes(variant.variantId),
+        )
+        return {
+            isCompareDisabled: variants.length !== 2,
+            compareVariantList: variants,
+        }
+    }, [selectedRowKeys])
 
     const rowSelection = {
         onChange: (selectedRowKeys: React.Key[]) => {
@@ -260,7 +272,13 @@ const VariantsOverview = ({
                     <Title>Variants</Title>
 
                     <Space>
-                        <Button size="small" type="link" icon={<SwapOutlined />}>
+                        <Button
+                            size="small"
+                            type="link"
+                            disabled={selectedVariantsToCompare.isCompareDisabled}
+                            icon={<SwapOutlined />}
+                            onClick={() => setIsComparisonModalOpen(true)}
+                        >
                             Compare variants
                         </Button>
                         <Link href={`/apps/${appId}/playground`} className={classes.titleLink}>
@@ -331,6 +349,14 @@ const VariantsOverview = ({
                     loadEnvironments={loadEnvironments}
                 />
             )}
+
+            {!selectedVariantsToCompare.isCompareDisabled && (
+                <VariantComparisonModal
+                    open={isComparisonModalOpen}
+                    onCancel={() => setIsComparisonModalOpen(false)}
+                    compareVariantList={selectedVariantsToCompare.compareVariantList}
+                />
+            )}
         </>
     )
 }

From f50343010570a1e33a037d58708c63438d17edc8 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 19 Aug 2024 10:19:03 +0100
Subject: [PATCH 088/117] updated antd theme tokens

---
 .../src/styles/tokens/antd-themeConfig.json   | 227 +++++++++---------
 1 file changed, 113 insertions(+), 114 deletions(-)

diff --git a/agenta-web/src/styles/tokens/antd-themeConfig.json b/agenta-web/src/styles/tokens/antd-themeConfig.json
index 34ee97e37..09ad71467 100644
--- a/agenta-web/src/styles/tokens/antd-themeConfig.json
+++ b/agenta-web/src/styles/tokens/antd-themeConfig.json
@@ -216,10 +216,10 @@
         "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
         "controlOutline": "rgba(5, 145, 255, 0.1)",
         "controlTmpOutline": "rgba(0, 0, 0, 0.02)",
-        "borderRadius": 6,
-        "borderRadiusLG": 8,
-        "borderRadiusSM": 4,
-        "borderRadiusXS": 2,
+        "borderRadius": 8,
+        "borderRadiusLG": 10,
+        "borderRadiusSM": 6,
+        "borderRadiusXS": 4,
         "sizeStep": 4,
         "sizeUnit": 4,
         "controlInteractiveSize": 16,
@@ -301,9 +301,9 @@
         "lineHeightLG": 1.5714285714285714,
         "lineHeightSM": 1.8,
         "fontSizeIcon": 12,
-        "fontWeightStrong": 600,
+        "fontWeightStrong": 700,
         "colorFillAlterSolid": "#fafafa",
-        "fontWeightNormal": 400,
+        "fontWeightNormal": 500,
         "zinc.1": "#fafafa",
         "zinc.2": "#f4f4f5",
         "zinc.3": "#e4e4e7",
@@ -314,7 +314,7 @@
         "zinc.8": "#3f3f46",
         "zinc.9": "#27272a",
         "zinc.10": "#18181b",
-        "fontWeightMedium": 500
+        "fontWeightMedium": 600
     },
     "components": {
         "Input": {
@@ -341,9 +341,9 @@
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
             "colorWarningBorderHover": "#ffd666",
             "colorWarning": "#faad14",
@@ -400,7 +400,7 @@
             "controlItemBgActive": "#e6f4ff",
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusLG": 8,
+            "borderRadiusLG": 10,
             "colorWarning": "#faad14",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -428,10 +428,10 @@
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusXS": 2,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusXS": 4,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorTextLabel": "rgba(0, 0, 0, 0.65)",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -480,8 +480,8 @@
             "timeColumnWidth": 56,
             "timeColumnHeight": 224,
             "timeCellHeight": 28,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
             "sizePopupArrow": 16,
             "paddingXXS": 4,
             "paddingXS": 8,
@@ -493,7 +493,7 @@
             "lineWidth": 1,
             "lineHeightLG": 1.5714285714285714,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSizeLG": 14,
             "fontSize": 12,
             "controlPaddingHorizontalSM": 8,
@@ -505,8 +505,8 @@
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusXS": 2,
-            "borderRadius": 6,
+            "borderRadiusXS": 4,
+            "borderRadius": 8,
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
             "colorWarning": "#faad14",
             "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
@@ -612,8 +612,8 @@
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
@@ -651,7 +651,7 @@
             "margin": 16,
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 500,
+            "fontWeightStrong": 600,
             "fontSizeSM": 10,
             "fontSizeIcon": 12,
             "fontSize": 12,
@@ -660,8 +660,8 @@
             "controlItemBgActive": "#e6f4ff",
             "controlInteractiveSize": 16,
             "controlHeight": 28,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
@@ -682,7 +682,7 @@
             "rowSelectedHoverBg": "#bae0ff",
             "headerFilterHoverBg": "#f0f0f0",
             "headerColor": "rgba(0, 0, 0, 0.88)",
-            "headerBorderRadius": 8,
+            "headerBorderRadius": 10,
             "footerColor": "rgba(0, 0, 0, 0.88)",
             "filterDropdownMenuBg": "#ffffff",
             "filterDropdownBg": "#ffffff",
@@ -721,7 +721,7 @@
             "lineWidth": 1,
             "lineHeightSM": 1.8,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSizeSM": 10,
             "fontSizeLG": 14,
             "fontSizeIcon": 12,
@@ -730,7 +730,7 @@
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlItemBgActive": "#e6f4ff",
             "controlHeightLG": 34,
-            "borderRadiusSM": 4,
+            "borderRadiusSM": 6,
             "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
             "colorTextLightSolid": "#ffffff",
             "colorTextLabel": "rgba(0, 0, 0, 0.65)",
@@ -781,7 +781,7 @@
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusXS": 2,
+            "borderRadiusXS": 4,
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -836,9 +836,9 @@
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorWhite": "#ffffff",
             "colorTextLightSolid": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
@@ -871,11 +871,11 @@
             "marginXS": 8,
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSize": 12,
             "controlHeight": 28,
-            "borderRadiusXS": 2,
-            "borderRadiusLG": 8,
+            "borderRadiusXS": 4,
+            "borderRadiusLG": 10,
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
@@ -895,8 +895,8 @@
             "fontSizeLG": 14,
             "fontSize": 12,
             "controlHeightLG": 34,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
             "colorWarning": "#faad14",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -917,8 +917,8 @@
             "lineHeight": 1.6666666666666667,
             "fontSize": 12,
             "controlHeight": 28,
-            "borderRadiusXS": 2,
-            "borderRadius": 6,
+            "borderRadiusXS": 4,
+            "borderRadius": 8,
             "colorTextLightSolid": "#ffffff",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorBgSpotlight": "rgba(0, 0, 0, 0.85)",
@@ -946,7 +946,7 @@
             "controlItemBgActive": "#e6f4ff",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
-            "borderRadius": 6,
+            "borderRadius": 8,
             "colorSplit": "rgba(0, 0, 0, 0.06)",
             "colorPrimaryBorder": "#91caff",
             "colorPrimary": "#1677ff",
@@ -956,7 +956,7 @@
             "colorError": "#ff4d4f",
             "colorBgElevated": "#ffffff",
             "colorBgContainer": "#ffffff",
-            "subMenuItemBorderRadius": 4,
+            "subMenuItemBorderRadius": 6,
             "popupBg": "#ffffff",
             "itemSelectedColor": "rgba(0, 0, 0, 0.88)",
             "itemSelectedBg": "rgba(0, 0, 0, 0.06)",
@@ -965,7 +965,7 @@
             "itemHeight": 28,
             "itemDisabledColor": "rgba(0, 0, 0, 0.25)",
             "itemColor": "rgba(0, 0, 0, 0.65)",
-            "itemBorderRadius": 8,
+            "itemBorderRadius": 10,
             "itemBg": "#ffffff",
             "iconSize": 12,
             "horizontalItemSelectedColor": "#1677ff",
@@ -1011,9 +1011,9 @@
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorWarningBorderHover": "#ffd666",
             "colorWarning": "#faad14",
             "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
@@ -1072,9 +1072,9 @@
             "lineWidth": 1,
             "lineHeightLG": 1.5714285714285714,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSize": 12,
-            "borderRadiusLG": 8,
+            "borderRadiusLG": 10,
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -1114,7 +1114,7 @@
             "lineWidthBold": 2,
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSizeLG": 14,
             "fontSizeIcon": 12,
             "fontSize": 12,
@@ -1122,7 +1122,7 @@
             "controlItemBgActive": "#e6f4ff",
             "controlInteractiveSize": 16,
             "controlHeight": 28,
-            "borderRadiusSM": 4,
+            "borderRadiusSM": 6,
             "colorWhite": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
@@ -1136,7 +1136,7 @@
             "colorBgContainer": "#ffffff",
             "optionSelectedBg": "#e6f4ff",
             "menuPadding": 4,
-            "optionSelectedFontWeight": 600,
+            "optionSelectedFontWeight": 700,
             "fontFamily": "Inter"
         },
         "Calendar": {
@@ -1154,15 +1154,15 @@
             "lineWidth": 1,
             "lineHeightSM": 1.8,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSizeSM": 10,
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlItemBgActive": "#e6f4ff",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
             "colorTextLightSolid": "#ffffff",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
@@ -1201,9 +1201,9 @@
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorTextLightSolid": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -1255,7 +1255,7 @@
             "paddingXS": 8,
             "marginXS": 8,
             "lineWidth": 1,
-            "borderRadiusSM": 4,
+            "borderRadiusSM": 6,
             "fontSizeSM": 10,
             "fontSize": 12,
             "colorWarning": "#faad14",
@@ -1321,9 +1321,9 @@
             "fontSizeLG": 14,
             "fontSizeHeading3": 20,
             "fontSize": 12,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
             "colorTextLightSolid": "#ffffff",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -1342,12 +1342,12 @@
             "padding": 16,
             "marginXS": 8,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSize": 12,
-            "borderRadiusXS": 2,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusXS": 4,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorWhite": "#ffffff",
             "colorTextLightSolid": "#ffffff",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -1370,7 +1370,7 @@
             "lineHeight": 1.6666666666666667,
             "fontSize": 12,
             "controlHeight": 28,
-            "borderRadiusLG": 8,
+            "borderRadiusLG": 10,
             "colorWhite": "#ffffff",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
@@ -1392,7 +1392,7 @@
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlHeightLG": 34,
-            "borderRadiusLG": 8,
+            "borderRadiusLG": 10,
             "colorTextLightSolid": "#ffffff",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
@@ -1421,7 +1421,7 @@
             "lineHeightHeading2": 1.3076923076923077,
             "lineHeightHeading1": 1.25,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSizeHeading5": 14,
             "fontSizeHeading4": 16,
             "fontSizeHeading3": 20,
@@ -1456,8 +1456,8 @@
             "controlItemBgActive": "#e6f4ff",
             "controlInteractiveSize": 16,
             "controlHeightSM": 24,
-            "borderRadiusSM": 4,
-            "borderRadius": 6,
+            "borderRadiusSM": 6,
+            "borderRadius": 8,
             "colorWhite": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -1475,7 +1475,7 @@
         },
         "Tree": {
             "paddingSM": 12,
-            "borderRadiusLG": 8,
+            "borderRadiusLG": 10,
             "paddingXS": 8,
             "marginXXS": 4,
             "marginXS": 8,
@@ -1489,8 +1489,8 @@
             "controlItemBgActive": "#e6f4ff",
             "controlInteractiveSize": 16,
             "controlHeightSM": 24,
-            "borderRadiusSM": 4,
-            "borderRadius": 6,
+            "borderRadiusSM": 6,
+            "borderRadius": 8,
             "colorWhite": "#ffffff",
             "colorTextLightSolid": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
@@ -1517,7 +1517,7 @@
             "fontSizeSM": 12,
             "fontSizeIcon": 12,
             "fontSize": 12,
-            "borderRadiusSM": 4,
+            "borderRadiusSM": 6,
             "colorTextLightSolid": "#ffffff",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
@@ -1563,7 +1563,7 @@
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusSM": 4,
+            "borderRadiusSM": 6,
             "colorFillContent": "rgba(0, 0, 0, 0.06)",
             "colorFill": "rgba(0, 0, 0, 0.15)"
         },
@@ -1573,7 +1573,7 @@
             "paddingSM": 12,
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSizeSM": 10,
             "fontSizeLG": 14,
             "fontSizeIcon": 12,
@@ -1588,10 +1588,10 @@
             "controlHeightSM": 28,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusXS": 2,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusXS": 4,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
             "colorWarningHover": "#ffd666",
             "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
@@ -1626,8 +1626,7 @@
             "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
             "multipleItemBg": "rgba(0, 0, 0, 0.06)",
             "clearBg": "#ffffff",
-            "optionFontSize": 12,
-            "optionSelectedFontWeight": 600,
+            "optionSelectedFontWeight": 700,
             "fontFamily": "Inter"
         },
         "Result": {
@@ -1671,7 +1670,7 @@
         "Popconfirm": {
             "marginXXS": 4,
             "marginXS": 8,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSize": 12,
             "colorWarning": "#faad14",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
@@ -1690,7 +1689,7 @@
             "lineWidth": 1,
             "lineHeightLG": 1.5714285714285714,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSizeSM": 10,
             "fontSizeLG": 14,
             "fontSize": 12,
@@ -1702,9 +1701,9 @@
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
             "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
@@ -1744,12 +1743,12 @@
             "lineWidth": 1,
             "lineHeightHeading5": 1.5714285714285714,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSizeLG": 14,
             "fontSizeHeading5": 14,
             "fontSize": 12,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
             "colorWarning": "#faad14",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -1775,7 +1774,7 @@
             "fontSizeLG": 14,
             "fontSize": 12,
             "controlHeightLG": 34,
-            "borderRadiusLG": 8,
+            "borderRadiusLG": 10,
             "colorWarning": "#faad14",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSuccess": "#52c41a",
@@ -1809,7 +1808,7 @@
             "fontSize": 12,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusLG": 8,
+            "borderRadiusLG": 10,
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -1835,8 +1834,8 @@
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
             "controlHeightLG": 34,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
             "colorTextLightSolid": "#ffffff",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
@@ -1868,9 +1867,9 @@
             "controlItemBgActiveHover": "#bae0ff",
             "controlItemBgActive": "#e6f4ff",
             "controlHeight": 28,
-            "borderRadiusXS": 2,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
+            "borderRadiusXS": 4,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
             "colorTextLightSolid": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
@@ -1890,7 +1889,7 @@
             "marginSM": 12,
             "lineWidth": 1,
             "lineHeightLG": 1.5714285714285714,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSizeLG": 14,
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
@@ -1924,11 +1923,11 @@
             "lineHeightSM": 1.8,
             "lineHeightLG": 1.5714285714285714,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSizeSM": 10,
             "fontSizeLG": 14,
             "fontSize": 12,
-            "borderRadiusLG": 8,
+            "borderRadiusLG": 10,
             "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
             "colorTextSecondary": "rgba(0, 0, 0, 0.65)",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -1951,7 +1950,7 @@
             "lineWidth": 1,
             "lineHeightLG": 1.5714285714285714,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 700,
             "fontSizeLG": 14,
             "fontSize": 12,
             "controlPaddingHorizontalSM": 8,
@@ -1963,10 +1962,10 @@
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusXS": 2,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusXS": 4,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
             "colorWarningHover": "#ffd666",
             "colorWarning": "#faad14",
@@ -2052,7 +2051,7 @@
             "fontSizeLG": 14,
             "fontSizeIcon": 12,
             "fontSize": 12,
-            "borderRadiusLG": 8,
+            "borderRadiusLG": 10,
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -2076,7 +2075,7 @@
             "fontSizeLG": 14,
             "fontSize": 12,
             "controlInteractiveSize": 16,
-            "borderRadiusSM": 4,
+            "borderRadiusSM": 6,
             "colorWhite": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
@@ -2096,7 +2095,7 @@
             "lineHeight": 1.6666666666666667,
             "fontSizeIcon": 12,
             "fontSize": 12,
-            "borderRadiusSM": 4,
+            "borderRadiusSM": 6,
             "colorPrimaryBorder": "#91caff",
             "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
             "separatorColor": "rgba(0, 0, 0, 0.45)",
@@ -2134,7 +2133,7 @@
             "fontSizeIcon": 12,
             "fontSizeHeading3": 20,
             "fontSize": 12,
-            "borderRadiusLG": 8,
+            "borderRadiusLG": 10,
             "colorWarningBorder": "#ffe58f",
             "colorWarningBg": "#fffbe6",
             "colorWarning": "#faad14",
@@ -2175,10 +2174,10 @@
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "borderRadiusXS": 2,
-            "borderRadiusSM": 4,
-            "borderRadiusLG": 8,
-            "borderRadius": 6,
+            "borderRadiusXS": 4,
+            "borderRadiusSM": 6,
+            "borderRadiusLG": 10,
+            "borderRadius": 8,
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
             "colorWarningHover": "#ffd666",
             "colorWarning": "#faad14",
@@ -2225,7 +2224,7 @@
             "triggerHeight": 48,
             "zeroTriggerHeight": 34,
             "zeroTriggerWidth": 34,
-            "borderRadius": 6,
+            "borderRadius": 8,
             "fontSize": 12,
             "fontSizeXL": 18
         },

From 8a34939f07d302da1df55bd422ed3896042d8af7 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 19 Aug 2024 11:44:00 +0100
Subject: [PATCH 089/117] changed variant overview table font weight to 500

---
 .../src/components/pages/overview/variants/VariantsOverview.tsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 7f3e13245..117de23da 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -32,6 +32,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         display: "flex",
         flexDirection: "column",
         gap: theme.paddingXS,
+        fontWeight: 500,
         "& > div h1.ant-typography": {
             fontSize: theme.fontSize,
         },

From 9129240e2c39eb547b587e3ccaff9fe24f504b69 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 19 Aug 2024 13:30:33 +0100
Subject: [PATCH 090/117] commented out variant clone feature

---
 .../pages/overview/variants/VariantsOverview.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 117de23da..96502e59b 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -222,14 +222,14 @@ const VariantsOverview = ({
                                         setSelectedVariant(record)
                                     },
                                 },
-                                {
-                                    key: "clone",
-                                    label: "Clone",
-                                    icon: <Copy size={16} />,
-                                    onClick: (e) => {
-                                        e.domEvent.stopPropagation()
-                                    },
-                                },
+                                // {
+                                //     key: "clone",
+                                //     label: "Clone",
+                                //     icon: <Copy size={16} />,
+                                //     onClick: (e) => {
+                                //         e.domEvent.stopPropagation()
+                                //     },
+                                // },
                                 {type: "divider"},
                                 // {
                                 //     key: "rename",

From bd70fff049c9c4ae9f8640796480a569a6d558f6 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 19 Aug 2024 16:15:53 +0100
Subject: [PATCH 091/117] fix(frontend): updated antd theme tokens, removed
 variant table in overview font weight and replaced hardcoded font weight of
 500 to fontWeightMedium from theme config file

---
 .../src/components/AppSelector/AppCard.tsx    |  2 +-
 .../components/AppSelector/AppSelector.tsx    |  8 ++--
 .../DeleteEvaluationModal.tsx                 |  2 +-
 agenta-web/src/components/Sidebar/Sidebar.tsx |  3 ++
 .../overview/deployments/DeploymentDrawer.tsx |  2 +-
 .../overview/deployments/DeploymentModal.tsx  |  2 +-
 .../pages/overview/variants/VariantDrawer.tsx |  6 +--
 .../overview/variants/VariantsOverview.tsx    |  1 -
 agenta-web/src/lib/Types.ts                   |  2 +-
 .../pages/apps/[app_id]/overview/index.tsx    |  2 +-
 .../src/styles/tokens/antd-themeConfig.json   | 43 +++++++++----------
 11 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/agenta-web/src/components/AppSelector/AppCard.tsx b/agenta-web/src/components/AppSelector/AppCard.tsx
index 89588f617..96f1912ab 100644
--- a/agenta-web/src/components/AppSelector/AppCard.tsx
+++ b/agenta-web/src/components/AppSelector/AppCard.tsx
@@ -26,7 +26,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
 
             "& .ant-card-head-title": {
                 fontSize: theme.fontSizeLG,
-                fontWeight: 500,
+                fontWeight: theme.fontWeightMedium,
             },
         },
         "& > .ant-card-body": {
diff --git a/agenta-web/src/components/AppSelector/AppSelector.tsx b/agenta-web/src/components/AppSelector/AppSelector.tsx
index 10c1f642d..5daac3a0c 100644
--- a/agenta-web/src/components/AppSelector/AppSelector.tsx
+++ b/agenta-web/src/components/AppSelector/AppSelector.tsx
@@ -2,7 +2,7 @@ import {useState, useEffect, useMemo} from "react"
 import {PlusOutlined} from "@ant-design/icons"
 import {Input, Modal, ConfigProvider, theme, Button, notification} from "antd"
 import AppCard from "./AppCard"
-import {Template, GenericObject, StyleProps} from "@/lib/Types"
+import {Template, GenericObject, StyleProps, JSSTheme} from "@/lib/Types"
 import {useAppTheme} from "../Layout/ThemeContextProvider"
 import TipsAndFeatures from "./TipsAndFeatures"
 import Welcome from "./Welcome"
@@ -22,7 +22,7 @@ import {LlmProvider, getAllProviderLlmKeys} from "@/lib/helpers/llmProviders"
 import ResultComponent from "../ResultComponent/ResultComponent"
 import {dynamicContext} from "@/lib/helpers/dynamic"
 
-const useStyles = createUseStyles({
+const useStyles = createUseStyles((theme: JSSTheme) => ({
     container: ({themeMode}: StyleProps) => ({
         marginTop: "24px",
         width: "100%",
@@ -66,7 +66,7 @@ const useStyles = createUseStyles({
     },
     title: {
         fontSize: 16,
-        fontWeight: 500,
+        fontWeight: theme.fontWeightMedium,
         lineHeight: "24px",
     },
     modal: {
@@ -84,7 +84,7 @@ const useStyles = createUseStyles({
     modalBtn: {
         alignSelf: "flex-end",
     },
-})
+}))
 
 const timeout = isDemo() ? 60000 : 30000
 
diff --git a/agenta-web/src/components/DeleteEvaluationModal/DeleteEvaluationModal.tsx b/agenta-web/src/components/DeleteEvaluationModal/DeleteEvaluationModal.tsx
index afde209da..88eb09811 100644
--- a/agenta-web/src/components/DeleteEvaluationModal/DeleteEvaluationModal.tsx
+++ b/agenta-web/src/components/DeleteEvaluationModal/DeleteEvaluationModal.tsx
@@ -20,7 +20,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     delText: {
         color: theme.colorPrimary,
         fontSize: theme.fontSizeLG,
-        fontWeight: 500,
+        fontWeight: theme.fontWeightMedium,
         lineHeight: theme.lineHeightLG,
         textTransform: "capitalize",
     },
diff --git a/agenta-web/src/components/Sidebar/Sidebar.tsx b/agenta-web/src/components/Sidebar/Sidebar.tsx
index d014a8fb4..9c8178829 100644
--- a/agenta-web/src/components/Sidebar/Sidebar.tsx
+++ b/agenta-web/src/components/Sidebar/Sidebar.tsx
@@ -79,6 +79,9 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         maxHeight: "calc(100vh - 390px)",
         overflowY: "auto",
         position: "relative",
+        "& .ant-menu-item-selected": {
+            fontWeight: theme.fontWeightMedium,
+        },
     },
     menuContainer2: {
         borderRight: "0 !important",
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
index 450ece39a..f23db98c2 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -55,7 +55,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         justifyContent: "space-between",
         "& h1.ant-typography": {
             fontSize: theme.fontSizeHeading5,
-            fontWeight: 500,
+            fontWeight: theme.fontWeightMedium,
             textTransform: "capitalize",
         },
     },
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx
index 297c80f3e..381e71d24 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentModal.tsx
@@ -31,7 +31,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             color: theme.colorPrimary,
             fontSize: theme.fontSizeLG,
             lineHeight: theme.lineHeightLG,
-            fontWeight: 500,
+            fontWeight: theme.fontWeightMedium,
         },
     },
 }))
diff --git a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
index 6cd189267..f6d7cd409 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
@@ -25,13 +25,13 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         "& h1.ant-typography": {
             fontSize: theme.fontSizeHeading5,
             lineHeight: theme.lineHeightHeading5,
-            fontWeight: 500,
+            fontWeight: theme.fontWeightMedium,
         },
     },
     subTitle: {
         fontSize: theme.fontSize,
         lineHeight: theme.lineHeight,
-        fontWeight: 500,
+        fontWeight: theme.fontWeightMedium,
     },
     resultTag: {
         minWidth: 150,
@@ -58,7 +58,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
     },
     noParams: {
         color: theme.colorTextDescription,
-        fontWeight: 500,
+        fontWeight: theme.fontWeightMedium,
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 96502e59b..c5daf5963 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -32,7 +32,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         display: "flex",
         flexDirection: "column",
         gap: theme.paddingXS,
-        fontWeight: 500,
         "& > div h1.ant-typography": {
             fontSize: theme.fontSize,
         },
diff --git a/agenta-web/src/lib/Types.ts b/agenta-web/src/lib/Types.ts
index 48bbac14c..fe8b331ea 100644
--- a/agenta-web/src/lib/Types.ts
+++ b/agenta-web/src/lib/Types.ts
@@ -2,7 +2,7 @@ import {StaticImageData} from "next/image"
 import {EvaluationFlow, EvaluationType} from "./enums"
 import {GlobalToken} from "antd"
 
-export type JSSTheme = GlobalToken & {isDark: boolean}
+export type JSSTheme = GlobalToken & {isDark: boolean; fontWeightMedium: number}
 
 export interface testset {
     _id: string
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 87de66213..d54fbaf81 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -32,7 +32,7 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         gap: 40,
         "& h1": {
             fontSize: theme.fontSizeHeading4,
-            fontWeight: 500,
+            fontWeight: theme.fontWeightMedium,
             lineHeight: theme.lineHeightHeading4,
         },
     },
diff --git a/agenta-web/src/styles/tokens/antd-themeConfig.json b/agenta-web/src/styles/tokens/antd-themeConfig.json
index 09ad71467..34de03b81 100644
--- a/agenta-web/src/styles/tokens/antd-themeConfig.json
+++ b/agenta-web/src/styles/tokens/antd-themeConfig.json
@@ -301,9 +301,9 @@
         "lineHeightLG": 1.5714285714285714,
         "lineHeightSM": 1.8,
         "fontSizeIcon": 12,
-        "fontWeightStrong": 700,
+        "fontWeightStrong": 600,
         "colorFillAlterSolid": "#fafafa",
-        "fontWeightNormal": 500,
+        "fontWeightNormal": 400,
         "zinc.1": "#fafafa",
         "zinc.2": "#f4f4f5",
         "zinc.3": "#e4e4e7",
@@ -314,7 +314,7 @@
         "zinc.8": "#3f3f46",
         "zinc.9": "#27272a",
         "zinc.10": "#18181b",
-        "fontWeightMedium": 600
+        "fontWeightMedium": 500
     },
     "components": {
         "Input": {
@@ -493,7 +493,7 @@
             "lineWidth": 1,
             "lineHeightLG": 1.5714285714285714,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSizeLG": 14,
             "fontSize": 12,
             "controlPaddingHorizontalSM": 8,
@@ -651,7 +651,7 @@
             "margin": 16,
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 600,
+            "fontWeightStrong": 500,
             "fontSizeSM": 10,
             "fontSizeIcon": 12,
             "fontSize": 12,
@@ -721,7 +721,7 @@
             "lineWidth": 1,
             "lineHeightSM": 1.8,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSizeSM": 10,
             "fontSizeLG": 14,
             "fontSizeIcon": 12,
@@ -871,7 +871,7 @@
             "marginXS": 8,
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSize": 12,
             "controlHeight": 28,
             "borderRadiusXS": 4,
@@ -1072,7 +1072,7 @@
             "lineWidth": 1,
             "lineHeightLG": 1.5714285714285714,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSize": 12,
             "borderRadiusLG": 10,
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
@@ -1114,7 +1114,7 @@
             "lineWidthBold": 2,
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSizeLG": 14,
             "fontSizeIcon": 12,
             "fontSize": 12,
@@ -1136,7 +1136,7 @@
             "colorBgContainer": "#ffffff",
             "optionSelectedBg": "#e6f4ff",
             "menuPadding": 4,
-            "optionSelectedFontWeight": 700,
+            "optionSelectedFontWeight": 600,
             "fontFamily": "Inter"
         },
         "Calendar": {
@@ -1154,7 +1154,7 @@
             "lineWidth": 1,
             "lineHeightSM": 1.8,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSizeSM": 10,
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
@@ -1342,7 +1342,7 @@
             "padding": 16,
             "marginXS": 8,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSize": 12,
             "borderRadiusXS": 4,
             "borderRadiusSM": 6,
@@ -1421,7 +1421,7 @@
             "lineHeightHeading2": 1.3076923076923077,
             "lineHeightHeading1": 1.25,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSizeHeading5": 14,
             "fontSizeHeading4": 16,
             "fontSizeHeading3": 20,
@@ -1573,7 +1573,7 @@
             "paddingSM": 12,
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSizeSM": 10,
             "fontSizeLG": 14,
             "fontSizeIcon": 12,
@@ -1615,7 +1615,6 @@
             "selectorBg": "#ffffff",
             "optionSelectedColor": "rgba(0, 0, 0, 0.88)",
             "optionSelectedBg": "#e6f4ff",
-            "optionLineHeight": 1.6,
             "optionHeight": 28,
             "optionActiveBg": "rgba(0, 0, 0, 0.04)",
             "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
@@ -1626,7 +1625,7 @@
             "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
             "multipleItemBg": "rgba(0, 0, 0, 0.06)",
             "clearBg": "#ffffff",
-            "optionSelectedFontWeight": 700,
+            "optionSelectedFontWeight": 600,
             "fontFamily": "Inter"
         },
         "Result": {
@@ -1670,7 +1669,7 @@
         "Popconfirm": {
             "marginXXS": 4,
             "marginXS": 8,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSize": 12,
             "colorWarning": "#faad14",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
@@ -1689,7 +1688,7 @@
             "lineWidth": 1,
             "lineHeightLG": 1.5714285714285714,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSizeSM": 10,
             "fontSizeLG": 14,
             "fontSize": 12,
@@ -1743,7 +1742,7 @@
             "lineWidth": 1,
             "lineHeightHeading5": 1.5714285714285714,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSizeLG": 14,
             "fontSizeHeading5": 14,
             "fontSize": 12,
@@ -1889,7 +1888,7 @@
             "marginSM": 12,
             "lineWidth": 1,
             "lineHeightLG": 1.5714285714285714,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSizeLG": 14,
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
@@ -1923,7 +1922,7 @@
             "lineHeightSM": 1.8,
             "lineHeightLG": 1.5714285714285714,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSizeSM": 10,
             "fontSizeLG": 14,
             "fontSize": 12,
@@ -1950,7 +1949,7 @@
             "lineWidth": 1,
             "lineHeightLG": 1.5714285714285714,
             "lineHeight": 1.6666666666666667,
-            "fontWeightStrong": 700,
+            "fontWeightStrong": 600,
             "fontSizeLG": 14,
             "fontSize": 12,
             "controlPaddingHorizontalSM": 8,

From f013dd59e4c564f7d03ca684e9f27221de6b6fbc Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 19 Aug 2024 19:05:45 +0100
Subject: [PATCH 092/117] updated antd tokens

---
 .../src/styles/tokens/antd-themeConfig.json   | 528 +++++++++---------
 1 file changed, 264 insertions(+), 264 deletions(-)

diff --git a/agenta-web/src/styles/tokens/antd-themeConfig.json b/agenta-web/src/styles/tokens/antd-themeConfig.json
index 34de03b81..fa522b81d 100644
--- a/agenta-web/src/styles/tokens/antd-themeConfig.json
+++ b/agenta-web/src/styles/tokens/antd-themeConfig.json
@@ -109,25 +109,25 @@
         "colorBorder": "#d9d9d9",
         "purple.10": "#120338",
         "colorBorderSecondary": "#f0f0f0",
-        "red.1": "#fff1f0",
+        "red.1": "#fbe7e7",
         "colorFill": "rgba(0, 0, 0, 0.15)",
-        "red.2": "#ffccc7",
+        "red.2": "#f7cfcf",
         "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
         "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
         "colorFillQuaternary": "rgba(0, 0, 0, 0.02)",
-        "red.3": "#ffa39e",
-        "red.4": "#ff7875",
+        "red.3": "#ef9f9f",
+        "red.4": "#e67070",
         "colorWhite": "#ffffff",
-        "red.5": "#ff4d4f",
+        "red.5": "#de4040",
         "colorBgBase": "#ffffff",
-        "red.6": "#f5222d",
+        "red.6": "#d61010",
         "colorTextBase": "#000000",
-        "red.7": "#cf1322",
-        "red.8": "#a8071a",
+        "red.7": "#ab0d0d",
+        "red.8": "#800a0a",
         "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
-        "red.9": "#820014",
+        "red.9": "#560606",
         "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
-        "red.10": "#5c0011",
+        "red.10": "#2b0303",
         "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
         "volcano.1": "#fff2e8",
         "colorBorderBg": "#ffffff",
@@ -155,41 +155,41 @@
         "yellow.8": "#ad8b00",
         "yellow.9": "#876800",
         "yellow.10": "#614700",
-        "colorPrimary": "#1677ff",
-        "colorSuccess": "#52c41a",
+        "colorPrimary": "#08979c",
+        "colorSuccess": "#389e0d",
         "colorWarning": "#faad14",
-        "colorInfo": "#1677ff",
-        "colorError": "#ff4d4f",
-        "colorLink": "#1677ff",
-        "colorErrorBg": "#fff2f0",
-        "colorErrorBgHover": "#fff1f0",
-        "colorErrorBorder": "#ffccc7",
-        "colorErrorBorderHover": "#ffa39e",
-        "colorErrorHover": "#ff7875",
-        "colorErrorActive": "#d9363e",
-        "colorErrorTextHover": "#ff7875",
-        "colorErrorText": "#ff4d4f",
-        "colorErrorTextActive": "#d9363e",
-        "colorLinkHover": "#4096ff",
-        "colorInfoBg": "#e6f4ff",
-        "colorInfoBgHover": "#bae0ff",
-        "colorInfoBorder": "#91caff",
-        "colorInfoBorderHover": "#69b1ff",
-        "colorInfoHover": "#4096ff",
-        "colorInfoActive": "#0958d9",
-        "colorInfoTextHover": "#4096ff",
-        "colorInfoText": "#1677ff",
-        "colorInfoTextActive": "#0958d9",
-        "colorLinkActive": "#0958d9",
-        "colorPrimaryBg": "#e6f4ff",
-        "colorPrimaryBgHover": "#bae0ff",
-        "colorPrimaryBorder": "#91caff",
-        "colorPrimaryBorderHover": "#69b1ff",
-        "colorPrimaryHover": "#4096ff",
-        "colorPrimaryActive": "#0958d9",
-        "colorPrimaryTextHover": "#4096ff",
-        "colorPrimaryText": "#1677ff",
-        "colorPrimaryTextActive": "#0958d9",
+        "colorInfo": "#08979c",
+        "colorError": "#d61010",
+        "colorLink": "#08979c",
+        "colorErrorBg": "#fbe7e7",
+        "colorErrorBgHover": "#f7cfcf",
+        "colorErrorBorder": "#ef9f9f",
+        "colorErrorBorderHover": "#e67070",
+        "colorErrorHover": "#de4040",
+        "colorErrorActive": "#ab0d0d",
+        "colorErrorTextHover": "#de4040",
+        "colorErrorText": "#d61010",
+        "colorErrorTextActive": "#ab0d0d",
+        "colorLinkHover": "#13c2c2",
+        "colorInfoBg": "#e6fffb",
+        "colorInfoBgHover": "#b5f5ec",
+        "colorInfoBorder": "#87e8de",
+        "colorInfoBorderHover": "#5cdbd3",
+        "colorInfoHover": "#13c2c2",
+        "colorInfoActive": "#006d75",
+        "colorInfoTextHover": "#36cfc9",
+        "colorInfoText": "#08979c",
+        "colorInfoTextActive": "#006d75",
+        "colorLinkActive": "#006d75",
+        "colorPrimaryBg": "#e6fffb",
+        "colorPrimaryBgHover": "#b5f5ec",
+        "colorPrimaryBorder": "#87e8de",
+        "colorPrimaryBorderHover": "#5cdbd3",
+        "colorPrimaryHover": "#13c2c2",
+        "colorPrimaryActive": "#006d75",
+        "colorPrimaryTextHover": "#36cfc9",
+        "colorPrimaryText": "#08979c",
+        "colorPrimaryTextActive": "#006d75",
         "colorSuccessBg": "#f6ffed",
         "colorSuccessBgHover": "#d9f7be",
         "colorSuccessBorder": "#b7eb8f",
@@ -197,8 +197,8 @@
         "colorSuccessHover": "#95de64",
         "colorSuccessActive": "#389e0d",
         "colorSuccessTextHover": "#73d13d",
-        "colorSuccessText": "#52c41a",
-        "colorSuccessTextActive": "#389e0d",
+        "colorSuccessText": "#389e0d",
+        "colorSuccessTextActive": "#237804",
         "colorWarningBg": "#fffbe6",
         "colorWarningBgHover": "#fff1b8",
         "colorWarningBorder": "#ffe58f",
@@ -208,11 +208,11 @@
         "colorWarningTextHover": "#ffc53d",
         "colorWarningText": "#faad14",
         "colorWarningTextActive": "#d48806",
-        "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+        "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
         "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
-        "controlItemBgActive": "#e6f4ff",
+        "controlItemBgActive": "#e6fffb",
         "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
-        "controlItemBgActiveHover": "#bae0ff",
+        "controlItemBgActiveHover": "#b5f5ec",
         "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
         "controlOutline": "rgba(5, 145, 255, 0.1)",
         "controlTmpOutline": "rgba(0, 0, 0, 0.02)",
@@ -353,27 +353,27 @@
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimary": "#1677ff",
+            "colorPrimary": "#08979c",
             "colorIconHover": "rgba(0, 0, 0, 0.88)",
             "colorIcon": "rgba(0, 0, 0, 0.45)",
             "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-            "colorErrorBorderHover": "#ffa39e",
-            "colorError": "#ff4d4f",
+            "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
+            "colorErrorBorderHover": "#e67070",
+            "colorError": "#d61010",
             "colorBorder": "#d9d9d9",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
-            "hoverBorderColor": "#4096ff",
+            "hoverBorderColor": "#13c2c2",
             "addonBg": "rgba(0, 0, 0, 0.02)",
-            "activeBorderColor": "#1677ff",
+            "activeBorderColor": "#08979c",
             "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
             "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-            "colorErrorBgHover": "#fff1f0",
-            "colorErrorBg": "#fff2f0",
+            "colorErrorBgHover": "#f7cfcf",
+            "colorErrorBg": "#fbe7e7",
             "colorWarningBg": "#fffbe6",
             "colorWarningBgHover": "#fff1b8",
             "colorWarningText": "#faad14",
-            "colorErrorText": "#ff4d4f",
+            "colorErrorText": "#d61010",
             "activeBg": "#ffffff",
             "hoverBg": "#ffffff",
             "inputFontSize": 12,
@@ -396,8 +396,8 @@
             "fontSizeIcon": 12,
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActiveHover": "#bae0ff",
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActiveHover": "#b5f5ec",
+            "controlItemBgActive": "#e6fffb",
             "controlHeightLG": 34,
             "controlHeight": 28,
             "borderRadiusLG": 10,
@@ -405,8 +405,8 @@
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorLinkHover": "#4096ff",
-            "colorError": "#ff4d4f",
+            "colorLinkHover": "#13c2c2",
+            "colorError": "#d61010",
             "colorBorder": "#d9d9d9",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
@@ -470,9 +470,9 @@
             "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
             "colorTextLightSolid": "#ffffff",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimary": "#08979c",
             "handleBg": "#ffffff",
             "fontFamily": "Inter"
         },
@@ -501,7 +501,7 @@
             "controlOutlineWidth": 2,
             "controlOutline": "rgba(5, 145, 255, 0.1)",
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActive": "#e6fffb",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
@@ -517,32 +517,32 @@
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimary": "#1677ff",
-            "colorLinkHover": "#4096ff",
-            "colorLinkActive": "#0958d9",
-            "colorLink": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimary": "#08979c",
+            "colorLinkHover": "#13c2c2",
+            "colorLinkActive": "#006d75",
+            "colorLink": "#08979c",
             "colorIconHover": "rgba(0, 0, 0, 0.88)",
             "colorIcon": "rgba(0, 0, 0, 0.45)",
             "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-            "colorError": "#ff4d4f",
+            "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
+            "colorError": "#d61010",
             "colorBorder": "#d9d9d9",
             "colorBgElevated": "#ffffff",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
-            "hoverBorderColor": "#4096ff",
+            "hoverBorderColor": "#13c2c2",
             "cellHoverBg": "rgba(0, 0, 0, 0.04)",
             "cellHeight": 24,
-            "activeBorderColor": "#1677ff",
+            "activeBorderColor": "#08979c",
             "paddingInline": 11,
             "paddingInlineLG": 11,
             "paddingInlineSM": 7,
             "activeBg": "#ffffff",
             "hoverBg": "#ffffff",
             "cellBgDisabled": "rgba(0, 0, 0, 0.04)",
-            "cellActiveWithRangeBg": "#e6f4ff",
+            "cellActiveWithRangeBg": "#e6fffb",
             "cellHoverWithRangeBg": "#c8dfff",
             "cellRangeBorderColor": "#7cb3ff",
             "multipleItemBg": "rgba(0, 0, 0, 0.06)",
@@ -582,9 +582,9 @@
             "controlHeightLG": 34,
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSuccess": "#52c41a",
-            "colorPrimary": "#1677ff",
-            "colorError": "#ff4d4f",
+            "colorSuccess": "#389e0d",
+            "colorPrimary": "#08979c",
+            "colorError": "#d61010",
             "colorBgContainer": "#ffffff",
             "tailColor": "rgba(0, 0, 0, 0.06)",
             "dotBg": "#ffffff",
@@ -618,19 +618,19 @@
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimaryActive": "#0958d9",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimaryActive": "#006d75",
+            "colorPrimary": "#08979c",
             "colorFillAlter": "rgba(0, 0, 0, 0.02)",
             "colorBorderSecondary": "#f0f0f0",
             "colorBorder": "#d9d9d9",
             "colorBgContainer": "#ffffff",
-            "itemSelectedColor": "#1677ff",
+            "itemSelectedColor": "#08979c",
             "itemHoverColor": "rgba(0, 0, 0, 0.88)",
             "itemColor": "rgba(0, 0, 0, 0.65)",
-            "itemActiveColor": "#0958d9",
-            "inkBarColor": "#1677ff",
+            "itemActiveColor": "#006d75",
+            "inkBarColor": "#08979c",
             "cardHeight": 34,
             "cardBg": "rgba(0, 0, 0, 0.02)",
             "titleFontSize": 12,
@@ -656,8 +656,8 @@
             "fontSizeIcon": 12,
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActiveHover": "#bae0ff",
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActiveHover": "#b5f5ec",
+            "controlItemBgActive": "#e6fffb",
             "controlInteractiveSize": 16,
             "controlHeight": 28,
             "borderRadiusLG": 10,
@@ -668,10 +668,10 @@
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimary": "#1677ff",
-            "colorLinkHover": "#4096ff",
-            "colorLinkActive": "#0958d9",
-            "colorLink": "#1677ff",
+            "colorPrimary": "#08979c",
+            "colorLinkHover": "#13c2c2",
+            "colorLinkActive": "#006d75",
+            "colorLink": "#08979c",
             "colorIconHover": "rgba(0, 0, 0, 0.88)",
             "colorIcon": "rgba(0, 0, 0, 0.45)",
             "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
@@ -679,7 +679,7 @@
             "colorFillAlter": "rgba(0, 0, 0, 0.02)",
             "colorBorderSecondary": "#f0f0f0",
             "colorBgContainer": "#ffffff",
-            "rowSelectedHoverBg": "#bae0ff",
+            "rowSelectedHoverBg": "#b5f5ec",
             "headerFilterHoverBg": "#f0f0f0",
             "headerColor": "rgba(0, 0, 0, 0.88)",
             "headerBorderRadius": 10,
@@ -728,7 +728,7 @@
             "fontSizeHeading3": 20,
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActive": "#e6fffb",
             "controlHeightLG": 34,
             "borderRadiusSM": 6,
             "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
@@ -738,10 +738,10 @@
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimary": "#08979c",
             "colorFillContent": "rgba(0, 0, 0, 0.06)",
-            "colorError": "#ff4d4f",
+            "colorError": "#d61010",
             "colorBorderSecondary": "#f0f0f0",
             "colorBorderBg": "#ffffff",
             "colorBgContainer": "#ffffff",
@@ -764,7 +764,7 @@
             "controlHeight": 28,
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimary": "#1677ff",
+            "colorPrimary": "#08979c",
             "colorBgContainer": "#ffffff",
             "dotSizeLG": 28,
             "fontFamily": "Inter"
@@ -785,9 +785,9 @@
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryBorderHover": "#69b1ff",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryBorderHover": "#5cdbd3",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimary": "#08979c",
             "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
             "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
             "colorFillContentHover": "rgba(0, 0, 0, 0.15)",
@@ -795,15 +795,15 @@
             "colorBgElevated": "#ffffff",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
-            "trackHoverBg": "#69b1ff",
+            "trackHoverBg": "#5cdbd3",
             "trackBgDisabled": "rgba(0, 0, 0, 0.04)",
-            "trackBg": "#91caff",
+            "trackBg": "#87e8de",
             "railHoverBg": "rgba(0, 0, 0, 0.06)",
             "railBg": "rgba(0, 0, 0, 0.04)",
-            "handleColor": "#91caff",
-            "handleActiveColor": "#1677ff",
+            "handleColor": "#87e8de",
+            "handleActiveColor": "#08979c",
             "dotBorderColor": "#f0f0f0",
-            "dotActiveBorderColor": "#91caff",
+            "dotActiveBorderColor": "#87e8de",
             "handleColorDisabled": "#bfbfbf",
             "fontFamily": "Inter"
         },
@@ -843,19 +843,19 @@
             "colorTextLightSolid": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimaryActive": "#0958d9",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimaryActive": "#006d75",
+            "colorPrimary": "#08979c",
             "colorBorder": "#d9d9d9",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
             "wrapperMarginInlineEnd": 8,
             "dotColorDisabled": "rgba(0, 0, 0, 0.25)",
-            "buttonSolidCheckedHoverBg": "#4096ff",
+            "buttonSolidCheckedHoverBg": "#13c2c2",
             "buttonSolidCheckedColor": "#ffffff",
-            "buttonSolidCheckedBg": "#1677ff",
-            "buttonSolidCheckedActiveBg": "#0958d9",
+            "buttonSolidCheckedBg": "#08979c",
+            "buttonSolidCheckedActiveBg": "#006d75",
             "buttonColor": "rgba(0, 0, 0, 0.88)",
             "buttonCheckedColorDisabled": "rgba(0, 0, 0, 0.25)",
             "buttonCheckedBgDisabled": "rgba(0, 0, 0, 0.15)",
@@ -900,11 +900,11 @@
             "colorWarning": "#faad14",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSuccess": "#52c41a",
-            "colorInfo": "#1677ff",
+            "colorSuccess": "#389e0d",
+            "colorInfo": "#08979c",
             "colorIconHover": "rgba(0, 0, 0, 0.88)",
             "colorIcon": "rgba(0, 0, 0, 0.45)",
-            "colorError": "#ff4d4f",
+            "colorError": "#d61010",
             "colorBgElevated": "#ffffff",
             "lineHeightLG": 1.5714285714285714,
             "lineWidthFocus": 4,
@@ -943,17 +943,17 @@
             "lineHeight": 1.6666666666666667,
             "fontSizeLG": 14,
             "fontSize": 12,
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActive": "#e6fffb",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "borderRadius": 8,
             "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimary": "#08979c",
             "colorFillContent": "rgba(0, 0, 0, 0.06)",
-            "colorErrorHover": "#ff7875",
-            "colorErrorBg": "#fff2f0",
-            "colorError": "#ff4d4f",
+            "colorErrorHover": "#de4040",
+            "colorErrorBg": "#fbe7e7",
+            "colorError": "#d61010",
             "colorBgElevated": "#ffffff",
             "colorBgContainer": "#ffffff",
             "subMenuItemBorderRadius": 6,
@@ -968,13 +968,13 @@
             "itemBorderRadius": 10,
             "itemBg": "#ffffff",
             "iconSize": 12,
-            "horizontalItemSelectedColor": "#1677ff",
+            "horizontalItemSelectedColor": "#08979c",
             "horizontalItemSelectedBg": "rgba(0, 0, 0, 0)",
-            "horizontalItemHoverColor": "#1677ff",
+            "horizontalItemHoverColor": "#08979c",
             "horizontalItemHoverBg": "rgba(0, 0, 0, 0)",
             "groupTitleColor": "rgba(0, 0, 0, 0.45)",
             "darkItemSelectedColor": "#ffffff",
-            "darkItemSelectedBg": "#1677ff",
+            "darkItemSelectedBg": "#08979c",
             "darkItemHoverColor": "#ffffff",
             "darkItemHoverBg": "rgba(0, 0, 0, 0)",
             "collapsedIconSize": 14,
@@ -1020,21 +1020,21 @@
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimary": "#08979c",
             "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-            "colorErrorBorderHover": "#ffa39e",
-            "colorError": "#ff4d4f",
+            "colorErrorBorderHover": "#e67070",
+            "colorError": "#d61010",
             "colorBorder": "#d9d9d9",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
-            "hoverBorderColor": "#4096ff",
-            "handleHoverColor": "#1677ff",
+            "hoverBorderColor": "#13c2c2",
+            "handleHoverColor": "#08979c",
             "handleBorderColor": "#d9d9d9",
             "handleBg": "#ffffff",
             "handleActiveBg": "rgba(0, 0, 0, 0.02)",
             "addonBg": "rgba(0, 0, 0, 0.02)",
-            "activeBorderColor": "#1677ff",
+            "activeBorderColor": "#08979c",
             "activeBg": "#ffffff",
             "hoverBg": "#ffffff",
             "inputFontSize": 12,
@@ -1078,7 +1078,7 @@
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimary": "#1677ff",
+            "colorPrimary": "#08979c",
             "colorFillAlter": "rgba(0, 0, 0, 0.02)",
             "colorBorderSecondary": "#f0f0f0",
             "colorBgContainer": "#ffffff",
@@ -1119,7 +1119,7 @@
             "fontSizeIcon": 12,
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActive": "#e6fffb",
             "controlInteractiveSize": 16,
             "controlHeight": 28,
             "borderRadiusSM": 6,
@@ -1128,13 +1128,13 @@
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimary": "#08979c",
             "colorBorder": "#d9d9d9",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
-            "optionSelectedBg": "#e6f4ff",
+            "optionSelectedBg": "#e6fffb",
             "menuPadding": 4,
             "optionSelectedFontWeight": 600,
             "fontFamily": "Inter"
@@ -1158,7 +1158,7 @@
             "fontSizeSM": 10,
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActive": "#e6fffb",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "borderRadiusSM": 6,
@@ -1168,15 +1168,15 @@
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimary": "#1677ff",
-            "colorLinkHover": "#4096ff",
-            "colorLinkActive": "#0958d9",
-            "colorLink": "#1677ff",
+            "colorPrimary": "#08979c",
+            "colorLinkHover": "#13c2c2",
+            "colorLinkActive": "#006d75",
+            "colorLink": "#08979c",
             "colorIconHover": "rgba(0, 0, 0, 0.88)",
             "colorIcon": "rgba(0, 0, 0, 0.45)",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
-            "itemActiveBg": "#e6f4ff",
+            "itemActiveBg": "#e6fffb",
             "fullPanelBg": "#ffffff",
             "fullBg": "#ffffff",
             "fontHeightSM": 20,
@@ -1207,19 +1207,19 @@
             "colorTextLightSolid": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimaryActive": "#0958d9",
-            "colorPrimary": "#1677ff",
-            "colorLinkHover": "#4096ff",
-            "colorLinkActive": "#0958d9",
-            "colorLink": "#1677ff",
-            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-            "colorErrorHover": "#ff7875",
-            "colorErrorBorderHover": "#ffa39e",
-            "colorErrorBg": "#fff2f0",
-            "colorErrorActive": "#d9363e",
-            "colorError": "#ff4d4f",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimaryActive": "#006d75",
+            "colorPrimary": "#08979c",
+            "colorLinkHover": "#13c2c2",
+            "colorLinkActive": "#006d75",
+            "colorLink": "#08979c",
+            "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
+            "colorErrorHover": "#de4040",
+            "colorErrorBorderHover": "#e67070",
+            "colorErrorBg": "#fbe7e7",
+            "colorErrorActive": "#ab0d0d",
+            "colorError": "#d61010",
             "colorBorder": "#d9d9d9",
             "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
@@ -1228,7 +1228,7 @@
             "primaryColor": "#ffffff",
             "onlyIconSize": 14,
             "linkHoverBg": "rgba(0, 0, 0, 0)",
-            "groupBorderColor": "#4096ff",
+            "groupBorderColor": "#13c2c2",
             "ghostBg": "rgba(0, 0, 0, 0)",
             "defaultGhostColor": "#ffffff",
             "defaultGhostBorderColor": "#ffffff",
@@ -1238,11 +1238,11 @@
             "dangerColor": "#ffffff",
             "borderColorDisabled": "#d9d9d9",
             "defaultHoverBg": "#ffffff",
-            "defaultHoverColor": "#4096ff",
-            "defaultHoverBorderColor": "#4096ff",
+            "defaultHoverColor": "#13c2c2",
+            "defaultHoverBorderColor": "#13c2c2",
             "defaultActiveBg": "#ffffff",
-            "defaultActiveColor": "#0958d9",
-            "defaultActiveBorderColor": "#0958d9",
+            "defaultActiveColor": "#006d75",
+            "defaultActiveBorderColor": "#006d75",
             "fontWeight": 400,
             "contentFontSizeSM": 12,
             "contentLineHeightLG": 1.5714285714285714,
@@ -1262,10 +1262,10 @@
             "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
             "colorTextLightSolid": "#ffffff",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSuccess": "#52c41a",
-            "colorPrimary": "#1677ff",
-            "colorErrorHover": "#ff7875",
-            "colorError": "#ff4d4f",
+            "colorSuccess": "#389e0d",
+            "colorPrimary": "#08979c",
+            "colorErrorHover": "#de4040",
+            "colorError": "#d61010",
             "colorBorderBg": "#ffffff",
             "colorBgContainer": "#ffffff",
             "indicatorHeightSM": 12,
@@ -1299,11 +1299,11 @@
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSuccess": "#52c41a",
-            "colorPrimary": "#1677ff",
-            "colorError": "#ff4d4f",
+            "colorSuccess": "#389e0d",
+            "colorPrimary": "#08979c",
+            "colorError": "#d61010",
             "colorBorder": "#d9d9d9",
-            "labelRequiredMarkColor": "#ff4d4f",
+            "labelRequiredMarkColor": "#d61010",
             "labelColor": "rgba(0, 0, 0, 0.88)",
             "itemMarginBottom": 24,
             "labelColonMarginInlineEnd": 8,
@@ -1351,7 +1351,7 @@
             "colorWhite": "#ffffff",
             "colorTextLightSolid": "#ffffff",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimary": "#1677ff",
+            "colorPrimary": "#08979c",
             "colorIconHover": "rgba(0, 0, 0, 0.88)",
             "colorIcon": "rgba(0, 0, 0, 0.45)",
             "colorFill": "rgba(0, 0, 0, 0.15)",
@@ -1398,11 +1398,11 @@
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimary": "#08979c",
             "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-            "colorErrorBg": "#fff2f0",
-            "colorError": "#ff4d4f",
+            "colorErrorBg": "#fbe7e7",
+            "colorError": "#d61010",
             "colorBorder": "#d9d9d9",
             "colorBgMask": "rgba(0, 0, 0, 0.45)",
             "fontHeight": 22,
@@ -1433,13 +1433,13 @@
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSuccess": "#52c41a",
-            "colorLinkHover": "#4096ff",
-            "colorLinkActive": "#0958d9",
-            "colorLink": "#1677ff",
-            "colorErrorHover": "#ff7875",
-            "colorErrorActive": "#d9363e",
-            "colorError": "#ff4d4f",
+            "colorSuccess": "#389e0d",
+            "colorLinkHover": "#13c2c2",
+            "colorLinkActive": "#006d75",
+            "colorLink": "#08979c",
+            "colorErrorHover": "#de4040",
+            "colorErrorActive": "#ab0d0d",
+            "colorError": "#d61010",
             "fontFamilyCode": "Inter"
         },
         "TreeSelect": {
@@ -1453,7 +1453,7 @@
             "fontSizeLG": 14,
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActive": "#e6fffb",
             "controlInteractiveSize": 16,
             "controlHeightSM": 24,
             "borderRadiusSM": 6,
@@ -1461,15 +1461,15 @@
             "colorWhite": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimary": "#08979c",
             "colorBorder": "#d9d9d9",
             "colorBgElevated": "#ffffff",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
             "titleHeight": 24,
-            "nodeSelectedBg": "#e6f4ff",
+            "nodeSelectedBg": "#e6fffb",
             "nodeHoverBg": "rgba(0, 0, 0, 0.04)",
             "fontFamily": "Inter"
         },
@@ -1486,7 +1486,7 @@
             "fontSizeLG": 14,
             "fontSize": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActive": "#e6fffb",
             "controlInteractiveSize": 16,
             "controlHeightSM": 24,
             "borderRadiusSM": 6,
@@ -1495,17 +1495,17 @@
             "colorTextLightSolid": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimary": "#08979c",
             "colorBorder": "#d9d9d9",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
             "titleHeight": 24,
-            "nodeSelectedBg": "#e6f4ff",
+            "nodeSelectedBg": "#e6fffb",
             "nodeHoverBg": "rgba(0, 0, 0, 0.04)",
             "directoryNodeSelectedColor": "#ffffff",
-            "directoryNodeSelectedBg": "#1677ff",
+            "directoryNodeSelectedBg": "#08979c",
             "fontFamily": "Inter"
         },
         "Tag": {
@@ -1522,9 +1522,9 @@
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimaryActive": "#0958d9",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimaryActive": "#006d75",
+            "colorPrimary": "#08979c",
             "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
             "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
             "colorFillQuaternary": "rgba(0, 0, 0, 0.02)",
@@ -1533,10 +1533,10 @@
             "colorWarningBg": "#fffbe6",
             "colorSuccessBorder": "#b7eb8f",
             "colorSuccessBg": "#f6ffed",
-            "colorInfoBorder": "#91caff",
-            "colorInfoBg": "#e6f4ff",
-            "colorErrorBorder": "#ffccc7",
-            "colorErrorBg": "#fff2f0",
+            "colorInfoBorder": "#87e8de",
+            "colorInfoBg": "#e6fffb",
+            "colorErrorBorder": "#ef9f9f",
+            "colorErrorBg": "#fbe7e7",
             "defaultColor": "rgba(0, 0, 0, 0.88)",
             "defaultBg": "rgba(0, 0, 0, 0.02)",
             "fontFamily": "Inter"
@@ -1583,7 +1583,7 @@
             "controlOutlineWidth": 2,
             "controlOutline": "rgba(5, 145, 255, 0.1)",
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActive": "#e6fffb",
             "controlHeightXS": 16,
             "controlHeightSM": 28,
             "controlHeightLG": 34,
@@ -1600,13 +1600,13 @@
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimary": "#08979c",
             "colorIconHover": "rgba(0, 0, 0, 0.88)",
             "colorIcon": "rgba(0, 0, 0, 0.45)",
             "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-            "colorErrorHover": "#ff7875",
+            "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
+            "colorErrorHover": "#de4040",
             "colorBorder": "#d9d9d9",
             "colorBgElevated": "#ffffff",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
@@ -1614,7 +1614,7 @@
             "singleItemHeightLG": 34,
             "selectorBg": "#ffffff",
             "optionSelectedColor": "rgba(0, 0, 0, 0.88)",
-            "optionSelectedBg": "#e6f4ff",
+            "optionSelectedBg": "#e6fffb",
             "optionHeight": 28,
             "optionActiveBg": "rgba(0, 0, 0, 0.04)",
             "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
@@ -1641,10 +1641,10 @@
             "colorWarning": "#faad14",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorSuccess": "#52c41a",
-            "colorInfo": "#1677ff",
+            "colorSuccess": "#389e0d",
+            "colorInfo": "#08979c",
             "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-            "colorError": "#ff4d4f",
+            "colorError": "#d61010",
             "iconFontSize": 72,
             "subtitleFontSize": 12,
             "titleFontSize": 20
@@ -1657,12 +1657,12 @@
             "fontSizeSM": 10,
             "fontSize": 12,
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSuccess": "#52c41a",
+            "colorSuccess": "#389e0d",
             "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-            "colorError": "#ff4d4f",
+            "colorError": "#d61010",
             "colorBgContainer": "#ffffff",
             "remainingColor": "rgba(0, 0, 0, 0.06)",
-            "defaultColor": "#1677ff",
+            "defaultColor": "#08979c",
             "circleTextColor": "rgba(0, 0, 0, 0.88)",
             "fontFamily": "Inter"
         },
@@ -1707,11 +1707,11 @@
             "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimary": "#08979c",
             "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
+            "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
             "colorBorder": "#d9d9d9",
             "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
             "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
@@ -1751,8 +1751,8 @@
             "colorWarning": "#faad14",
             "colorTextHeading": "rgba(0, 0, 0, 0.88)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSuccess": "#52c41a",
-            "colorPrimaryBorder": "#91caff",
+            "colorSuccess": "#389e0d",
+            "colorPrimaryBorder": "#87e8de",
             "colorIconHover": "rgba(0, 0, 0, 0.88)",
             "colorIcon": "rgba(0, 0, 0, 0.45)",
             "colorBgMask": "rgba(0, 0, 0, 0.45)",
@@ -1776,9 +1776,9 @@
             "borderRadiusLG": 10,
             "colorWarning": "#faad14",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSuccess": "#52c41a",
-            "colorInfo": "#1677ff",
-            "colorError": "#ff4d4f",
+            "colorSuccess": "#389e0d",
+            "colorInfo": "#08979c",
+            "colorError": "#d61010",
             "contentBg": "#ffffff",
             "fontFamily": "Inter"
         },
@@ -1812,7 +1812,7 @@
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimary": "#1677ff",
+            "colorPrimary": "#08979c",
             "colorBorder": "#d9d9d9",
             "headerBg": "rgba(0, 0, 0, 0)",
             "footerBg": "rgba(0, 0, 0, 0)",
@@ -1838,8 +1838,8 @@
             "colorTextLightSolid": "#ffffff",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimary": "#08979c",
             "colorFillContent": "rgba(0, 0, 0, 0.06)",
             "colorBgElevated": "#ffffff",
             "fontFamily": "Inter"
@@ -1863,8 +1863,8 @@
             "fontSize": 12,
             "controlPaddingHorizontal": 12,
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActiveHover": "#bae0ff",
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActiveHover": "#b5f5ec",
+            "controlItemBgActive": "#e6fffb",
             "controlHeight": 28,
             "borderRadiusXS": 4,
             "borderRadiusSM": 6,
@@ -1874,9 +1874,9 @@
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimary": "#1677ff",
-            "colorError": "#ff4d4f",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimary": "#08979c",
+            "colorError": "#d61010",
             "colorBgElevated": "#ffffff",
             "paddingBlock": 5,
             "fontFamily": "Inter"
@@ -1957,7 +1957,7 @@
             "controlOutlineWidth": 2,
             "controlOutline": "rgba(5, 145, 255, 0.1)",
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActive": "#e6fffb",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
@@ -1976,39 +1976,39 @@
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimary": "#1677ff",
-            "colorLinkHover": "#4096ff",
-            "colorLinkActive": "#0958d9",
-            "colorLink": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimary": "#08979c",
+            "colorLinkHover": "#13c2c2",
+            "colorLinkActive": "#006d75",
+            "colorLink": "#08979c",
             "colorIconHover": "rgba(0, 0, 0, 0.88)",
             "colorIcon": "rgba(0, 0, 0, 0.45)",
             "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-            "colorErrorHover": "#ff7875",
-            "colorError": "#ff4d4f",
+            "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
+            "colorErrorHover": "#de4040",
+            "colorError": "#d61010",
             "colorBorder": "#d9d9d9",
             "colorBgElevated": "#ffffff",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
-            "hoverBorderColor": "#4096ff",
+            "hoverBorderColor": "#13c2c2",
             "cellHoverBg": "rgba(0, 0, 0, 0.04)",
             "cellHeight": 24,
-            "activeBorderColor": "#1677ff",
+            "activeBorderColor": "#08979c",
             "paddingInline": 11,
             "paddingInlineSM": 7,
             "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
-            "colorErrorBg": "#fff2f0",
+            "colorErrorBg": "#fbe7e7",
             "colorWarningBg": "#fffbe6",
             "colorWarningText": "#faad14",
-            "colorErrorText": "#ff4d4f",
+            "colorErrorText": "#d61010",
             "colorWarningBgHover": "#fff1b8",
-            "colorErrorBgHover": "#fff1f0",
+            "colorErrorBgHover": "#f7cfcf",
             "activeBg": "#ffffff",
             "hoverBg": "#ffffff",
             "cellBgDisabled": "rgba(0, 0, 0, 0.04)",
-            "cellActiveWithRangeBg": "#e6f4ff",
+            "cellActiveWithRangeBg": "#e6fffb",
             "cellHoverWithRangeBg": "#c8dfff",
             "cellRangeBorderColor": "#7cb3ff",
             "multipleItemBg": "rgba(0, 0, 0, 0.06)",
@@ -2078,9 +2078,9 @@
             "colorWhite": "#ffffff",
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimaryBorder": "#91caff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimaryBorder": "#87e8de",
+            "colorPrimary": "#08979c",
             "colorBorder": "#d9d9d9",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
             "colorBgContainer": "#ffffff",
@@ -2095,7 +2095,7 @@
             "fontSizeIcon": 12,
             "fontSize": 12,
             "borderRadiusSM": 6,
-            "colorPrimaryBorder": "#91caff",
+            "colorPrimaryBorder": "#87e8de",
             "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
             "separatorColor": "rgba(0, 0, 0, 0.45)",
             "linkHoverColor": "rgba(0, 0, 0, 0.88)",
@@ -2115,7 +2115,7 @@
             "fontSize": 12,
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimary": "#1677ff",
+            "colorPrimary": "#08979c",
             "linkPaddingInlineStart": 16,
             "linkPaddingBlock": 4,
             "fontFamily": "Inter"
@@ -2140,15 +2140,15 @@
             "colorText": "rgba(0, 0, 0, 0.88)",
             "colorSuccessBorder": "#b7eb8f",
             "colorSuccessBg": "#f6ffed",
-            "colorSuccess": "#52c41a",
-            "colorInfoBorder": "#91caff",
-            "colorInfoBg": "#e6f4ff",
-            "colorInfo": "#1677ff",
+            "colorSuccess": "#389e0d",
+            "colorInfoBorder": "#87e8de",
+            "colorInfoBg": "#e6fffb",
+            "colorInfo": "#08979c",
             "colorIconHover": "rgba(0, 0, 0, 0.88)",
             "colorIcon": "rgba(0, 0, 0, 0.45)",
-            "colorErrorBorder": "#ffccc7",
-            "colorErrorBg": "#fff2f0",
-            "colorError": "#ff4d4f",
+            "colorErrorBorder": "#ef9f9f",
+            "colorErrorBg": "#fbe7e7",
+            "colorError": "#d61010",
             "withDescriptionIconSize": 20,
             "fontFamily": "Inter"
         },
@@ -2168,7 +2168,7 @@
             "controlOutlineWidth": 2,
             "controlOutline": "rgba(5, 145, 255, 0.1)",
             "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6f4ff",
+            "controlItemBgActive": "#e6fffb",
             "controlHeightXS": 16,
             "controlHeightSM": 24,
             "controlHeightLG": 34,
@@ -2186,14 +2186,14 @@
             "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
             "colorTextDescription": "rgba(0, 0, 0, 0.45)",
             "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#4096ff",
-            "colorPrimary": "#1677ff",
+            "colorPrimaryHover": "#13c2c2",
+            "colorPrimary": "#08979c",
             "colorIconHover": "rgba(0, 0, 0, 0.88)",
             "colorIcon": "rgba(0, 0, 0, 0.45)",
             "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-            "colorErrorOutline": "rgba(255, 38, 6, 0.06)",
-            "colorErrorHover": "#ff7875",
-            "colorError": "#ff4d4f",
+            "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
+            "colorErrorHover": "#de4040",
+            "colorError": "#d61010",
             "colorBorder": "#d9d9d9",
             "colorBgElevated": "#ffffff",
             "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",

From ac7a031c33dfd29624af8e9b49e0ef7c298c3b5b Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 19 Aug 2024 19:17:00 +0100
Subject: [PATCH 093/117] fix(frontend): replaced hardcoded color with antd
 useToken hook

---
 .../pages/overview/deployments/ChangeVariantModal.tsx  |  7 +++++--
 .../pages/overview/variants/DeployVariantModal.tsx     |  7 +++++--
 .../pages/overview/variants/VariantDrawer.tsx          |  6 ++++--
 .../pages/overview/variants/VariantPopover.tsx         | 10 ++++++++--
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
index 88010adc5..aabb274b6 100644
--- a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
@@ -1,6 +1,6 @@
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {CaretRight} from "@phosphor-icons/react"
-import {Badge, Input, Modal, Table, Tag, Typography} from "antd"
+import {Badge, Input, Modal, Table, Tag, theme, Typography} from "antd"
 import React, {SetStateAction, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
 import DeploymentModal from "./DeploymentModal"
@@ -15,6 +15,8 @@ type ChangeVariantModalProps = {
     loadEnvironments: () => Promise<void>
 } & React.ComponentProps<typeof Modal>
 
+const {useToken} = theme
+
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     title: {
         fontSize: theme.fontSizeLG,
@@ -40,6 +42,7 @@ const ChangeVariantModal = ({
     loadEnvironments,
     ...props
 }: ChangeVariantModalProps) => {
+    const {token} = useToken()
     const classes = useStyles()
     const [searchTerm, setSearchTerm] = useState<string>("")
     const [isDeploymentModalOpen, setIsDeploymentModalOpen] = useState(false)
@@ -87,7 +90,7 @@ const ChangeVariantModal = ({
                                                 <div className="flex items-center">
                                                     <Tag>
                                                         <Badge
-                                                            color="blue"
+                                                            color={token.colorPrimary}
                                                             text={splitVariantId(record.variantId)}
                                                         />
                                                     </Tag>
diff --git a/agenta-web/src/components/pages/overview/variants/DeployVariantModal.tsx b/agenta-web/src/components/pages/overview/variants/DeployVariantModal.tsx
index bf72267be..53f2f4ca7 100644
--- a/agenta-web/src/components/pages/overview/variants/DeployVariantModal.tsx
+++ b/agenta-web/src/components/pages/overview/variants/DeployVariantModal.tsx
@@ -1,7 +1,7 @@
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {createPublishVariant} from "@/services/deployment/api"
 import {Rocket} from "@phosphor-icons/react"
-import {Badge, message, Modal, Table, Tag, Typography} from "antd"
+import {Badge, message, Modal, Table, Tag, theme, Typography} from "antd"
 import {ColumnsType} from "antd/es/table"
 import React, {useState} from "react"
 import {createUseStyles} from "react-jss"
@@ -12,6 +12,8 @@ type DeployVariantModalProps = {
     loadEnvironments: () => Promise<void>
 } & React.ComponentProps<typeof Modal>
 
+const {useToken} = theme
+
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     container: {
         "& .ant-modal-footer": {
@@ -34,6 +36,7 @@ const DeployVariantModal = ({
     loadEnvironments,
     ...props
 }: DeployVariantModalProps) => {
+    const {token} = useToken()
     const classes = useStyles()
     const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([])
     const [isPublishing, setIsPublishing] = useState(false)
@@ -73,7 +76,7 @@ const DeployVariantModal = ({
             render(_, record) {
                 return record.deployed_variant_name ? (
                     <Tag>
-                        <Badge color="blue" text={record.deployed_variant_name} />
+                        <Badge color={token.colorPrimary} text={record.deployed_variant_name} />
                     </Tag>
                 ) : (
                     <Tag>No deployment</Tag>
diff --git a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
index f6d7cd409..8bdef50dc 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
@@ -4,7 +4,7 @@ import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {CloseOutlined, MoreOutlined} from "@ant-design/icons"
 import {CloudArrowUp, Lightning, Rocket, Trash} from "@phosphor-icons/react"
-import {Badge, Button, Drawer, Dropdown, Tabs, Tag, Typography} from "antd"
+import {Badge, Button, Drawer, Dropdown, Tabs, Tag, theme, Typography} from "antd"
 import React from "react"
 import {createUseStyles} from "react-jss"
 
@@ -16,6 +16,7 @@ type VariantDrawerProps = {
 } & React.ComponentProps<typeof Drawer>
 
 const {Title} = Typography
+const {useToken} = theme
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
     drawerTitleContainer: {
@@ -79,6 +80,7 @@ const VariantDrawer = ({
     setIsDeployVariantModalOpen,
     ...props
 }: VariantDrawerProps) => {
+    const {token} = useToken()
     const classes = useStyles()
     const appId = useAppId()
 
@@ -156,7 +158,7 @@ const VariantDrawer = ({
                         {environments.map((env, idx) =>
                             env.deployed_app_variant_id ? (
                                 <Tag key={idx}>
-                                    <Badge color="blue" text={env.name} />
+                                    <Badge color={token.colorPrimary} text={env.name} />
                                 </Tag>
                             ) : (
                                 <Tag key={idx}>{env.name}</Tag>
diff --git a/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx b/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx
index 8ebd8a95f..4adedcb46 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx
@@ -1,10 +1,12 @@
 import {isDemo, splitVariantId} from "@/lib/helpers/utils"
 import {Environment, Variant} from "@/lib/Types"
 import {ArrowSquareOut} from "@phosphor-icons/react"
-import {Badge, Button, Popover, Tag, Typography} from "antd"
+import {Badge, Button, Popover, Tag, theme, Typography} from "antd"
 import {useRouter} from "next/router"
 import React from "react"
 
+const {useToken} = theme
+
 type VariantPopoverProps = {
     env: Environment
     selectedDeployedVariant: Variant | undefined
@@ -12,6 +14,7 @@ type VariantPopoverProps = {
 
 const VariantPopover = ({env, selectedDeployedVariant, ...props}: VariantPopoverProps) => {
     const router = useRouter()
+    const {token} = useToken()
     const appId = router.query.app_id as string
     return (
         <Popover
@@ -41,7 +44,10 @@ const VariantPopover = ({env, selectedDeployedVariant, ...props}: VariantPopover
             }
         >
             <Tag className="w-fit cursor-pointer" onClick={(e) => e.stopPropagation()}>
-                <Badge color="blue" text={splitVariantId(env.deployed_app_variant_id as string)} />
+                <Badge
+                    color={token.colorPrimary}
+                    text={splitVariantId(env.deployed_app_variant_id as string)}
+                />
             </Tag>
         </Popover>
     )

From 431dc7bd2c51d1afb8757eb703a2bd6429bcc3f8 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Mon, 19 Aug 2024 19:17:33 +0100
Subject: [PATCH 094/117] fix(frontend): removed variants prop from
 Obervability component

---
 agenta-web/src/pages/apps/[app_id]/overview/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index d54fbaf81..13bb967c8 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -125,7 +125,7 @@ export default function Overview() {
                     </Dropdown>
                 </Space>
 
-                <ObservabilityOverview variants={variants} />
+                <ObservabilityOverview />
 
                 <DeploymentOverview
                     variants={variants}

From 07f9c96752286dbf46255f56950b3f36f2666e70 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 02:45:15 +0100
Subject: [PATCH 095/117] test(frontend): modify cypress test base url

---
 agenta-web/cypress.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/agenta-web/cypress.config.ts b/agenta-web/cypress.config.ts
index cd7aba93f..2d7242aab 100644
--- a/agenta-web/cypress.config.ts
+++ b/agenta-web/cypress.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
     video: false,
     screenshotOnRunFailure: false,
     e2e: {
-        baseUrl: "http://localhost:3000",
+        baseUrl: "http://localhost",
         defaultCommandTimeout: 30000,
         requestTimeout: 10000,
         setupNodeEvents(on) {

From 5f1fbcb1d0b38db1380e940ee322ea3eeea10232 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 02:52:00 +0100
Subject: [PATCH 096/117] minor test modifications(frontend)

---
 agenta-web/cypress.config.ts               | 2 +-
 agenta-web/cypress/e2e/1-smoke-tests.cy.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/agenta-web/cypress.config.ts b/agenta-web/cypress.config.ts
index 2d7242aab..cd7aba93f 100644
--- a/agenta-web/cypress.config.ts
+++ b/agenta-web/cypress.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
     video: false,
     screenshotOnRunFailure: false,
     e2e: {
-        baseUrl: "http://localhost",
+        baseUrl: "http://localhost:3000",
         defaultCommandTimeout: 30000,
         requestTimeout: 10000,
         setupNodeEvents(on) {
diff --git a/agenta-web/cypress/e2e/1-smoke-tests.cy.ts b/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
index e833ce5c8..f510e2e02 100644
--- a/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
+++ b/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
@@ -1,5 +1,6 @@
 describe("Basic smoke tests to see if app has loaded correctly", () => {
     beforeEach(() => {
+        cy.wait(30000)
         cy.visit("/apps")
     })
 

From 312bc251e5e101622a2b509e9cbff7c47606266f Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 03:12:57 +0100
Subject: [PATCH 097/117] test(frontend): excluded smoke test

---
 agenta-web/cypress.config.ts               | 1 +
 agenta-web/cypress/e2e/1-smoke-tests.cy.ts | 1 -
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/agenta-web/cypress.config.ts b/agenta-web/cypress.config.ts
index cd7aba93f..fbfbb2500 100644
--- a/agenta-web/cypress.config.ts
+++ b/agenta-web/cypress.config.ts
@@ -20,6 +20,7 @@ export default defineConfig({
             })
         },
         experimentalStudio: true,
+        excludeSpecPattern: ["cypress/e2e/1-smoke-tests.cy.ts"],
     },
     env: {
         baseApiURL: "http://localhost/api",
diff --git a/agenta-web/cypress/e2e/1-smoke-tests.cy.ts b/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
index f510e2e02..e833ce5c8 100644
--- a/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
+++ b/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
@@ -1,6 +1,5 @@
 describe("Basic smoke tests to see if app has loaded correctly", () => {
     beforeEach(() => {
-        cy.wait(30000)
         cy.visit("/apps")
     })
 

From c01403253c1109b662bcde037ad01cff68f4bd57 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 03:32:00 +0100
Subject: [PATCH 098/117] revert test changes

---
 agenta-web/cypress.config.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/agenta-web/cypress.config.ts b/agenta-web/cypress.config.ts
index fbfbb2500..cd7aba93f 100644
--- a/agenta-web/cypress.config.ts
+++ b/agenta-web/cypress.config.ts
@@ -20,7 +20,6 @@ export default defineConfig({
             })
         },
         experimentalStudio: true,
-        excludeSpecPattern: ["cypress/e2e/1-smoke-tests.cy.ts"],
     },
     env: {
         baseApiURL: "http://localhost/api",

From 671fb37c9a1a3aee9af652b55906fd22e41186e2 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 04:20:52 +0100
Subject: [PATCH 099/117] increased test timeout

---
 agenta-web/cypress/e2e/1-smoke-tests.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/agenta-web/cypress/e2e/1-smoke-tests.cy.ts b/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
index e833ce5c8..c4eeed75c 100644
--- a/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
+++ b/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
@@ -1,6 +1,6 @@
 describe("Basic smoke tests to see if app has loaded correctly", () => {
     beforeEach(() => {
-        cy.visit("/apps")
+        cy.visit("/apps", {timeout: 60000})
     })
 
     it("should navigate successfully to the app page", () => {

From 2af916e86a58c367c27e2818e29050a24e71f092 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 04:55:32 +0100
Subject: [PATCH 100/117] test(frontend): solo run

---
 agenta-web/cypress.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/agenta-web/cypress.config.ts b/agenta-web/cypress.config.ts
index cd7aba93f..b12895274 100644
--- a/agenta-web/cypress.config.ts
+++ b/agenta-web/cypress.config.ts
@@ -20,6 +20,7 @@ export default defineConfig({
             })
         },
         experimentalStudio: true,
+        specPattern: ["cypress/e2e/1-smoke-tests.cy.ts"],
     },
     env: {
         baseApiURL: "http://localhost/api",

From 1def09b8d895f72add1b80e02cc0758cd755cca9 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 08:44:37 +0100
Subject: [PATCH 101/117] test(frontend): increased timeouts

---
 agenta-web/cypress.config.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/agenta-web/cypress.config.ts b/agenta-web/cypress.config.ts
index b12895274..652d6863a 100644
--- a/agenta-web/cypress.config.ts
+++ b/agenta-web/cypress.config.ts
@@ -9,8 +9,8 @@ export default defineConfig({
     screenshotOnRunFailure: false,
     e2e: {
         baseUrl: "http://localhost:3000",
-        defaultCommandTimeout: 30000,
-        requestTimeout: 10000,
+        defaultCommandTimeout: 60000,
+        requestTimeout: 30000,
         setupNodeEvents(on) {
             on("task", {
                 log(message) {

From 9b00508e4231d9b51df01ff77557b6f7cb202a47 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 08:51:02 +0100
Subject: [PATCH 102/117] test(frontend): manual timeout

---
 agenta-web/cypress.config.ts               | 4 ++--
 agenta-web/cypress/e2e/1-smoke-tests.cy.ts | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/agenta-web/cypress.config.ts b/agenta-web/cypress.config.ts
index 652d6863a..e677c2a8e 100644
--- a/agenta-web/cypress.config.ts
+++ b/agenta-web/cypress.config.ts
@@ -9,8 +9,8 @@ export default defineConfig({
     screenshotOnRunFailure: false,
     e2e: {
         baseUrl: "http://localhost:3000",
-        defaultCommandTimeout: 60000,
-        requestTimeout: 30000,
+        defaultCommandTimeout: 75000,
+        requestTimeout: 60000,
         setupNodeEvents(on) {
             on("task", {
                 log(message) {
diff --git a/agenta-web/cypress/e2e/1-smoke-tests.cy.ts b/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
index c4eeed75c..70faa4906 100644
--- a/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
+++ b/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
@@ -1,6 +1,7 @@
 describe("Basic smoke tests to see if app has loaded correctly", () => {
     beforeEach(() => {
-        cy.visit("/apps", {timeout: 60000})
+        cy.wait(60000)
+        cy.visit("/apps")
     })
 
     it("should navigate successfully to the app page", () => {

From a8a37caae1cfdd41219c306f25a84ae2e228e901 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 09:02:46 +0100
Subject: [PATCH 103/117] test(frontend): added more timeouts

---
 agenta-web/cypress.config.ts               | 2 ++
 agenta-web/cypress/e2e/1-smoke-tests.cy.ts | 1 -
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/agenta-web/cypress.config.ts b/agenta-web/cypress.config.ts
index e677c2a8e..10a08c479 100644
--- a/agenta-web/cypress.config.ts
+++ b/agenta-web/cypress.config.ts
@@ -11,6 +11,8 @@ export default defineConfig({
         baseUrl: "http://localhost:3000",
         defaultCommandTimeout: 75000,
         requestTimeout: 60000,
+        pageLoadTimeout: 60000,
+        responseTimeout: 60000,
         setupNodeEvents(on) {
             on("task", {
                 log(message) {
diff --git a/agenta-web/cypress/e2e/1-smoke-tests.cy.ts b/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
index 70faa4906..e833ce5c8 100644
--- a/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
+++ b/agenta-web/cypress/e2e/1-smoke-tests.cy.ts
@@ -1,6 +1,5 @@
 describe("Basic smoke tests to see if app has loaded correctly", () => {
     beforeEach(() => {
-        cy.wait(60000)
         cy.visit("/apps")
     })
 

From 14e0f86fa9a69a99245b07278dee93a7c3c6e5d2 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 09:09:16 +0100
Subject: [PATCH 104/117] test(frontend): increased timeout to 2mins

---
 agenta-web/cypress.config.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/agenta-web/cypress.config.ts b/agenta-web/cypress.config.ts
index 10a08c479..fc8acc827 100644
--- a/agenta-web/cypress.config.ts
+++ b/agenta-web/cypress.config.ts
@@ -9,10 +9,12 @@ export default defineConfig({
     screenshotOnRunFailure: false,
     e2e: {
         baseUrl: "http://localhost:3000",
-        defaultCommandTimeout: 75000,
-        requestTimeout: 60000,
-        pageLoadTimeout: 60000,
-        responseTimeout: 60000,
+        defaultCommandTimeout: 120000,
+        requestTimeout: 120000,
+        pageLoadTimeout: 120000,
+        responseTimeout: 120000,
+        taskTimeout: 120000,
+        execTimeout: 120000,
         setupNodeEvents(on) {
             on("task", {
                 log(message) {

From f0314cf41a7a834a75a85a0584ffa54e93a01fd5 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 09:17:55 +0100
Subject: [PATCH 105/117] test(frontend): removed solo run

---
 agenta-web/cypress.config.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/agenta-web/cypress.config.ts b/agenta-web/cypress.config.ts
index fc8acc827..df6fb8c6c 100644
--- a/agenta-web/cypress.config.ts
+++ b/agenta-web/cypress.config.ts
@@ -24,7 +24,6 @@ export default defineConfig({
             })
         },
         experimentalStudio: true,
-        specPattern: ["cypress/e2e/1-smoke-tests.cy.ts"],
     },
     env: {
         baseApiURL: "http://localhost/api",

From 1c14dd2df7845ad3e24b446d605a8a321cf12e87 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 12:28:28 +0100
Subject: [PATCH 106/117] fix(frontend): updated antd tokens and modified
 Layout header style

---
 agenta-web/src/components/Layout/Layout.tsx   |   28 +-
 .../src/styles/tokens/antd-themeConfig.json   | 1187 +++++++++--------
 2 files changed, 609 insertions(+), 606 deletions(-)

diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index 60c7caa99..1e61ddbc1 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/agenta-web/src/components/Layout/Layout.tsx
@@ -37,16 +37,17 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         height: `calc(100% - ${footerHeight ?? 0}px)`,
         paddingLeft: "1.5rem",
         paddingRight: "1.5rem",
-        // marginLeft: 225,
         marginBottom: `calc(2rem + ${footerHeight ?? 0}px)`,
         flex: 1,
     }),
     breadcrumbContainer: {
+        display: "flex",
+        alignItems: "center",
         justifyContent: "space-between",
         width: "100%",
-    },
-    breadcrumb: {
-        padding: "24px 0",
+        padding: "8px 1.5rem",
+        marginBottom: 24,
+        borderBottom: "1px solid #eaeff5",
     },
     footer: {
         position: "absolute",
@@ -168,10 +169,9 @@ const App: React.FC<LayoutProps> = ({children}) => {
                     <Layout hasSider className={classes.layout}>
                         <Sidebar />
                         <Layout className={classes.layout}>
-                            <Content className={classes.content}>
-                                <Space className={classes.breadcrumbContainer}>
+                            <div>
+                                <div className={classes.breadcrumbContainer}>
                                     <Breadcrumb
-                                        className={classes.breadcrumb}
                                         items={[
                                             {
                                                 title: (
@@ -187,12 +187,14 @@ const App: React.FC<LayoutProps> = ({children}) => {
                                     <div className={classes.topRightBar}>
                                         <Text>agenta v{packageJsonData.version}</Text>
                                     </div>
-                                </Space>
-                                <ErrorBoundary FallbackComponent={ErrorFallback}>
-                                    {children}
-                                    {contextHolder}
-                                </ErrorBoundary>
-                            </Content>
+                                </div>
+                                <Content className={classes.content}>
+                                    <ErrorBoundary FallbackComponent={ErrorFallback}>
+                                        {children}
+                                        {contextHolder}
+                                    </ErrorBoundary>
+                                </Content>
+                            </div>
                             <Footer ref={footerRef} className={classes.footer}>
                                 <Space className={classes.footerLeft} size={10}>
                                     <Link
diff --git a/agenta-web/src/styles/tokens/antd-themeConfig.json b/agenta-web/src/styles/tokens/antd-themeConfig.json
index fa522b81d..4975d2287 100644
--- a/agenta-web/src/styles/tokens/antd-themeConfig.json
+++ b/agenta-web/src/styles/tokens/antd-themeConfig.json
@@ -74,47 +74,47 @@
         "orange.2": "#ffe7ba",
         "orange.3": "#ffd591",
         "orange.4": "#ffc069",
-        "colorText": "rgba(0, 0, 0, 0.88)",
-        "colorTextSecondary": "rgba(0, 0, 0, 0.65)",
+        "colorText": "#1c2c3d",
+        "colorTextSecondary": "#586673",
         "orange.5": "#ffa940",
-        "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
-        "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+        "colorTextTertiary": "#758391",
+        "colorTextQuaternary": "#bdc7d1",
         "orange.6": "#fa8c16",
         "orange.7": "#d46b08",
         "colorTextLightSolid": "#ffffff",
-        "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-        "colorTextLabel": "rgba(0, 0, 0, 0.65)",
+        "colorTextHeading": "#1c2c3d",
+        "colorTextLabel": "#586673",
         "orange.8": "#ad4e00",
-        "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+        "colorTextDescription": "#758391",
         "orange.9": "#873800",
-        "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
+        "colorTextDisabled": "#bdc7d1",
         "orange.10": "#612500",
         "purple.1": "#f9f0ff",
         "purple.2": "#efdbff",
         "purple.3": "#d3adf7",
-        "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-        "colorIcon": "rgba(0, 0, 0, 0.45)",
+        "colorTextPlaceholder": "#bdc7d1",
+        "colorIcon": "#758391",
         "purple.4": "#b37feb",
-        "colorIconHover": "rgba(0, 0, 0, 0.88)",
+        "colorIconHover": "#1c2c3d",
         "colorBgContainer": "#ffffff",
         "purple.5": "#9254de",
         "colorBgElevated": "#ffffff",
         "purple.6": "#722ed1",
         "colorBgLayout": "#ffffff",
         "purple.7": "#531dab",
-        "colorBgMask": "rgba(0, 0, 0, 0.45)",
+        "colorBgMask": "rgba(5, 23, 41, 0.45)",
         "purple.8": "#391085",
-        "colorBgSpotlight": "rgba(0, 0, 0, 0.85)",
+        "colorBgSpotlight": "rgba(5, 23, 41, 0.9)",
         "purple.9": "#22075e",
-        "colorBorder": "#d9d9d9",
+        "colorBorder": "#bdc7d1",
         "purple.10": "#120338",
-        "colorBorderSecondary": "#f0f0f0",
+        "colorBorderSecondary": "#eaeff5",
         "red.1": "#fbe7e7",
-        "colorFill": "rgba(0, 0, 0, 0.15)",
+        "colorFill": "rgba(5, 23, 41, 0.15)",
         "red.2": "#f7cfcf",
-        "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-        "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
-        "colorFillQuaternary": "rgba(0, 0, 0, 0.02)",
+        "colorFillSecondary": "rgba(5, 23, 41, 0.06)",
+        "colorFillTertiary": "rgba(5, 23, 41, 0.04)",
+        "colorFillQuaternary": "rgba(5, 23, 41, 0.02)",
         "red.3": "#ef9f9f",
         "red.4": "#e67070",
         "colorWhite": "#ffffff",
@@ -124,24 +124,24 @@
         "colorTextBase": "#000000",
         "red.7": "#ab0d0d",
         "red.8": "#800a0a",
-        "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+        "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
         "red.9": "#560606",
-        "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
+        "colorBgTextActive": "rgba(5, 23, 41, 0.15)",
         "red.10": "#2b0303",
-        "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
+        "colorBgTextHover": "rgba(5, 23, 41, 0.06)",
         "volcano.1": "#fff2e8",
         "colorBorderBg": "#ffffff",
         "volcano.2": "#ffd8bf",
-        "colorFillContent": "rgba(0, 0, 0, 0.06)",
+        "colorFillContent": "rgba(5, 23, 41, 0.06)",
         "volcano.3": "#ffbb96",
-        "colorFillContentHover": "rgba(0, 0, 0, 0.15)",
+        "colorFillContentHover": "rgba(5, 23, 41, 0.15)",
         "volcano.4": "#ff9c6e",
-        "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+        "colorFillAlter": "rgba(5, 23, 41, 0.02)",
         "volcano.5": "#ff7a45",
         "volcano.6": "#fa541c",
         "volcano.7": "#d4380d",
         "transparent": "rgba(0, 0, 0, 0)",
-        "colorSplit": "rgba(0, 0, 0, 0.06)",
+        "colorSplit": "rgba(5, 23, 41, 0.06)",
         "yellow.1": "#feffe6",
         "volcano.8": "#ad2102",
         "yellow.2": "#ffffb8",
@@ -155,12 +155,12 @@
         "yellow.8": "#ad8b00",
         "yellow.9": "#876800",
         "yellow.10": "#614700",
-        "colorPrimary": "#08979c",
+        "colorPrimary": "#1c2c3d",
         "colorSuccess": "#389e0d",
         "colorWarning": "#faad14",
-        "colorInfo": "#08979c",
+        "colorInfo": "#1c2c3d",
         "colorError": "#d61010",
-        "colorLink": "#08979c",
+        "colorLink": "#1c2c3d",
         "colorErrorBg": "#fbe7e7",
         "colorErrorBgHover": "#f7cfcf",
         "colorErrorBorder": "#ef9f9f",
@@ -170,26 +170,26 @@
         "colorErrorTextHover": "#de4040",
         "colorErrorText": "#d61010",
         "colorErrorTextActive": "#ab0d0d",
-        "colorLinkHover": "#13c2c2",
-        "colorInfoBg": "#e6fffb",
-        "colorInfoBgHover": "#b5f5ec",
-        "colorInfoBorder": "#87e8de",
-        "colorInfoBorderHover": "#5cdbd3",
-        "colorInfoHover": "#13c2c2",
-        "colorInfoActive": "#006d75",
-        "colorInfoTextHover": "#36cfc9",
-        "colorInfoText": "#08979c",
-        "colorInfoTextActive": "#006d75",
-        "colorLinkActive": "#006d75",
-        "colorPrimaryBg": "#e6fffb",
-        "colorPrimaryBgHover": "#b5f5ec",
-        "colorPrimaryBorder": "#87e8de",
-        "colorPrimaryBorderHover": "#5cdbd3",
-        "colorPrimaryHover": "#13c2c2",
-        "colorPrimaryActive": "#006d75",
-        "colorPrimaryTextHover": "#36cfc9",
-        "colorPrimaryText": "#08979c",
-        "colorPrimaryTextActive": "#006d75",
+        "colorLinkHover": "#394857",
+        "colorInfoBg": "#f5f7fa",
+        "colorInfoBgHover": "#eaeff5",
+        "colorInfoBorder": "#d6dee6",
+        "colorInfoBorderHover": "#97a4b0",
+        "colorInfoHover": "#394857",
+        "colorInfoActive": "#051729",
+        "colorInfoTextHover": "#586673",
+        "colorInfoText": "#1c2c3d",
+        "colorInfoTextActive": "#051729",
+        "colorLinkActive": "#051729",
+        "colorPrimaryBg": "#f5f7fa",
+        "colorPrimaryBgHover": "#eaeff5",
+        "colorPrimaryBorder": "#d6dee6",
+        "colorPrimaryBorderHover": "#97a4b0",
+        "colorPrimaryHover": "#394857",
+        "colorPrimaryActive": "#051729",
+        "colorPrimaryTextHover": "#586673",
+        "colorPrimaryText": "#1c2c3d",
+        "colorPrimaryTextActive": "#051729",
         "colorSuccessBg": "#f6ffed",
         "colorSuccessBgHover": "#d9f7be",
         "colorSuccessBorder": "#b7eb8f",
@@ -210,12 +210,12 @@
         "colorWarningTextActive": "#d48806",
         "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
         "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
-        "controlItemBgActive": "#e6fffb",
-        "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
-        "controlItemBgActiveHover": "#b5f5ec",
-        "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-        "controlOutline": "rgba(5, 145, 255, 0.1)",
-        "controlTmpOutline": "rgba(0, 0, 0, 0.02)",
+        "controlItemBgActive": "#f5f7fa",
+        "controlItemBgActiveDisabled": "rgba(5, 23, 41, 0.15)",
+        "controlItemBgActiveHover": "#eaeff5",
+        "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+        "controlOutline": "rgba(5, 23, 41, 0.1)",
+        "controlTmpOutline": "rgba(5, 23, 41, 0.02)",
         "borderRadius": 8,
         "borderRadiusLG": 10,
         "borderRadiusSM": 6,
@@ -302,18 +302,18 @@
         "lineHeightSM": 1.8,
         "fontSizeIcon": 12,
         "fontWeightStrong": 600,
-        "colorFillAlterSolid": "#fafafa",
+        "colorFillAlterSolid": "#f5f7fa",
         "fontWeightNormal": 400,
-        "zinc.1": "#fafafa",
-        "zinc.2": "#f4f4f5",
-        "zinc.3": "#e4e4e7",
-        "zinc.4": "#d4d4d8",
-        "zinc.5": "#a1a1aa",
-        "zinc.6": "#71717a",
-        "zinc.7": "#52525b",
-        "zinc.8": "#3f3f46",
-        "zinc.9": "#27272a",
-        "zinc.10": "#18181b",
+        "zinc.1": "#f5f7fa",
+        "zinc.2": "#eaeff5",
+        "zinc.3": "#d6dee6",
+        "zinc.4": "#bdc7d1",
+        "zinc.5": "#97a4b0",
+        "zinc.6": "#758391",
+        "zinc.7": "#586673",
+        "zinc.8": "#394857",
+        "zinc.9": "#1c2c3d",
+        "zinc.10": "#051729",
         "fontWeightMedium": 500
     },
     "components": {
@@ -337,7 +337,7 @@
             "controlPaddingHorizontalSM": 8,
             "controlPaddingHorizontal": 12,
             "controlOutlineWidth": 2,
-            "controlOutline": "rgba(5, 145, 255, 0.1)",
+            "controlOutline": "rgba(5, 23, 41, 0.1)",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
@@ -347,27 +347,27 @@
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
             "colorWarningBorderHover": "#ffd666",
             "colorWarning": "#faad14",
-            "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
-            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimary": "#08979c",
-            "colorIconHover": "rgba(0, 0, 0, 0.88)",
-            "colorIcon": "rgba(0, 0, 0, 0.45)",
-            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorTextTertiary": "#758391",
+            "colorTextQuaternary": "#bdc7d1",
+            "colorTextPlaceholder": "#bdc7d1",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorPrimary": "#1c2c3d",
+            "colorIconHover": "#1c2c3d",
+            "colorIcon": "#758391",
+            "colorFillAlter": "rgba(5, 23, 41, 0.02)",
             "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
             "colorErrorBorderHover": "#e67070",
             "colorError": "#d61010",
-            "colorBorder": "#d9d9d9",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBorder": "#bdc7d1",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
-            "hoverBorderColor": "#13c2c2",
-            "addonBg": "rgba(0, 0, 0, 0.02)",
-            "activeBorderColor": "#08979c",
-            "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
-            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+            "hoverBorderColor": "#394857",
+            "addonBg": "rgba(5, 23, 41, 0.02)",
+            "activeBorderColor": "#1c2c3d",
+            "colorFillTertiary": "rgba(5, 23, 41, 0.04)",
+            "colorFillSecondary": "rgba(5, 23, 41, 0.06)",
             "colorErrorBgHover": "#f7cfcf",
             "colorErrorBg": "#fbe7e7",
             "colorWarningBg": "#fffbe6",
@@ -395,20 +395,20 @@
             "lineHeight": 1.6666666666666667,
             "fontSizeIcon": 12,
             "fontSize": 12,
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActiveHover": "#b5f5ec",
-            "controlItemBgActive": "#e6fffb",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+            "controlItemBgActiveHover": "#eaeff5",
+            "controlItemBgActive": "#f5f7fa",
             "controlHeightLG": 34,
             "controlHeight": 28,
             "borderRadiusLG": 10,
             "colorWarning": "#faad14",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorLinkHover": "#13c2c2",
+            "colorTextDisabled": "#bdc7d1",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorLinkHover": "#394857",
             "colorError": "#d61010",
-            "colorBorder": "#d9d9d9",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBorder": "#bdc7d1",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
             "itemHeight": 28,
             "headerHeight": 34,
@@ -432,20 +432,20 @@
             "borderRadiusSM": 6,
             "borderRadiusLG": 10,
             "borderRadius": 8,
-            "colorTextLabel": "rgba(0, 0, 0, 0.65)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-            "colorFill": "rgba(0, 0, 0, 0.15)",
+            "colorTextLabel": "#586673",
+            "colorTextDisabled": "#bdc7d1",
+            "colorText": "#1c2c3d",
+            "colorFillSecondary": "rgba(5, 23, 41, 0.06)",
+            "colorFill": "rgba(5, 23, 41, 0.15)",
             "colorBgLayout": "#ffffff",
             "colorBgElevated": "#ffffff",
-            "segmentedGroupBg": "rgba(0, 0, 0, 0.04)",
-            "itemSelectedColor": "rgba(0, 0, 0, 0.88)",
+            "segmentedGroupBg": "rgba(5, 23, 41, 0.04)",
+            "itemSelectedColor": "#1c2c3d",
             "itemSelectedBg": "#ffffff",
-            "itemHoverColor": "rgba(0, 0, 0, 0.88)",
-            "itemHoverBg": "rgba(0, 0, 0, 0.06)",
-            "itemColor": "rgba(0, 0, 0, 0.65)",
-            "itemActiveBg": "rgba(0, 0, 0, 0.15)",
+            "itemHoverColor": "#1c2c3d",
+            "itemHoverBg": "rgba(5, 23, 41, 0.06)",
+            "itemColor": "#586673",
+            "itemActiveBg": "rgba(5, 23, 41, 0.15)",
             "trackPadding": 2,
             "trackBg": "#ffffff",
             "fontFamily": "Inter"
@@ -466,13 +466,13 @@
             "fontSize": 12,
             "controlHeight": 28,
             "colorWhite": "#ffffff",
-            "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
-            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+            "colorTextTertiary": "#758391",
+            "colorTextQuaternary": "#bdc7d1",
             "colorTextLightSolid": "#ffffff",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimary": "#08979c",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimary": "#1c2c3d",
             "handleBg": "#ffffff",
             "fontFamily": "Inter"
         },
@@ -499,9 +499,9 @@
             "controlPaddingHorizontalSM": 8,
             "controlPaddingHorizontal": 12,
             "controlOutlineWidth": 2,
-            "controlOutline": "rgba(5, 145, 255, 0.1)",
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6fffb",
+            "controlOutline": "rgba(5, 23, 41, 0.1)",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+            "controlItemBgActive": "#f5f7fa",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
@@ -509,47 +509,47 @@
             "borderRadius": 8,
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
             "colorWarning": "#faad14",
-            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextQuaternary": "#bdc7d1",
+            "colorTextPlaceholder": "#bdc7d1",
             "colorTextLightSolid": "#ffffff",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimary": "#08979c",
-            "colorLinkHover": "#13c2c2",
-            "colorLinkActive": "#006d75",
-            "colorLink": "#08979c",
-            "colorIconHover": "rgba(0, 0, 0, 0.88)",
-            "colorIcon": "rgba(0, 0, 0, 0.45)",
-            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorPrimaryHover": "#394857",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimary": "#1c2c3d",
+            "colorLinkHover": "#394857",
+            "colorLinkActive": "#051729",
+            "colorLink": "#1c2c3d",
+            "colorIconHover": "#1c2c3d",
+            "colorIcon": "#758391",
+            "colorFillAlter": "rgba(5, 23, 41, 0.02)",
             "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
             "colorError": "#d61010",
-            "colorBorder": "#d9d9d9",
+            "colorBorder": "#bdc7d1",
             "colorBgElevated": "#ffffff",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
-            "hoverBorderColor": "#13c2c2",
-            "cellHoverBg": "rgba(0, 0, 0, 0.04)",
+            "hoverBorderColor": "#394857",
+            "cellHoverBg": "rgba(5, 23, 41, 0.04)",
             "cellHeight": 24,
-            "activeBorderColor": "#08979c",
+            "activeBorderColor": "#1c2c3d",
             "paddingInline": 11,
             "paddingInlineLG": 11,
             "paddingInlineSM": 7,
             "activeBg": "#ffffff",
             "hoverBg": "#ffffff",
-            "cellBgDisabled": "rgba(0, 0, 0, 0.04)",
-            "cellActiveWithRangeBg": "#e6fffb",
+            "cellBgDisabled": "rgba(5, 23, 41, 0.04)",
+            "cellActiveWithRangeBg": "#f5f7fa",
             "cellHoverWithRangeBg": "#c8dfff",
             "cellRangeBorderColor": "#7cb3ff",
-            "multipleItemBg": "rgba(0, 0, 0, 0.06)",
+            "multipleItemBg": "rgba(5, 23, 41, 0.06)",
             "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
             "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
-            "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
-            "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
+            "multipleItemColorDisabled": "#bdc7d1",
+            "multipleSelectorBgDisabled": "rgba(5, 23, 41, 0.04)",
             "cellWidth": 36,
             "multipleItemHeight": 24,
             "multipleItemHeightLG": 32,
@@ -580,13 +580,13 @@
             "fontSizeSM": 10,
             "fontSize": 12,
             "controlHeightLG": 34,
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorTextDisabled": "#bdc7d1",
+            "colorText": "#1c2c3d",
             "colorSuccess": "#389e0d",
-            "colorPrimary": "#08979c",
+            "colorPrimary": "#1c2c3d",
             "colorError": "#d61010",
             "colorBgContainer": "#ffffff",
-            "tailColor": "rgba(0, 0, 0, 0.06)",
+            "tailColor": "rgba(5, 23, 41, 0.06)",
             "dotBg": "#ffffff",
             "fontFamily": "Inter"
         },
@@ -609,30 +609,30 @@
             "fontSizeSM": 10,
             "fontSizeLG": 14,
             "fontSize": 12,
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
             "controlHeightLG": 34,
             "controlHeight": 28,
             "borderRadiusLG": 10,
             "borderRadius": 8,
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimaryActive": "#006d75",
-            "colorPrimary": "#08979c",
-            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-            "colorBorderSecondary": "#f0f0f0",
-            "colorBorder": "#d9d9d9",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimaryActive": "#051729",
+            "colorPrimary": "#1c2c3d",
+            "colorFillAlter": "rgba(5, 23, 41, 0.02)",
+            "colorBorderSecondary": "#eaeff5",
+            "colorBorder": "#bdc7d1",
             "colorBgContainer": "#ffffff",
-            "itemSelectedColor": "#08979c",
-            "itemHoverColor": "rgba(0, 0, 0, 0.88)",
-            "itemColor": "rgba(0, 0, 0, 0.65)",
-            "itemActiveColor": "#006d75",
-            "inkBarColor": "#08979c",
+            "itemSelectedColor": "#1c2c3d",
+            "itemHoverColor": "#1c2c3d",
+            "itemColor": "#586673",
+            "itemActiveColor": "#051729",
+            "inkBarColor": "#1c2c3d",
             "cardHeight": 34,
-            "cardBg": "rgba(0, 0, 0, 0.02)",
+            "cardBg": "rgba(5, 23, 41, 0.02)",
             "titleFontSize": 12,
             "titleFontSizeLG": 14,
             "titleFontSizeSM": 12,
@@ -640,9 +640,9 @@
         },
         "Table": {
             "stickyScrollBarBorderRadius": 100,
-            "headerSplitColor": "#f0f0f0",
+            "headerSplitColor": "#eaeff5",
             "headerBg": "#fafafa",
-            "footerBg": "rgba(0, 0, 0, 0.02)",
+            "footerBg": "rgba(5, 23, 41, 0.02)",
             "paddingXXS": 4,
             "paddingXS": 8,
             "paddingSM": 12,
@@ -655,35 +655,35 @@
             "fontSizeSM": 10,
             "fontSizeIcon": 12,
             "fontSize": 12,
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActiveHover": "#b5f5ec",
-            "controlItemBgActive": "#e6fffb",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+            "controlItemBgActiveHover": "#eaeff5",
+            "controlItemBgActive": "#f5f7fa",
             "controlInteractiveSize": 16,
             "controlHeight": 28,
             "borderRadiusLG": 10,
             "borderRadius": 8,
-            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimary": "#08979c",
-            "colorLinkHover": "#13c2c2",
-            "colorLinkActive": "#006d75",
-            "colorLink": "#08979c",
-            "colorIconHover": "rgba(0, 0, 0, 0.88)",
-            "colorIcon": "rgba(0, 0, 0, 0.45)",
-            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-            "colorFillContent": "rgba(0, 0, 0, 0.06)",
-            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-            "colorBorderSecondary": "#f0f0f0",
+            "colorTextPlaceholder": "#bdc7d1",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorPrimary": "#1c2c3d",
+            "colorLinkHover": "#394857",
+            "colorLinkActive": "#051729",
+            "colorLink": "#1c2c3d",
+            "colorIconHover": "#1c2c3d",
+            "colorIcon": "#758391",
+            "colorFillSecondary": "rgba(5, 23, 41, 0.06)",
+            "colorFillContent": "rgba(5, 23, 41, 0.06)",
+            "colorFillAlter": "rgba(5, 23, 41, 0.02)",
+            "colorBorderSecondary": "#eaeff5",
             "colorBgContainer": "#ffffff",
-            "rowSelectedHoverBg": "#b5f5ec",
+            "rowSelectedHoverBg": "#eaeff5",
             "headerFilterHoverBg": "#f0f0f0",
-            "headerColor": "rgba(0, 0, 0, 0.88)",
+            "headerColor": "#1c2c3d",
             "headerBorderRadius": 10,
-            "footerColor": "rgba(0, 0, 0, 0.88)",
+            "footerColor": "#1c2c3d",
             "filterDropdownMenuBg": "#ffffff",
             "filterDropdownBg": "#ffffff",
             "cellPaddingInlineSM": 8,
@@ -692,10 +692,10 @@
             "cellPaddingBlockSM": 8,
             "cellPaddingBlockMD": 12,
             "cellPaddingBlock": 8,
-            "borderColor": "#f0f0f0",
-            "rowHoverBg": "#fafafa",
+            "borderColor": "#eaeff5",
+            "rowHoverBg": "#f5f7fa",
             "headerSortActiveBg": "#f0f0f0",
-            "bodySortBg": "#fafafa",
+            "bodySortBg": "#f5f7fa",
             "headerSortHoverBg": "#f0f0f0",
             "cellFontSize": 12,
             "cellFontSizeMD": 12,
@@ -727,22 +727,22 @@
             "fontSizeIcon": 12,
             "fontSizeHeading3": 20,
             "fontSize": 12,
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6fffb",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+            "controlItemBgActive": "#f5f7fa",
             "controlHeightLG": 34,
             "borderRadiusSM": 6,
-            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
+            "colorTextQuaternary": "#bdc7d1",
             "colorTextLightSolid": "#ffffff",
-            "colorTextLabel": "rgba(0, 0, 0, 0.65)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimary": "#08979c",
-            "colorFillContent": "rgba(0, 0, 0, 0.06)",
+            "colorTextLabel": "#586673",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimary": "#1c2c3d",
+            "colorFillContent": "rgba(5, 23, 41, 0.06)",
             "colorError": "#d61010",
-            "colorBorderSecondary": "#f0f0f0",
+            "colorBorderSecondary": "#eaeff5",
             "colorBorderBg": "#ffffff",
             "colorBgContainer": "#ffffff",
             "titleLineHeight": 28,
@@ -762,9 +762,9 @@
             "fontSize": 12,
             "controlHeightLG": 34,
             "controlHeight": 28,
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimary": "#08979c",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorPrimary": "#1c2c3d",
             "colorBgContainer": "#ffffff",
             "dotSizeLG": 28,
             "fontFamily": "Inter"
@@ -782,28 +782,28 @@
             "controlHeightLG": 34,
             "controlHeight": 28,
             "borderRadiusXS": 4,
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryBorderHover": "#5cdbd3",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimary": "#08979c",
-            "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
-            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-            "colorFillContentHover": "rgba(0, 0, 0, 0.15)",
-            "colorBorderSecondary": "#f0f0f0",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorPrimaryBorderHover": "#97a4b0",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimary": "#1c2c3d",
+            "colorFillTertiary": "rgba(5, 23, 41, 0.04)",
+            "colorFillSecondary": "rgba(5, 23, 41, 0.06)",
+            "colorFillContentHover": "rgba(5, 23, 41, 0.15)",
+            "colorBorderSecondary": "#eaeff5",
             "colorBgElevated": "#ffffff",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
-            "trackHoverBg": "#5cdbd3",
-            "trackBgDisabled": "rgba(0, 0, 0, 0.04)",
-            "trackBg": "#87e8de",
-            "railHoverBg": "rgba(0, 0, 0, 0.06)",
-            "railBg": "rgba(0, 0, 0, 0.04)",
-            "handleColor": "#87e8de",
-            "handleActiveColor": "#08979c",
-            "dotBorderColor": "#f0f0f0",
-            "dotActiveBorderColor": "#87e8de",
+            "trackHoverBg": "#97a4b0",
+            "trackBgDisabled": "rgba(5, 23, 41, 0.04)",
+            "trackBg": "#d6dee6",
+            "railHoverBg": "rgba(5, 23, 41, 0.06)",
+            "railBg": "rgba(5, 23, 41, 0.04)",
+            "handleColor": "#d6dee6",
+            "handleActiveColor": "#1c2c3d",
+            "dotBorderColor": "#eaeff5",
+            "dotActiveBorderColor": "#d6dee6",
             "handleColorDisabled": "#bfbfbf",
             "fontFamily": "Inter"
         },
@@ -814,8 +814,8 @@
             "lineHeight": 1.6666666666666667,
             "fontSize": 12,
             "controlHeightLG": 34,
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorFillContent": "rgba(0, 0, 0, 0.06)",
+            "colorText": "#1c2c3d",
+            "colorFillContent": "rgba(5, 23, 41, 0.06)",
             "fontFamily": "Inter"
         },
         "Radio": {
@@ -831,8 +831,8 @@
             "fontSizeLG": 14,
             "fontSize": 12,
             "controlOutlineWidth": 2,
-            "controlOutline": "rgba(5, 145, 255, 0.1)",
-            "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
+            "controlOutline": "rgba(5, 23, 41, 0.1)",
+            "controlItemBgActiveDisabled": "rgba(5, 23, 41, 0.15)",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
@@ -841,24 +841,24 @@
             "borderRadius": 8,
             "colorWhite": "#ffffff",
             "colorTextLightSolid": "#ffffff",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimaryActive": "#006d75",
-            "colorPrimary": "#08979c",
-            "colorBorder": "#d9d9d9",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorTextDisabled": "#bdc7d1",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimaryActive": "#051729",
+            "colorPrimary": "#1c2c3d",
+            "colorBorder": "#bdc7d1",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
             "wrapperMarginInlineEnd": 8,
-            "dotColorDisabled": "rgba(0, 0, 0, 0.25)",
-            "buttonSolidCheckedHoverBg": "#13c2c2",
+            "dotColorDisabled": "#bdc7d1",
+            "buttonSolidCheckedHoverBg": "#394857",
             "buttonSolidCheckedColor": "#ffffff",
-            "buttonSolidCheckedBg": "#08979c",
-            "buttonSolidCheckedActiveBg": "#006d75",
-            "buttonColor": "rgba(0, 0, 0, 0.88)",
-            "buttonCheckedColorDisabled": "rgba(0, 0, 0, 0.25)",
-            "buttonCheckedBgDisabled": "rgba(0, 0, 0, 0.15)",
+            "buttonSolidCheckedBg": "#1c2c3d",
+            "buttonSolidCheckedActiveBg": "#051729",
+            "buttonColor": "#1c2c3d",
+            "buttonCheckedColorDisabled": "#bdc7d1",
+            "buttonCheckedBgDisabled": "rgba(5, 23, 41, 0.15)",
             "buttonCheckedBg": "#ffffff",
             "buttonBg": "#ffffff",
             "fontFamily": "Inter"
@@ -876,9 +876,9 @@
             "controlHeight": 28,
             "borderRadiusXS": 4,
             "borderRadiusLG": 10,
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorTextHeading": "#1c2c3d",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
             "colorBgElevated": "#ffffff",
             "fontFamily": "Inter"
         },
@@ -898,12 +898,12 @@
             "borderRadiusSM": 6,
             "borderRadiusLG": 10,
             "colorWarning": "#faad14",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorTextHeading": "#1c2c3d",
+            "colorText": "#1c2c3d",
             "colorSuccess": "#389e0d",
-            "colorInfo": "#08979c",
-            "colorIconHover": "rgba(0, 0, 0, 0.88)",
-            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorInfo": "#1c2c3d",
+            "colorIconHover": "#1c2c3d",
+            "colorIcon": "#758391",
             "colorError": "#d61010",
             "colorBgElevated": "#ffffff",
             "lineHeightLG": 1.5714285714285714,
@@ -920,8 +920,8 @@
             "borderRadiusXS": 4,
             "borderRadius": 8,
             "colorTextLightSolid": "#ffffff",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorBgSpotlight": "rgba(0, 0, 0, 0.85)",
+            "colorText": "#1c2c3d",
+            "colorBgSpotlight": "rgba(5, 23, 41, 0.9)",
             "fontFamily": "Inter"
         },
         "Menu": {
@@ -943,14 +943,14 @@
             "lineHeight": 1.6666666666666667,
             "fontSizeLG": 14,
             "fontSize": 12,
-            "controlItemBgActive": "#e6fffb",
+            "controlItemBgActive": "#f5f7fa",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "borderRadius": 8,
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimary": "#08979c",
-            "colorFillContent": "rgba(0, 0, 0, 0.06)",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimary": "#1c2c3d",
+            "colorFillContent": "rgba(5, 23, 41, 0.06)",
             "colorErrorHover": "#de4040",
             "colorErrorBg": "#fbe7e7",
             "colorError": "#d61010",
@@ -958,23 +958,23 @@
             "colorBgContainer": "#ffffff",
             "subMenuItemBorderRadius": 6,
             "popupBg": "#ffffff",
-            "itemSelectedColor": "rgba(0, 0, 0, 0.88)",
-            "itemSelectedBg": "rgba(0, 0, 0, 0.06)",
-            "itemHoverColor": "rgba(0, 0, 0, 0.88)",
-            "itemHoverBg": "rgba(0, 0, 0, 0.06)",
+            "itemSelectedColor": "#1c2c3d",
+            "itemSelectedBg": "#f5f7fa",
+            "itemHoverColor": "#1c2c3d",
+            "itemHoverBg": "rgba(5, 23, 41, 0.06)",
             "itemHeight": 28,
-            "itemDisabledColor": "rgba(0, 0, 0, 0.25)",
-            "itemColor": "rgba(0, 0, 0, 0.65)",
+            "itemDisabledColor": "#bdc7d1",
+            "itemColor": "#586673",
             "itemBorderRadius": 10,
             "itemBg": "#ffffff",
             "iconSize": 12,
-            "horizontalItemSelectedColor": "#08979c",
+            "horizontalItemSelectedColor": "#1c2c3d",
             "horizontalItemSelectedBg": "rgba(0, 0, 0, 0)",
-            "horizontalItemHoverColor": "#08979c",
+            "horizontalItemHoverColor": "#1c2c3d",
             "horizontalItemHoverBg": "rgba(0, 0, 0, 0)",
-            "groupTitleColor": "rgba(0, 0, 0, 0.45)",
+            "groupTitleColor": "#758391",
             "darkItemSelectedColor": "#ffffff",
-            "darkItemSelectedBg": "#08979c",
+            "darkItemSelectedBg": "#1c2c3d",
             "darkItemHoverColor": "#ffffff",
             "darkItemHoverBg": "rgba(0, 0, 0, 0)",
             "collapsedIconSize": 14,
@@ -1016,25 +1016,25 @@
             "borderRadius": 8,
             "colorWarningBorderHover": "#ffd666",
             "colorWarning": "#faad14",
-            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimary": "#08979c",
-            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorTextPlaceholder": "#bdc7d1",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimary": "#1c2c3d",
+            "colorFillAlter": "rgba(5, 23, 41, 0.02)",
             "colorErrorBorderHover": "#e67070",
             "colorError": "#d61010",
-            "colorBorder": "#d9d9d9",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBorder": "#bdc7d1",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
-            "hoverBorderColor": "#13c2c2",
-            "handleHoverColor": "#08979c",
-            "handleBorderColor": "#d9d9d9",
+            "hoverBorderColor": "#394857",
+            "handleHoverColor": "#1c2c3d",
+            "handleBorderColor": "#bdc7d1",
             "handleBg": "#ffffff",
-            "handleActiveBg": "rgba(0, 0, 0, 0.02)",
-            "addonBg": "rgba(0, 0, 0, 0.02)",
-            "activeBorderColor": "#08979c",
+            "handleActiveBg": "rgba(5, 23, 41, 0.02)",
+            "addonBg": "rgba(5, 23, 41, 0.02)",
+            "activeBorderColor": "#1c2c3d",
             "activeBg": "#ffffff",
             "hoverBg": "#ffffff",
             "inputFontSize": 12,
@@ -1057,8 +1057,8 @@
             "fontSizeIcon": 12,
             "controlHeightLG": 34,
             "colorTextLightSolid": "#ffffff",
-            "colorBgMask": "rgba(0, 0, 0, 0.45)",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)"
+            "colorBgMask": "rgba(5, 23, 41, 0.45)",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)"
         },
         "Card": {
             "headerHeightSM": 38,
@@ -1075,12 +1075,12 @@
             "fontWeightStrong": 600,
             "fontSize": 12,
             "borderRadiusLG": 10,
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimary": "#08979c",
-            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-            "colorBorderSecondary": "#f0f0f0",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorPrimary": "#1c2c3d",
+            "colorFillAlter": "rgba(5, 23, 41, 0.02)",
+            "colorBorderSecondary": "#eaeff5",
             "colorBgContainer": "#ffffff",
             "headerBg": "rgba(0, 0, 0, 0)",
             "headerFontSize": 14,
@@ -1098,7 +1098,7 @@
             "fontSize": 12,
             "controlHeightSM": 24,
             "controlHeightLG": 34,
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorText": "#1c2c3d",
             "colorBgContainer": "#ffffff",
             "fontFamily": "Inter"
         },
@@ -1118,23 +1118,23 @@
             "fontSizeLG": 14,
             "fontSizeIcon": 12,
             "fontSize": 12,
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6fffb",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+            "controlItemBgActive": "#f5f7fa",
             "controlInteractiveSize": 16,
             "controlHeight": 28,
             "borderRadiusSM": 6,
             "colorWhite": "#ffffff",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimary": "#08979c",
-            "colorBorder": "#d9d9d9",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorPrimaryHover": "#394857",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimary": "#1c2c3d",
+            "colorBorder": "#bdc7d1",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
-            "optionSelectedBg": "#e6fffb",
+            "optionSelectedBg": "#f5f7fa",
             "menuPadding": 4,
             "optionSelectedFontWeight": 600,
             "fontFamily": "Inter"
@@ -1157,26 +1157,26 @@
             "fontWeightStrong": 600,
             "fontSizeSM": 10,
             "fontSize": 12,
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6fffb",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+            "controlItemBgActive": "#f5f7fa",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "borderRadiusSM": 6,
             "borderRadiusLG": 10,
             "colorTextLightSolid": "#ffffff",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimary": "#08979c",
-            "colorLinkHover": "#13c2c2",
-            "colorLinkActive": "#006d75",
-            "colorLink": "#08979c",
-            "colorIconHover": "rgba(0, 0, 0, 0.88)",
-            "colorIcon": "rgba(0, 0, 0, 0.45)",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDisabled": "#bdc7d1",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorPrimary": "#1c2c3d",
+            "colorLinkHover": "#394857",
+            "colorLinkActive": "#051729",
+            "colorLink": "#1c2c3d",
+            "colorIconHover": "#1c2c3d",
+            "colorIcon": "#758391",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
-            "itemActiveBg": "#e6fffb",
+            "itemActiveBg": "#f5f7fa",
             "fullPanelBg": "#ffffff",
             "fullBg": "#ffffff",
             "fontHeightSM": 20,
@@ -1197,7 +1197,7 @@
             "contentFontSizeLG": 14,
             "contentFontSize": 12,
             "controlOutlineWidth": 2,
-            "controlOutline": "rgba(5, 145, 255, 0.1)",
+            "controlOutline": "rgba(5, 23, 41, 0.1)",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
@@ -1205,44 +1205,44 @@
             "borderRadiusLG": 10,
             "borderRadius": 8,
             "colorTextLightSolid": "#ffffff",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimaryActive": "#006d75",
-            "colorPrimary": "#08979c",
-            "colorLinkHover": "#13c2c2",
-            "colorLinkActive": "#006d75",
-            "colorLink": "#08979c",
+            "colorTextDisabled": "#bdc7d1",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimaryActive": "#051729",
+            "colorPrimary": "#1c2c3d",
+            "colorLinkHover": "#394857",
+            "colorLinkActive": "#051729",
+            "colorLink": "#1c2c3d",
             "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
             "colorErrorHover": "#de4040",
             "colorErrorBorderHover": "#e67070",
             "colorErrorBg": "#fbe7e7",
             "colorErrorActive": "#ab0d0d",
             "colorError": "#d61010",
-            "colorBorder": "#d9d9d9",
-            "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBorder": "#bdc7d1",
+            "colorBgTextActive": "rgba(5, 23, 41, 0.15)",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
-            "textHoverBg": "rgba(0, 0, 0, 0.06)",
+            "textHoverBg": "rgba(5, 23, 41, 0.06)",
             "primaryColor": "#ffffff",
             "onlyIconSize": 14,
             "linkHoverBg": "rgba(0, 0, 0, 0)",
-            "groupBorderColor": "#13c2c2",
+            "groupBorderColor": "#394857",
             "ghostBg": "rgba(0, 0, 0, 0)",
             "defaultGhostColor": "#ffffff",
             "defaultGhostBorderColor": "#ffffff",
-            "defaultColor": "rgba(0, 0, 0, 0.88)",
-            "defaultBorderColor": "#d9d9d9",
+            "defaultColor": "#1c2c3d",
+            "defaultBorderColor": "#bdc7d1",
             "defaultBg": "#ffffff",
             "dangerColor": "#ffffff",
-            "borderColorDisabled": "#d9d9d9",
+            "borderColorDisabled": "#bdc7d1",
             "defaultHoverBg": "#ffffff",
-            "defaultHoverColor": "#13c2c2",
-            "defaultHoverBorderColor": "#13c2c2",
+            "defaultHoverColor": "#394857",
+            "defaultHoverBorderColor": "#394857",
             "defaultActiveBg": "#ffffff",
-            "defaultActiveColor": "#006d75",
-            "defaultActiveBorderColor": "#006d75",
+            "defaultActiveColor": "#051729",
+            "defaultActiveBorderColor": "#051729",
             "fontWeight": 400,
             "contentFontSizeSM": 12,
             "contentLineHeightLG": 1.5714285714285714,
@@ -1259,11 +1259,11 @@
             "fontSizeSM": 10,
             "fontSize": 12,
             "colorWarning": "#faad14",
-            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextPlaceholder": "#bdc7d1",
             "colorTextLightSolid": "#ffffff",
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorText": "#1c2c3d",
             "colorSuccess": "#389e0d",
-            "colorPrimary": "#08979c",
+            "colorPrimary": "#1c2c3d",
             "colorErrorHover": "#de4040",
             "colorError": "#d61010",
             "colorBorderBg": "#ffffff",
@@ -1291,20 +1291,20 @@
             "fontSizeLG": 14,
             "fontSize": 12,
             "controlOutlineWidth": 2,
-            "controlOutline": "rgba(5, 145, 255, 0.1)",
+            "controlOutline": "rgba(5, 23, 41, 0.1)",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
             "colorWarning": "#faad14",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
             "colorSuccess": "#389e0d",
-            "colorPrimary": "#08979c",
+            "colorPrimary": "#1c2c3d",
             "colorError": "#d61010",
-            "colorBorder": "#d9d9d9",
+            "colorBorder": "#bdc7d1",
             "labelRequiredMarkColor": "#d61010",
-            "labelColor": "rgba(0, 0, 0, 0.88)",
+            "labelColor": "#1c2c3d",
             "itemMarginBottom": 24,
             "labelColonMarginInlineEnd": 8,
             "labelColonMarginInlineStart": 2,
@@ -1324,9 +1324,9 @@
             "borderRadiusSM": 6,
             "borderRadiusLG": 10,
             "borderRadius": 8,
-            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextPlaceholder": "#bdc7d1",
             "colorTextLightSolid": "#ffffff",
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorText": "#1c2c3d",
             "colorBorderBg": "#ffffff",
             "containerSizeSM": 24,
             "containerSizeLG": 34,
@@ -1350,12 +1350,12 @@
             "borderRadius": 8,
             "colorWhite": "#ffffff",
             "colorTextLightSolid": "#ffffff",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimary": "#08979c",
-            "colorIconHover": "rgba(0, 0, 0, 0.88)",
-            "colorIcon": "rgba(0, 0, 0, 0.45)",
-            "colorFill": "rgba(0, 0, 0, 0.15)",
-            "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
+            "colorText": "#1c2c3d",
+            "colorPrimary": "#1c2c3d",
+            "colorIconHover": "#1c2c3d",
+            "colorIcon": "#758391",
+            "colorFill": "rgba(5, 23, 41, 0.15)",
+            "colorBgTextHover": "rgba(5, 23, 41, 0.06)",
             "colorBgElevated": "#ffffff",
             "closeBtnSize": 22,
             "primaryNextBtnHoverBg": "#f0f0f0",
@@ -1372,8 +1372,8 @@
             "controlHeight": 28,
             "borderRadiusLG": 10,
             "colorWhite": "#ffffff",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
             "fontFamily": "Inter"
         },
         "Upload": {
@@ -1390,21 +1390,21 @@
             "fontSizeHeading3": 20,
             "fontSizeHeading2": 26,
             "fontSize": 12,
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
             "controlHeightLG": 34,
             "borderRadiusLG": 10,
             "colorTextLightSolid": "#ffffff",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimary": "#08979c",
-            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimary": "#1c2c3d",
+            "colorFillAlter": "rgba(5, 23, 41, 0.02)",
             "colorErrorBg": "#fbe7e7",
             "colorError": "#d61010",
-            "colorBorder": "#d9d9d9",
-            "colorBgMask": "rgba(0, 0, 0, 0.45)",
+            "colorBorder": "#bdc7d1",
+            "colorBgMask": "rgba(5, 23, 41, 0.45)",
             "fontHeight": 22,
             "fontHeightSM": 20,
             "lineWidthFocus": 4,
@@ -1429,14 +1429,14 @@
             "fontSizeHeading1": 32,
             "fontSize": 12,
             "colorWarning": "#faad14",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
             "colorSuccess": "#389e0d",
-            "colorLinkHover": "#13c2c2",
-            "colorLinkActive": "#006d75",
-            "colorLink": "#08979c",
+            "colorLinkHover": "#394857",
+            "colorLinkActive": "#051729",
+            "colorLink": "#1c2c3d",
             "colorErrorHover": "#de4040",
             "colorErrorActive": "#ab0d0d",
             "colorError": "#d61010",
@@ -1452,25 +1452,25 @@
             "lineHeight": 1.6666666666666667,
             "fontSizeLG": 14,
             "fontSize": 12,
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6fffb",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+            "controlItemBgActive": "#f5f7fa",
             "controlInteractiveSize": 16,
             "controlHeightSM": 24,
             "borderRadiusSM": 6,
             "borderRadius": 8,
             "colorWhite": "#ffffff",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimary": "#08979c",
-            "colorBorder": "#d9d9d9",
+            "colorTextDisabled": "#bdc7d1",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimary": "#1c2c3d",
+            "colorBorder": "#bdc7d1",
             "colorBgElevated": "#ffffff",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
             "titleHeight": 24,
-            "nodeSelectedBg": "#e6fffb",
-            "nodeHoverBg": "rgba(0, 0, 0, 0.04)",
+            "nodeSelectedBg": "#f5f7fa",
+            "nodeHoverBg": "rgba(5, 23, 41, 0.04)",
             "fontFamily": "Inter"
         },
         "Tree": {
@@ -1485,27 +1485,27 @@
             "lineHeight": 1.6666666666666667,
             "fontSizeLG": 14,
             "fontSize": 12,
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6fffb",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+            "controlItemBgActive": "#f5f7fa",
             "controlInteractiveSize": 16,
             "controlHeightSM": 24,
             "borderRadiusSM": 6,
             "borderRadius": 8,
             "colorWhite": "#ffffff",
             "colorTextLightSolid": "#ffffff",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimary": "#08979c",
-            "colorBorder": "#d9d9d9",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorTextDisabled": "#bdc7d1",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimary": "#1c2c3d",
+            "colorBorder": "#bdc7d1",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
             "titleHeight": 24,
-            "nodeSelectedBg": "#e6fffb",
-            "nodeHoverBg": "rgba(0, 0, 0, 0.04)",
+            "nodeSelectedBg": "#f5f7fa",
+            "nodeHoverBg": "rgba(5, 23, 41, 0.04)",
             "directoryNodeSelectedColor": "#ffffff",
-            "directoryNodeSelectedBg": "#08979c",
+            "directoryNodeSelectedBg": "#1c2c3d",
             "fontFamily": "Inter"
         },
         "Tag": {
@@ -1519,26 +1519,26 @@
             "fontSize": 12,
             "borderRadiusSM": 6,
             "colorTextLightSolid": "#ffffff",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimaryActive": "#006d75",
-            "colorPrimary": "#08979c",
-            "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
-            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
-            "colorFillQuaternary": "rgba(0, 0, 0, 0.02)",
-            "colorBorder": "#d9d9d9",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimaryActive": "#051729",
+            "colorPrimary": "#1c2c3d",
+            "colorFillTertiary": "rgba(5, 23, 41, 0.04)",
+            "colorFillSecondary": "rgba(5, 23, 41, 0.06)",
+            "colorFillQuaternary": "rgba(5, 23, 41, 0.02)",
+            "colorBorder": "#bdc7d1",
             "colorWarningBorder": "#ffe58f",
             "colorWarningBg": "#fffbe6",
             "colorSuccessBorder": "#b7eb8f",
             "colorSuccessBg": "#f6ffed",
-            "colorInfoBorder": "#87e8de",
-            "colorInfoBg": "#e6fffb",
+            "colorInfoBorder": "#d6dee6",
+            "colorInfoBg": "#f5f7fa",
             "colorErrorBorder": "#ef9f9f",
             "colorErrorBg": "#fbe7e7",
-            "defaultColor": "rgba(0, 0, 0, 0.88)",
-            "defaultBg": "rgba(0, 0, 0, 0.02)",
+            "defaultColor": "#1c2c3d",
+            "defaultBg": "rgba(5, 23, 41, 0.02)",
             "fontFamily": "Inter"
         },
         "Statistic": {
@@ -1547,9 +1547,9 @@
             "lineHeight": 1.6666666666666667,
             "fontSizeHeading3": 20,
             "fontSize": 12,
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
             "contentFontSize": 20,
             "titleFontSize": 12,
             "fontFamily": "Inter"
@@ -1564,8 +1564,8 @@
             "controlHeightLG": 34,
             "controlHeight": 28,
             "borderRadiusSM": 6,
-            "colorFillContent": "rgba(0, 0, 0, 0.06)",
-            "colorFill": "rgba(0, 0, 0, 0.15)"
+            "colorFillContent": "rgba(5, 23, 41, 0.06)",
+            "colorFill": "rgba(5, 23, 41, 0.15)"
         },
         "Select": {
             "paddingXXS": 4,
@@ -1581,9 +1581,9 @@
             "controlPaddingHorizontalSM": 8,
             "controlPaddingHorizontal": 12,
             "controlOutlineWidth": 2,
-            "controlOutline": "rgba(5, 145, 255, 0.1)",
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6fffb",
+            "controlOutline": "rgba(5, 23, 41, 0.1)",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+            "controlItemBgActive": "#f5f7fa",
             "controlHeightXS": 16,
             "controlHeightSM": 28,
             "controlHeightLG": 34,
@@ -1594,37 +1594,38 @@
             "borderRadius": 8,
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
             "colorWarningHover": "#ffd666",
-            "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
-            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimary": "#08979c",
-            "colorIconHover": "rgba(0, 0, 0, 0.88)",
-            "colorIcon": "rgba(0, 0, 0, 0.45)",
-            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+            "colorTextTertiary": "#758391",
+            "colorTextQuaternary": "#bdc7d1",
+            "colorTextPlaceholder": "#bdc7d1",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimary": "#1c2c3d",
+            "colorIconHover": "#1c2c3d",
+            "colorIcon": "#758391",
+            "colorFillSecondary": "rgba(5, 23, 41, 0.06)",
             "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
             "colorErrorHover": "#de4040",
-            "colorBorder": "#d9d9d9",
+            "colorBorder": "#bdc7d1",
             "colorBgElevated": "#ffffff",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
             "singleItemHeightLG": 34,
             "selectorBg": "#ffffff",
-            "optionSelectedColor": "rgba(0, 0, 0, 0.88)",
-            "optionSelectedBg": "#e6fffb",
+            "optionSelectedColor": "#1c2c3d",
+            "optionSelectedBg": "#f5f7fa",
             "optionHeight": 28,
-            "optionActiveBg": "rgba(0, 0, 0, 0.04)",
-            "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
+            "optionActiveBg": "rgba(5, 23, 41, 0.04)",
+            "multipleSelectorBgDisabled": "rgba(5, 23, 41, 0.04)",
             "multipleItemHeightLG": 28,
             "multipleItemHeight": 24,
-            "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
+            "multipleItemColorDisabled": "#bdc7d1",
             "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
             "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
-            "multipleItemBg": "rgba(0, 0, 0, 0.06)",
+            "multipleItemBg": "rgba(5, 23, 41, 0.06)",
             "clearBg": "#ffffff",
+            "optionFontSize": 12,
             "optionSelectedFontWeight": 600,
             "fontFamily": "Inter"
         },
@@ -1639,11 +1640,11 @@
             "fontSizeHeading3": 20,
             "fontSize": 12,
             "colorWarning": "#faad14",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDescription": "#758391",
             "colorSuccess": "#389e0d",
-            "colorInfo": "#08979c",
-            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorInfo": "#1c2c3d",
+            "colorFillAlter": "rgba(5, 23, 41, 0.02)",
             "colorError": "#d61010",
             "iconFontSize": 72,
             "subtitleFontSize": 12,
@@ -1656,14 +1657,14 @@
             "lineHeight": 1.6666666666666667,
             "fontSizeSM": 10,
             "fontSize": 12,
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorText": "#1c2c3d",
             "colorSuccess": "#389e0d",
-            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+            "colorFillSecondary": "rgba(5, 23, 41, 0.06)",
             "colorError": "#d61010",
             "colorBgContainer": "#ffffff",
-            "remainingColor": "rgba(0, 0, 0, 0.06)",
-            "defaultColor": "#08979c",
-            "circleTextColor": "rgba(0, 0, 0, 0.88)",
+            "remainingColor": "rgba(5, 23, 41, 0.06)",
+            "defaultColor": "#1c2c3d",
+            "circleTextColor": "#1c2c3d",
             "fontFamily": "Inter"
         },
         "Popconfirm": {
@@ -1672,8 +1673,8 @@
             "fontWeightStrong": 600,
             "fontSize": 12,
             "colorWarning": "#faad14",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorText": "rgba(0, 0, 0, 0.88)"
+            "colorTextHeading": "#1c2c3d",
+            "colorText": "#1c2c3d"
         },
         "Pagination": {
             "screenSM": 576,
@@ -1695,8 +1696,8 @@
             "controlPaddingHorizontalSM": 8,
             "controlPaddingHorizontal": 12,
             "controlOutlineWidth": 2,
-            "controlOutline": "rgba(5, 145, 255, 0.1)",
-            "controlItemBgActiveDisabled": "rgba(0, 0, 0, 0.15)",
+            "controlOutline": "rgba(5, 23, 41, 0.1)",
+            "controlItemBgActiveDisabled": "rgba(5, 23, 41, 0.15)",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
@@ -1704,26 +1705,26 @@
             "borderRadiusLG": 10,
             "borderRadius": 8,
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
-            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimary": "#08979c",
-            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorTextPlaceholder": "#bdc7d1",
+            "colorTextDisabled": "#bdc7d1",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimary": "#1c2c3d",
+            "colorFillAlter": "rgba(5, 23, 41, 0.02)",
             "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
-            "colorBorder": "#d9d9d9",
-            "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
-            "colorBgTextActive": "rgba(0, 0, 0, 0.15)",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBorder": "#bdc7d1",
+            "colorBgTextHover": "rgba(5, 23, 41, 0.06)",
+            "colorBgTextActive": "rgba(5, 23, 41, 0.15)",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
             "itemSizeSM": 24,
             "itemSize": 28,
             "itemLinkBg": "#ffffff",
             "itemInputBg": "#ffffff",
             "itemBg": "#ffffff",
-            "itemActiveColorDisabled": "rgba(0, 0, 0, 0.25)",
-            "itemActiveBgDisabled": "rgba(0, 0, 0, 0.15)",
+            "itemActiveColorDisabled": "#bdc7d1",
+            "itemActiveBgDisabled": "rgba(5, 23, 41, 0.15)",
             "itemActiveBg": "#ffffff",
             "fontFamily": "Inter"
         },
@@ -1749,14 +1750,14 @@
             "borderRadiusSM": 6,
             "borderRadiusLG": 10,
             "colorWarning": "#faad14",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorTextHeading": "#1c2c3d",
+            "colorText": "#1c2c3d",
             "colorSuccess": "#389e0d",
-            "colorPrimaryBorder": "#87e8de",
-            "colorIconHover": "rgba(0, 0, 0, 0.88)",
-            "colorIcon": "rgba(0, 0, 0, 0.45)",
-            "colorBgMask": "rgba(0, 0, 0, 0.45)",
-            "titleColor": "rgba(0, 0, 0, 0.88)",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorIconHover": "#1c2c3d",
+            "colorIcon": "#758391",
+            "colorBgMask": "rgba(5, 23, 41, 0.45)",
+            "titleColor": "#1c2c3d",
             "headerBg": "#ffffff",
             "footerBg": "rgba(0, 0, 0, 0)",
             "contentBg": "#ffffff",
@@ -1775,9 +1776,9 @@
             "controlHeightLG": 34,
             "borderRadiusLG": 10,
             "colorWarning": "#faad14",
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorText": "#1c2c3d",
             "colorSuccess": "#389e0d",
-            "colorInfo": "#08979c",
+            "colorInfo": "#1c2c3d",
             "colorError": "#d61010",
             "contentBg": "#ffffff",
             "fontFamily": "Inter"
@@ -1808,12 +1809,12 @@
             "controlHeightLG": 34,
             "controlHeight": 28,
             "borderRadiusLG": 10,
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimary": "#08979c",
-            "colorBorder": "#d9d9d9",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorPrimary": "#1c2c3d",
+            "colorBorder": "#bdc7d1",
             "headerBg": "rgba(0, 0, 0, 0)",
             "footerBg": "rgba(0, 0, 0, 0)",
             "avatarMarginRight": 16,
@@ -1831,22 +1832,22 @@
             "fontSizeLG": 14,
             "fontSizeIcon": 12,
             "fontSize": 12,
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
             "controlHeightLG": 34,
             "borderRadiusSM": 6,
             "borderRadiusLG": 10,
             "colorTextLightSolid": "#ffffff",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimary": "#08979c",
-            "colorFillContent": "rgba(0, 0, 0, 0.06)",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorPrimaryHover": "#394857",
+            "colorPrimary": "#1c2c3d",
+            "colorFillContent": "rgba(5, 23, 41, 0.06)",
             "colorBgElevated": "#ffffff",
             "fontFamily": "Inter"
         },
         "Empty": {
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
             "fontSize": 12,
             "lineHeight": 1.6666666666666667
         },
@@ -1862,20 +1863,20 @@
             "fontSizeIcon": 12,
             "fontSize": 12,
             "controlPaddingHorizontal": 12,
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActiveHover": "#b5f5ec",
-            "controlItemBgActive": "#e6fffb",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+            "controlItemBgActiveHover": "#eaeff5",
+            "controlItemBgActive": "#f5f7fa",
             "controlHeight": 28,
             "borderRadiusXS": 4,
             "borderRadiusSM": 6,
             "borderRadiusLG": 10,
             "colorTextLightSolid": "#ffffff",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimary": "#08979c",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimary": "#1c2c3d",
             "colorError": "#d61010",
             "colorBgElevated": "#ffffff",
             "paddingBlock": 5,
@@ -1890,11 +1891,11 @@
             "lineHeightLG": 1.5714285714285714,
             "fontWeightStrong": 600,
             "fontSizeLG": 14,
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorIconHover": "rgba(0, 0, 0, 0.88)",
-            "colorIcon": "rgba(0, 0, 0, 0.45)",
-            "colorBgMask": "rgba(0, 0, 0, 0.45)",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorIconHover": "#1c2c3d",
+            "colorIcon": "#758391",
+            "colorBgMask": "rgba(5, 23, 41, 0.45)",
             "colorBgElevated": "#ffffff",
             "lineWidthFocus": 4
         },
@@ -1905,9 +1906,9 @@
             "lineWidth": 1,
             "fontSizeLG": 14,
             "fontSize": 12,
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
+            "colorTextHeading": "#1c2c3d",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
             "lineHeight": 1.6666666666666667,
             "fontFamily": "Inter"
         },
@@ -1927,14 +1928,14 @@
             "fontSizeLG": 14,
             "fontSize": 12,
             "borderRadiusLG": 10,
-            "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
-            "colorTextSecondary": "rgba(0, 0, 0, 0.65)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-            "titleColor": "rgba(0, 0, 0, 0.88)",
-            "labelBg": "rgba(0, 0, 0, 0.02)",
-            "contentColor": "rgba(0, 0, 0, 0.88)",
+            "colorTextTertiary": "#758391",
+            "colorTextSecondary": "#586673",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorFillAlter": "rgba(5, 23, 41, 0.02)",
+            "titleColor": "#1c2c3d",
+            "labelBg": "rgba(5, 23, 41, 0.02)",
+            "contentColor": "#1c2c3d",
             "fontFamily": "Inter"
         },
         "DatePicker": {
@@ -1955,9 +1956,9 @@
             "controlPaddingHorizontalSM": 8,
             "controlPaddingHorizontal": 12,
             "controlOutlineWidth": 2,
-            "controlOutline": "rgba(5, 145, 255, 0.1)",
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6fffb",
+            "controlOutline": "rgba(5, 23, 41, 0.1)",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+            "controlItemBgActive": "#f5f7fa",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
             "controlHeight": 28,
@@ -1968,37 +1969,37 @@
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
             "colorWarningHover": "#ffd666",
             "colorWarning": "#faad14",
-            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
+            "colorTextQuaternary": "#bdc7d1",
+            "colorTextPlaceholder": "#bdc7d1",
             "colorTextLightSolid": "#ffffff",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimary": "#08979c",
-            "colorLinkHover": "#13c2c2",
-            "colorLinkActive": "#006d75",
-            "colorLink": "#08979c",
-            "colorIconHover": "rgba(0, 0, 0, 0.88)",
-            "colorIcon": "rgba(0, 0, 0, 0.45)",
-            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorPrimaryHover": "#394857",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimary": "#1c2c3d",
+            "colorLinkHover": "#394857",
+            "colorLinkActive": "#051729",
+            "colorLink": "#1c2c3d",
+            "colorIconHover": "#1c2c3d",
+            "colorIcon": "#758391",
+            "colorFillAlter": "rgba(5, 23, 41, 0.02)",
             "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
             "colorErrorHover": "#de4040",
             "colorError": "#d61010",
-            "colorBorder": "#d9d9d9",
+            "colorBorder": "#bdc7d1",
             "colorBgElevated": "#ffffff",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
-            "hoverBorderColor": "#13c2c2",
-            "cellHoverBg": "rgba(0, 0, 0, 0.04)",
+            "hoverBorderColor": "#394857",
+            "cellHoverBg": "rgba(5, 23, 41, 0.04)",
             "cellHeight": 24,
-            "activeBorderColor": "#08979c",
+            "activeBorderColor": "#1c2c3d",
             "paddingInline": 11,
             "paddingInlineSM": 7,
-            "colorFillTertiary": "rgba(0, 0, 0, 0.04)",
+            "colorFillTertiary": "rgba(5, 23, 41, 0.04)",
             "colorErrorBg": "#fbe7e7",
             "colorWarningBg": "#fffbe6",
             "colorWarningText": "#faad14",
@@ -2007,15 +2008,15 @@
             "colorErrorBgHover": "#f7cfcf",
             "activeBg": "#ffffff",
             "hoverBg": "#ffffff",
-            "cellBgDisabled": "rgba(0, 0, 0, 0.04)",
-            "cellActiveWithRangeBg": "#e6fffb",
+            "cellBgDisabled": "rgba(5, 23, 41, 0.04)",
+            "cellActiveWithRangeBg": "#f5f7fa",
             "cellHoverWithRangeBg": "#c8dfff",
             "cellRangeBorderColor": "#7cb3ff",
-            "multipleItemBg": "rgba(0, 0, 0, 0.06)",
+            "multipleItemBg": "rgba(5, 23, 41, 0.06)",
             "multipleItemBorderColor": "rgba(0, 0, 0, 0)",
             "multipleItemBorderColorDisabled": "rgba(0, 0, 0, 0)",
-            "multipleItemColorDisabled": "rgba(0, 0, 0, 0.25)",
-            "multipleSelectorBgDisabled": "rgba(0, 0, 0, 0.04)",
+            "multipleItemColorDisabled": "#bdc7d1",
+            "multipleSelectorBgDisabled": "rgba(5, 23, 41, 0.04)",
             "cellWidth": 36,
             "multipleItemHeight": 24,
             "multipleItemHeightLG": 32,
@@ -2051,13 +2052,13 @@
             "fontSizeIcon": 12,
             "fontSize": 12,
             "borderRadiusLG": 10,
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorFillAlter": "rgba(0, 0, 0, 0.02)",
-            "colorBorder": "#d9d9d9",
+            "colorTextHeading": "#1c2c3d",
+            "colorTextDisabled": "#bdc7d1",
+            "colorText": "#1c2c3d",
+            "colorFillAlter": "rgba(5, 23, 41, 0.02)",
+            "colorBorder": "#bdc7d1",
             "colorBgContainer": "#ffffff",
-            "headerBg": "rgba(0, 0, 0, 0.02)",
+            "headerBg": "rgba(5, 23, 41, 0.02)",
             "contentBg": "#ffffff",
             "fontHeight": 22,
             "fontHeightLG": 24,
@@ -2076,13 +2077,13 @@
             "controlInteractiveSize": 16,
             "borderRadiusSM": 6,
             "colorWhite": "#ffffff",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimaryBorder": "#87e8de",
-            "colorPrimary": "#08979c",
-            "colorBorder": "#d9d9d9",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorTextDisabled": "#bdc7d1",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorPrimary": "#1c2c3d",
+            "colorBorder": "#bdc7d1",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
             "fontFamily": "Inter"
         },
@@ -2095,13 +2096,13 @@
             "fontSizeIcon": 12,
             "fontSize": 12,
             "borderRadiusSM": 6,
-            "colorPrimaryBorder": "#87e8de",
-            "colorBgTextHover": "rgba(0, 0, 0, 0.06)",
-            "separatorColor": "rgba(0, 0, 0, 0.45)",
-            "linkHoverColor": "rgba(0, 0, 0, 0.88)",
-            "linkColor": "rgba(0, 0, 0, 0.45)",
-            "lastItemColor": "rgba(0, 0, 0, 0.88)",
-            "itemColor": "rgba(0, 0, 0, 0.45)",
+            "colorPrimaryBorder": "#d6dee6",
+            "colorBgTextHover": "rgba(5, 23, 41, 0.06)",
+            "separatorColor": "#758391",
+            "linkHoverColor": "#1c2c3d",
+            "linkColor": "#758391",
+            "lastItemColor": "#1c2c3d",
+            "itemColor": "#758391",
             "separatorMargin": 8,
             "iconFontSize": 12,
             "fontHeight": 22,
@@ -2113,9 +2114,9 @@
             "lineHeight": 1.6666666666666667,
             "fontSizeLG": 14,
             "fontSize": 12,
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorSplit": "rgba(0, 0, 0, 0.06)",
-            "colorPrimary": "#08979c",
+            "colorText": "#1c2c3d",
+            "colorSplit": "rgba(5, 23, 41, 0.06)",
+            "colorPrimary": "#1c2c3d",
             "linkPaddingInlineStart": 16,
             "linkPaddingBlock": 4,
             "fontFamily": "Inter"
@@ -2136,16 +2137,16 @@
             "colorWarningBorder": "#ffe58f",
             "colorWarningBg": "#fffbe6",
             "colorWarning": "#faad14",
-            "colorTextHeading": "rgba(0, 0, 0, 0.88)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorTextHeading": "#1c2c3d",
+            "colorText": "#1c2c3d",
             "colorSuccessBorder": "#b7eb8f",
             "colorSuccessBg": "#f6ffed",
             "colorSuccess": "#389e0d",
-            "colorInfoBorder": "#87e8de",
-            "colorInfoBg": "#e6fffb",
-            "colorInfo": "#08979c",
-            "colorIconHover": "rgba(0, 0, 0, 0.88)",
-            "colorIcon": "rgba(0, 0, 0, 0.45)",
+            "colorInfoBorder": "#d6dee6",
+            "colorInfoBg": "#f5f7fa",
+            "colorInfo": "#1c2c3d",
+            "colorIconHover": "#1c2c3d",
+            "colorIcon": "#758391",
             "colorErrorBorder": "#ef9f9f",
             "colorErrorBg": "#fbe7e7",
             "colorError": "#d61010",
@@ -2166,9 +2167,9 @@
             "controlPaddingHorizontalSM": 8,
             "controlPaddingHorizontal": 12,
             "controlOutlineWidth": 2,
-            "controlOutline": "rgba(5, 145, 255, 0.1)",
-            "controlItemBgHover": "rgba(0, 0, 0, 0.04)",
-            "controlItemBgActive": "#e6fffb",
+            "controlOutline": "rgba(5, 23, 41, 0.1)",
+            "controlItemBgHover": "rgba(5, 23, 41, 0.04)",
+            "controlItemBgActive": "#f5f7fa",
             "controlHeightXS": 16,
             "controlHeightSM": 24,
             "controlHeightLG": 34,
@@ -2180,23 +2181,23 @@
             "colorWarningOutline": "rgba(255, 215, 5, 0.1)",
             "colorWarningHover": "#ffd666",
             "colorWarning": "#faad14",
-            "colorTextTertiary": "rgba(0, 0, 0, 0.45)",
-            "colorTextQuaternary": "rgba(0, 0, 0, 0.25)",
-            "colorTextPlaceholder": "rgba(0, 0, 0, 0.25)",
-            "colorTextDisabled": "rgba(0, 0, 0, 0.25)",
-            "colorTextDescription": "rgba(0, 0, 0, 0.45)",
-            "colorText": "rgba(0, 0, 0, 0.88)",
-            "colorPrimaryHover": "#13c2c2",
-            "colorPrimary": "#08979c",
-            "colorIconHover": "rgba(0, 0, 0, 0.88)",
-            "colorIcon": "rgba(0, 0, 0, 0.45)",
-            "colorFillSecondary": "rgba(0, 0, 0, 0.06)",
+            "colorTextTertiary": "#758391",
+            "colorTextQuaternary": "#bdc7d1",
+            "colorTextPlaceholder": "#bdc7d1",
+            "colorTextDisabled": "#bdc7d1",
+            "colorTextDescription": "#758391",
+            "colorText": "#1c2c3d",
+            "colorPrimaryHover": "#394857",
+            "colorPrimary": "#1c2c3d",
+            "colorIconHover": "#1c2c3d",
+            "colorIcon": "#758391",
+            "colorFillSecondary": "rgba(5, 23, 41, 0.06)",
             "colorErrorOutline": "rgba(214, 16, 16, 0.06)",
             "colorErrorHover": "#de4040",
             "colorError": "#d61010",
-            "colorBorder": "#d9d9d9",
+            "colorBorder": "#bdc7d1",
             "colorBgElevated": "#ffffff",
-            "colorBgContainerDisabled": "rgba(0, 0, 0, 0.04)",
+            "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)",
             "colorBgContainer": "#ffffff",
             "optionActiveBg": "rgba(0, 0, 0, 0.04)",
             "optionHeight": 32,
@@ -2211,14 +2212,14 @@
             "bodyBg": "#ffffff",
             "footerBg": "#ffffff",
             "headerBg": "#001529",
-            "headerColor": "rgba(0, 0, 0, 0.88)",
+            "headerColor": "#1c2c3d",
             "lightSiderBg": "#ffffff",
             "lightTriggerBg": "#ffffff",
-            "lightTriggerColor": "rgba(0, 0, 0, 0.88)",
+            "lightTriggerColor": "#1c2c3d",
             "siderBg": "#001529",
             "triggerBg": "#002140",
             "triggerColor": "#ffffff",
-            "colorText": "rgba(0, 0, 0, 0.88)",
+            "colorText": "#1c2c3d",
             "headerHeight": 64,
             "triggerHeight": 48,
             "zeroTriggerHeight": 34,

From c16e694072a4c5cd42fb0d011eaa787209614023 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 12:57:00 +0100
Subject: [PATCH 107/117] fix(frontend): bug fix

---
 .../pages/overview/deployments/DeploymentOverview.tsx  | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
index 582caf9b7..ea0efad39 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentOverview.tsx
@@ -129,9 +129,13 @@ const DeploymentOverview = ({
                                                 icon: <Rocket size={16} />,
                                                 onClick: (e) => {
                                                     e.domEvent.stopPropagation()
-                                                    router.push(
-                                                        `/apps/${appId}/playground?variant=${env.deployed_variant_name}`,
-                                                    )
+                                                    if (env.deployed_variant_name) {
+                                                        router.push(
+                                                            `/apps/${appId}/playground?variant=${env.deployed_variant_name}`,
+                                                        )
+                                                    } else {
+                                                        router.push(`/apps/${appId}/playground`)
+                                                    }
                                                 },
                                             },
                                         ],

From 743de173b86670ee35555a9c3961968a7a064ff4 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Tue, 20 Aug 2024 17:21:51 +0100
Subject: [PATCH 108/117] fix(frontend): ui fixes and improvements

---
 agenta-web/src/components/AppSelector/AppCard.tsx    |  4 ++--
 .../automaticEvaluation/AutomaticEvalOverview.tsx    |  1 +
 .../pages/overview/deployments/DeploymentDrawer.tsx  |  9 +--------
 .../pages/overview/variants/VariantDrawer.tsx        |  9 +--------
 .../pages/overview/variants/VariantsOverview.tsx     |  1 +
 agenta-web/src/hooks/useQuery.ts                     | 12 ++++++++----
 6 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/agenta-web/src/components/AppSelector/AppCard.tsx b/agenta-web/src/components/AppSelector/AppCard.tsx
index 96f1912ab..bab8dc9e7 100644
--- a/agenta-web/src/components/AppSelector/AppCard.tsx
+++ b/agenta-web/src/components/AppSelector/AppCard.tsx
@@ -133,11 +133,11 @@ const AppCard: React.FC<{
                 <div data-cy="app-card-link" className={classes.app_card_link}>
                     <div>
                         <Text>Type</Text>
-                        <Tag className="mr-0">Single Prompt</Tag>
+                        <Tag className="mr-0">Template</Tag>
                     </div>
                     <div>
                         <Text>Last modified:</Text>
-                        <Text>{formatDay("2024-08-05T22:32:19.593503Z")}</Text>
+                        <Text>{formatDay(new Date().getTime())}</Text>
                     </div>
                 </div>
             </Card>
diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index 08dbaf50c..8b92f4070 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -196,6 +196,7 @@ const AutomaticEvalOverview = () => {
             title: "Variant",
             dataIndex: "variants",
             key: "variants",
+            fixed: "left",
             onHeaderCell: () => ({
                 style: {minWidth: 160},
             }),
diff --git a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
index f23db98c2..978ec24e9 100644
--- a/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/DeploymentDrawer.tsx
@@ -59,12 +59,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
             textTransform: "capitalize",
         },
     },
-    drawerTabs: {
-        "& .ant-tabs-content-holder": {
-            maxHeight: 700,
-            overflowY: "scroll",
-        },
-    },
     noDataContainer: {
         height: 200,
         display: "flex",
@@ -179,7 +173,7 @@ const DeploymentDrawer = ({
     return (
         <>
             <Drawer
-                width={560}
+                width={720}
                 {...props}
                 destroyOnClose
                 closeIcon={null}
@@ -262,7 +256,6 @@ const DeploymentDrawer = ({
                             <Tabs
                                 destroyInactiveTabPane
                                 defaultActiveKey={selectedLang}
-                                className={classes.drawerTabs}
                                 items={[
                                     {
                                         key: "python",
diff --git a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
index 8bdef50dc..224054cbe 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
@@ -65,12 +65,6 @@ const useStyles = createUseStyles((theme: JSSTheme) => ({
         justifyContent: "center",
         height: 200,
     },
-    drawerTabs: {
-        "& .ant-tabs-content-holder": {
-            maxHeight: 700,
-            overflowY: "scroll",
-        },
-    },
 }))
 
 const VariantDrawer = ({
@@ -87,7 +81,7 @@ const VariantDrawer = ({
     return (
         <Drawer
             closeIcon={null}
-            width={560}
+            width={720}
             destroyOnClose
             {...props}
             title={
@@ -170,7 +164,6 @@ const VariantDrawer = ({
                     <Tabs
                         destroyInactiveTabPane
                         defaultActiveKey={"configuration"}
-                        className={classes.drawerTabs}
                         items={[
                             {
                                 key: "configuration",
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index c5daf5963..042dee5e2 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -112,6 +112,7 @@ const VariantsOverview = ({
             title: "Name",
             dataIndex: "variant_name",
             key: "variant_name",
+            fixed: "left",
             onHeaderCell: () => ({
                 style: {minWidth: 160},
             }),
diff --git a/agenta-web/src/hooks/useQuery.ts b/agenta-web/src/hooks/useQuery.ts
index 73ca497ef..64fdc2928 100644
--- a/agenta-web/src/hooks/useQuery.ts
+++ b/agenta-web/src/hooks/useQuery.ts
@@ -28,10 +28,14 @@ function getUpdateQuery(router: NextRouter, method: Method) {
             }
         })
 
-        router[method]({
-            pathname: window.location.pathname,
-            query: newQuery,
-        })
+        router[method](
+            {
+                pathname: window.location.pathname,
+                query: newQuery,
+            },
+            undefined,
+            {scroll: false},
+        )
     }
 }
 

From e10c73fb87fc8e5c7deaacb8743ba3acc4d89a20 Mon Sep 17 00:00:00 2001
From: Abram <israelvictory87@gmail.com>
Date: Tue, 20 Aug 2024 20:38:41 +0100
Subject: [PATCH 109/117] refactor (backend): replace ModifiedBy API model with
 'modified_by_id'

---
 .../agenta_backend/models/api/api_models.py         | 13 +++----------
 agenta-backend/agenta_backend/models/converters.py  | 12 +++---------
 .../agenta_backend/services/db_manager.py           | 12 +-----------
 3 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/agenta-backend/agenta_backend/models/api/api_models.py b/agenta-backend/agenta_backend/models/api/api_models.py
index 902674770..2c8c9e663 100644
--- a/agenta-backend/agenta_backend/models/api/api_models.py
+++ b/agenta-backend/agenta_backend/models/api/api_models.py
@@ -95,13 +95,6 @@ class AppVariantFromImagePayload(BaseModel):
     variant_name: str
 
 
-class ModifiedBy(BaseModel):
-    id: str
-    uid: str
-    username: str
-    profile_picture: Optional[str] = None
-
-
 class AppVariantResponse(BaseModel):
     app_id: str
     app_name: str
@@ -114,9 +107,9 @@ class AppVariantResponse(BaseModel):
     config_name: str
     uri: Optional[str]
     revision: int
-    date_modified: str
-    date_created: str
-    modified_by: ModifiedBy
+    created_at: str
+    updated_at: str
+    modified_by_id: str
 
 
 class AppVariantRevision(BaseModel):
diff --git a/agenta-backend/agenta_backend/models/converters.py b/agenta-backend/agenta_backend/models/converters.py
index 8ffab9b86..826e91890 100644
--- a/agenta-backend/agenta_backend/models/converters.py
+++ b/agenta-backend/agenta_backend/models/converters.py
@@ -78,7 +78,6 @@
 from agenta_backend.models.api.api_models import (
     App,
     Template,
-    ModifiedBy,
     BaseOutput,
     TestSetOutput,
     TemplateImageInfo,
@@ -332,14 +331,9 @@ async def app_variant_db_to_output(app_variant_db: AppVariantDB) -> AppVariantRe
         config_name=app_variant_db.config_name,  # type: ignore
         uri=uri,
         revision=app_variant_db.revision,  # type: ignore
-        date_modified=str(app_variant_db.updated_at),
-        date_created=str(app_variant_db.created_at),
-        modified_by=ModifiedBy(
-            id=str(app_variant_db.modified_by.id),
-            uid=app_variant_db.modified_by.uid,
-            username=app_variant_db.modified_by.username,
-            profile_picture=None,
-        ),
+        created_at=str(app_variant_db.updated_at),
+        updated_at=str(app_variant_db.created_at),
+        modified_by_id=str(app_variant_db.modified_by_id),
     )
 
     if isCloudEE():
diff --git a/agenta-backend/agenta_backend/services/db_manager.py b/agenta-backend/agenta_backend/services/db_manager.py
index 98ff348f7..054949655 100644
--- a/agenta-backend/agenta_backend/services/db_manager.py
+++ b/agenta-backend/agenta_backend/services/db_manager.py
@@ -211,9 +211,6 @@ async def fetch_app_variant_by_id(
         base_query = select(AppVariantDB).options(
             joinedload(AppVariantDB.base),
             joinedload(AppVariantDB.app),
-            joinedload(AppVariantDB.modified_by.of_type(UserDB)).load_only(
-                UserDB.id, UserDB.uid, UserDB.username
-            ),
         )
         if isCloudEE():
             query = base_query.options(
@@ -474,7 +471,6 @@ async def create_new_app_variant(
             "image",
             "user",
             "base",
-            "modified_by",
         ]
         if isCloudEE():
             attributes_to_refresh.extend(["organization", "workspace"])
@@ -857,7 +853,7 @@ async def get_user_with_id(user_id: str):
         user = result.scalars().first()
         if user is None:
             logger.error("Failed to get user with id")
-            raise Exception("Error while getting user")
+            raise NoResultFound(f"User with id {user_id} not found")
         return user
 
 
@@ -1153,9 +1149,6 @@ async def list_app_variants(app_id: str):
             .options(
                 joinedload(AppVariantDB.app),
                 joinedload(AppVariantDB.base),
-                joinedload(AppVariantDB.modified_by.of_type(UserDB)).load_only(
-                    UserDB.id, UserDB.uid, UserDB.username
-                ),
             )
             .filter_by(app_id=uuid.UUID(app_uuid))
         )
@@ -1856,9 +1849,6 @@ async def get_app_variant_instance_by_id(variant_id: str) -> AppVariantDB:
             .options(
                 joinedload(AppVariantDB.base),
                 joinedload(AppVariantDB.app),
-                joinedload(AppVariantDB.modified_by.of_type(UserDB)).load_only(
-                    UserDB.id, UserDB.uid, UserDB.username
-                ),
             )
             .filter_by(id=uuid.UUID(variant_id))
         )

From b967e5233bd94bc6d221e83f9afb893fd6023296 Mon Sep 17 00:00:00 2001
From: Abram <israelvictory87@gmail.com>
Date: Tue, 20 Aug 2024 20:53:34 +0100
Subject: [PATCH 110/117] refactor (backend): update user_profile endpoint to
 allow optional 'user_id' query parameter

---
 .../agenta_backend/models/api/user_models.py  |  3 ++-
 .../agenta_backend/routers/user_profile.py    | 21 ++++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/agenta-backend/agenta_backend/models/api/user_models.py b/agenta-backend/agenta_backend/models/api/user_models.py
index 10c4573e9..1959587f2 100644
--- a/agenta-backend/agenta_backend/models/api/user_models.py
+++ b/agenta-backend/agenta_backend/models/api/user_models.py
@@ -12,8 +12,9 @@ class TimestampModel(BaseModel):
 class User(TimestampModel):
     id: Optional[str] = None
     uid: str
-    username: str
     email: str
+    username: str
+    profile_picture: Optional[str] = None
     organizations: Optional[List[str]] = None
 
 
diff --git a/agenta-backend/agenta_backend/routers/user_profile.py b/agenta-backend/agenta_backend/routers/user_profile.py
index 6b787a6fd..3153e794c 100644
--- a/agenta-backend/agenta_backend/routers/user_profile.py
+++ b/agenta-backend/agenta_backend/routers/user_profile.py
@@ -1,5 +1,7 @@
-import os
+from typing import Optional
+
 from fastapi import HTTPException, Request
+
 from agenta_backend.services import db_manager
 from agenta_backend.utils.common import APIRouter
 from agenta_backend.models.api.user_models import User
@@ -7,20 +9,23 @@
 router = APIRouter()
 
 
-@router.get("/", operation_id="user_profile")
-async def user_profile(
-    request: Request,
-):
+@router.get("/", operation_id="fetch_user_profile")
+async def user_profile(request: Request, user_id: Optional[str] = None):
     try:
-        user = await db_manager.get_user(request.state.user_id)
+        if user_id is not None:
+            user = await db_manager.get_user_with_id(user_id=user_id)
+        else:
+            user = await db_manager.get_user(request.state.user_id)
+
+        assert user is not None, "User not found. Please ensure that the user_id is specified correctly."
         return User(
             id=str(user.id),
             uid=str(user.uid),
-            username=str(user.username),
             email=str(user.email),
+            username=str(user.username),
             created_at=str(user.created_at),
             updated_at=str(user.updated_at),
-        ).dict(exclude_unset=True)
+        ).model_dump(exclude_unset=True)
 
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))

From e4f67a2c5d8cd4eded7daabec47e7fe135af3285 Mon Sep 17 00:00:00 2001
From: Abram <israelvictory87@gmail.com>
Date: Tue, 20 Aug 2024 20:57:13 +0100
Subject: [PATCH 111/117] feat (tests): add tests for fetching profile with
 user_id and handle non-existent user_id errors

---
 .../test_user_profile.py                      | 40 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/agenta-backend/agenta_backend/tests/variants_user_profile_router/test_user_profile.py b/agenta-backend/agenta_backend/tests/variants_user_profile_router/test_user_profile.py
index 14a14e7ca..4b9c70b93 100644
--- a/agenta-backend/agenta_backend/tests/variants_user_profile_router/test_user_profile.py
+++ b/agenta-backend/agenta_backend/tests/variants_user_profile_router/test_user_profile.py
@@ -1,4 +1,5 @@
 import os
+from uuid import uuid4
 
 import httpx
 import pytest
@@ -22,7 +23,7 @@
 
 
 @pytest.mark.asyncio
-async def test_user_profile():
+async def test_fetch_user_profile_without_user_id():
     async with db_engine.get_session() as session:
         result = await session.execute(select(UserDB).filter_by(uid="0"))
         user_db = result.scalars().first()
@@ -36,7 +37,7 @@ async def test_user_profile():
             email=str(user_db.email),
             created_at=str(user_db.created_at),
             updated_at=str(user_db.updated_at),
-        ).dict(exclude_unset=True)
+        ).model_dump(exclude_unset=True)
 
         response = await test_client.get(f"{BACKEND_API_HOST}/profile/")
 
@@ -45,3 +46,38 @@ async def test_user_profile():
         assert response.json()["uid"] == user_db_dict["uid"]
         assert response.json()["email"] == user_db_dict["email"]
         assert response.json()["username"] == user_db_dict["username"]
+
+
+async def test_fetch_user_profile_with_valid_user_id():
+    async with db_engine.get_session() as session:
+        result = await session.execute(select(UserDB).filter_by(uid="0"))
+        user_db = result.scalars().first()
+        if not user_db:
+            assert False
+
+        user_db_dict = User(
+            id=str(user_db.id),
+            uid=str(user_db.uid),
+            username=str(user_db.username),
+            email=str(user_db.email),
+            created_at=str(user_db.created_at),
+            updated_at=str(user_db.updated_at),
+        ).model_dump(exclude_unset=True)
+
+        response = await test_client.get(f"{BACKEND_API_HOST}/profile/?user_id={str(user_db.id)}")
+
+        assert response.status_code == 200
+        assert response.json()["id"] == user_db_dict["id"]
+        assert response.json()["uid"] == user_db_dict["uid"]
+        assert response.json()["email"] == user_db_dict["email"]
+        assert response.json()["username"] == user_db_dict["username"]
+
+
+async def test_fetch_user_profile_with_non_existent_user_id_error():
+    user_non_existent_id = str(uuid4())
+    response = await test_client.get(
+        f"{BACKEND_API_HOST}/profile/?user_id={user_non_existent_id}"
+    )
+
+    assert response.status_code == 500
+    assert response.json()["detail"] == f"User with id {user_non_existent_id} not found"

From 64d787bdf326418f2f94f01d602a8f64d467eac7 Mon Sep 17 00:00:00 2001
From: Abram <israelvictory87@gmail.com>
Date: Tue, 20 Aug 2024 20:59:46 +0100
Subject: [PATCH 112/117] chore (style): format codebase with black@23.12.0

---
 agenta-backend/agenta_backend/routers/user_profile.py         | 4 +++-
 .../tests/variants_user_profile_router/test_user_profile.py   | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/agenta-backend/agenta_backend/routers/user_profile.py b/agenta-backend/agenta_backend/routers/user_profile.py
index 3153e794c..a546af829 100644
--- a/agenta-backend/agenta_backend/routers/user_profile.py
+++ b/agenta-backend/agenta_backend/routers/user_profile.py
@@ -17,7 +17,9 @@ async def user_profile(request: Request, user_id: Optional[str] = None):
         else:
             user = await db_manager.get_user(request.state.user_id)
 
-        assert user is not None, "User not found. Please ensure that the user_id is specified correctly."
+        assert (
+            user is not None
+        ), "User not found. Please ensure that the user_id is specified correctly."
         return User(
             id=str(user.id),
             uid=str(user.uid),
diff --git a/agenta-backend/agenta_backend/tests/variants_user_profile_router/test_user_profile.py b/agenta-backend/agenta_backend/tests/variants_user_profile_router/test_user_profile.py
index 4b9c70b93..1fd8a4aec 100644
--- a/agenta-backend/agenta_backend/tests/variants_user_profile_router/test_user_profile.py
+++ b/agenta-backend/agenta_backend/tests/variants_user_profile_router/test_user_profile.py
@@ -64,7 +64,9 @@ async def test_fetch_user_profile_with_valid_user_id():
             updated_at=str(user_db.updated_at),
         ).model_dump(exclude_unset=True)
 
-        response = await test_client.get(f"{BACKEND_API_HOST}/profile/?user_id={str(user_db.id)}")
+        response = await test_client.get(
+            f"{BACKEND_API_HOST}/profile/?user_id={str(user_db.id)}"
+        )
 
         assert response.status_code == 200
         assert response.json()["id"] == user_db_dict["id"]

From ae4b9e4a1b744e9edde618f0012edabc1d34636a Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 21 Aug 2024 01:47:17 +0100
Subject: [PATCH 113/117] fix(frontend): renamed helper func to get first index
 of variant id, fixed ab test button colors, updated Variant types

---
 .../cypress/support/commands/evaluations.ts   |  4 +--
 .../modals/CreateAppStatusModal.tsx           |  4 +--
 .../EvaluationVotePanel.tsx                   | 24 +++++++++++--
 .../AbTestingEvalOverview.tsx                 |  2 +-
 .../AutomaticEvalOverview.tsx                 |  2 +-
 .../deployments/ChangeVariantModal.tsx        |  6 ++--
 .../pages/overview/variants/VariantDrawer.tsx |  4 +--
 .../overview/variants/VariantPopover.tsx      | 29 +++++++++++----
 .../overview/variants/VariantsOverview.tsx    | 35 ++++++++++++++-----
 agenta-web/src/lib/Types.ts                   |  9 ++---
 agenta-web/src/lib/helpers/utils.ts           |  2 +-
 agenta-web/src/services/api.ts                | 18 ++++++++--
 12 files changed, 101 insertions(+), 38 deletions(-)

diff --git a/agenta-web/cypress/support/commands/evaluations.ts b/agenta-web/cypress/support/commands/evaluations.ts
index b67132def..78215ed34 100644
--- a/agenta-web/cypress/support/commands/evaluations.ts
+++ b/agenta-web/cypress/support/commands/evaluations.ts
@@ -45,9 +45,9 @@ Cypress.Commands.add("createVariant", () => {
 
     cy.get('[data-cy="enter-app-name-modal-button"]').click()
 
-    cy.url().should("include", "/overview")
+    cy.url().should("include", "/playground")
     cy.url().then((url) => {
-        app_id = url.match(/\/apps\/([a-fA-F0-9-]+)\/overview/)[1]
+        app_id = url.match(/\/apps\/([a-fA-F0-9-]+)\/playground/)[1]
 
         cy.wrap(app_id).as("app_id")
     })
diff --git a/agenta-web/src/components/AppSelector/modals/CreateAppStatusModal.tsx b/agenta-web/src/components/AppSelector/modals/CreateAppStatusModal.tsx
index b4c2124d5..3a7d65540 100644
--- a/agenta-web/src/components/AppSelector/modals/CreateAppStatusModal.tsx
+++ b/agenta-web/src/components/AppSelector/modals/CreateAppStatusModal.tsx
@@ -75,7 +75,7 @@ const CreateAppStatusModal: React.FC<Props & React.ComponentProps<typeof Modal>>
             onTimeoutRetry?.()
         } else if (isSuccess) {
             props.onCancel?.(e)
-            if (appId) router.push(`/apps/${appId}/overview`)
+            if (appId) router.push(`/apps/${appId}/playground`)
         }
     }
 
@@ -112,7 +112,7 @@ const CreateAppStatusModal: React.FC<Props & React.ComponentProps<typeof Modal>>
                         },
                     }
                     if (obj.starting_app?.type === "loading") obj.starting_app.type = "success"
-                    if (appId) router.push(`/apps/${appId}/overview`)
+                    if (appId) router.push(`/apps/${appId}/playground`)
                     return obj
                 case "bad_request":
                 case "error":
diff --git a/agenta-web/src/components/Evaluations/EvaluationCardView/EvaluationVotePanel.tsx b/agenta-web/src/components/Evaluations/EvaluationCardView/EvaluationVotePanel.tsx
index 1ec319ac2..25576a347 100644
--- a/agenta-web/src/components/Evaluations/EvaluationCardView/EvaluationVotePanel.tsx
+++ b/agenta-web/src/components/Evaluations/EvaluationCardView/EvaluationVotePanel.tsx
@@ -95,7 +95,16 @@ const ComparisonVote: React.FC<ComparisonVoteProps> = ({
             {variants.map((variant, ix) => (
                 <ConfigProvider
                     key={variant.variantId}
-                    theme={{token: {colorError: VARIANT_COLORS[ix]}}}
+                    theme={{
+                        components: {
+                            Button: {
+                                colorError: VARIANT_COLORS[ix],
+                                colorErrorHover: VARIANT_COLORS[ix],
+                                colorErrorBorderHover: VARIANT_COLORS[ix],
+                                colorErrorActive: VARIANT_COLORS[ix],
+                            },
+                        },
+                    }}
                 >
                     <Button
                         onClick={getOnClick(variant.variantId)}
@@ -112,7 +121,18 @@ const ComparisonVote: React.FC<ComparisonVoteProps> = ({
                 className={vertical ? classes.btnsDividerVertical : classes.btnsDividerHorizontal}
                 style={{borderColor: token.colorBorder}}
             />
-            <ConfigProvider theme={{token: {colorError: VARIANT_COLORS[2]}}}>
+            <ConfigProvider
+                theme={{
+                    components: {
+                        Button: {
+                            colorError: VARIANT_COLORS[2],
+                            colorErrorBorderHover: VARIANT_COLORS[2],
+                            colorErrorHover: VARIANT_COLORS[2],
+                            colorErrorActive: VARIANT_COLORS[2],
+                        },
+                    },
+                }}
+            >
                 <Button
                     danger
                     type={value === goodId ? "primary" : undefined}
diff --git a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
index 6d65be54a..efbcdadb5 100644
--- a/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/abTestingEvaluation/AbTestingEvalOverview.tsx
@@ -186,7 +186,7 @@ const AbTestingEvalOverview = () => {
             title: "Results",
             key: "results",
             onHeaderCell: () => ({
-                style: {minWidth: 160},
+                style: {minWidth: 240},
             }),
             render: (_, record: HumanEvaluationListTableDataType) => {
                 const stat1 = getVotesPercentage(record, 0)
diff --git a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
index 8b92f4070..0c52b085d 100644
--- a/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
+++ b/agenta-web/src/components/pages/overview/automaticEvaluation/AutomaticEvalOverview.tsx
@@ -238,7 +238,7 @@ const AutomaticEvalOverview = () => {
             dataIndex: "aggregated_results",
             key: "results",
             onHeaderCell: () => ({
-                style: {minWidth: 160},
+                style: {minWidth: 240},
             }),
             render: (_, record) => {
                 if (!evaluators?.length) return
diff --git a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
index aabb274b6..fe01f4421 100644
--- a/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
+++ b/agenta-web/src/components/pages/overview/deployments/ChangeVariantModal.tsx
@@ -4,7 +4,7 @@ import {Badge, Input, Modal, Table, Tag, theme, Typography} from "antd"
 import React, {SetStateAction, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
 import DeploymentModal from "./DeploymentModal"
-import {splitVariantId} from "@/lib/helpers/utils"
+import {formatVariantIdWithHash} from "@/lib/helpers/utils"
 
 const {Search} = Input
 
@@ -91,7 +91,9 @@ const ChangeVariantModal = ({
                                                     <Tag>
                                                         <Badge
                                                             color={token.colorPrimary}
-                                                            text={splitVariantId(record.variantId)}
+                                                            text={formatVariantIdWithHash(
+                                                                record.variantId,
+                                                            )}
                                                         />
                                                     </Tag>
                                                     <CaretRight />
diff --git a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
index 224054cbe..45beb1e15 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantDrawer.tsx
@@ -1,5 +1,5 @@
 import {useAppId} from "@/hooks/useAppId"
-import {filterVariantParameters, splitVariantId} from "@/lib/helpers/utils"
+import {filterVariantParameters, formatVariantIdWithHash} from "@/lib/helpers/utils"
 import {variantNameWithRev} from "@/lib/helpers/variantHelper"
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
 import {CloseOutlined, MoreOutlined} from "@ant-design/icons"
@@ -101,7 +101,7 @@ const VariantDrawer = ({
                                     revision: selectedVariant.revision,
                                 })}
                             </Title>
-                            <Tag>{splitVariantId(selectedVariant.variantId)}</Tag>
+                            <Tag>{formatVariantIdWithHash(selectedVariant.variantId)}</Tag>
                         </div>
                     </div>
 
diff --git a/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx b/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx
index 4adedcb46..c75237c89 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantPopover.tsx
@@ -1,9 +1,10 @@
-import {isDemo, splitVariantId} from "@/lib/helpers/utils"
+import {isDemo, formatVariantIdWithHash} from "@/lib/helpers/utils"
 import {Environment, Variant} from "@/lib/Types"
+import {fetchSingleProfile} from "@/services/api"
 import {ArrowSquareOut} from "@phosphor-icons/react"
 import {Badge, Button, Popover, Tag, theme, Typography} from "antd"
 import {useRouter} from "next/router"
-import React from "react"
+import React, {useEffect, useState} from "react"
 
 const {useToken} = theme
 
@@ -16,6 +17,22 @@ const VariantPopover = ({env, selectedDeployedVariant, ...props}: VariantPopover
     const router = useRouter()
     const {token} = useToken()
     const appId = router.query.app_id as string
+    const [variantUsername, setVariantUsername] = useState<string>()
+
+    useEffect(() => {
+        const handleFetchVariantProfile = async () => {
+            try {
+                if (!selectedDeployedVariant) return
+                const data = await fetchSingleProfile(selectedDeployedVariant.modifiedById)
+                setVariantUsername(data.username)
+            } catch (error) {
+                console.error(error)
+            }
+        }
+
+        handleFetchVariantProfile()
+    }, [selectedDeployedVariant])
+
     return (
         <Popover
             {...props}
@@ -35,10 +52,8 @@ const VariantPopover = ({env, selectedDeployedVariant, ...props}: VariantPopover
                             href={`/apps/${appId}/playground?variant=${env.deployed_variant_name}`}
                         />
                     </div>
-                    {selectedDeployedVariant && isDemo() && (
-                        <Typography.Text className="font-normal">
-                            {selectedDeployedVariant.modifiedBy.username}
-                        </Typography.Text>
+                    {selectedDeployedVariant && (
+                        <Typography.Text className="font-normal">{variantUsername}</Typography.Text>
                     )}
                 </div>
             }
@@ -46,7 +61,7 @@ const VariantPopover = ({env, selectedDeployedVariant, ...props}: VariantPopover
             <Tag className="w-fit cursor-pointer" onClick={(e) => e.stopPropagation()}>
                 <Badge
                     color={token.colorPrimary}
-                    text={splitVariantId(env.deployed_app_variant_id as string)}
+                    text={formatVariantIdWithHash(env.deployed_app_variant_id as string)}
                 />
             </Tag>
         </Popover>
diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 042dee5e2..43493fd1a 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -6,7 +6,7 @@ import {Button, Dropdown, message, Space, Spin, Table, Tag, Typography} from "an
 import {ColumnsType} from "antd/es/table"
 import Link from "next/link"
 import {useRouter} from "next/router"
-import React, {useMemo, useState} from "react"
+import React, {useEffect, useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
 import VariantDrawer from "./VariantDrawer"
 import {useQueryParam} from "@/hooks/useQuery"
@@ -16,6 +16,7 @@ import {deleteSingleVariant} from "@/services/playground/api"
 import DeleteEvaluationModal from "@/components/DeleteEvaluationModal/DeleteEvaluationModal"
 import DeployVariantModal from "./DeployVariantModal"
 import VariantComparisonModal from "./VariantComparisonModal"
+import {fetchSingleProfile} from "@/services/api"
 
 const {Title} = Typography
 
@@ -68,6 +69,24 @@ const VariantsOverview = ({
     const [isDeleteEvalModalOpen, setIsDeleteEvalModalOpen] = useState(false)
     const [isDeployVariantModalOpen, setIsDeployVariantModalOpen] = useState(false)
     const [isComparisonModalOpen, setIsComparisonModalOpen] = useState(false)
+    const [usernames, setUsernames] = useState<Record<string, string>>({})
+
+    useEffect(() => {
+        const fetchUsernames = async () => {
+            const usernameMap: Record<string, string> = {}
+            await Promise.all(
+                variantList.map(async (variant) => {
+                    if (!usernameMap[variant.modifiedById]) {
+                        const userProfile = await fetchSingleProfile(variant.modifiedById)
+                        usernameMap[variant.modifiedById] = userProfile?.username || "-"
+                    }
+                }),
+            )
+            setUsernames(usernameMap)
+        }
+
+        fetchUsernames()
+    }, [variantList])
 
     const selectedVariantsToCompare = useMemo(() => {
         const variants = variantList.filter((variant) =>
@@ -122,27 +141,27 @@ const VariantsOverview = ({
         },
         {
             title: "Last modified",
-            dataIndex: "lastModified",
-            key: "lastModified",
+            dataIndex: "updatedAt",
+            key: "updatedAt",
             onHeaderCell: () => ({
                 style: {minWidth: 160},
             }),
             render: (_, record) => {
-                return <div>{record.lastModified}</div>
+                return <div>{record.updatedAt}</div>
             },
         },
     ]
 
-    if (isDemo()) {
+    if (!isDemo()) {
         columns.push({
             title: "Modified by",
-            dataIndex: "modifiedBy",
-            key: "modifiedBy",
+            dataIndex: "modifiedById",
+            key: "modifiedById",
             onHeaderCell: () => ({
                 style: {minWidth: 160},
             }),
             render: (_, record) => {
-                return <div>{record.modifiedBy.username}</div>
+                return <div>{usernames[record.modifiedById] || <Spin />}</div>
             },
         })
     }
diff --git a/agenta-web/src/lib/Types.ts b/agenta-web/src/lib/Types.ts
index fe8b331ea..127643d79 100644
--- a/agenta-web/src/lib/Types.ts
+++ b/agenta-web/src/lib/Types.ts
@@ -40,14 +40,9 @@ export interface Variant {
     baseName: string
     configName: string
     revision: number
-    lastModified: string
+    updatedAt: string
     createdAt: string
-    modifiedBy: {
-        id: string
-        uid: string
-        username: string
-        profilePicture: string | null
-    }
+    modifiedById: string
 }
 
 // Define the interface for the tabs item in playground page
diff --git a/agenta-web/src/lib/helpers/utils.ts b/agenta-web/src/lib/helpers/utils.ts
index 14eec96c6..ea4cf49d9 100644
--- a/agenta-web/src/lib/helpers/utils.ts
+++ b/agenta-web/src/lib/helpers/utils.ts
@@ -366,6 +366,6 @@ export const filterVariantParameters = ({
     )
 }
 
-export const splitVariantId = (variantId: string) => {
+export const formatVariantIdWithHash = (variantId: string) => {
     return `# ${variantId.split("-")[0]}`
 }
diff --git a/agenta-web/src/services/api.ts b/agenta-web/src/services/api.ts
index 437e0c371..93cf6e7fc 100644
--- a/agenta-web/src/services/api.ts
+++ b/agenta-web/src/services/api.ts
@@ -12,6 +12,7 @@ import {
     KeyValuePair,
     FuncResponse,
     BaseResponse,
+    User,
 } from "@/lib/Types"
 
 //Prefix convention:
@@ -48,9 +49,9 @@ export async function fetchVariants(
                 baseName: variant.base_name,
                 configName: variant.config_name,
                 revision: variant.revision,
-                lastModified: formatDay(variant.date_modified),
-                modifiedBy: variant.modified_by,
-                createdAt: formatDay(variant.date_created),
+                updatedAt: formatDay(variant.updated_at),
+                modifiedById: variant.modified_by_id,
+                createdAt: formatDay(variant.created_at),
             }
             return v
         })
@@ -204,6 +205,17 @@ export const fetchProfile = async (ignoreAxiosError: boolean = false) => {
     } as any)
 }
 
+export const fetchSingleProfile = async (
+    userId: string,
+    ignoreAxiosError: boolean = false,
+): Promise<User> => {
+    const {data} = await axios.get(`${getAgentaApiUrl()}/api/profile?user_id=${userId}`, {
+        _ignoreError: ignoreAxiosError,
+    } as any)
+
+    return data
+}
+
 export const fetchData = async (url: string): Promise<any> => {
     const response = await fetch(url)
     return response.json()

From f9d01e181efb48b91b12048ac6ad40a78923d3b3 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 21 Aug 2024 08:41:47 +0100
Subject: [PATCH 114/117] bug fix(frontend)

---
 .../src/components/pages/overview/variants/VariantsOverview.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index 43493fd1a..e89de166e 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -152,7 +152,7 @@ const VariantsOverview = ({
         },
     ]
 
-    if (!isDemo()) {
+    if (isDemo()) {
         columns.push({
             title: "Modified by",
             dataIndex: "modifiedById",

From 03d2f2e2f756cb0910e70cd468bd540d38a33345 Mon Sep 17 00:00:00 2001
From: Juan Pablo Vega <jp@agenta.ai>
Date: Wed, 21 Aug 2024 12:32:15 +0200
Subject: [PATCH 115/117] fix(cli client) modified_by (pydantic) to
 modified_by_id (str)

---
 .../client/backend/types/app_variant_response.py    | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/agenta-cli/agenta/client/backend/types/app_variant_response.py b/agenta-cli/agenta/client/backend/types/app_variant_response.py
index 95a428535..8ddf8a727 100644
--- a/agenta-cli/agenta/client/backend/types/app_variant_response.py
+++ b/agenta-cli/agenta/client/backend/types/app_variant_response.py
@@ -11,13 +11,6 @@
     import pydantic  # type: ignore
 
 
-class ModifiedBy(pydantic.BaseModel):
-    id: str
-    uid: str
-    username: str
-    profile_picture: typing.Optional[str] = None
-
-
 class AppVariantResponse(pydantic.BaseModel):
     app_id: str
     app_name: str
@@ -33,9 +26,9 @@ class AppVariantResponse(pydantic.BaseModel):
     revision: int
     organization_id: typing.Optional[str]
     workspace_id: typing.Optional[str]
-    date_modified: dt.datetime
-    date_created: dt.datetime
-    modified_by: ModifiedBy
+    created_at: dt.datetime
+    updated_at: dt.datetime
+    modified_by_id: str
 
     def json(self, **kwargs: typing.Any) -> str:
         kwargs_with_defaults: typing.Any = {

From 53f5c8c8e499e02ce3e31740dd9bd32e20d23935 Mon Sep 17 00:00:00 2001
From: Kaosiso Ezealigo <ezealigokosiso@gmail.com>
Date: Wed, 21 Aug 2024 11:47:12 +0100
Subject: [PATCH 116/117] fix(frontend): asynchronous fetch for user profile

---
 .../overview/variants/VariantsOverview.tsx    | 25 +++----------------
 .../pages/apps/[app_id]/overview/index.tsx    | 20 ++++++++++++++-
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
index e89de166e..b6dad34da 100644
--- a/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
+++ b/agenta-web/src/components/pages/overview/variants/VariantsOverview.tsx
@@ -6,7 +6,7 @@ import {Button, Dropdown, message, Space, Spin, Table, Tag, Typography} from "an
 import {ColumnsType} from "antd/es/table"
 import Link from "next/link"
 import {useRouter} from "next/router"
-import React, {useEffect, useMemo, useState} from "react"
+import React, {useMemo, useState} from "react"
 import {createUseStyles} from "react-jss"
 import VariantDrawer from "./VariantDrawer"
 import {useQueryParam} from "@/hooks/useQuery"
@@ -16,7 +16,6 @@ import {deleteSingleVariant} from "@/services/playground/api"
 import DeleteEvaluationModal from "@/components/DeleteEvaluationModal/DeleteEvaluationModal"
 import DeployVariantModal from "./DeployVariantModal"
 import VariantComparisonModal from "./VariantComparisonModal"
-import {fetchSingleProfile} from "@/services/api"
 
 const {Title} = Typography
 
@@ -26,6 +25,7 @@ interface VariantsOverviewProps {
     environments: Environment[]
     fetchAllVariants: () => void
     loadEnvironments: () => Promise<void>
+    usernames: Record<string, string>
 }
 
 const useStyles = createUseStyles((theme: JSSTheme) => ({
@@ -59,6 +59,7 @@ const VariantsOverview = ({
     environments,
     fetchAllVariants,
     loadEnvironments,
+    usernames,
 }: VariantsOverviewProps) => {
     const classes = useStyles()
     const router = useRouter()
@@ -69,24 +70,6 @@ const VariantsOverview = ({
     const [isDeleteEvalModalOpen, setIsDeleteEvalModalOpen] = useState(false)
     const [isDeployVariantModalOpen, setIsDeployVariantModalOpen] = useState(false)
     const [isComparisonModalOpen, setIsComparisonModalOpen] = useState(false)
-    const [usernames, setUsernames] = useState<Record<string, string>>({})
-
-    useEffect(() => {
-        const fetchUsernames = async () => {
-            const usernameMap: Record<string, string> = {}
-            await Promise.all(
-                variantList.map(async (variant) => {
-                    if (!usernameMap[variant.modifiedById]) {
-                        const userProfile = await fetchSingleProfile(variant.modifiedById)
-                        usernameMap[variant.modifiedById] = userProfile?.username || "-"
-                    }
-                }),
-            )
-            setUsernames(usernameMap)
-        }
-
-        fetchUsernames()
-    }, [variantList])
 
     const selectedVariantsToCompare = useMemo(() => {
         const variants = variantList.filter((variant) =>
@@ -161,7 +144,7 @@ const VariantsOverview = ({
                 style: {minWidth: 160},
             }),
             render: (_, record) => {
-                return <div>{usernames[record.modifiedById] || <Spin />}</div>
+                return <div>{usernames[record.modifiedById]}</div>
             },
         })
     }
diff --git a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
index 13bb967c8..3ba9d89c4 100644
--- a/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
+++ b/agenta-web/src/pages/apps/[app_id]/overview/index.tsx
@@ -9,7 +9,7 @@ import {useAppId} from "@/hooks/useAppId"
 import {dynamicComponent} from "@/lib/helpers/dynamic"
 import {renameVariablesCapitalizeAll} from "@/lib/helpers/utils"
 import {Environment, JSSTheme, Variant} from "@/lib/Types"
-import {fetchVariants} from "@/services/api"
+import {fetchSingleProfile, fetchVariants} from "@/services/api"
 import {deleteApp} from "@/services/app-selector/api"
 import {fetchEnvironments} from "@/services/deployment/api"
 import {MoreOutlined} from "@ant-design/icons"
@@ -50,6 +50,7 @@ export default function Overview() {
     const [isDelAppLoading, setIsDelAppLoading] = useState(false)
     const [environments, setEnvironments] = useState<Environment[]>([])
     const [isDeploymentLoading, setIsDeploymentLoading] = useState(true)
+    const [usernames, setUsernames] = useState<Record<string, string>>({})
 
     const loadEnvironments = useCallback(async () => {
         try {
@@ -64,9 +65,25 @@ export default function Overview() {
     }, [appId])
 
     const fetchAllVariants = async () => {
+        const usernameMap: Record<string, string> = {}
         try {
             setIsVariantLoading(true)
+
             const data = await fetchVariants(appId)
+            const uniqueModifiedByIds = Array.from(
+                new Set(data.map((variant) => variant.modifiedById)),
+            )
+
+            const profiles = await Promise.all(
+                uniqueModifiedByIds.map((id) => fetchSingleProfile(id)),
+            )
+
+            profiles.forEach((profile, index) => {
+                const id = uniqueModifiedByIds[index]
+                usernameMap[id] = profile?.username || "-"
+            })
+
+            setUsernames(usernameMap)
             setVariants(data)
         } catch (error) {
             console.error(error)
@@ -140,6 +157,7 @@ export default function Overview() {
                     environments={environments}
                     fetchAllVariants={fetchAllVariants}
                     loadEnvironments={loadEnvironments}
+                    usernames={usernames}
                 />
 
                 <AutomaticEvalOverview />

From 31d3a70adabfb6daa7e0cb75302be1d58f9d4237 Mon Sep 17 00:00:00 2001
From: Juan Pablo Vega <jp@agenta.ai>
Date: Wed, 21 Aug 2024 12:50:15 +0200
Subject: [PATCH 117/117] make new field optional

---
 agenta-backend/agenta_backend/models/api/api_models.py      | 6 +++---
 .../agenta/client/backend/types/app_variant_response.py     | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/agenta-backend/agenta_backend/models/api/api_models.py b/agenta-backend/agenta_backend/models/api/api_models.py
index 2c8c9e663..c9d2444f2 100644
--- a/agenta-backend/agenta_backend/models/api/api_models.py
+++ b/agenta-backend/agenta_backend/models/api/api_models.py
@@ -107,9 +107,9 @@ class AppVariantResponse(BaseModel):
     config_name: str
     uri: Optional[str]
     revision: int
-    created_at: str
-    updated_at: str
-    modified_by_id: str
+    created_at: Optional[str] = None
+    updated_at: Optional[str] = None
+    modified_by_id: Optional[str] = None
 
 
 class AppVariantRevision(BaseModel):
diff --git a/agenta-cli/agenta/client/backend/types/app_variant_response.py b/agenta-cli/agenta/client/backend/types/app_variant_response.py
index 8ddf8a727..7f74bd0b1 100644
--- a/agenta-cli/agenta/client/backend/types/app_variant_response.py
+++ b/agenta-cli/agenta/client/backend/types/app_variant_response.py
@@ -26,9 +26,9 @@ class AppVariantResponse(pydantic.BaseModel):
     revision: int
     organization_id: typing.Optional[str]
     workspace_id: typing.Optional[str]
-    created_at: dt.datetime
-    updated_at: dt.datetime
-    modified_by_id: str
+    created_at: typing.Optional[dt.datetime] = None
+    updated_at: typing.Optional[dt.datetime] = None
+    modified_by_id: typing.Optional[str] = None
 
     def json(self, **kwargs: typing.Any) -> str:
         kwargs_with_defaults: typing.Any = {