@axiom-lattice/react-sdk 2.1.12 → 2.1.13

package/dist/index.js

@@ -198,7 +198,7 @@ function useChat(threadId, options = {}) {
         stopStreamingRef.current = null;
       }
       const { input, command, streaming = true } = data;
-      const { message: message4, files, ...rest } = input || {};
+      const { message: message5, files, ...rest } = input || {};
       setState((prev) => ({
         ...prev,
         isLoading: true,
@@ -207,7 +207,7 @@ function useChat(threadId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message4 || command?.resume?.message || "",
+        content: message5 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -536,7 +536,7 @@ function AgentThreadProvider({
         stopStreamingRef.current = null;
       }
       const { input, command, streaming = true } = data;
-      const { message: message4, files, ...rest } = input || {};
+      const { message: message5, files, ...rest } = input || {};
       setState((prev) => ({
         ...prev,
         isLoading: true,
@@ -544,7 +544,7 @@ function AgentThreadProvider({
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message4 || command?.resume?.message || "",
+        content: message5 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -1610,11 +1610,11 @@ var ConfirmFeedback = ({
   data,
   interactive = true
 }) => {
-  const { message: message4, type, config, feedback, options } = data ?? {};
+  const { message: message5, type, config, feedback, options } = data ?? {};
   const { sendMessage } = useAgentChat();
   const [clicked, setClicked] = (0, import_react9.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_antd.Space, { direction: "vertical", style: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MDResponse, { content: message4 }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MDResponse, { content: message5 }),
     options ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_antd.Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_antd.Button,
       {
@@ -1696,7 +1696,7 @@ var import_icons = require("@ant-design/icons");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var { Text: Text2 } = import_antd2.Typography;
 var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = true }) => {
-  const { dataSource, message: message4 } = data ?? {};
+  const { dataSource, message: message5 } = data ?? {};
   const [expandedRowKeys, setExpandedRowKeys] = (0, import_react10.useState)([]);
   const { openSideApp } = useChatUIContext();
   const processedData = dataSource?.map((item, index) => ({
@@ -1780,7 +1780,7 @@ var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = t
     {
       size: "small",
       title: () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_antd2.Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_antd2.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text2, { strong: true, style: { fontSize: 16 }, children: message4 || "" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_antd2.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Text2, { strong: true, style: { fontSize: 16 }, children: message5 || "" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_antd2.Space, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             import_antd2.Button,
@@ -1801,8 +1801,8 @@ var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = t
               onClick: () => {
                 openSideApp({
                   component_key: "generic_data_table",
-                  message: message4 || "",
-                  data: { dataSource, message: message4 }
+                  message: message5 || "",
+                  data: { dataSource, message: message5 }
                 });
               },
               children: [
@@ -2707,7 +2707,7 @@ var AttachmentsCard = ({
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text11 } = import_antd8.Typography;
+  const { Text: Text12 } = import_antd8.Typography;
   const [showAll, setShowAll] = (0, import_react12.useState)(false);
   const { openSideApp } = useChatUIContext();
   const getStyles = () => {
@@ -2782,7 +2782,7 @@ var AttachmentsCard = ({
     );
   };
   const renderFileDescription = (item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd8.Space, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd8.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    Text11,
+    Text12,
     {
       type: "secondary",
       style: {
@@ -2854,7 +2854,7 @@ var AttachmentsCard = ({
         }
       ),
       item.files && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Text11, { type: "secondary", style: { fontSize: "12px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Text12, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
@@ -3504,7 +3504,7 @@ var import_ErrorBoundary = __toESM(require("antd/es/alert/ErrorBoundary"));
 var import_react15 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var LazyBubble = ({
-  message: message4,
+  message: message5,
   renderContent,
   autoLoadRightPanel
 }) => {
@@ -3535,10 +3535,10 @@ var LazyBubble = ({
     autoLoadRightPanel?.();
   }, []);
   const getPlaceholder = () => {
-    const estimatedHeight = message4.content ? Math.min(100, message4.content.length / 5) : 100;
+    const estimatedHeight = message5.content ? Math.min(100, message5.content.length / 5) : 100;
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message4) : getPlaceholder() }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message5) : getPlaceholder() }) });
 };
 var MemoizedBubbleList = (0, import_react15.memo)(
   ({
@@ -3569,8 +3569,8 @@ var MessageList = ({
       messageLengthRef.current = messages?.length;
     }
   }, [messages?.length]);
-  const renderContent = (0, import_react15.useCallback)((message4) => {
-    const { content } = message4;
+  const renderContent = (0, import_react15.useCallback)((message5) => {
+    const { content } = message5;
     try {
       const json = JSON.parse(content);
       if (json.action && json.message) {
@@ -3578,7 +3578,7 @@ var MessageList = ({
       }
     } catch (error) {
     }
-    const tool_calls_md = message4.tool_calls?.map((tool_call) => {
+    const tool_calls_md = message5.tool_calls?.map((tool_call) => {
       return `\`\`\`tool_call
 ${JSON.stringify(tool_call)}
 \`\`\``;
@@ -3587,17 +3587,17 @@ ${JSON.stringify(tool_call)}
     return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_antd14.Space, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MDResponse, { content: content_md }) });
   }, []);
   const items = (0, import_react15.useMemo)(
-    () => messages.map((message4, index) => ({
-      key: message4.id,
-      role: message4.role,
+    () => messages.map((message5, index) => ({
+      key: message5.id,
+      role: message5.role,
       typing: false,
       content: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         LazyBubble,
         {
-          message: message4,
+          message: message5,
           renderContent,
           autoLoadRightPanel: () => {
-            const { content, role: role2 } = message4;
+            const { content, role: role2 } = message5;
             const isNewAddedMessage = messageLengthRef.current > 1 && messageLengthRef.current + 1 === messages.length;
             if (index === messages.length - 1 && isNewAddedMessage && role2 === "ai") {
               try {
@@ -5102,8 +5102,9 @@ var AgentConversations = () => {
 };
 
 // src/components/Chat/ChatSidebar.tsx
-var import_antd24 = require("antd");
-var import_icons13 = require("@ant-design/icons");
+var import_react24 = require("react");
+var import_antd25 = require("antd");
+var import_icons14 = require("@ant-design/icons");
 
 // src/components/Chat/AssistantList.tsx
 var import_x6 = require("@ant-design/x");
@@ -5117,38 +5118,1352 @@ var AssistantList = () => {
     background: "transparent",
     borderRadius: token.borderRadius
   };
-  const items = assistants.map((assistant) => ({
-    key: assistant.id,
-    label: assistant.name,
-    icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-      import_antd23.Avatar,
+  const items = assistants.map((assistant) => ({
+    key: assistant.id,
+    label: assistant.name,
+    icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      import_antd23.Avatar,
+      {
+        size: "small",
+        style: {
+          backgroundColor: token.colorFillSecondary,
+          color: token.colorText
+        },
+        children: assistant.name.charAt(0).toUpperCase()
+      }
+    )
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_x6.Conversations,
+    {
+      items,
+      activeKey: currentAssistant?.id,
+      style,
+      onActiveChange: (key) => {
+        selectAssistant(key);
+      }
+    }
+  );
+};
+
+// src/components/Chat/ChatSidebar.tsx
+var import_antd_style11 = require("antd-style");
+
+// src/components/Chat/SettingsModal.tsx
+var import_react23 = require("react");
+var import_antd24 = require("antd");
+var import_icons13 = require("@ant-design/icons");
+var import_antd_style10 = require("antd-style");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var { Text: Text11, Title: Title2 } = import_antd24.Typography;
+var { TextArea } = import_antd24.Input;
+var useStyles3 = (0, import_antd_style10.createStyles)(({ token, css }) => ({
+  //   settingsModal: css`
+  //     .ant-modal {
+  //       max-width: 100vw !important;
+  //       width: 100vw !important;
+  //       margin: 0 !important;
+  //       top: 0 !important;
+  //       padding-bottom: 0 !important;
+  //     }
+  //     .ant-modal-content {
+  //       padding: 0;
+  //       height: 100vh;
+  //       max-height: 100vh;
+  //       border-radius: 0;
+  //       overflow: hidden;
+  //       width: 100%;
+  //     }
+  //     .ant-modal-body {
+  //       padding: 0;
+  //       height: 100%;
+  //       display: flex;
+  //       overflow: hidden;
+  //       width: 100%;
+  //     }
+  //   `,
+  tabsContainer: css`
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .ant-tabs {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .ant-tabs-content-holder {
+      flex: 1;
+      overflow: hidden;
+    }
+
+    .ant-tabs-content {
+      height: 100%;
+    }
+
+    .ant-tabs-tabpane {
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .ant-tabs-nav {
+      margin: 0;
+      padding: 0 ${token.paddingLG}px;
+      background: ${token.colorBgContainer};
+      border-bottom: 1px solid ${token.colorBorder};
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    }
+
+    .ant-tabs-tab {
+      padding: ${token.paddingMD}px ${token.paddingLG}px;
+      margin: ${token.paddingSM}px ${token.marginXS}px 0 0;
+      border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+      &:hover {
+        background: ${token.colorFillTertiary};
+      }
+
+      &.ant-tabs-tab-active {
+        background: ${token.colorBgContainer};
+        border-bottom-color: ${token.colorBgContainer};
+      }
+    }
+  `,
+  tabContent: css`
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: linear-gradient(
+      135deg,
+      ${token.colorBgLayout} 0%,
+      ${token.colorFillQuaternary} 100%
+    );
+  `,
+  sidebar: css`
+    width: 280px;
+    background: linear-gradient(
+      180deg,
+      ${token.colorBgContainer} 0%,
+      ${token.colorFillQuaternary} 100%
+    );
+    border-right: 1px solid ${token.colorBorder};
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    flex-shrink: 0;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
+
+    /* Custom scrollbar */
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: ${token.colorBorder};
+      border-radius: 4px;
+      transition: background 0.2s;
+
+      &:hover {
+        background: ${token.colorBorderSecondary};
+      }
+    }
+  `,
+  sidebarHeader: css`
+    padding: ${token.paddingXL}px ${token.paddingLG}px;
+    border-bottom: 1px solid ${token.colorBorder};
+    background: linear-gradient(
+      135deg,
+      ${token.colorPrimaryBg} 0%,
+      ${token.colorBgContainer} 100%
+    );
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    backdrop-filter: blur(10px);
+  `,
+  sidebarTitle: css`
+    font-size: ${token.fontSizeXL}px;
+    font-weight: 700;
+    background: linear-gradient(
+      135deg,
+      ${token.colorPrimary} 0%,
+      ${token.colorPrimaryHover} 100%
+    );
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin: 0;
+    letter-spacing: -0.5px;
+  `,
+  menuItem: css`
+    padding: ${token.paddingMD}px ${token.paddingLG}px;
+    margin: ${token.marginXS}px ${token.paddingSM}px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-radius: ${token.borderRadiusLG}px;
+    display: flex;
+    align-items: center;
+    gap: ${token.marginMD}px;
+    position: relative;
+    overflow: hidden;
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 3px;
+      background: ${token.colorPrimary};
+      transform: scaleY(0);
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      border-radius: 0 2px 2px 0;
+    }
+
+    &:hover {
+      background: ${token.colorFillTertiary};
+      transform: translateX(4px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+
+    &.active {
+      background: linear-gradient(
+        135deg,
+        ${token.colorPrimaryBg} 0%,
+        ${token.colorFillTertiary} 100%
+      );
+      color: ${token.colorPrimary};
+      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
+      transform: translateX(4px);
+
+      &::before {
+        transform: scaleY(1);
+      }
+
+      .menuItemIcon {
+        transform: scale(1.1);
+      }
+    }
+  `,
+  menuItemIcon: css`
+    font-size: 18px;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+  `,
+  menuItemText: css`
+    font-size: ${token.fontSize}px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+  `,
+  content: css`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    min-width: 0;
+  `,
+  contentHeader: css`
+    padding: ${token.paddingLG}px ${token.paddingXL * 2}px;
+    background: ${token.colorBgContainer};
+    border-bottom: 1px solid ${token.colorBorder};
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    backdrop-filter: blur(10px);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: ${token.marginLG}px;
+  `,
+  contentHeaderLeft: css`
+    flex: 1;
+  `,
+  contentHeaderRight: css`
+    display: flex;
+    gap: ${token.marginMD}px;
+    flex-shrink: 0;
+  `,
+  contentTitle: css`
+    font-size: ${token.fontSizeHeading3}px;
+    font-weight: 700;
+    color: ${token.colorTextHeading};
+    margin: 0 0 ${token.marginSM}px 0;
+    letter-spacing: -0.5px;
+  `,
+  contentDescription: css`
+    color: ${token.colorTextSecondary};
+    font-size: ${token.fontSize}px;
+    margin: 0;
+    line-height: 1.6;
+  `,
+  contentBody: css`
+    flex: 1;
+    overflow-y: auto;
+    padding: ${token.paddingXL * 2}px ${token.paddingXL * 2}px;
+    background: transparent;
+
+    /* Custom scrollbar */
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: ${token.colorBorder};
+      border-radius: 4px;
+      transition: background 0.2s;
+
+      &:hover {
+        background: ${token.colorBorderSecondary};
+      }
+    }
+  `,
+  formContainer: css`
+    width: 100%;
+    max-width: 100%;
+  `,
+  formLabel: css`
+    font-weight: 600;
+    color: ${token.colorTextHeading};
+    margin-bottom: ${token.marginMD}px;
+    display: block;
+    font-size: ${token.fontSize}px;
+  `,
+  formDescription: css`
+    color: ${token.colorTextSecondary};
+    font-size: ${token.fontSizeSM}px;
+    margin-top: ${token.marginSM}px;
+    line-height: 1.6;
+  `,
+  card: css`
+    background: ${token.colorBgContainer};
+    border: 1px solid ${token.colorBorder};
+    border-radius: ${token.borderRadiusLG}px;
+    padding: ${token.paddingXL}px;
+    margin-bottom: ${token.marginLG}px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+
+    &:hover {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+      transform: translateY(-2px);
+      border-color: ${token.colorPrimary};
+    }
+  `,
+  alertCard: css`
+    border-radius: ${token.borderRadiusLG}px;
+    margin-bottom: ${token.marginLG}px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+    border: 1px solid ${token.colorBorder};
+  `,
+  textArea: css`
+    border-radius: ${token.borderRadius}px;
+    border: 1px solid ${token.colorBorder};
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+    &:hover {
+      border-color: ${token.colorPrimaryHover};
+    }
+
+    &:focus {
+      border-color: ${token.colorPrimary};
+      box-shadow: 0 0 0 2px ${token.colorPrimaryBg};
+    }
+  `,
+  connectionStatus: css`
+    display: flex;
+    align-items: center;
+    gap: ${token.marginXS}px;
+    margin-left: ${token.marginSM}px;
+  `,
+  addServerModal: css`
+    .ant-modal-body {
+      padding: ${token.paddingXL}px;
+    }
+  `
+}));
+var SETTINGS_MENU_ITEMS = [
+  {
+    key: "environment",
+    label: "Environment Variables",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.EnvironmentOutlined, {})
+  },
+  {
+    key: "models",
+    label: "Model Configuration",
+    icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.ApiOutlined, {})
+  }
+];
+var SettingsModal = ({
+  open,
+  onClose
+}) => {
+  const { styles } = useStyles3();
+  const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
+  const [connections, setConnections] = (0, import_react23.useState)(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem("lattice_server_connections");
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          return parsed;
+        }
+      } catch (error) {
+        console.warn("Failed to load connections from localStorage:", error);
+      }
+    }
+    if (shellConfig.baseURL) {
+      return [
+        {
+          id: "default",
+          name: "Default",
+          url: shellConfig.baseURL
+        }
+      ];
+    }
+    return [];
+  });
+  const [serverConfigs, setServerConfigs] = (0, import_react23.useState)({});
+  const connectionsRef = (0, import_react23.useRef)(connections);
+  (0, import_react23.useEffect)(() => {
+    connectionsRef.current = connections;
+  }, [connections]);
+  const [activeTabKey, setActiveTabKey] = (0, import_react23.useState)(
+    connections.length > 0 ? connections[0].id : ""
+  );
+  const [activeMenu, setActiveMenu] = (0, import_react23.useState)("environment");
+  const [loading, setLoading] = (0, import_react23.useState)(false);
+  const [showAddServerModal, setShowAddServerModal] = (0, import_react23.useState)(false);
+  const [newServerUrl, setNewServerUrl] = (0, import_react23.useState)("");
+  const [newServerName, setNewServerName] = (0, import_react23.useState)("");
+  const [newServerApiKey, setNewServerApiKey] = (0, import_react23.useState)("");
+  const [addingServer, setAddingServer] = (0, import_react23.useState)(false);
+  const saveConnections = (newConnections) => {
+    setConnections(newConnections);
+    if (typeof window !== "undefined") {
+      try {
+        localStorage.setItem(
+          "lattice_server_connections",
+          JSON.stringify(newConnections)
+        );
+      } catch (error) {
+        console.warn("Failed to save connections to localStorage:", error);
+      }
+    }
+  };
+  const initializeServerConfig = (serverId) => {
+    if (!serverConfigs[serverId]) {
+      setServerConfigs((prev) => ({
+        ...prev,
+        [serverId]: {
+          envText: "",
+          models: [
+            {
+              key: "",
+              model: "",
+              provider: "openai",
+              streaming: false,
+              apiKey: "",
+              baseURL: ""
+            }
+          ]
+        }
+      }));
+    }
+  };
+  const checkConnection = async (serverId) => {
+    const connection = connectionsRef.current.find((c) => c.id === serverId);
+    if (!connection) return;
+    const url = connection.url;
+    if (!url) {
+      updateConnectionStatus(serverId, { connected: false });
+      return;
+    }
+    try {
+      updateConnectionStatus(serverId, { connecting: true, error: "" });
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 5e3);
+      const headers = {};
+      if (connection.apiKey) {
+        headers["Authorization"] = `Bearer ${connection.apiKey}`;
+      }
+      const response = await fetch(`${url}/api/config`, {
+        method: "GET",
+        signal: controller.signal,
+        headers
+      });
+      clearTimeout(timeoutId);
+      if (response.ok) {
+        updateConnectionStatus(serverId, {
+          connected: true,
+          connecting: false,
+          error: ""
+        });
+        if (url !== shellConfig.baseURL) {
+          updateConfigValue("baseURL", url);
+        }
+      } else {
+        updateConnectionStatus(serverId, {
+          connected: false,
+          connecting: false,
+          error: "Server returned an error"
+        });
+      }
+    } catch (error) {
+      if (error.name === "AbortError") {
+        updateConnectionStatus(serverId, {
+          connected: false,
+          connecting: false,
+          error: "Connection timeout"
+        });
+      } else {
+        updateConnectionStatus(serverId, {
+          connected: false,
+          connecting: false,
+          error: error.message || "Failed to connect to server"
+        });
+      }
+    }
+  };
+  const updateConnectionStatus = (serverId, updates) => {
+    setConnections(
+      (prev) => prev.map(
+        (conn) => conn.id === serverId ? { ...conn, ...updates } : conn
+      )
+    );
+  };
+  const loadCurrentConfig = async (serverId) => {
+    const connection = connectionsRef.current.find((c) => c.id === serverId);
+    if (!connection || !connection.connected) return;
+    const url = connection.url;
+    if (!url) return;
+    try {
+      const headers = {};
+      if (connection.apiKey) {
+        headers["Authorization"] = `Bearer ${connection.apiKey}`;
+      }
+      const response = await fetch(`${url}/api/config`, {
+        headers
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success && data.data) {
+          const lines = [];
+          const configData = data.data;
+          if (configData.port !== void 0) {
+            lines.push(`PORT=${configData.port}`);
+          }
+          if (configData.queueServiceType) {
+            lines.push(`QUEUE_SERVICE_TYPE=${configData.queueServiceType}`);
+          }
+          if (configData.redisUrl) {
+            lines.push(`REDIS_URL=${configData.redisUrl}`);
+          }
+          if (configData.redisPassword) {
+            lines.push(`REDIS_PASSWORD=`);
+          }
+          if (configData.queueName) {
+            lines.push(`QUEUE_NAME=${configData.queueName}`);
+          }
+          setServerConfigs((prev) => ({
+            ...prev,
+            [serverId]: {
+              ...prev[serverId],
+              envText: lines.join("\n")
+            }
+          }));
+        }
+      }
+    } catch (error) {
+      console.error("Failed to load configuration:", error);
+      import_antd24.message.error("Failed to load current configuration");
+    }
+  };
+  const loadModelsConfig = async (serverId) => {
+    const connection = connectionsRef.current.find((c) => c.id === serverId);
+    if (!connection || !connection.connected) return;
+    const url = connection.url;
+    if (!url) return;
+    try {
+      const headers = {};
+      if (connection.apiKey) {
+        headers["Authorization"] = `Bearer ${connection.apiKey}`;
+      }
+      const response = await fetch(`${url}/api/models`, {
+        headers
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success && data.data && Array.isArray(data.data)) {
+          if (data.data.length > 0) {
+            setServerConfigs((prev) => ({
+              ...prev,
+              [serverId]: {
+                ...prev[serverId],
+                models: data.data
+              }
+            }));
+          } else {
+            setServerConfigs((prev) => ({
+              ...prev,
+              [serverId]: {
+                ...prev[serverId],
+                models: [
+                  {
+                    key: "",
+                    model: "",
+                    provider: "openai",
+                    streaming: false,
+                    apiKey: "",
+                    baseURL: ""
+                  }
+                ]
+              }
+            }));
+          }
+        }
+      }
+    } catch (error) {
+      console.error("Failed to load models configuration:", error);
+    }
+  };
+  (0, import_react23.useEffect)(() => {
+    if (open && activeTabKey) {
+      initializeServerConfig(activeTabKey);
+      const connection = connections.find((c) => c.id === activeTabKey);
+      if (connection && !connection.connected && !connection.connecting) {
+        checkConnection(activeTabKey);
+      }
+    }
+  }, [open, activeTabKey]);
+  (0, import_react23.useEffect)(() => {
+    if (open && activeTabKey) {
+      const connection = connections.find((c) => c.id === activeTabKey);
+      if (connection?.connected) {
+        if (activeMenu === "environment") {
+          loadCurrentConfig(activeTabKey);
+        } else if (activeMenu === "models") {
+          loadModelsConfig(activeTabKey);
+        }
+      }
+    }
+  }, [open, activeTabKey, activeMenu]);
+  const handleAddServer = async () => {
+    if (!newServerUrl.trim()) {
+      import_antd24.message.error("Please enter a server URL");
+      return;
+    }
+    let normalizedUrl = newServerUrl.trim();
+    if (!normalizedUrl.startsWith("http://") && !normalizedUrl.startsWith("https://")) {
+      normalizedUrl = `http://${normalizedUrl}`;
+    }
+    const serverName = newServerName.trim() || normalizedUrl.replace(/^https?:\/\//, "");
+    const newConnection = {
+      id: `conn_${Date.now()}`,
+      name: serverName,
+      url: normalizedUrl,
+      apiKey: newServerApiKey.trim() || void 0,
+      connected: false
+    };
+    setAddingServer(true);
+    const newConnections = [...connections, newConnection];
+    saveConnections(newConnections);
+    setActiveTabKey(newConnection.id);
+    initializeServerConfig(newConnection.id);
+    await checkConnection(newConnection.id);
+    setAddingServer(false);
+    setShowAddServerModal(false);
+    setNewServerUrl("");
+    setNewServerName("");
+    setNewServerApiKey("");
+    import_antd24.message.success("Server added successfully");
+  };
+  const handleDeleteServer = (serverId) => {
+    const newConnections = connections.filter((c) => c.id !== serverId);
+    saveConnections(newConnections);
+    setServerConfigs((prev) => {
+      const newConfigs = { ...prev };
+      delete newConfigs[serverId];
+      return newConfigs;
+    });
+    if (activeTabKey === serverId) {
+      if (newConnections.length > 0) {
+        setActiveTabKey(newConnections[0].id);
+      } else {
+        setActiveTabKey("");
+      }
+    }
+    import_antd24.message.success("Server deleted");
+  };
+  const handleSave = async () => {
+    const connection = connections.find((c) => c.id === activeTabKey);
+    if (!connection || !connection.connected) {
+      import_antd24.message.error("Please connect to a server first");
+      return;
+    }
+    const url = connection.url;
+    if (!url) {
+      import_antd24.message.error("Please connect to a server first");
+      return;
+    }
+    try {
+      setLoading(true);
+      const config = serverConfigs[activeTabKey];
+      if (activeMenu === "environment") {
+        const configObj = {};
+        const lines = config.envText.split("\n");
+        for (const line of lines) {
+          const trimmedLine = line.trim();
+          if (!trimmedLine || trimmedLine.startsWith("#")) {
+            continue;
+          }
+          const equalIndex = trimmedLine.indexOf("=");
+          if (equalIndex === -1) {
+            continue;
+          }
+          const key = trimmedLine.substring(0, equalIndex).trim();
+          const value = trimmedLine.substring(equalIndex + 1).trim();
+          if (!key) {
+            continue;
+          }
+          const upperKey = key.toUpperCase();
+          if (upperKey === "PORT") {
+            if (value) {
+              configObj.port = Number(value);
+            }
+          } else if (upperKey === "QUEUE_SERVICE_TYPE") {
+            if (value) {
+              configObj.queueServiceType = value;
+            }
+          } else if (upperKey === "REDIS_URL") {
+            if (value) {
+              configObj.redisUrl = value;
+            }
+          } else if (upperKey === "REDIS_PASSWORD") {
+            if (value) {
+              configObj.redisPassword = value;
+            }
+          } else if (upperKey === "QUEUE_NAME") {
+            if (value) {
+              configObj.queueName = value;
+            }
+          } else {
+            if (value) {
+              configObj[key] = value;
+            }
+          }
+        }
+        const headers = {
+          "Content-Type": "application/json"
+        };
+        if (connection.apiKey) {
+          headers["Authorization"] = `Bearer ${connection.apiKey}`;
+        }
+        const response = await fetch(`${url}/api/config`, {
+          method: "PUT",
+          headers,
+          body: JSON.stringify({ config: configObj })
+        });
+        const data = await response.json();
+        if (response.ok && data.success) {
+          if (data.requiresRestart && data.requiresRestart.length > 0) {
+            import_antd24.message.warning(
+              `Configuration saved. Please restart the server for ${data.requiresRestart.join(
+                ", "
+              )} to take effect.`,
+              5
+            );
+          } else {
+            import_antd24.message.success("Configuration saved and applied successfully");
+          }
+          if (data.warnings && data.warnings.length > 0) {
+            data.warnings.forEach((warning) => {
+              import_antd24.message.warning(warning, 5);
+            });
+          }
+          onClose();
+        } else {
+          import_antd24.message.error(data.error || "Failed to save configuration");
+        }
+      } else if (activeMenu === "models") {
+        const validModels = config.models.filter(
+          (m) => m.key && m.model && m.provider
+        );
+        const headers = {
+          "Content-Type": "application/json"
+        };
+        if (connection.apiKey) {
+          headers["Authorization"] = `Bearer ${connection.apiKey}`;
+        }
+        const response = await fetch(`${url}/api/models`, {
+          method: "PUT",
+          headers,
+          body: JSON.stringify({ models: validModels })
+        });
+        const data = await response.json();
+        if (response.ok && data.success) {
+          import_antd24.message.success(
+            "Model configuration saved and registered successfully"
+          );
+          onClose();
+        } else {
+          import_antd24.message.error(data.error || "Failed to save model configuration");
+        }
+      }
+    } catch (error) {
+      console.error("Failed to save configuration:", error);
+      import_antd24.message.error(error.message || "Failed to save configuration");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const renderEnvironmentSettings = (serverId) => {
+    const config = serverConfigs[serverId] || { envText: "", models: [] };
+    const setEnvText = (text) => {
+      setServerConfigs((prev) => ({
+        ...prev,
+        [serverId]: {
+          ...prev[serverId],
+          envText: text
+        }
+      }));
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        import_antd24.Alert,
+        {
+          message: "Configuration Effect",
+          description: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { marginBottom: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                import_icons13.CheckCircleOutlined,
+                {
+                  style: { color: "#52c41a", marginRight: 8 }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("strong", { children: "Immediately effective:" }),
+              " QUEUE_SERVICE_TYPE, REDIS_URL, REDIS_PASSWORD, QUEUE_NAME"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.ReloadOutlined, { style: { color: "#faad14", marginRight: 8 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("strong", { children: "Requires restart:" }),
+              " PORT (server must be restarted to change port)"
+            ] })
+          ] }),
+          type: "info",
+          showIcon: true,
+          className: styles.alertCard
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure environment variables in .env format (key=value). One variable per line. Leave password fields empty to keep current values." }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        TextArea,
+        {
+          value: config.envText,
+          onChange: (e) => setEnvText(e.target.value),
+          placeholder: `PORT=4001
+QUEUE_SERVICE_TYPE=redis
+REDIS_URL=redis://localhost:6379
+REDIS_PASSWORD=
+QUEUE_NAME=tasks`,
+          rows: 18,
+          className: styles.textArea,
+          style: {
+            fontFamily: "SF Mono, Monaco, Inconsolata, Roboto Mono, monospace",
+            fontSize: 13,
+            padding: "16px",
+            lineHeight: 1.6
+          }
+        }
+      )
+    ] });
+  };
+  const renderModelSettings = (serverId) => {
+    const config = serverConfigs[serverId] || {
+      envText: "",
+      models: [
+        {
+          key: "",
+          model: "",
+          provider: "openai",
+          streaming: false,
+          apiKey: "",
+          baseURL: ""
+        }
+      ]
+    };
+    const handleModelChange = (index, field, value) => {
+      const newModels = [...config.models];
+      newModels[index] = { ...newModels[index], [field]: value };
+      setServerConfigs((prev) => ({
+        ...prev,
+        [serverId]: {
+          ...prev[serverId],
+          models: newModels
+        }
+      }));
+    };
+    const handleAddModel = () => {
+      setServerConfigs((prev) => ({
+        ...prev,
+        [serverId]: {
+          ...prev[serverId],
+          models: [
+            ...config.models,
+            {
+              key: "",
+              model: "",
+              provider: "openai",
+              streaming: false,
+              apiKey: "",
+              baseURL: ""
+            }
+          ]
+        }
+      }));
+    };
+    const handleRemoveModel = (index) => {
+      if (config.models.length > 1) {
+        setServerConfigs((prev) => ({
+          ...prev,
+          [serverId]: {
+            ...prev[serverId],
+            models: config.models.filter((_, i) => i !== index)
+          }
+        }));
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure model lattices. Each model will be registered with the provided key and can be used by agents." }) }),
+      config.models.map((model, index) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.card, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: 24,
+              paddingBottom: 20,
+              borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text11, { strong: true, style: { fontSize: 16 }, children: [
+                  "Model ",
+                  index + 1
+                ] }),
+                model.key && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+                  Text11,
+                  {
+                    type: "secondary",
+                    style: { marginLeft: 8, fontSize: 12 },
+                    children: [
+                      "(",
+                      model.key,
+                      ")"
+                    ]
+                  }
+                )
+              ] }),
+              config.models.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                import_antd24.Button,
+                {
+                  type: "text",
+                  danger: true,
+                  size: "small",
+                  onClick: () => handleRemoveModel(index),
+                  style: {
+                    borderRadius: 6,
+                    transition: "all 0.2s"
+                  },
+                  children: "Remove"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_antd24.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "Key *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input,
+              {
+                placeholder: "e.g., default, gpt-4, claude",
+                value: model.key,
+                onChange: (e) => handleModelChange(index, "key", e.target.value),
+                style: { height: 40 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formDescription, children: "Unique identifier for this model" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Select,
+              {
+                style: { width: "100%", height: 40 },
+                value: model.provider,
+                onChange: (value) => handleModelChange(index, "provider", value),
+                options: [
+                  { label: "OpenAI", value: "openai" },
+                  { label: "Azure", value: "azure" },
+                  { label: "DeepSeek", value: "deepseek" },
+                  { label: "SiliconCloud", value: "siliconcloud" },
+                  { label: "VolcEngine", value: "volcengine" }
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input,
+              {
+                placeholder: "e.g., gpt-4, claude-3-opus, kimi-k2-250905",
+                value: model.model,
+                onChange: (e) => handleModelChange(index, "model", e.target.value),
+                style: { height: 40 }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input.Password,
+              {
+                placeholder: "Enter your API key",
+                value: model.apiKey,
+                onChange: (e) => handleModelChange(index, "apiKey", e.target.value),
+                style: { height: 40 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input,
+              {
+                placeholder: "e.g., https://api.openai.com/v1",
+                value: model.baseURL,
+                onChange: (e) => handleModelChange(index, "baseURL", e.target.value),
+                style: { height: 40 }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_antd24.Space, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Switch,
+              {
+                checked: model.streaming,
+                onChange: (checked) => handleModelChange(index, "streaming", checked)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { children: "Enable Streaming" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", gap: 20 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "Max Tokens" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                import_antd24.Input,
+                {
+                  type: "number",
+                  placeholder: "e.g., 4096",
+                  value: model.maxTokens,
+                  onChange: (e) => handleModelChange(
+                    index,
+                    "maxTokens",
+                    e.target.value ? Number(e.target.value) : void 0
+                  ),
+                  style: { height: 40 }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                import_antd24.Input,
+                {
+                  type: "number",
+                  step: "0.1",
+                  placeholder: "e.g., 0.7",
+                  value: model.temperature,
+                  onChange: (e) => handleModelChange(
+                    index,
+                    "temperature",
+                    e.target.value ? Number(e.target.value) : void 0
+                  ),
+                  style: { height: 40 }
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ] }, index)),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        import_antd24.Button,
+        {
+          type: "dashed",
+          onClick: handleAddModel,
+          block: true,
+          size: "large",
+          style: { marginTop: 24, height: 48 },
+          children: "+ Add Model"
+        }
+      )
+    ] });
+  };
+  const renderContent = (serverId) => {
+    switch (activeMenu) {
+      case "environment":
+        return renderEnvironmentSettings(serverId);
+      case "models":
+        return renderModelSettings(serverId);
+      default:
+        return null;
+    }
+  };
+  const activeMenuItem = SETTINGS_MENU_ITEMS.find(
+    (item) => item.key === activeMenu
+  );
+  const currentConnection = connections.find((c) => c.id === activeTabKey);
+  const renderTabLabel = (connection) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        import_icons13.CloudServerOutlined,
+        {
+          style: {
+            marginRight: 8,
+            color: connection.connected ? "#52c41a" : connection.connecting ? "#1890ff" : "#d9d9d9"
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: connection.name }),
+      connection.connected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        import_icons13.CheckCircleFilled,
+        {
+          style: { color: "#52c41a", fontSize: 12, marginLeft: 8 }
+        }
+      ),
+      connection.error && !connection.connecting && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        import_icons13.CloseCircleFilled,
+        {
+          style: { color: "#ff4d4f", fontSize: 12, marginLeft: 8 }
+        }
+      )
+    ] });
+  };
+  const tabItems = connections.map((connection) => ({
+    key: connection.id,
+    label: renderTabLabel(connection),
+    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { display: "flex", height: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+        "div",
+        {
+          className: `${styles.menuItem} ${activeMenu === item.key ? "active" : ""}`,
+          onClick: () => setActiveMenu(item.key),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: styles.menuItemIcon, children: item.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: styles.menuItemText, children: item.label })
+          ]
+        },
+        item.key
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.content, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.contentHeader, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.contentHeaderLeft, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Title2, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text11, { className: styles.contentDescription, children: [
+              activeMenu === "environment" && "Manage environment variables for the gateway server",
+              activeMenu === "models" && "Configure and register model lattices for use by agents"
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.contentHeaderRight, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_antd24.Button, { onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Button,
+              {
+                type: "primary",
+                icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.SaveOutlined, {}),
+                onClick: handleSave,
+                loading,
+                children: "Save Configuration"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.contentBody, children: renderContent(connection.id) })
+      ] })
+    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "div",
       {
-        size: "small",
         style: {
-          backgroundColor: token.colorFillSecondary,
-          color: token.colorText
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          gap: 16,
+          padding: 48
         },
-        children: assistant.name.charAt(0).toUpperCase()
+        children: connection.connecting ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Title2, { level: 4, children: "Connecting..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text11, { type: "secondary", style: { textAlign: "center" }, children: [
+            "Connecting to ",
+            connection.url
+          ] })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Title2, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            Text11,
+            {
+              type: "secondary",
+              style: { textAlign: "center", maxWidth: 400 },
+              children: connection.error ? `Failed to connect to ${connection.url}. Please check the server URL and try again.` : `Click "Reconnect" to connect to ${connection.url}`
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            import_antd24.Button,
+            {
+              type: "primary",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.LinkOutlined, {}),
+              onClick: () => checkConnection(connection.id),
+              loading: connection.connecting,
+              style: { marginTop: 16 },
+              children: "Reconnect"
+            }
+          )
+        ] })
       }
-    )
+    ) }),
+    closable: connections.length > 1
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_x6.Conversations,
-    {
-      items,
-      activeKey: currentAssistant?.id,
-      style,
-      onActiveChange: (key) => {
-        selectAssistant(key);
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      import_antd24.Drawer,
+      {
+        open,
+        onClose,
+        footer: null,
+        width: "100%",
+        title: "Settings",
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+          import_antd24.Tabs,
+          {
+            activeKey: activeTabKey,
+            onChange: setActiveTabKey,
+            type: "editable-card",
+            onEdit: (targetKey, action) => {
+              if (action === "add") {
+                setShowAddServerModal(true);
+              } else if (action === "remove") {
+                handleDeleteServer(targetKey);
+              }
+            },
+            items: tabItems,
+            addIcon: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 4,
+                  padding: "4px 8px"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.PlusOutlined, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: "Add Server" })
+                ]
+              }
+            )
+          }
+        ) })
       }
-    }
-  );
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      import_antd24.Modal,
+      {
+        title: "Add New Server",
+        open: showAddServerModal,
+        onOk: handleAddServer,
+        onCancel: () => {
+          setShowAddServerModal(false);
+          setNewServerUrl("");
+          setNewServerName("");
+          setNewServerApiKey("");
+        },
+        confirmLoading: addingServer,
+        className: styles.addServerModal,
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_antd24.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input,
+              {
+                placeholder: "e.g., Production Server",
+                value: newServerName,
+                onChange: (e) => setNewServerName(e.target.value),
+                onPressEnter: handleAddServer
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input,
+              {
+                placeholder: "e.g., http://localhost:4001",
+                value: newServerUrl,
+                onChange: (e) => setNewServerUrl(e.target.value),
+                onPressEnter: handleAddServer
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              import_antd24.Input.Password,
+              {
+                placeholder: "Optional: Enter API key for authentication",
+                value: newServerApiKey,
+                onChange: (e) => setNewServerApiKey(e.target.value),
+                onPressEnter: handleAddServer
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+          ] })
+        ] })
+      }
+    )
+  ] });
 };
 
 // src/components/Chat/ChatSidebar.tsx
-var import_antd_style10 = require("antd-style");
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var useStyles3 = (0, import_antd_style10.createStyles)(({ token, css }) => ({
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var useStyles4 = (0, import_antd_style11.createStyles)(({ token, css }) => ({
   sidebar: css`
     display: flex;
     flex-direction: column;
@@ -5264,60 +6579,71 @@ var ChatSidebar = ({
   onSettingsClick,
   defaultCollapsed = false
 }) => {
-  const { styles } = useStyles3();
+  const { styles } = useStyles4();
   const { setMenuCollapsed, menuCollapsed } = useChatUIContext();
+  const [settingsModalOpen, setSettingsModalOpen] = (0, import_react24.useState)(false);
   const handleToggleCollapse = () => {
     setMenuCollapsed(!menuCollapsed);
   };
   const handleSettingsClick = () => {
+    setSettingsModalOpen(true);
     onSettingsClick?.();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.sidebar, children: [
-    !menuCollapsed && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.section, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.sectionTitle, children: "Assistants" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AssistantList, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: styles.sidebar, children: [
+      !menuCollapsed && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: styles.content, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: styles.section, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: styles.sectionTitle, children: "Assistants" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssistantList, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_antd25.Divider, { className: styles.divider }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: styles.section, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AgentConversations, {})
+        ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_antd24.Divider, { className: styles.divider }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.section, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AgentConversations, {})
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: styles.footer, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          "button",
+          {
+            className: styles.actionButton,
+            onClick: handleToggleCollapse,
+            title: menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
+            "aria-label": menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
+            children: menuCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons14.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons14.MenuFoldOutlined, {})
+          }
+        ),
+        !menuCollapsed && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          "button",
+          {
+            className: styles.actionButton,
+            onClick: handleSettingsClick,
+            title: "Settings",
+            "aria-label": "Settings",
+            children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_icons14.SettingOutlined, {})
+          }
+        )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: styles.footer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-        "button",
-        {
-          className: styles.actionButton,
-          onClick: handleToggleCollapse,
-          title: menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
-          "aria-label": menuCollapsed ? "Expand sidebar" : "Collapse sidebar",
-          children: menuCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.MenuFoldOutlined, {})
-        }
-      ),
-      !menuCollapsed && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-        "button",
-        {
-          className: styles.actionButton,
-          onClick: handleSettingsClick,
-          title: "Settings",
-          "aria-label": "Settings",
-          children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_icons13.SettingOutlined, {})
-        }
-      )
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      SettingsModal,
+      {
+        open: settingsModalOpen,
+        onClose: () => setSettingsModalOpen(false)
+      }
+    )
   ] });
 };
 
 // src/components/Chat/LatticeChatView.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var LatticeChatView = (props) => {
   const { assistantId, thread } = useConversationContext();
   const { currentAssistant } = useAssistantContext();
   const {
     config: { baseURL }
   } = useLatticeChatShellContext();
-  return assistantId && thread ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return assistantId && thread ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     AxiomLatticeProvider,
     {
       config: {
@@ -5326,14 +6652,14 @@ var LatticeChatView = (props) => {
         assistantId,
         transport: "sse"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         LatticeChat,
         {
           thread_id: thread?.id,
           assistant_id: assistantId,
           name: currentAssistant?.name,
           description: currentAssistant?.description,
-          menu: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChatSidebar, {})
+          menu: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChatSidebar, {})
         }
       )
     }
@@ -5341,9 +6667,9 @@ var LatticeChatView = (props) => {
 };
 
 // src/components/Chat/LatticeChatShell.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var LatticeChatShell = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LatticeChatShellContextProvider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ConversationContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LatticeChatView, {}) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LatticeChatShellContextProvider, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ConversationContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(LatticeChatView, {}) }) }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {