@axiom-lattice/react-sdk 2.1.26 → 2.1.28

package/dist/index.js

@@ -1037,40 +1037,16 @@ var useStyle = (0, import_antd_style.createStyles)(({ token, css }) => {
       }
     `,
     menu: css`
-      background: ${token.colorBgContainer}90;
-      width: 240px;
+      // background: ${token.colorBgContainer}90;
+      width: 60px;
       display: flex;
       flex-direction: column;
       flex-shrink: 0;
       transition: all 0.3s ease;
       overflow: hidden;
       position: relative;
-      border-radius: ${token.borderRadiusLG}px;
-      box-shadow: ${token.boxShadow};
-
-      &.open {
-        background: transparent;
-        box-shadow: none;
-        margin-left: -8px;
-        height: 100%;
-      }
-
-      &.collapsed {
-        width: 8px;
-        height: 100%;
-        margin-right: -8px;
-        .ant-conversations {
-          width: 64px;
-        }
-
-        .ant-conversations-list {
-          display: none !important;
-        }
-
-        .btn-text {
-          display: none !important;
-        }
-      }
+      // border-radius: ${token.borderRadiusLG}px;
+      // box-shadow: ${token.boxShadow};
     `,
     menuToggle: css`
       position: relative;
@@ -1354,7 +1330,7 @@ var ColumnLayout = ({
 };
 
 // src/components/Chat/SideAppViewBrowser.tsx
-var import_icons16 = require("@ant-design/icons");
+var import_icons17 = require("@ant-design/icons");
 
 // src/components/GenUI/elements/confirm_feedback.tsx
 var import_antd3 = require("antd");
@@ -2490,7 +2466,11 @@ var ToolCall = ({ data }) => {
   const expandIcon = ({ isActive }) => {
     return getStatusIcon(toolCallData.status);
   };
-  const toolCallElement = getElement(toolCallData.name.toLowerCase());
+  let toolCallName = toolCallData.name.toLowerCase();
+  if (toolCallName.startsWith("browser_")) {
+    toolCallName = "browser_viewer";
+  }
+  const toolCallElement = getElement(toolCallName);
   if (toolCallElement) {
     return toolCallElement.card_view({
       data: toolCallData,
@@ -3285,7 +3265,7 @@ var AttachmentsCard = ({
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text17 } = import_antd9.Typography;
+  const { Text: Text18 } = import_antd9.Typography;
   const [showAll, setShowAll] = (0, import_react14.useState)(false);
   const { openSideApp } = useChatUIContext();
   const getStyles = () => {
@@ -3360,7 +3340,7 @@ var AttachmentsCard = ({
     );
   };
   const renderFileDescription = (item) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd9.Space, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd9.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    Text17,
+    Text18,
     {
       type: "secondary",
       style: {
@@ -3432,7 +3412,7 @@ var AttachmentsCard = ({
         }
       ),
       item.files && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text17, { type: "secondary", style: { fontSize: "12px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text18, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
@@ -4757,7 +4737,8 @@ var DEFAULT_CONFIG = {
   timeout: 3e5,
   headers: {},
   enableThreadCreation: true,
-  enableThreadList: true
+  enableThreadList: true,
+  showSideMenu: true
 };
 var LatticeChatShellContext = (0, import_react20.createContext)({
   config: DEFAULT_CONFIG,
@@ -6307,6 +6288,99 @@ var ScheduleViewer = ({ data }) => {
   ] });
 };
 
+// src/components/GenUI/elements/browser_view_card.tsx
+var import_antd26 = require("antd");
+var import_icons16 = require("@ant-design/icons");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var { Text: Text13 } = import_antd26.Typography;
+var BrowserViewer = ({
+  data,
+  component_key,
+  interactive = true
+}) => {
+  const toolCallData = data;
+  const { threadId, assistantId } = useConversationContext();
+  const { config } = useLatticeChatShellContext();
+  const ws_path = `/sandbox/assistants/${assistantId}/threads/${threadId}/sandbox/websockify`;
+  let targetUrl = `/api/assistants/${assistantId}/threads/${threadId}/sandbox?autoconnect=true&resize=scale&reconnect=1&path${ws_path}`;
+  if (config.globalSharedSandboxURL) {
+    targetUrl = `${config.globalSharedSandboxURL}/vnc/index.html?autoconnect=true&resize=scale&reconnect=1&path=/sandbox/global/websockify`;
+  }
+  function getStatusIcon3(status) {
+    switch (status) {
+      case "success":
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons16.CheckCircleOutlined, { style: { color: "#52c41a" } });
+      case "error":
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons16.InfoCircleOutlined, { style: { color: "#ff4d4f" } });
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons16.LoadingOutlined, { style: { color: "#1890ff" } });
+    }
+  }
+  const formatToolName = (name) => {
+    if (!name) {
+      return "";
+    }
+    return name.replace(/([a-z])([A-Z])/g, "$1 $2").split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  };
+  const formatArgsPreview = (args) => {
+    try {
+      const argsStr = Object.values(args).map((value) => {
+        const valueStr = typeof value === "object" ? JSON.stringify(value).substring(0, 50) + (JSON.stringify(value).length > 50 ? "..." : "") : String(value).substring(0, 50) + (String(value).length > 50 ? "..." : "");
+        return valueStr;
+      }).join(" ");
+      const result = argsStr.length > 100 ? argsStr.substring(0, 100) + "..." : argsStr;
+      return result.replaceAll("\n", " ");
+    } catch (e) {
+      return "Error parsing args";
+    }
+  };
+  const header = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_antd26.Flex, { align: "center", wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_antd26.Typography.Text, { strong: true, children: formatToolName(toolCallData.name) }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      import_antd26.Typography.Text,
+      {
+        type: "secondary",
+        style: { fontSize: "12px", marginLeft: "8px" },
+        children: formatArgsPreview(toolCallData.args)
+      }
+    )
+  ] });
+  const { openSideApp } = useChatUIContext();
+  if (!toolCallData) {
+    return null;
+  }
+  const handleItemClick = (toolCallData2) => {
+    openSideApp({
+      component_key: "browser_viewer",
+      message: "View Browser",
+      data: {
+        url: targetUrl
+      }
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    ContentPreviewCollapse,
+    {
+      panelKey: toolCallData.id,
+      header,
+      expandIcon: () => getStatusIcon3(toolCallData.status),
+      extra: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        import_antd26.Button,
+        {
+          type: "link",
+          size: "small",
+          onClick: (evt) => {
+            evt.stopPropagation();
+            handleItemClick(toolCallData);
+          },
+          children: "View Browser"
+        }
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(MDResponse, { content: toolCallData.response || "" })
+    }
+  );
+};
+
 // src/components/GenUI/elements/builtIns.tsx
 var elements = {
   action_show_attachments_uploader: {
@@ -6362,6 +6436,10 @@ var elements = {
   schedule_viewer: {
     card_view: () => null,
     side_app_view: ScheduleViewer
+  },
+  browser_viewer: {
+    card_view: BrowserViewer,
+    side_app_view: AttachmentsViewerSideApp
   }
 };
 
@@ -6379,10 +6457,10 @@ var regsiterElement = (language, ElementMeta) => {
 };
 
 // src/components/Chat/SideAppViewBrowser.tsx
-var import_antd26 = require("antd");
+var import_antd27 = require("antd");
 var import_antd_style12 = require("antd-style");
 var import_react26 = require("react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var useStyle8 = (0, import_antd_style12.createStyles)(({ token, css }) => {
   return {
     tabContainer: css`
@@ -6402,9 +6480,9 @@ var useStyle8 = (0, import_antd_style12.createStyles)(({ token, css }) => {
   };
 });
 var EmptySideAppView = ({ component_key, data }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
   ] });
 };
 var SideAppViewBrowser = () => {
@@ -6465,7 +6543,7 @@ var SideAppViewBrowser = () => {
     add(
       key,
       sideAppSelectedCard?.message || sideAppSelectedCard?.data.message || "\u672A\u547D\u540D",
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
         SideAppView,
         {
           component_key: sideAppSelectedCard?.component_key || "",
@@ -6506,26 +6584,26 @@ var SideAppViewBrowser = () => {
   const getSizeIcon = (size) => {
     switch (size) {
       case "middle":
-        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons16.CompressOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons17.CompressOutlined, {});
       case "large":
-        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons16.ExpandOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons17.ExpandOutlined, {});
       case "full":
-        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons16.FullscreenOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons17.FullscreenOutlined, {});
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons16.ExpandOutlined, {});
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons17.ExpandOutlined, {});
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-    import_antd26.Tabs,
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    import_antd27.Tabs,
     {
       className: styles.tabContainer,
       type: "editable-card",
       style: { height: "100%" },
       hideAdd: true,
       tabBarExtraContent: {
-        right: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            import_antd26.Button,
+        right: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: { display: "flex", gap: "4px" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_antd27.Button,
             {
               style: { margin: "8px 0" },
               size: "large",
@@ -6535,13 +6613,13 @@ var SideAppViewBrowser = () => {
               title: `\u5F53\u524D\u5C3A\u5BF8: ${getSizeLabel(sideAppSize)}, \u70B9\u51FB\u5207\u6362`
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
-            import_antd26.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_antd27.Button,
             {
               style: { margin: "8px 0" },
               size: "large",
               type: "text",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_icons16.CloseOutlined, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_icons17.CloseOutlined, {}),
               onClick: () => {
                 closeSideApp();
               }
@@ -6558,10 +6636,10 @@ var SideAppViewBrowser = () => {
 };
 
 // src/components/Chat/LatticeChat.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var LatticeChat = (props) => {
   const { assistant_id, thread_id = "", menu, header, ...chatingProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     AgentThreadProvider,
     {
       assistantId: assistant_id,
@@ -6571,7 +6649,7 @@ var LatticeChat = (props) => {
         enableReturnStateWhenStreamCompleted: true,
         enableResumeStream: true
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ChatUIContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ChatUIContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
         "div",
         {
           style: {
@@ -6582,12 +6660,12 @@ var LatticeChat = (props) => {
           },
           children: [
             header,
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               ColumnLayout,
               {
                 menu,
-                left: thread_id ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Chating, { ...chatingProps }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: "\u9700\u8981\u5148\u521B\u5EFA\u4F1A\u8BDD" }),
-                right: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SideAppViewBrowser, {})
+                left: thread_id ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Chating, { ...chatingProps }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { children: "\u9700\u8981\u5148\u521B\u5EFA\u4F1A\u8BDD" }),
+                right: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SideAppViewBrowser, {})
               }
             )
           ]
@@ -6599,14 +6677,14 @@ var LatticeChat = (props) => {
 
 // src/components/Chat/AgentConversations.tsx
 var import_x6 = require("@ant-design/x");
-var import_antd27 = require("antd");
+var import_antd28 = require("antd");
 var import_react27 = require("react");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var AgentConversations = ({
   enableThreadCreation = true,
   enableThreadList = true
 }) => {
-  const { token } = import_antd27.theme.useToken();
+  const { token } = import_antd28.theme.useToken();
   const { currentAssistant } = useAssistantContext();
   const {
     assistantId,
@@ -6640,7 +6718,7 @@ var AgentConversations = ({
   const creation = enableThreadCreation ? {
     onClick: newChatClick
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     import_x6.Conversations,
     {
       creation,
@@ -6655,52 +6733,13 @@ var AgentConversations = ({
   );
 };
 
-// src/components/Chat/ChatSidebar.tsx
-var import_react37 = require("react");
-var import_antd34 = require("antd");
-var import_icons21 = require("@ant-design/icons");
-
-// src/components/Chat/AssistantList.tsx
-var import_x7 = require("@ant-design/x");
-var import_antd28 = require("antd");
-var import_jsx_runtime43 = require("react/jsx-runtime");
-var AssistantList = () => {
-  const { token } = import_antd28.theme.useToken();
-  const { assistants, selectAssistant, currentAssistant } = useAssistantContext();
-  const style = {
-    width: "100%",
-    background: "transparent",
-    borderRadius: token.borderRadius
-  };
-  const items = assistants.map((assistant) => ({
-    key: assistant.id,
-    label: assistant.name,
-    icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-      import_antd28.Avatar,
-      {
-        size: "small",
-        style: {
-          backgroundColor: token.colorFillSecondary,
-          color: token.colorText
-        },
-        children: assistant.name.charAt(0).toUpperCase()
-      }
-    )
-  }));
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_x7.Conversations,
-    {
-      items,
-      activeKey: currentAssistant?.id,
-      style,
-      onActiveChange: (key) => {
-        selectAssistant(key);
-      }
-    }
-  );
-};
+// src/components/Chat/LatticeChatView.tsx
+var import_react39 = require("react");
 
 // src/components/Chat/ChatSidebar.tsx
+var import_react38 = require("react");
+var import_antd35 = require("antd");
+var import_icons23 = require("@ant-design/icons");
 var import_antd_style13 = require("antd-style");
 
 // src/components/Chat/AssistantFlow.tsx
@@ -6712,9 +6751,9 @@ var import_style = require("@xyflow/react/dist/style.css");
 var import_react28 = require("react");
 var import_react29 = require("@xyflow/react");
 var import_antd29 = require("antd");
-var import_icons17 = require("@ant-design/icons");
+var import_icons18 = require("@ant-design/icons");
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var { Text: Text13 } = import_antd29.Typography;
+var { Text: Text14 } = import_antd29.Typography;
 var getBadgeColor = (id) => {
   const colors = [
     "#1890ff",
@@ -6826,7 +6865,7 @@ var AssistantNode = ({
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                      Text13,
+                      Text14,
                       {
                         strong: true,
                         style: {
@@ -6862,7 +6901,7 @@ var AssistantNode = ({
                     gap: 6
                   },
                   children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                    Text13,
+                    Text14,
                     {
                       style: {
                         fontSize: 11,
@@ -6878,7 +6917,7 @@ var AssistantNode = ({
           }
         ),
         assistant.description && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-          Text13,
+          Text14,
           {
             style: {
               fontSize: 12,
@@ -6905,7 +6944,7 @@ var AssistantNode = ({
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                  import_icons17.SettingOutlined,
+                  import_icons18.SettingOutlined,
                   {
                     style: {
                       fontSize: 14,
@@ -6914,7 +6953,7 @@ var AssistantNode = ({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                  Text13,
+                  Text14,
                   {
                     style: {
                       fontSize: 12,
@@ -6951,7 +6990,7 @@ var AssistantNode = ({
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                  import_icons17.CodeOutlined,
+                  import_icons18.CodeOutlined,
                   {
                     style: {
                       fontSize: 14,
@@ -6960,7 +6999,7 @@ var AssistantNode = ({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                  Text13,
+                  Text14,
                   {
                     style: {
                       fontSize: 12,
@@ -6986,7 +7025,7 @@ var AssistantNode = ({
                 overflowY: "auto"
               },
               children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                Text13,
+                Text14,
                 {
                   style: {
                     fontSize: 11,
@@ -7012,7 +7051,7 @@ var AssistantNode = ({
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                  import_icons17.ToolOutlined,
+                  import_icons18.ToolOutlined,
                   {
                     style: {
                       fontSize: 14,
@@ -7021,7 +7060,7 @@ var AssistantNode = ({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-                  Text13,
+                  Text14,
                   {
                     style: {
                       fontSize: 12,
@@ -7063,7 +7102,7 @@ var AssistantNode = ({
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                  import_icons17.BranchesOutlined,
+                  import_icons18.BranchesOutlined,
                   {
                     style: {
                       fontSize: 14,
@@ -7072,7 +7111,7 @@ var AssistantNode = ({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-                  Text13,
+                  Text14,
                   {
                     style: {
                       fontSize: 12,
@@ -7130,7 +7169,7 @@ var AssistantNode = ({
               /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 import_antd29.Button,
                 {
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons17.CopyOutlined, {}),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons18.CopyOutlined, {}),
                   onClick: () => handleCopy(assistant.id),
                   title: "\u590D\u5236 ID"
                 }
@@ -7218,7 +7257,7 @@ var AssistantNode = ({
                         e.currentTarget.style.background = token.colorBgContainer;
                       },
                       children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                        import_icons17.InfoCircleOutlined,
+                        import_icons18.InfoCircleOutlined,
                         {
                           style: {
                             fontSize: 14,
@@ -7261,7 +7300,7 @@ var AssistantNode = ({
                                   import_antd29.Avatar,
                                   {
                                     size: 44,
-                                    icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons17.UserOutlined, {}),
+                                    icon: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_icons18.UserOutlined, {}),
                                     style: {
                                       backgroundColor: badgeColor,
                                       color: "#fff",
@@ -7298,7 +7337,7 @@ var AssistantNode = ({
                               },
                               children: [
                                 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                                  Text13,
+                                  Text14,
                                   {
                                     strong: true,
                                     style: {
@@ -7323,7 +7362,7 @@ var AssistantNode = ({
                                     },
                                     children: [
                                       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                                        import_icons17.IdcardOutlined,
+                                        import_icons18.IdcardOutlined,
                                         {
                                           style: {
                                             fontSize: 9,
@@ -7332,7 +7371,7 @@ var AssistantNode = ({
                                         }
                                       ),
                                       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-                                        Text13,
+                                        Text14,
                                         {
                                           style: {
                                             fontSize: 9,
@@ -7743,16 +7782,16 @@ var import_react35 = require("react");
 var import_react36 = require("@xyflow/react");
 var import_style2 = require("@xyflow/react/dist/style.css");
 var import_antd33 = require("antd");
-var import_icons20 = require("@ant-design/icons");
+var import_icons21 = require("@ant-design/icons");
 
 // src/components/Chat/SkillNode.tsx
 var import_react32 = require("react");
 var import_react33 = require("@xyflow/react");
 var import_antd30 = require("antd");
-var import_icons18 = require("@ant-design/icons");
+var import_icons19 = require("@ant-design/icons");
 var import_client_sdk8 = require("@axiom-lattice/client-sdk");
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var { Text: Text14 } = import_antd30.Typography;
+var { Text: Text15 } = import_antd30.Typography;
 var { TextArea } = import_antd30.Input;
 var getBadgeColor2 = (name) => {
   const colors = [
@@ -7964,7 +8003,7 @@ var SkillNode = ({ data }) => {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text14, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             TextArea,
             {
@@ -7976,7 +8015,7 @@ var SkillNode = ({ data }) => {
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text14, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             import_antd30.Input,
             {
@@ -7987,7 +8026,7 @@ var SkillNode = ({ data }) => {
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text14, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             import_antd30.Input,
             {
@@ -8008,7 +8047,7 @@ var SkillNode = ({ data }) => {
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                Text14,
+                Text15,
                 {
                   style: {
                     fontSize: 12,
@@ -8022,7 +8061,7 @@ var SkillNode = ({ data }) => {
                 import_antd30.Button,
                 {
                   size: "small",
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons18.PlusOutlined, {}),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons19.PlusOutlined, {}),
                   onClick: handleAddMetadataRow,
                   children: "Add"
                 }
@@ -8032,7 +8071,7 @@ var SkillNode = ({ data }) => {
         ),
         /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_antd30.Space, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
           metadataRows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            Text14,
+            Text15,
             {
               style: {
                 fontSize: 11,
@@ -8051,7 +8090,7 @@ var SkillNode = ({ data }) => {
                 width: "100%"
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Text14, { style: { fontSize: 11, color: token.colorTextSecondary }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Text15, { style: { fontSize: 11, color: token.colorTextSecondary }, children: [
                   "Meta ",
                   index + 1
                 ] }),
@@ -8081,7 +8120,7 @@ var SkillNode = ({ data }) => {
           ))
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text14, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
           /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
             TextArea,
             {
@@ -8126,7 +8165,7 @@ var SkillNode = ({ data }) => {
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                      Text14,
+                      Text15,
                       {
                         strong: true,
                         style: {
@@ -8162,7 +8201,7 @@ var SkillNode = ({ data }) => {
                     gap: 6
                   },
                   children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                    Text14,
+                    Text15,
                     {
                       style: {
                         fontSize: 11,
@@ -8179,7 +8218,7 @@ var SkillNode = ({ data }) => {
         ),
         isEditing ? editingView : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
           currentSkill.description && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-            Text14,
+            Text15,
             {
               style: {
                 fontSize: 12,
@@ -8206,7 +8245,7 @@ var SkillNode = ({ data }) => {
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                    import_icons18.InfoCircleOutlined,
+                    import_icons19.InfoCircleOutlined,
                     {
                       style: {
                         fontSize: 14,
@@ -8215,7 +8254,7 @@ var SkillNode = ({ data }) => {
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-                    Text14,
+                    Text15,
                     {
                       style: {
                         fontSize: 12,
@@ -8297,7 +8336,7 @@ var SkillNode = ({ data }) => {
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                    import_icons18.BranchesOutlined,
+                    import_icons19.BranchesOutlined,
                     {
                       style: {
                         fontSize: 14,
@@ -8306,7 +8345,7 @@ var SkillNode = ({ data }) => {
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-                    Text14,
+                    Text15,
                     {
                       style: {
                         fontSize: 12,
@@ -8344,7 +8383,7 @@ var SkillNode = ({ data }) => {
             currentSkill.license && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               import_antd30.Tag,
               {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons18.CopyrightOutlined, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons19.CopyrightOutlined, {}),
                 style: {
                   margin: 0,
                   fontSize: 11,
@@ -8382,7 +8421,7 @@ var SkillNode = ({ data }) => {
           ] }) }),
           (currentSkill.createdAt || currentSkill.updatedAt) && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_antd30.Space, { direction: "vertical", size: 4, children: [
             currentSkill.createdAt && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-              Text14,
+              Text15,
               {
                 style: {
                   fontSize: 11,
@@ -8396,7 +8435,7 @@ var SkillNode = ({ data }) => {
               }
             ),
             currentSkill.updatedAt && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-              Text14,
+              Text15,
               {
                 style: {
                   fontSize: 11,
@@ -8422,7 +8461,7 @@ var SkillNode = ({ data }) => {
                 },
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                    import_icons18.FileTextOutlined,
+                    import_icons19.FileTextOutlined,
                     {
                       style: {
                         fontSize: 14,
@@ -8431,7 +8470,7 @@ var SkillNode = ({ data }) => {
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                    Text14,
+                    Text15,
                     {
                       style: {
                         fontSize: 12,
@@ -8457,7 +8496,7 @@ var SkillNode = ({ data }) => {
                   overflowY: "auto"
                 },
                 children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                  Text14,
+                  Text15,
                   {
                     style: {
                       fontSize: 11,
@@ -8537,7 +8576,7 @@ var SkillNode = ({ data }) => {
               /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                 import_antd30.Button,
                 {
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons18.CopyOutlined, {}),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons19.CopyOutlined, {}),
                   onClick: () => handleCopy(currentSkill.id),
                   title: "Copy ID"
                 }
@@ -8633,7 +8672,7 @@ var SkillNode = ({ data }) => {
                                 import_antd30.Avatar,
                                 {
                                   size: 44,
-                                  icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons18.BookOutlined, {}),
+                                  icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons19.BookOutlined, {}),
                                   style: {
                                     backgroundColor: badgeColor,
                                     color: "#fff",
@@ -8660,7 +8699,7 @@ var SkillNode = ({ data }) => {
                                     justifyContent: "center"
                                   },
                                   children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                                    import_icons18.BranchesOutlined,
+                                    import_icons19.BranchesOutlined,
                                     {
                                       style: {
                                         fontSize: 10,
@@ -8682,7 +8721,7 @@ var SkillNode = ({ data }) => {
                             },
                             children: [
                               /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                                Text14,
+                                Text15,
                                 {
                                   strong: true,
                                   style: {
@@ -8707,7 +8746,7 @@ var SkillNode = ({ data }) => {
                                   },
                                   children: [
                                     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                                      import_icons18.FileTextOutlined,
+                                      import_icons19.FileTextOutlined,
                                       {
                                         style: {
                                           fontSize: 9,
@@ -8716,7 +8755,7 @@ var SkillNode = ({ data }) => {
                                       }
                                     ),
                                     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-                                      Text14,
+                                      Text15,
                                       {
                                         style: {
                                           fontSize: 9,
@@ -8842,7 +8881,7 @@ var SkillNode = ({ data }) => {
                               fontWeight: 500,
                               lineHeight: "14px"
                             },
-                            icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons18.CopyrightOutlined, {}),
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons19.CopyrightOutlined, {}),
                             children: currentSkill.license
                           }
                         ),
@@ -8860,7 +8899,7 @@ var SkillNode = ({ data }) => {
                               fontWeight: 500,
                               lineHeight: "14px"
                             },
-                            icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons18.InfoCircleOutlined, {}),
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons19.InfoCircleOutlined, {}),
                             children: currentSkill.compatibility
                           }
                         )
@@ -8909,11 +8948,11 @@ var SkillNode_default = SkillNode;
 // src/components/Chat/CreateSkillModal.tsx
 var import_react34 = require("react");
 var import_antd31 = require("antd");
-var import_icons19 = require("@ant-design/icons");
+var import_icons20 = require("@ant-design/icons");
 var import_antd32 = require("antd");
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var { TextArea: TextArea2 } = import_antd31.Input;
-var { Text: Text15 } = import_antd31.Typography;
+var { Text: Text16 } = import_antd31.Typography;
 var CreateSkillModal = ({
   open,
   onCancel,
@@ -9024,7 +9063,7 @@ var CreateSkillModal = ({
               },
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Name" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Name" }),
                   /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     import_antd31.Form.Item,
                     {
@@ -9043,7 +9082,7 @@ var CreateSkillModal = ({
                   )
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
                   /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     import_antd31.Form.Item,
                     {
@@ -9063,11 +9102,11 @@ var CreateSkillModal = ({
                   )
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
                   /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_antd31.Form.Item, { name: "license", style: { marginBottom: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_antd31.Input, { placeholder: "License" }) })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
                   /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_antd31.Form.Item, { name: "compatibility", style: { marginBottom: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_antd31.Input, { placeholder: "Compatibility" }) })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
@@ -9082,7 +9121,7 @@ var CreateSkillModal = ({
                       },
                       children: [
                         /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                          Text15,
+                          Text16,
                           {
                             style: {
                               fontSize: 12,
@@ -9096,7 +9135,7 @@ var CreateSkillModal = ({
                           import_antd31.Button,
                           {
                             size: "small",
-                            icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons19.PlusOutlined, {}),
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons20.PlusOutlined, {}),
                             onClick: handleAddMetadataRow,
                             children: "Add"
                           }
@@ -9106,7 +9145,7 @@ var CreateSkillModal = ({
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_antd31.Space, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
                     metadataRows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
-                      Text15,
+                      Text16,
                       {
                         style: {
                           fontSize: 11,
@@ -9126,7 +9165,7 @@ var CreateSkillModal = ({
                         },
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
-                            Text15,
+                            Text16,
                             {
                               style: { fontSize: 11, color: token.colorTextSecondary },
                               children: [
@@ -9162,7 +9201,7 @@ var CreateSkillModal = ({
                   ] })
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
                   /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_antd31.Form.Item, { name: "content", style: { marginBottom: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
                     TextArea2,
                     {
@@ -9416,7 +9455,7 @@ var SkillFlowInner = ({ onNodeClick }) => {
           {
             type: "primary",
             size: "large",
-            icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons20.PlusOutlined, {}),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons21.PlusOutlined, {}),
             onClick: () => setIsCreateModalOpen(true),
             style: {
               height: 48,
@@ -9445,164 +9484,274 @@ var SkillFlowInner = ({ onNodeClick }) => {
 var SkillFlow = (props) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react36.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkillFlowInner, { ...props }) });
 var SkillFlow_default = SkillFlow;
 
-// src/components/Chat/ChatSidebar.tsx
+// src/components/Chat/ToolsList.tsx
+var import_antd34 = require("antd");
+var import_icons22 = require("@ant-design/icons");
+var import_react37 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var useStyles4 = (0, import_antd_style13.createStyles)(({ token, css }) => ({
-  sidebar: css`
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    background: transparent;
-    border-radius: ${token.borderRadiusLG}px;
-    overflow: visible;
-
-    &.firstTimeHighlight {
-      border: 2px dashed ${token.colorPrimary};
-      background: ${token.colorPrimaryBg};
-    }
-  `,
-  content: css`
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: ${token.paddingMD}px ${token.paddingSM}px;
-    padding-bottom: ${token.paddingLG}px;
-
-    /* Custom scrollbar styling */
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: ${token.colorBorder};
-      border-radius: 3px;
-
-      &:hover {
-        background: ${token.colorBorderSecondary};
+var ToolsList = ({
+  onToolSelect,
+  autoLoad = true
+}) => {
+  const { token } = import_antd34.theme.useToken();
+  const { config } = useLatticeChatShellContext();
+  const [state, setState] = (0, import_react37.useState)({
+    tools: [],
+    isLoading: false,
+    error: null
+  });
+  const [selectedToolId, setSelectedToolId] = (0, import_react37.useState)(null);
+  const fetchTools = (0, import_react37.useCallback)(async () => {
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      const headers = {};
+      if (config.apiKey) {
+        headers["Authorization"] = `Bearer ${config.apiKey}`;
       }
+      const response = await fetch(`${config.baseURL}/api/tools`, {
+        headers
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success && data.data && Array.isArray(data.data.records)) {
+          setState((prev) => ({
+            ...prev,
+            tools: data.data.records,
+            isLoading: false
+          }));
+        } else {
+          throw new Error("Invalid response format");
+        }
+      } else {
+        throw new Error(`Failed to fetch tools: ${response.statusText}`);
+      }
+    } catch (error) {
+      setState((prev) => ({
+        ...prev,
+        tools: [],
+        isLoading: false,
+        error: error instanceof Error ? error : new Error(String(error))
+      }));
     }
-  `,
-  hoverOverlay: css`
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 100vh;
-    width: 240px;
-    background: ${token.colorBgContainer};
-    box-shadow: ${token.boxShadowSecondary};
-    border-radius: 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px 0;
-    z-index: 1000;
-    transform: translateX(-100%);
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    padding-top: ${token.paddingMD}px;
-
-    &.visible {
-      transform: translateX(0);
-    }
-  `,
-  hoverContent: css`
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: ${token.paddingMD}px ${token.paddingSM}px;
-    padding-bottom: ${token.paddingLG}px;
-
-    /* Custom scrollbar styling */
-    &::-webkit-scrollbar {
-      width: 6px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
+  }, [config]);
+  const handleToolSelect = (0, import_react37.useCallback)(
+    (tool) => {
+      setSelectedToolId(tool.id);
+      onToolSelect?.(tool);
+    },
+    [onToolSelect]
+  );
+  const handleRefresh = (0, import_react37.useCallback)(() => {
+    fetchTools();
+  }, [fetchTools]);
+  (0, import_react37.useEffect)(() => {
+    if (autoLoad) {
+      fetchTools();
     }
-
-    &::-webkit-scrollbar-thumb {
-      background: ${token.colorBorder};
-      border-radius: 3px;
-
-      &:hover {
-        background: ${token.colorBorderSecondary};
+  }, [autoLoad, fetchTools]);
+  const style = {
+    width: "100%",
+    height: "100%",
+    background: "transparent",
+    borderRadius: token.borderRadius,
+    padding: token.paddingSM
+  };
+  if (state.error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      import_antd34.Alert,
+      {
+        message: "Error Loading Tools",
+        description: state.error.message,
+        type: "error",
+        showIcon: true,
+        action: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          import_antd34.Button,
+          {
+            size: "small",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons22.ReloadOutlined, {}),
+            onClick: handleRefresh,
+            children: "Retry"
+          }
+        )
       }
-    }
-  `,
-  section: css`
-    margin-bottom: ${token.marginLG}px;
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: token.paddingSM,
+          right: token.paddingSM,
+          zIndex: 1
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          import_antd34.Button,
+          {
+            type: "text",
+            size: "small",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons22.ReloadOutlined, {}),
+            onClick: handleRefresh,
+            title: "Refresh tools",
+            style: {
+              color: token.colorTextSecondary
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          overflowY: "auto",
+          overflowX: "hidden",
+          paddingTop: token.paddingLG
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          import_antd34.List,
+          {
+            dataSource: state.tools,
+            loading: state.isLoading,
+            locale: {
+              emptyText: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: token.marginSM,
+                    padding: token.paddingLG
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { color: token.colorTextSecondary }, children: "No tools available" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                      import_antd34.Button,
+                      {
+                        icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons22.ReloadOutlined, {}),
+                        onClick: handleRefresh,
+                        type: "dashed",
+                        size: "small",
+                        children: "Refresh"
+                      }
+                    )
+                  ]
+                }
+              )
+            },
+            style: {
+              ...style,
+              paddingTop: 0
+            },
+            renderItem: (tool) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+              import_antd34.List.Item,
+              {
+                onClick: () => handleToolSelect(tool),
+                style: {
+                  cursor: "pointer",
+                  padding: token.paddingSM,
+                  borderRadius: token.borderRadius,
+                  backgroundColor: selectedToolId === tool.id ? token.colorFillSecondary : "transparent",
+                  transition: "background-color 0.2s"
+                },
+                onMouseEnter: (e) => {
+                  if (selectedToolId !== tool.id) {
+                    e.currentTarget.style.backgroundColor = token.colorFillTertiary;
+                  }
+                },
+                onMouseLeave: (e) => {
+                  if (selectedToolId !== tool.id) {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  }
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                  import_antd34.List.Item.Meta,
+                  {
+                    avatar: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                      import_antd34.Avatar,
+                      {
+                        size: "small",
+                        style: {
+                          backgroundColor: token.colorFillSecondary,
+                          color: token.colorText
+                        },
+                        children: tool.name.charAt(0).toUpperCase()
+                      }
+                    ),
+                    title: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: token.marginXS
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: tool.name }),
+                          tool.needUserApprove && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                            import_antd34.Tag,
+                            {
+                              color: "warning",
+                              style: {
+                                fontSize: "10px",
+                                padding: "2px 6px",
+                                margin: 0,
+                                lineHeight: "1.2"
+                              },
+                              children: "Requires approval"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    description: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+                      "div",
+                      {
+                        style: {
+                          color: token.colorTextSecondary,
+                          fontSize: token.fontSizeSM,
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: tool.description
+                      }
+                    )
+                  }
+                )
+              },
+              tool.id
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
 
-    &:last-child {
-      margin-bottom: 0;
-    }
-  `,
-  sectionTitle: css`
-    font-size: ${token.fontSizeSM}px;
-    font-weight: 600;
-    color: ${token.colorTextSecondary};
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    padding: 0 ${token.paddingXS}px;
-    margin-bottom: ${token.marginSM}px;
+// src/components/Chat/ChatSidebar.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var useStyles4 = (0, import_antd_style13.createStyles)(({ token, css }) => ({
+  sidebar: css`
     display: flex;
-    align-items: center;
-    justify-content: space-between;
-  `,
-  sectionTitleButton: css`
-    font-size: ${token.fontSizeSM}px;
-    padding: 0;
-    height: auto;
-    color: ${token.colorTextSecondary};
-    border: none;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    position: relative;
     background: transparent;
-
-    &:hover {
-      color: ${token.colorPrimary};
-      background: transparent;
-    }
+    border-radius: ${token.borderRadiusLG}px;
+    overflow: visible;
+    padding: ${token.paddingMD}px ${token.paddingSM}px;
   `,
-  footer: css`
+  buttonContainer: css`
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    gap: ${token.marginSM}px;
     align-items: center;
-    padding: ${token.paddingSM}px;
-    background: transparent;
-    border-top: 1px solid ${token.colorBorderSecondary};
-    gap: ${token.marginXS}px;
-    flex-shrink: 0;
-    position: relative;
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      height: 1px;
-      background: linear-gradient(
-        90deg,
-        transparent,
-        ${token.colorBorder},
-        transparent
-      );
-    }
-
-    &.collapsed {
-      border: 0;
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 0px;
-      }
-    }
   `,
   actionButton: css`
     display: flex;
@@ -9632,253 +9781,75 @@ var useStyles4 = (0, import_antd_style13.createStyles)(({ token, css }) => ({
     .anticon {
       font-size: 16px;
     }
-  `,
-  divider: css`
-    margin: ${token.marginMD}px 0;
-    border-color: ${token.colorBorderSecondary};
-  `,
-  hintTooltip: css`
-    position: absolute;
-    top: ${token.paddingMD}px;
-    left: ${token.paddingMD}px;
-    right: ${token.paddingMD}px;
-    padding: ${token.paddingSM}px ${token.paddingMD}px;
-    background: ${token.colorPrimary};
-    color: ${token.colorTextLightSolid};
-    border-radius: ${token.borderRadius}px;
-    font-size: ${token.fontSizeSM}px;
-    z-index: 1001;
-    animation: slideIn 0.3s ease-out;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-
-    @keyframes slideIn {
-      from {
-        opacity: 0;
-        transform: translateY(-10px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
   `
 }));
-var FIRST_COLLAPSE_KEY = "chat-sidebar-first-collapse-seen";
 var ChatSidebar = ({
-  onSettingsClick,
-  defaultCollapsed = false
+  onSettingsClick
 }) => {
   const { styles } = useStyles4();
-  const { setMenuCollapsed, menuCollapsed, sideAppVisible } = useChatUIContext();
-  const { setSettingsModalOpen, config } = useLatticeChatShellContext();
+  const { setSettingsModalOpen } = useLatticeChatShellContext();
   const { selectAssistant } = useAssistantContext();
-  const [isHovered, setIsHovered] = (0, import_react37.useState)(false);
-  const [isFirstCollapse, setIsFirstCollapse] = (0, import_react37.useState)(false);
-  const [isFlowModalOpen, setIsFlowModalOpen] = (0, import_react37.useState)(false);
-  const [isSkillFlowModalOpen, setIsSkillFlowModalOpen] = (0, import_react37.useState)(false);
-  const prevIsCollapsedRef = (0, import_react37.useRef)(false);
-  const handleToggleCollapse = () => {
-    setMenuCollapsed(!menuCollapsed);
-  };
+  const [isFlowModalOpen, setIsFlowModalOpen] = (0, import_react38.useState)(false);
+  const [isSkillFlowModalOpen, setIsSkillFlowModalOpen] = (0, import_react38.useState)(false);
+  const [isToolsModalOpen, setIsToolsModalOpen] = (0, import_react38.useState)(false);
   const handleSettingsClick = () => {
     setSettingsModalOpen(true);
     onSettingsClick?.();
   };
+  const handleAssistantFlowClick = () => {
+    setIsFlowModalOpen(true);
+  };
   const handleSkillFlowClick = () => {
     setIsSkillFlowModalOpen(true);
   };
-  const isCollapsed = menuCollapsed || sideAppVisible;
-  (0, import_react37.useEffect)(() => {
-    const prevIsCollapsed = prevIsCollapsedRef.current;
-    if (isCollapsed) {
-      const hasSeenFirstCollapse = localStorage.getItem(FIRST_COLLAPSE_KEY);
-      if (!hasSeenFirstCollapse) {
-        setIsFirstCollapse(true);
-      }
-    } else if (prevIsCollapsed && !isCollapsed) {
-      setIsFirstCollapse((prev) => {
-        if (prev) {
-          return false;
-        }
-        return prev;
-      });
-    }
-    prevIsCollapsedRef.current = isCollapsed;
-  }, [isCollapsed]);
-  const handleMouseEnter = () => {
-    if (isCollapsed) {
-      setIsHovered(true);
-      if (isFirstCollapse) {
-        localStorage.setItem(FIRST_COLLAPSE_KEY, "true");
-        setIsFirstCollapse(false);
-      }
-    }
-  };
-  const handleMouseLeave = () => {
-    setIsHovered(false);
+  const handleToolsClick = () => {
+    setIsToolsModalOpen(true);
   };
-  const {
-    enableThreadCreation = true,
-    enableThreadList = true
-  } = config || {};
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-      "div",
-      {
-        className: `${styles.sidebar} ${isFirstCollapse ? "firstTimeHighlight" : ""}`,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-            import_antd34.Tooltip,
-            {
-              title: "Move the mouse over the collapsed sidebar to see the assistants and threads",
-              open: isFirstCollapse,
-              placement: "right",
-              children: isFirstCollapse && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { marginTop: "400px" } })
-            }
-          ),
-          !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: styles.content, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: styles.section, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: styles.sectionTitle, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: "Assistants" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                    import_antd34.Button,
-                    {
-                      type: "text",
-                      icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons21.ApartmentOutlined, {}),
-                      onClick: () => setIsFlowModalOpen(true),
-                      className: styles.sectionTitleButton,
-                      title: "View Assistant Flow Canvas",
-                      size: "small"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AssistantList, {})
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_antd34.Divider, { className: styles.divider }),
-              enableThreadList && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: styles.section, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                  AgentConversations,
-                  {
-                    enableThreadCreation,
-                    enableThreadList
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: styles.footer, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                "button",
-                {
-                  className: styles.actionButton,
-                  onClick: handleToggleCollapse,
-                  title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                  "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                  children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons21.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons21.MenuFoldOutlined, {})
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                "button",
-                {
-                  className: styles.actionButton,
-                  onClick: handleSkillFlowClick,
-                  title: "Skill Flow Canvas",
-                  "aria-label": "Skill Flow Canvas",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons21.ThunderboltOutlined, {})
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                "button",
-                {
-                  className: styles.actionButton,
-                  onClick: handleSettingsClick,
-                  title: "Settings",
-                  "aria-label": "Settings",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons21.SettingOutlined, {})
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    ),
-    isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
-      "div",
-      {
-        className: `${styles.hoverOverlay} ${isHovered ? "visible" : ""}`,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: styles.hoverContent, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: styles.section, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: styles.sectionTitle, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: "Assistants" }),
-                /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                  import_antd34.Button,
-                  {
-                    type: "text",
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons21.ApartmentOutlined, {}),
-                    onClick: () => setIsFlowModalOpen(true),
-                    className: styles.sectionTitleButton,
-                    title: "View Assistant Flow Canvas",
-                    size: "small"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AssistantList, {})
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_antd34.Divider, { className: styles.divider }),
-            enableThreadList && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: styles.section, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
-              /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-                AgentConversations,
-                {
-                  enableThreadCreation,
-                  enableThreadList
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: styles.footer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-              "button",
-              {
-                className: styles.actionButton,
-                onClick: handleToggleCollapse,
-                title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons21.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons21.MenuFoldOutlined, {})
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-              "button",
-              {
-                className: styles.actionButton,
-                onClick: handleSkillFlowClick,
-                title: "Skill Flow Canvas",
-                "aria-label": "Skill Flow Canvas",
-                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons21.ThunderboltOutlined, {})
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-              "button",
-              {
-                className: styles.actionButton,
-                onClick: handleSettingsClick,
-                title: "Settings",
-                "aria-label": "Settings",
-                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons21.SettingOutlined, {})
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      import_antd34.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: styles.sidebar, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: styles.buttonContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "button",
+        {
+          className: styles.actionButton,
+          onClick: handleAssistantFlowClick,
+          title: "Assistant Flow Canvas",
+          "aria-label": "Assistant Flow Canvas",
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons23.ApartmentOutlined, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "button",
+        {
+          className: styles.actionButton,
+          onClick: handleSkillFlowClick,
+          title: "Skill Flow Canvas",
+          "aria-label": "Skill Flow Canvas",
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons23.ThunderboltOutlined, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "button",
+        {
+          className: styles.actionButton,
+          onClick: handleToolsClick,
+          title: "Tools List",
+          "aria-label": "Tools List",
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons23.ToolOutlined, {})
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        "button",
+        {
+          className: styles.actionButton,
+          onClick: handleSettingsClick,
+          title: "Settings",
+          "aria-label": "Settings",
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons23.SettingOutlined, {})
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      import_antd35.Modal,
       {
         destroyOnHidden: true,
         title: "Assistant Overview",
@@ -9891,7 +9862,7 @@ var ChatSidebar = ({
           height: "calc(100vh - 120px)",
           padding: 0
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           AssistantFlow_default,
           {
             onNodeClick: (assistant) => {
@@ -9902,8 +9873,8 @@ var ChatSidebar = ({
         ) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-      import_antd34.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      import_antd35.Modal,
       {
         destroyOnHidden: true,
         title: "Skill Overview",
@@ -9916,7 +9887,7 @@ var ChatSidebar = ({
           height: "calc(100vh - 120px)",
           padding: 0
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           SkillFlow_default,
           {
             onNodeClick: (skill) => {
@@ -9925,19 +9896,45 @@ var ChatSidebar = ({
           }
         ) })
       }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      import_antd35.Modal,
+      {
+        destroyOnHidden: true,
+        title: "Tools Overview",
+        open: isToolsModalOpen,
+        onCancel: () => setIsToolsModalOpen(false),
+        footer: null,
+        width: "90%",
+        style: { top: 20 },
+        bodyStyle: {
+          height: "calc(100vh - 120px)",
+          padding: 0
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          ToolsList,
+          {
+            onToolSelect: (tool) => {
+              console.log("Tool selected:", tool);
+            }
+          }
+        ) })
+      }
     )
   ] });
 };
 
 // src/components/Chat/LatticeChatView.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var LatticeChatView = (props) => {
+  const shellContext = (0, import_react39.useContext)(LatticeChatShellContext);
+  const { showSideMenu } = shellContext.config;
   const { assistantId, thread } = useConversationContext();
   const { currentAssistant } = useAssistantContext();
   const {
     config: { baseURL }
   } = useLatticeChatShellContext();
-  return assistantId && thread ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return assistantId && thread ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     AxiomLatticeProvider,
     {
       config: {
@@ -9946,14 +9943,14 @@ var LatticeChatView = (props) => {
         assistantId,
         transport: "sse"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
         LatticeChat,
         {
           thread_id: thread?.id,
           assistant_id: assistantId,
           name: currentAssistant?.name,
           description: currentAssistant?.description,
-          menu: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ChatSidebar, {})
+          menu: showSideMenu ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ChatSidebar, {}) : void 0
         }
       )
     }
@@ -9961,13 +9958,13 @@ var LatticeChatView = (props) => {
 };
 
 // src/components/Chat/SettingsModal.tsx
-var import_react38 = require("react");
-var import_antd35 = require("antd");
-var import_icons22 = require("@ant-design/icons");
+var import_react40 = require("react");
+var import_antd36 = require("antd");
+var import_icons24 = require("@ant-design/icons");
 var import_antd_style14 = require("antd-style");
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var { Text: Text16, Title: Title3 } = import_antd35.Typography;
-var { TextArea: TextArea3 } = import_antd35.Input;
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var { Text: Text17, Title: Title3 } = import_antd36.Typography;
+var { TextArea: TextArea3 } = import_antd36.Input;
 var useStyles5 = (0, import_antd_style14.createStyles)(({ token, css }) => ({
   //   settingsModal: css`
   //     .ant-modal {
@@ -10314,12 +10311,12 @@ var SETTINGS_MENU_ITEMS = [
   {
     key: "environment",
     label: "Environment Variables",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons22.EnvironmentOutlined, {})
+    icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons24.EnvironmentOutlined, {})
   },
   {
     key: "models",
     label: "Model Configuration",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons22.ApiOutlined, {})
+    icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons24.ApiOutlined, {})
   }
 ];
 var SettingsModal = ({
@@ -10328,7 +10325,7 @@ var SettingsModal = ({
 }) => {
   const { styles } = useStyles5();
   const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
-  const [connections, setConnections] = (0, import_react38.useState)(() => {
+  const [connections, setConnections] = (0, import_react40.useState)(() => {
     if (typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem("lattice_server_connections");
@@ -10351,21 +10348,21 @@ var SettingsModal = ({
     }
     return [];
   });
-  const [serverConfigs, setServerConfigs] = (0, import_react38.useState)({});
-  const connectionsRef = (0, import_react38.useRef)(connections);
-  (0, import_react38.useEffect)(() => {
+  const [serverConfigs, setServerConfigs] = (0, import_react40.useState)({});
+  const connectionsRef = (0, import_react40.useRef)(connections);
+  (0, import_react40.useEffect)(() => {
     connectionsRef.current = connections;
   }, [connections]);
-  const [activeTabKey, setActiveTabKey] = (0, import_react38.useState)(
+  const [activeTabKey, setActiveTabKey] = (0, import_react40.useState)(
     connections.length > 0 ? connections[0].id : ""
   );
-  const [activeMenu, setActiveMenu] = (0, import_react38.useState)("environment");
-  const [loading, setLoading] = (0, import_react38.useState)(false);
-  const [showAddServerModal, setShowAddServerModal] = (0, import_react38.useState)(false);
-  const [newServerUrl, setNewServerUrl] = (0, import_react38.useState)("");
-  const [newServerName, setNewServerName] = (0, import_react38.useState)("");
-  const [newServerApiKey, setNewServerApiKey] = (0, import_react38.useState)("");
-  const [addingServer, setAddingServer] = (0, import_react38.useState)(false);
+  const [activeMenu, setActiveMenu] = (0, import_react40.useState)("environment");
+  const [loading, setLoading] = (0, import_react40.useState)(false);
+  const [showAddServerModal, setShowAddServerModal] = (0, import_react40.useState)(false);
+  const [newServerUrl, setNewServerUrl] = (0, import_react40.useState)("");
+  const [newServerName, setNewServerName] = (0, import_react40.useState)("");
+  const [newServerApiKey, setNewServerApiKey] = (0, import_react40.useState)("");
+  const [addingServer, setAddingServer] = (0, import_react40.useState)(false);
   const saveConnections = (newConnections) => {
     setConnections(newConnections);
     if (typeof window !== "undefined") {
@@ -10504,7 +10501,7 @@ var SettingsModal = ({
       }
     } catch (error) {
       console.error("Failed to load configuration:", error);
-      import_antd35.message.error("Failed to load current configuration");
+      import_antd36.message.error("Failed to load current configuration");
     }
   };
   const loadModelsConfig = async (serverId) => {
@@ -10555,7 +10552,7 @@ var SettingsModal = ({
       console.error("Failed to load models configuration:", error);
     }
   };
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (open && activeTabKey) {
       initializeServerConfig(activeTabKey);
       const connection = connections.find((c) => c.id === activeTabKey);
@@ -10564,7 +10561,7 @@ var SettingsModal = ({
       }
     }
   }, [open, activeTabKey]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     if (open && activeTabKey) {
       const connection = connections.find((c) => c.id === activeTabKey);
       if (connection?.connected) {
@@ -10578,7 +10575,7 @@ var SettingsModal = ({
   }, [open, activeTabKey, activeMenu]);
   const handleAddServer = async () => {
     if (!newServerUrl.trim()) {
-      import_antd35.message.error("Please enter a server URL");
+      import_antd36.message.error("Please enter a server URL");
       return;
     }
     let normalizedUrl = newServerUrl.trim();
@@ -10604,7 +10601,7 @@ var SettingsModal = ({
     setNewServerUrl("");
     setNewServerName("");
     setNewServerApiKey("");
-    import_antd35.message.success("Server added successfully");
+    import_antd36.message.success("Server added successfully");
   };
   const handleDeleteServer = (serverId) => {
     const newConnections = connections.filter((c) => c.id !== serverId);
@@ -10621,7 +10618,7 @@ var SettingsModal = ({
         setActiveTabKey("");
       }
     }
-    import_antd35.message.success("Server deleted");
+    import_antd36.message.success("Server deleted");
   };
   const handleTabChange = (newTabKey) => {
     setConnections(
@@ -10635,12 +10632,12 @@ var SettingsModal = ({
   const handleSave = async () => {
     const connection = connections.find((c) => c.id === activeTabKey);
     if (!connection || !connection.connected) {
-      import_antd35.message.error("Please connect to a server first");
+      import_antd36.message.error("Please connect to a server first");
       return;
     }
     const url = connection.url;
     if (!url) {
-      import_antd35.message.error("Please connect to a server first");
+      import_antd36.message.error("Please connect to a server first");
       return;
     }
     try {
@@ -10704,23 +10701,23 @@ var SettingsModal = ({
         const data = await response.json();
         if (response.ok && data.success) {
           if (data.requiresRestart && data.requiresRestart.length > 0) {
-            import_antd35.message.warning(
+            import_antd36.message.warning(
               `Configuration saved. Please restart the server for ${data.requiresRestart.join(
                 ", "
               )} to take effect.`,
               5
             );
           } else {
-            import_antd35.message.success("Configuration saved and applied successfully");
+            import_antd36.message.success("Configuration saved and applied successfully");
           }
           if (data.warnings && data.warnings.length > 0) {
             data.warnings.forEach((warning) => {
-              import_antd35.message.warning(warning, 5);
+              import_antd36.message.warning(warning, 5);
             });
           }
           onClose();
         } else {
-          import_antd35.message.error(data.error || "Failed to save configuration");
+          import_antd36.message.error(data.error || "Failed to save configuration");
         }
       } else if (activeMenu === "models") {
         const validModels = config.models.filter(
@@ -10739,17 +10736,17 @@ var SettingsModal = ({
         });
         const data = await response.json();
         if (response.ok && data.success) {
-          import_antd35.message.success(
+          import_antd36.message.success(
             "Model configuration saved and registered successfully"
           );
           onClose();
         } else {
-          import_antd35.message.error(data.error || "Failed to save model configuration");
+          import_antd36.message.error(data.error || "Failed to save model configuration");
         }
       }
     } catch (error) {
       console.error("Failed to save configuration:", error);
-      import_antd35.message.error(error.message || "Failed to save configuration");
+      import_antd36.message.error(error.message || "Failed to save configuration");
     } finally {
       setLoading(false);
     }
@@ -10765,25 +10762,25 @@ var SettingsModal = ({
         }
       }));
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        import_antd35.Alert,
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        import_antd36.Alert,
         {
           message: "Configuration Effect",
-          description: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { style: { marginBottom: 8 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                import_icons22.CheckCircleOutlined,
+          description: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { marginBottom: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                import_icons24.CheckCircleOutlined,
                 {
                   style: { color: "#52c41a", marginRight: 8 }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("strong", { children: "Immediately effective:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("strong", { children: "Immediately effective:" }),
               " QUEUE_SERVICE_TYPE, REDIS_URL, REDIS_PASSWORD, QUEUE_NAME"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons22.ReloadOutlined, { style: { color: "#faad14", marginRight: 8 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("strong", { children: "Requires restart:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons24.ReloadOutlined, { style: { color: "#faad14", marginRight: 8 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("strong", { children: "Requires restart:" }),
               " PORT (server must be restarted to change port)"
             ] })
           ] }),
@@ -10792,8 +10789,8 @@ var SettingsModal = ({
           className: styles.alertCard
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { 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_runtime51.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { 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_runtime52.jsx)(
         TextArea3,
         {
           value: config.envText,
@@ -10870,10 +10867,10 @@ QUEUE_NAME=tasks`,
         }));
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { 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_runtime51.jsxs)("div", { className: styles.card, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { 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_runtime52.jsxs)("div", { className: styles.card, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
           "div",
           {
             style: {
@@ -10885,13 +10882,13 @@ QUEUE_NAME=tasks`,
               borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Text16, { strong: true, style: { fontSize: 16 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Text17, { strong: true, style: { fontSize: 16 }, children: [
                   "Model ",
                   index + 1
                 ] }),
-                model.key && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
-                  Text16,
+                model.key && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+                  Text17,
                   {
                     type: "secondary",
                     style: { marginLeft: 8, fontSize: 12 },
@@ -10903,8 +10900,8 @@ QUEUE_NAME=tasks`,
                   }
                 )
               ] }),
-              config.models.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                import_antd35.Button,
+              config.models.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                import_antd36.Button,
                 {
                   type: "text",
                   danger: true,
@@ -10920,11 +10917,11 @@ QUEUE_NAME=tasks`,
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_antd35.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { className: styles.formLabel, children: "Key *" }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              import_antd35.Input,
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_antd36.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { className: styles.formLabel, children: "Key *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              import_antd36.Input,
               {
                 placeholder: "e.g., default, gpt-4, claude",
                 value: model.key,
@@ -10932,12 +10929,12 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { className: styles.formDescription, children: "Unique identifier for this model" })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { className: styles.formDescription, children: "Unique identifier for this model" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { className: styles.formLabel, children: "Provider *" }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              import_antd35.Select,
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              import_antd36.Select,
               {
                 style: { width: "100%", height: 40 },
                 value: model.provider,
@@ -10952,10 +10949,10 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { className: styles.formLabel, children: "Model Name *" }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              import_antd35.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              import_antd36.Input,
               {
                 placeholder: "e.g., gpt-4, claude-3-opus, kimi-k2-250905",
                 value: model.model,
@@ -10964,10 +10961,10 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { className: styles.formLabel, children: "API Key" }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              import_antd35.Input.Password,
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              import_antd36.Input.Password,
               {
                 placeholder: "Enter your API key",
                 value: model.apiKey,
@@ -10975,12 +10972,12 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { className: styles.formLabel, children: "Base URL" }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              import_antd35.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              import_antd36.Input,
               {
                 placeholder: "e.g., https://api.openai.com/v1",
                 value: model.baseURL,
@@ -10988,23 +10985,23 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { className: styles.formDescription, children: "Optional custom base URL for the API" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_antd35.Space, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              import_antd35.Switch,
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_antd36.Space, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              import_antd36.Switch,
               {
                 checked: model.streaming,
                 onChange: (checked) => handleModelChange(index, "streaming", checked)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { children: "Enable Streaming" })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { children: "Enable Streaming" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", gap: 20 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { className: styles.formLabel, children: "Max Tokens" }),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                import_antd35.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { display: "flex", gap: 20 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { className: styles.formLabel, children: "Max Tokens" }),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                import_antd36.Input,
                 {
                   type: "number",
                   placeholder: "e.g., 4096",
@@ -11018,10 +11015,10 @@ QUEUE_NAME=tasks`,
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { className: styles.formLabel, children: "Temperature" }),
-              /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                import_antd35.Input,
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+                import_antd36.Input,
                 {
                   type: "number",
                   step: "0.1",
@@ -11039,8 +11036,8 @@ QUEUE_NAME=tasks`,
           ] })
         ] })
       ] }, index)),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        import_antd35.Button,
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        import_antd36.Button,
         {
           type: "dashed",
           onClick: handleAddModel,
@@ -11067,9 +11064,9 @@ QUEUE_NAME=tasks`,
   );
   const currentConnection = connections.find((c) => c.id === activeTabKey);
   const renderTabLabel = (connection) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        import_icons22.CloudServerOutlined,
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        import_icons24.CloudServerOutlined,
         {
           style: {
             marginRight: 8,
@@ -11077,15 +11074,15 @@ QUEUE_NAME=tasks`,
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: connection.name }),
-      connection.connected && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        import_icons22.CheckCircleFilled,
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { children: connection.name }),
+      connection.connected && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        import_icons24.CheckCircleFilled,
         {
           style: { color: "#52c41a", fontSize: 12, marginLeft: 8 }
         }
       ),
-      connection.error && !connection.connecting && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-        import_icons22.CloseCircleFilled,
+      connection.error && !connection.connecting && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+        import_icons24.CloseCircleFilled,
         {
           style: { color: "#ff4d4f", fontSize: 12, marginLeft: 8 }
         }
@@ -11095,35 +11092,35 @@ QUEUE_NAME=tasks`,
   const tabItems = connections.map((connection) => ({
     key: connection.id,
     label: renderTabLabel(connection),
-    children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_jsx_runtime51.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", height: "100%" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_jsx_runtime52.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { display: "flex", height: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
         "div",
         {
           className: `${styles.menuItem} ${activeMenu === item.key ? "active" : ""}`,
           onClick: () => setActiveMenu(item.key),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: styles.menuItemIcon, children: item.icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: styles.menuItemText, children: item.label })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: styles.menuItemIcon, children: item.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: styles.menuItemText, children: item.label })
           ]
         },
         item.key
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: styles.content, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: styles.contentHeader, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: styles.contentHeaderLeft, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Title3, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Text16, { className: styles.contentDescription, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: styles.content, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: styles.contentHeader, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: styles.contentHeaderLeft, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Title3, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Text17, { 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_runtime51.jsxs)("div", { className: styles.contentHeaderRight, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_antd35.Button, { onClick: onClose, children: "Cancel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              import_antd35.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: styles.contentHeaderRight, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_antd36.Button, { onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              import_antd36.Button,
               {
                 type: "primary",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons22.SaveOutlined, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons24.SaveOutlined, {}),
                 onClick: handleSave,
                 loading,
                 children: "Save Configuration"
@@ -11131,9 +11128,9 @@ QUEUE_NAME=tasks`,
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: styles.contentBody, children: renderContent(connection.id) })
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: styles.contentBody, children: renderContent(connection.id) })
       ] })
-    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "div",
       {
         style: {
@@ -11145,29 +11142,29 @@ QUEUE_NAME=tasks`,
           gap: 16,
           padding: 48
         },
-        children: connection.connecting ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons22.LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Title3, { level: 4, children: "Connecting..." }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(Text16, { type: "secondary", style: { textAlign: "center" }, children: [
+        children: connection.connecting ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons24.LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Title3, { level: 4, children: "Connecting..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Text17, { type: "secondary", style: { textAlign: "center" }, children: [
             "Connecting to ",
             connection.url
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons22.LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Title3, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-            Text16,
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons24.LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Title3, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            Text17,
             {
               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_runtime51.jsx)(
-            import_antd35.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+            import_antd36.Button,
             {
               type: "primary",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons22.LinkOutlined, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons24.LinkOutlined, {}),
               onClick: () => checkConnection(connection.id),
               loading: connection.connecting,
               style: { marginTop: 16 },
@@ -11179,9 +11176,9 @@ QUEUE_NAME=tasks`,
     ) }),
     closable: connections.length > 1
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-      import_antd35.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      import_antd36.Modal,
       {
         open,
         onCancel: onClose,
@@ -11189,8 +11186,8 @@ QUEUE_NAME=tasks`,
         width: "80%",
         footer: null,
         title: "Settings",
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          import_antd35.Tabs,
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          import_antd36.Tabs,
           {
             activeKey: activeTabKey,
             onChange: handleTabChange,
@@ -11203,7 +11200,7 @@ QUEUE_NAME=tasks`,
               }
             },
             items: tabItems,
-            addIcon: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+            addIcon: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
               "div",
               {
                 style: {
@@ -11213,8 +11210,8 @@ QUEUE_NAME=tasks`,
                   padding: "4px 8px"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_icons22.PlusOutlined, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: "Add Server" })
+                  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_icons24.PlusOutlined, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { children: "Add Server" })
                 ]
               }
             )
@@ -11222,8 +11219,8 @@ QUEUE_NAME=tasks`,
         ) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-      import_antd35.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      import_antd36.Modal,
       {
         title: "Add New Server",
         open: showAddServerModal,
@@ -11236,11 +11233,11 @@ QUEUE_NAME=tasks`,
         },
         confirmLoading: addingServer,
         className: styles.addServerModal,
-        children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_antd35.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              import_antd35.Input,
+        children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_antd36.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              import_antd36.Input,
               {
                 placeholder: "e.g., Production Server",
                 value: newServerName,
@@ -11248,12 +11245,12 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              import_antd35.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              import_antd36.Input,
               {
                 placeholder: "e.g., http://localhost:4001",
                 value: newServerUrl,
@@ -11261,12 +11258,12 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-              import_antd35.Input.Password,
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+              import_antd36.Input.Password,
               {
                 placeholder: "Optional: Enter API key for authentication",
                 value: newServerApiKey,
@@ -11274,7 +11271,7 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Text16, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Text17, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
           ] })
         ] })
       }
@@ -11283,10 +11280,10 @@ QUEUE_NAME=tasks`,
 };
 
 // src/components/Chat/AgentServerSetting.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var AgentServerSetting = () => {
   const { settingsModalOpen, setSettingsModalOpen } = useLatticeChatShellContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     SettingsModal,
     {
       open: settingsModalOpen,
@@ -11296,11 +11293,12 @@ var AgentServerSetting = () => {
 };
 
 // src/components/Chat/LatticeChatShell.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var LatticeChatShell = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(LatticeChatShellContextProvider, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ConversationContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(LatticeChatView, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(AgentServerSetting, {})
+  const { initialConfig } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(LatticeChatShellContextProvider, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(AssistantContextProvider, { autoLoad: true, initialAssistantId: initialConfig?.assistantId, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ConversationContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(LatticeChatView, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(AgentServerSetting, {})
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node: