@axiom-lattice/react-sdk 2.1.12 → 2.1.14

package/dist/index.mjs

@@ -136,7 +136,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,
@@ -145,7 +145,7 @@ function useChat(threadId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message4 || command?.resume?.message || "",
+        content: message5 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -483,7 +483,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,
@@ -491,7 +491,7 @@ function AgentThreadProvider({
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message4 || command?.resume?.message || "",
+        content: message5 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -1562,11 +1562,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] = useState8(false);
   return /* @__PURE__ */ jsxs2(Space, { direction: "vertical", style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx7(MDResponse, { content: message4 }),
+    /* @__PURE__ */ jsx7(MDResponse, { content: message5 }),
     options ? /* @__PURE__ */ jsx7(Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ jsx7(
       Button,
       {
@@ -1648,7 +1648,7 @@ import { DownloadOutlined, ExpandAltOutlined } from "@ant-design/icons";
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var { Text: Text2 } = Typography2;
 var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = true }) => {
-  const { dataSource, message: message4 } = data ?? {};
+  const { dataSource, message: message5 } = data ?? {};
   const [expandedRowKeys, setExpandedRowKeys] = useState9([]);
   const { openSideApp } = useChatUIContext();
   const processedData = dataSource?.map((item, index) => ({
@@ -1732,7 +1732,7 @@ var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = t
     {
       size: "small",
       title: () => /* @__PURE__ */ jsxs3(Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ jsx8(Space2, { children: /* @__PURE__ */ jsx8(Text2, { strong: true, style: { fontSize: 16 }, children: message4 || "" }) }),
+        /* @__PURE__ */ jsx8(Space2, { children: /* @__PURE__ */ jsx8(Text2, { strong: true, style: { fontSize: 16 }, children: message5 || "" }) }),
         /* @__PURE__ */ jsxs3(Space2, { children: [
           /* @__PURE__ */ jsx8(
             Button2,
@@ -1753,8 +1753,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: [
@@ -2689,7 +2689,7 @@ var AttachmentsCard = ({
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text11 } = Typography7;
+  const { Text: Text12 } = Typography7;
   const [showAll, setShowAll] = useState11(false);
   const { openSideApp } = useChatUIContext();
   const getStyles = () => {
@@ -2764,7 +2764,7 @@ var AttachmentsCard = ({
     );
   };
   const renderFileDescription = (item) => /* @__PURE__ */ jsx16(Space7, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ jsx16(Space7, { children: /* @__PURE__ */ jsx16(
-    Text11,
+    Text12,
     {
       type: "secondary",
       style: {
@@ -2836,7 +2836,7 @@ var AttachmentsCard = ({
         }
       ),
       item.files && /* @__PURE__ */ jsxs9("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ jsxs9(Text11, { type: "secondary", style: { fontSize: "12px" }, children: [
+        /* @__PURE__ */ jsxs9(Text12, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
@@ -3508,7 +3508,7 @@ import {
 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var LazyBubble = ({
-  message: message4,
+  message: message5,
   renderContent,
   autoLoadRightPanel
 }) => {
@@ -3539,10 +3539,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__ */ jsx23("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
   };
-  return /* @__PURE__ */ jsx23(ErrorBoundary, { children: /* @__PURE__ */ jsx23("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message4) : getPlaceholder() }) });
+  return /* @__PURE__ */ jsx23(ErrorBoundary, { children: /* @__PURE__ */ jsx23("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message5) : getPlaceholder() }) });
 };
 var MemoizedBubbleList = memo(
   ({
@@ -3573,8 +3573,8 @@ var MessageList = ({
       messageLengthRef.current = messages?.length;
     }
   }, [messages?.length]);
-  const renderContent = useCallback7((message4) => {
-    const { content } = message4;
+  const renderContent = useCallback7((message5) => {
+    const { content } = message5;
     try {
       const json = JSON.parse(content);
       if (json.action && json.message) {
@@ -3582,7 +3582,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)}
 \`\`\``;
@@ -3591,17 +3591,17 @@ ${JSON.stringify(tool_call)}
     return /* @__PURE__ */ jsx23(Space10, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ jsx23(MDResponse, { content: content_md }) });
   }, []);
   const items = useMemo4(
-    () => messages.map((message4, index) => ({
-      key: message4.id,
-      role: message4.role,
+    () => messages.map((message5, index) => ({
+      key: message5.id,
+      role: message5.role,
       typing: false,
       content: /* @__PURE__ */ jsx23(
         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 {
@@ -4449,6 +4449,9 @@ var LatticeChatShellContext = createContext4({
   updateConfigValue: () => {
   },
   resetConfig: () => {
+  },
+  settingsModalOpen: false,
+  setSettingsModalOpen: () => {
   }
 });
 var LatticeChatShellContextProvider = ({
@@ -4472,6 +4475,7 @@ var LatticeChatShellContextProvider = ({
     return { ...DEFAULT_CONFIG, ...initialConfig };
   }, [persistToLocalStorage, localStorageKey, initialConfig]);
   const [config, setConfig] = useState17(loadInitialConfig);
+  const [settingsModalOpen, setSettingsModalOpen] = useState17(false);
   const saveToLocalStorage = useCallback8(
     (newConfig) => {
       if (persistToLocalStorage && typeof window !== "undefined") {
@@ -4516,7 +4520,9 @@ var LatticeChatShellContextProvider = ({
         config,
         updateConfig,
         updateConfigValue,
-        resetConfig
+        resetConfig,
+        settingsModalOpen,
+        setSettingsModalOpen
       },
       children
     }
@@ -4741,22 +4747,30 @@ var AssistantContextProvider = ({
     }
   }, [autoLoad, listAssistants]);
   useEffect12(() => {
-    if (state.assistants.length > 0 && !state.currentAssistant) {
-      if (initialAssistantId) {
-        const assistant = state.assistants.find(
-          (a) => a.id === initialAssistantId
-        );
-        if (assistant) {
+    if (state.assistants.length > 0) {
+      const isCurrentAssistantValid = state.currentAssistant && state.assistants.some((a) => a.id === state.currentAssistant?.id);
+      if (!isCurrentAssistantValid) {
+        if (initialAssistantId) {
+          const assistant = state.assistants.find(
+            (a) => a.id === initialAssistantId
+          );
+          if (assistant) {
+            setState((prev) => ({
+              ...prev,
+              currentAssistant: assistant
+            }));
+          } else {
+            setState((prev) => ({
+              ...prev,
+              currentAssistant: prev.assistants[0]
+            }));
+          }
+        } else {
           setState((prev) => ({
             ...prev,
-            currentAssistant: assistant
+            currentAssistant: prev.assistants[0]
           }));
         }
-      } else {
-        setState((prev) => ({
-          ...prev,
-          currentAssistant: prev.assistants[0]
-        }));
       }
     }
   }, [initialAssistantId, state.assistants, state.currentAssistant]);
@@ -5188,7 +5202,7 @@ var AssistantList = () => {
 
 // src/components/Chat/ChatSidebar.tsx
 import { createStyles as createStyles10 } from "antd-style";
-import { jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx37, jsxs as jsxs19 } from "react/jsx-runtime";
 var useStyles3 = createStyles10(({ token, css }) => ({
   sidebar: css`
     display: flex;
@@ -5307,13 +5321,15 @@ var ChatSidebar = ({
 }) => {
   const { styles } = useStyles3();
   const { setMenuCollapsed, menuCollapsed } = useChatUIContext();
+  const { setSettingsModalOpen } = useLatticeChatShellContext();
   const handleToggleCollapse = () => {
     setMenuCollapsed(!menuCollapsed);
   };
   const handleSettingsClick = () => {
+    setSettingsModalOpen(true);
     onSettingsClick?.();
   };
-  return /* @__PURE__ */ jsxs19("div", { className: styles.sidebar, children: [
+  return /* @__PURE__ */ jsx37(Fragment5, { children: /* @__PURE__ */ jsxs19("div", { className: styles.sidebar, children: [
     !menuCollapsed && /* @__PURE__ */ jsxs19("div", { className: styles.content, children: [
       /* @__PURE__ */ jsxs19("div", { className: styles.section, children: [
         /* @__PURE__ */ jsx37("div", { className: styles.sectionTitle, children: "Assistants" }),
@@ -5347,7 +5363,7 @@ var ChatSidebar = ({
         }
       )
     ] })
-  ] });
+  ] }) });
 };
 
 // src/components/Chat/LatticeChatView.tsx
@@ -5381,10 +5397,1370 @@ var LatticeChatView = (props) => {
   ) : null;
 };
 
-// src/components/Chat/LatticeChatShell.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
-var LatticeChatShell = (props) => {
-  return /* @__PURE__ */ jsx39(LatticeChatShellContextProvider, { ...props, children: /* @__PURE__ */ jsx39(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ jsx39(ConversationContextProvider, { children: /* @__PURE__ */ jsx39(LatticeChatView, {}) }) }) });
+// src/components/Chat/SettingsModal.tsx
+import { useState as useState20, useEffect as useEffect14, useRef as useRef11 } from "react";
+import {
+  Modal,
+  Input,
+  Button as Button12,
+  message as message4,
+  Typography as Typography13,
+  Alert as Alert3,
+  Select,
+  Switch,
+  Space as Space13,
+  Tabs as Tabs2,
+  Drawer
+} from "antd";
+import {
+  SaveOutlined,
+  EnvironmentOutlined,
+  ReloadOutlined as ReloadOutlined2,
+  CheckCircleOutlined as CheckCircleOutlined4,
+  ApiOutlined,
+  LinkOutlined,
+  CheckCircleFilled,
+  CloseCircleFilled,
+  PlusOutlined,
+  CloudServerOutlined
+} from "@ant-design/icons";
+import { createStyles as createStyles11 } from "antd-style";
+import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+var { Text: Text11, Title: Title2 } = Typography13;
+var { TextArea } = Input;
+var useStyles4 = createStyles11(({ 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__ */ jsx39(EnvironmentOutlined, {})
+  },
+  {
+    key: "models",
+    label: "Model Configuration",
+    icon: /* @__PURE__ */ jsx39(ApiOutlined, {})
+  }
+];
+var SettingsModal = ({
+  open,
+  onClose
+}) => {
+  const { styles } = useStyles4();
+  const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
+  const [connections, setConnections] = useState20(() => {
+    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] = useState20({});
+  const connectionsRef = useRef11(connections);
+  useEffect14(() => {
+    connectionsRef.current = connections;
+  }, [connections]);
+  const [activeTabKey, setActiveTabKey] = useState20(
+    connections.length > 0 ? connections[0].id : ""
+  );
+  const [activeMenu, setActiveMenu] = useState20("environment");
+  const [loading, setLoading] = useState20(false);
+  const [showAddServerModal, setShowAddServerModal] = useState20(false);
+  const [newServerUrl, setNewServerUrl] = useState20("");
+  const [newServerName, setNewServerName] = useState20("");
+  const [newServerApiKey, setNewServerApiKey] = useState20("");
+  const [addingServer, setAddingServer] = useState20(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) {
+        setConnections(
+          (prev) => prev.map(
+            (conn) => conn.id === serverId ? { ...conn, connected: true, connecting: false, error: "" } : { ...conn, connected: false, connecting: false }
+          )
+        );
+        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);
+      message4.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);
+    }
+  };
+  useEffect14(() => {
+    if (open && activeTabKey) {
+      initializeServerConfig(activeTabKey);
+      const connection = connections.find((c) => c.id === activeTabKey);
+      if (connection && !connection.connected && !connection.connecting) {
+        checkConnection(activeTabKey);
+      }
+    }
+  }, [open, activeTabKey]);
+  useEffect14(() => {
+    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()) {
+      message4.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("");
+    message4.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("");
+      }
+    }
+    message4.success("Server deleted");
+  };
+  const handleTabChange = (newTabKey) => {
+    setConnections(
+      (prev) => prev.map(
+        (conn) => conn.id === newTabKey ? conn : { ...conn, connected: false, connecting: false }
+        // Disconnect others
+      )
+    );
+    setActiveTabKey(newTabKey);
+  };
+  const handleSave = async () => {
+    const connection = connections.find((c) => c.id === activeTabKey);
+    if (!connection || !connection.connected) {
+      message4.error("Please connect to a server first");
+      return;
+    }
+    const url = connection.url;
+    if (!url) {
+      message4.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) {
+            message4.warning(
+              `Configuration saved. Please restart the server for ${data.requiresRestart.join(
+                ", "
+              )} to take effect.`,
+              5
+            );
+          } else {
+            message4.success("Configuration saved and applied successfully");
+          }
+          if (data.warnings && data.warnings.length > 0) {
+            data.warnings.forEach((warning) => {
+              message4.warning(warning, 5);
+            });
+          }
+          onClose();
+        } else {
+          message4.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) {
+          message4.success(
+            "Model configuration saved and registered successfully"
+          );
+          onClose();
+        } else {
+          message4.error(data.error || "Failed to save model configuration");
+        }
+      }
+    } catch (error) {
+      console.error("Failed to save configuration:", error);
+      message4.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__ */ jsxs20("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx39(
+        Alert3,
+        {
+          message: "Configuration Effect",
+          description: /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsxs20("div", { style: { marginBottom: 8 }, children: [
+              /* @__PURE__ */ jsx39(
+                CheckCircleOutlined4,
+                {
+                  style: { color: "#52c41a", marginRight: 8 }
+                }
+              ),
+              /* @__PURE__ */ jsx39("strong", { children: "Immediately effective:" }),
+              " QUEUE_SERVICE_TYPE, REDIS_URL, REDIS_PASSWORD, QUEUE_NAME"
+            ] }),
+            /* @__PURE__ */ jsxs20("div", { children: [
+              /* @__PURE__ */ jsx39(ReloadOutlined2, { style: { color: "#faad14", marginRight: 8 } }),
+              /* @__PURE__ */ jsx39("strong", { children: "Requires restart:" }),
+              " PORT (server must be restarted to change port)"
+            ] })
+          ] }),
+          type: "info",
+          showIcon: true,
+          className: styles.alertCard
+        }
+      ),
+      /* @__PURE__ */ jsx39("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx39(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__ */ jsx39(
+        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__ */ jsxs20("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx39("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx39(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__ */ jsxs20("div", { className: styles.card, children: [
+        /* @__PURE__ */ jsxs20(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginBottom: 24,
+              paddingBottom: 20,
+              borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
+            },
+            children: [
+              /* @__PURE__ */ jsxs20("div", { children: [
+                /* @__PURE__ */ jsxs20(Text11, { strong: true, style: { fontSize: 16 }, children: [
+                  "Model ",
+                  index + 1
+                ] }),
+                model.key && /* @__PURE__ */ jsxs20(
+                  Text11,
+                  {
+                    type: "secondary",
+                    style: { marginLeft: 8, fontSize: 12 },
+                    children: [
+                      "(",
+                      model.key,
+                      ")"
+                    ]
+                  }
+                )
+              ] }),
+              config.models.length > 1 && /* @__PURE__ */ jsx39(
+                Button12,
+                {
+                  type: "text",
+                  danger: true,
+                  size: "small",
+                  onClick: () => handleRemoveModel(index),
+                  style: {
+                    borderRadius: 6,
+                    transition: "all 0.2s"
+                  },
+                  children: "Remove"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs20(Space13, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Key *" }),
+            /* @__PURE__ */ jsx39(
+              Input,
+              {
+                placeholder: "e.g., default, gpt-4, claude",
+                value: model.key,
+                onChange: (e) => handleModelChange(index, "key", e.target.value),
+                style: { height: 40 }
+              }
+            ),
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formDescription, children: "Unique identifier for this model" })
+          ] }),
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ jsx39(
+              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__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ jsx39(
+              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__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ jsx39(
+              Input.Password,
+              {
+                placeholder: "Enter your API key",
+                value: model.apiKey,
+                onChange: (e) => handleModelChange(index, "apiKey", e.target.value),
+                style: { height: 40 }
+              }
+            ),
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+          ] }),
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ jsx39(
+              Input,
+              {
+                placeholder: "e.g., https://api.openai.com/v1",
+                value: model.baseURL,
+                onChange: (e) => handleModelChange(index, "baseURL", e.target.value),
+                style: { height: 40 }
+              }
+            ),
+            /* @__PURE__ */ jsx39(Text11, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+          ] }),
+          /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsxs20(Space13, { children: [
+            /* @__PURE__ */ jsx39(
+              Switch,
+              {
+                checked: model.streaming,
+                onChange: (checked) => handleModelChange(index, "streaming", checked)
+              }
+            ),
+            /* @__PURE__ */ jsx39(Text11, { children: "Enable Streaming" })
+          ] }) }),
+          /* @__PURE__ */ jsxs20("div", { style: { display: "flex", gap: 20 }, children: [
+            /* @__PURE__ */ jsxs20("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Max Tokens" }),
+              /* @__PURE__ */ jsx39(
+                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__ */ jsxs20("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx39(Text11, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ jsx39(
+                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__ */ jsx39(
+        Button12,
+        {
+          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__ */ jsxs20("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx39(
+        CloudServerOutlined,
+        {
+          style: {
+            marginRight: 8,
+            color: connection.connected ? "#52c41a" : connection.connecting ? "#1890ff" : "#d9d9d9"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx39("span", { children: connection.name }),
+      connection.connected && /* @__PURE__ */ jsx39(
+        CheckCircleFilled,
+        {
+          style: { color: "#52c41a", fontSize: 12, marginLeft: 8 }
+        }
+      ),
+      connection.error && !connection.connecting && /* @__PURE__ */ jsx39(
+        CloseCircleFilled,
+        {
+          style: { color: "#ff4d4f", fontSize: 12, marginLeft: 8 }
+        }
+      )
+    ] });
+  };
+  const tabItems = connections.map((connection) => ({
+    key: connection.id,
+    label: renderTabLabel(connection),
+    children: /* @__PURE__ */ jsx39("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx39(Fragment6, { children: /* @__PURE__ */ jsxs20("div", { style: { display: "flex", height: "100%" }, children: [
+      /* @__PURE__ */ jsx39("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs20(
+        "div",
+        {
+          className: `${styles.menuItem} ${activeMenu === item.key ? "active" : ""}`,
+          onClick: () => setActiveMenu(item.key),
+          children: [
+            /* @__PURE__ */ jsx39("span", { className: styles.menuItemIcon, children: item.icon }),
+            /* @__PURE__ */ jsx39("span", { className: styles.menuItemText, children: item.label })
+          ]
+        },
+        item.key
+      )) }),
+      /* @__PURE__ */ jsxs20("div", { className: styles.content, children: [
+        /* @__PURE__ */ jsxs20("div", { className: styles.contentHeader, children: [
+          /* @__PURE__ */ jsxs20("div", { className: styles.contentHeaderLeft, children: [
+            /* @__PURE__ */ jsx39(Title2, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
+            /* @__PURE__ */ jsxs20(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__ */ jsxs20("div", { className: styles.contentHeaderRight, children: [
+            /* @__PURE__ */ jsx39(Button12, { onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx39(
+              Button12,
+              {
+                type: "primary",
+                icon: /* @__PURE__ */ jsx39(SaveOutlined, {}),
+                onClick: handleSave,
+                loading,
+                children: "Save Configuration"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx39("div", { className: styles.contentBody, children: renderContent(connection.id) })
+      ] })
+    ] }) }) : /* @__PURE__ */ jsx39(
+      "div",
+      {
+        style: {
+          flex: 1,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "column",
+          gap: 16,
+          padding: 48
+        },
+        children: connection.connecting ? /* @__PURE__ */ jsxs20(Fragment6, { children: [
+          /* @__PURE__ */ jsx39(LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
+          /* @__PURE__ */ jsx39(Title2, { level: 4, children: "Connecting..." }),
+          /* @__PURE__ */ jsxs20(Text11, { type: "secondary", style: { textAlign: "center" }, children: [
+            "Connecting to ",
+            connection.url
+          ] })
+        ] }) : /* @__PURE__ */ jsxs20(Fragment6, { children: [
+          /* @__PURE__ */ jsx39(LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
+          /* @__PURE__ */ jsx39(Title2, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
+          /* @__PURE__ */ jsx39(
+            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__ */ jsx39(
+            Button12,
+            {
+              type: "primary",
+              icon: /* @__PURE__ */ jsx39(LinkOutlined, {}),
+              onClick: () => checkConnection(connection.id),
+              loading: connection.connecting,
+              style: { marginTop: 16 },
+              children: "Reconnect"
+            }
+          )
+        ] })
+      }
+    ) }),
+    closable: connections.length > 1
+  }));
+  return /* @__PURE__ */ jsxs20(Fragment6, { children: [
+    /* @__PURE__ */ jsx39(
+      Drawer,
+      {
+        open,
+        onClose,
+        footer: null,
+        width: "100%",
+        title: "Settings",
+        children: /* @__PURE__ */ jsx39("div", { children: /* @__PURE__ */ jsx39(
+          Tabs2,
+          {
+            activeKey: activeTabKey,
+            onChange: handleTabChange,
+            type: "editable-card",
+            onEdit: (targetKey, action) => {
+              if (action === "add") {
+                setShowAddServerModal(true);
+              } else if (action === "remove") {
+                handleDeleteServer(targetKey);
+              }
+            },
+            items: tabItems,
+            addIcon: /* @__PURE__ */ jsxs20(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 4,
+                  padding: "4px 8px"
+                },
+                children: [
+                  /* @__PURE__ */ jsx39(PlusOutlined, {}),
+                  /* @__PURE__ */ jsx39("span", { children: "Add Server" })
+                ]
+              }
+            )
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx39(
+      Modal,
+      {
+        title: "Add New Server",
+        open: showAddServerModal,
+        onOk: handleAddServer,
+        onCancel: () => {
+          setShowAddServerModal(false);
+          setNewServerUrl("");
+          setNewServerName("");
+          setNewServerApiKey("");
+        },
+        confirmLoading: addingServer,
+        className: styles.addServerModal,
+        children: /* @__PURE__ */ jsxs20(Space13, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
+            /* @__PURE__ */ jsx39(
+              Input,
+              {
+                placeholder: "e.g., Production Server",
+                value: newServerName,
+                onChange: (e) => setNewServerName(e.target.value),
+                onPressEnter: handleAddServer
+              }
+            ),
+            /* @__PURE__ */ jsx39(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+          ] }),
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ jsx39(
+              Input,
+              {
+                placeholder: "e.g., http://localhost:4001",
+                value: newServerUrl,
+                onChange: (e) => setNewServerUrl(e.target.value),
+                onPressEnter: handleAddServer
+              }
+            ),
+            /* @__PURE__ */ jsx39(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+          ] }),
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx39(Text11, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ jsx39(
+              Input.Password,
+              {
+                placeholder: "Optional: Enter API key for authentication",
+                value: newServerApiKey,
+                onChange: (e) => setNewServerApiKey(e.target.value),
+                onPressEnter: handleAddServer
+              }
+            ),
+            /* @__PURE__ */ jsx39(Text11, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+
+// src/components/Chat/AgentServerSetting.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+var AgentServerSetting = () => {
+  const { settingsModalOpen, setSettingsModalOpen } = useLatticeChatShellContext();
+  return /* @__PURE__ */ jsx40(
+    SettingsModal,
+    {
+      open: settingsModalOpen,
+      onClose: () => setSettingsModalOpen(false)
+    }
+  );
+};
+
+// src/components/Chat/LatticeChatShell.tsx
+import { jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+var LatticeChatShell = (props) => {
+  return /* @__PURE__ */ jsxs21(LatticeChatShellContextProvider, { ...props, children: [
+    /* @__PURE__ */ jsx41(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ jsx41(ConversationContextProvider, { children: /* @__PURE__ */ jsx41(LatticeChatView, {}) }) }),
+    /* @__PURE__ */ jsx41(AgentServerSetting, {})
+  ] });
 };
 export {
   AgentConversations,