@axiom-lattice/react-sdk 2.1.26 → 2.1.28

package/dist/index.mjs

@@ -980,40 +980,16 @@ var useStyle = 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;
@@ -2442,7 +2418,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,
@@ -3267,7 +3247,7 @@ var AttachmentsCard = ({
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text17 } = Typography7;
+  const { Text: Text18 } = Typography7;
   const [showAll, setShowAll] = useState13(false);
   const { openSideApp } = useChatUIContext();
   const getStyles = () => {
@@ -3342,7 +3322,7 @@ var AttachmentsCard = ({
     );
   };
   const renderFileDescription = (item) => /* @__PURE__ */ jsx19(Space7, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ jsx19(Space7, { children: /* @__PURE__ */ jsx19(
-    Text17,
+    Text18,
     {
       type: "secondary",
       style: {
@@ -3414,7 +3394,7 @@ var AttachmentsCard = ({
         }
       ),
       item.files && /* @__PURE__ */ jsxs10("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ jsxs10(Text17, { type: "secondary", style: { fontSize: "12px" }, children: [
+        /* @__PURE__ */ jsxs10(Text18, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
@@ -4794,7 +4774,8 @@ var DEFAULT_CONFIG = {
   timeout: 3e5,
   headers: {},
   enableThreadCreation: true,
-  enableThreadList: true
+  enableThreadList: true,
+  showSideMenu: true
 };
 var LatticeChatShellContext = createContext4({
   config: DEFAULT_CONFIG,
@@ -6372,6 +6353,99 @@ var ScheduleViewer = ({ data }) => {
   ] });
 };
 
+// src/components/GenUI/elements/browser_view_card.tsx
+import { Button as Button16, Flex as Flex6, Typography as Typography15 } from "antd";
+import { CheckCircleOutlined as CheckCircleOutlined5, InfoCircleOutlined as InfoCircleOutlined2, LoadingOutlined as LoadingOutlined3 } from "@ant-design/icons";
+import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+var { Text: Text13 } = Typography15;
+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__ */ jsx40(CheckCircleOutlined5, { style: { color: "#52c41a" } });
+      case "error":
+        return /* @__PURE__ */ jsx40(InfoCircleOutlined2, { style: { color: "#ff4d4f" } });
+      default:
+        return /* @__PURE__ */ jsx40(LoadingOutlined3, { 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__ */ jsxs22(Flex6, { align: "center", wrap: "wrap", children: [
+    /* @__PURE__ */ jsx40(Typography15.Text, { strong: true, children: formatToolName(toolCallData.name) }),
+    /* @__PURE__ */ jsx40(
+      Typography15.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__ */ jsx40(
+    ContentPreviewCollapse,
+    {
+      panelKey: toolCallData.id,
+      header,
+      expandIcon: () => getStatusIcon3(toolCallData.status),
+      extra: /* @__PURE__ */ jsx40(
+        Button16,
+        {
+          type: "link",
+          size: "small",
+          onClick: (evt) => {
+            evt.stopPropagation();
+            handleItemClick(toolCallData);
+          },
+          children: "View Browser"
+        }
+      ),
+      children: /* @__PURE__ */ jsx40(MDResponse, { content: toolCallData.response || "" })
+    }
+  );
+};
+
 // src/components/GenUI/elements/builtIns.tsx
 var elements = {
   action_show_attachments_uploader: {
@@ -6427,6 +6501,10 @@ var elements = {
   schedule_viewer: {
     card_view: () => null,
     side_app_view: ScheduleViewer
+  },
+  browser_viewer: {
+    card_view: BrowserViewer,
+    side_app_view: AttachmentsViewerSideApp
   }
 };
 
@@ -6444,10 +6522,10 @@ var regsiterElement = (language, ElementMeta) => {
 };
 
 // src/components/Chat/SideAppViewBrowser.tsx
-import { Button as Button16, Tabs } from "antd";
+import { Button as Button17, Tabs } from "antd";
 import { createStyles as createStyles12 } from "antd-style";
 import { useEffect as useEffect16, useState as useState23 } from "react";
-import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 var useStyle8 = createStyles12(({ token, css }) => {
   return {
     tabContainer: css`
@@ -6467,9 +6545,9 @@ var useStyle8 = createStyles12(({ token, css }) => {
   };
 });
 var EmptySideAppView = ({ component_key, data }) => {
-  return /* @__PURE__ */ jsxs22("div", { children: [
-    /* @__PURE__ */ jsx40("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
-    /* @__PURE__ */ jsx40("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
+  return /* @__PURE__ */ jsxs23("div", { children: [
+    /* @__PURE__ */ jsx41("p", { children: "\u672A\u627E\u5230\u5BF9\u5E94\u7684\u7EC4\u4EF6\u89C6\u56FE" }),
+    /* @__PURE__ */ jsx41("pre", { children: JSON.stringify({ component_key, data }, null, 2) })
   ] });
 };
 var SideAppViewBrowser = () => {
@@ -6530,7 +6608,7 @@ var SideAppViewBrowser = () => {
     add(
       key,
       sideAppSelectedCard?.message || sideAppSelectedCard?.data.message || "\u672A\u547D\u540D",
-      /* @__PURE__ */ jsx40(
+      /* @__PURE__ */ jsx41(
         SideAppView,
         {
           component_key: sideAppSelectedCard?.component_key || "",
@@ -6571,16 +6649,16 @@ var SideAppViewBrowser = () => {
   const getSizeIcon = (size) => {
     switch (size) {
       case "middle":
-        return /* @__PURE__ */ jsx40(CompressOutlined, {});
+        return /* @__PURE__ */ jsx41(CompressOutlined, {});
       case "large":
-        return /* @__PURE__ */ jsx40(ExpandOutlined, {});
+        return /* @__PURE__ */ jsx41(ExpandOutlined, {});
       case "full":
-        return /* @__PURE__ */ jsx40(FullscreenOutlined, {});
+        return /* @__PURE__ */ jsx41(FullscreenOutlined, {});
       default:
-        return /* @__PURE__ */ jsx40(ExpandOutlined, {});
+        return /* @__PURE__ */ jsx41(ExpandOutlined, {});
     }
   };
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     Tabs,
     {
       className: styles.tabContainer,
@@ -6588,9 +6666,9 @@ var SideAppViewBrowser = () => {
       style: { height: "100%" },
       hideAdd: true,
       tabBarExtraContent: {
-        right: /* @__PURE__ */ jsxs22("div", { style: { display: "flex", gap: "4px" }, children: [
-          /* @__PURE__ */ jsx40(
-            Button16,
+        right: /* @__PURE__ */ jsxs23("div", { style: { display: "flex", gap: "4px" }, children: [
+          /* @__PURE__ */ jsx41(
+            Button17,
             {
               style: { margin: "8px 0" },
               size: "large",
@@ -6600,13 +6678,13 @@ var SideAppViewBrowser = () => {
               title: `\u5F53\u524D\u5C3A\u5BF8: ${getSizeLabel(sideAppSize)}, \u70B9\u51FB\u5207\u6362`
             }
           ),
-          /* @__PURE__ */ jsx40(
-            Button16,
+          /* @__PURE__ */ jsx41(
+            Button17,
             {
               style: { margin: "8px 0" },
               size: "large",
               type: "text",
-              icon: /* @__PURE__ */ jsx40(CloseOutlined, {}),
+              icon: /* @__PURE__ */ jsx41(CloseOutlined, {}),
               onClick: () => {
                 closeSideApp();
               }
@@ -6623,10 +6701,10 @@ var SideAppViewBrowser = () => {
 };
 
 // src/components/Chat/LatticeChat.tsx
-import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
 var LatticeChat = (props) => {
   const { assistant_id, thread_id = "", menu, header, ...chatingProps } = props;
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     AgentThreadProvider,
     {
       assistantId: assistant_id,
@@ -6636,7 +6714,7 @@ var LatticeChat = (props) => {
         enableReturnStateWhenStreamCompleted: true,
         enableResumeStream: true
       },
-      children: /* @__PURE__ */ jsx41(ChatUIContextProvider, { children: /* @__PURE__ */ jsxs23(
+      children: /* @__PURE__ */ jsx42(ChatUIContextProvider, { children: /* @__PURE__ */ jsxs24(
         "div",
         {
           style: {
@@ -6647,12 +6725,12 @@ var LatticeChat = (props) => {
           },
           children: [
             header,
-            /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42(
               ColumnLayout,
               {
                 menu,
-                left: thread_id ? /* @__PURE__ */ jsx41(Chating, { ...chatingProps }) : /* @__PURE__ */ jsx41("div", { children: "\u9700\u8981\u5148\u521B\u5EFA\u4F1A\u8BDD" }),
-                right: /* @__PURE__ */ jsx41(SideAppViewBrowser, {})
+                left: thread_id ? /* @__PURE__ */ jsx42(Chating, { ...chatingProps }) : /* @__PURE__ */ jsx42("div", { children: "\u9700\u8981\u5148\u521B\u5EFA\u4F1A\u8BDD" }),
+                right: /* @__PURE__ */ jsx42(SideAppViewBrowser, {})
               }
             )
           ]
@@ -6666,7 +6744,7 @@ var LatticeChat = (props) => {
 import { Conversations } from "@ant-design/x";
 import { theme } from "antd";
 import { useMemo as useMemo8 } from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var AgentConversations = ({
   enableThreadCreation = true,
   enableThreadList = true
@@ -6705,7 +6783,7 @@ var AgentConversations = ({
   const creation = enableThreadCreation ? {
     onClick: newChatClick
   } : void 0;
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     Conversations,
     {
       creation,
@@ -6720,58 +6798,18 @@ var AgentConversations = ({
   );
 };
 
+// src/components/Chat/LatticeChatView.tsx
+import { useContext as useContext8 } from "react";
+
 // src/components/Chat/ChatSidebar.tsx
-import { useState as useState28, useEffect as useEffect20, useRef as useRef13 } from "react";
-import { Divider as Divider4, Tooltip as Tooltip10, Modal as Modal3, Button as Button21 } from "antd";
+import { useState as useState29 } from "react";
+import { Modal as Modal3 } from "antd";
 import {
-  MenuFoldOutlined,
-  MenuUnfoldOutlined,
   SettingOutlined as SettingOutlined2,
   ApartmentOutlined,
-  ThunderboltOutlined as ThunderboltOutlined2
+  ThunderboltOutlined as ThunderboltOutlined2,
+  ToolOutlined as ToolOutlined3
 } from "@ant-design/icons";
-
-// src/components/Chat/AssistantList.tsx
-import { Conversations as Conversations2 } from "@ant-design/x";
-import { Avatar as Avatar4, theme as theme2 } from "antd";
-import { jsx as jsx43 } from "react/jsx-runtime";
-var AssistantList = () => {
-  const { token } = theme2.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__ */ jsx43(
-      Avatar4,
-      {
-        size: "small",
-        style: {
-          backgroundColor: token.colorFillSecondary,
-          color: token.colorText
-        },
-        children: assistant.name.charAt(0).toUpperCase()
-      }
-    )
-  }));
-  return /* @__PURE__ */ jsx43(
-    Conversations2,
-    {
-      items,
-      activeKey: currentAssistant?.id,
-      style,
-      onActiveChange: (key) => {
-        selectAssistant(key);
-      }
-    }
-  );
-};
-
-// src/components/Chat/ChatSidebar.tsx
 import { createStyles as createStyles13 } from "antd-style";
 
 // src/components/Chat/AssistantFlow.tsx
@@ -6789,19 +6827,19 @@ import "@xyflow/react/dist/style.css";
 // src/components/Chat/AssistantNode.tsx
 import { useMemo as useMemo9 } from "react";
 import { Handle, Position } from "@xyflow/react";
-import { Avatar as Avatar5, Typography as Typography15, theme as theme3, Tag as Tag6, Tooltip as Tooltip8, Space as Space15, Popover as Popover2, Button as Button17, Divider as Divider2 } from "antd";
+import { Avatar as Avatar4, Typography as Typography16, theme as theme2, Tag as Tag6, Tooltip as Tooltip8, Space as Space16, Popover as Popover2, Button as Button18, Divider as Divider2 } from "antd";
 import {
   UserOutlined as UserOutlined3,
   ToolOutlined as ToolOutlined2,
   SettingOutlined,
   IdcardOutlined,
-  InfoCircleOutlined as InfoCircleOutlined2,
+  InfoCircleOutlined as InfoCircleOutlined3,
   CopyOutlined as CopyOutlined2,
   CodeOutlined as CodeOutlined4,
   BranchesOutlined
 } from "@ant-design/icons";
-import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
-var { Text: Text13 } = Typography15;
+import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+var { Text: Text14 } = Typography16;
 var getBadgeColor = (id) => {
   const colors = [
     "#1890ff",
@@ -6830,7 +6868,7 @@ var getBadgeColor = (id) => {
 var AssistantNode = ({
   data
 }) => {
-  const { token } = theme3.useToken();
+  const { token } = theme2.useToken();
   if (!data) {
     return null;
   }
@@ -6882,7 +6920,7 @@ var AssistantNode = ({
   const handleCopy = (text) => {
     navigator.clipboard.writeText(text);
   };
-  const detailCardContent = /* @__PURE__ */ jsxs24(
+  const detailCardContent = /* @__PURE__ */ jsxs25(
     "div",
     {
       style: {
@@ -6901,8 +6939,8 @@ var AssistantNode = ({
               justifyContent: "space-between",
               marginBottom: 16
             },
-            children: /* @__PURE__ */ jsxs24("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsxs24(
+            children: /* @__PURE__ */ jsxs25("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxs25(
                 "div",
                 {
                   style: {
@@ -6913,7 +6951,7 @@ var AssistantNode = ({
                   },
                   children: [
                     /* @__PURE__ */ jsx44(
-                      Text13,
+                      Text14,
                       {
                         strong: true,
                         style: {
@@ -6949,7 +6987,7 @@ var AssistantNode = ({
                     gap: 6
                   },
                   children: /* @__PURE__ */ jsx44(
-                    Text13,
+                    Text14,
                     {
                       style: {
                         fontSize: 11,
@@ -6964,8 +7002,8 @@ var AssistantNode = ({
             ] })
           }
         ),
-        assistant.description && /* @__PURE__ */ jsx44("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs24(
-          Text13,
+        assistant.description && /* @__PURE__ */ jsx44("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs25(
+          Text14,
           {
             style: {
               fontSize: 12,
@@ -6980,8 +7018,8 @@ var AssistantNode = ({
             ]
           }
         ) }),
-        modelKey && /* @__PURE__ */ jsxs24("div", { style: { marginBottom: 16 }, children: [
-          /* @__PURE__ */ jsxs24(
+        modelKey && /* @__PURE__ */ jsxs25("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsxs25(
             "div",
             {
               style: {
@@ -7001,7 +7039,7 @@ var AssistantNode = ({
                   }
                 ),
                 /* @__PURE__ */ jsx44(
-                  Text13,
+                  Text14,
                   {
                     style: {
                       fontSize: 12,
@@ -7026,8 +7064,8 @@ var AssistantNode = ({
             }
           )
         ] }),
-        prompt && /* @__PURE__ */ jsxs24("div", { style: { marginBottom: 16 }, children: [
-          /* @__PURE__ */ jsxs24(
+        prompt && /* @__PURE__ */ jsxs25("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsxs25(
             "div",
             {
               style: {
@@ -7047,7 +7085,7 @@ var AssistantNode = ({
                   }
                 ),
                 /* @__PURE__ */ jsx44(
-                  Text13,
+                  Text14,
                   {
                     style: {
                       fontSize: 12,
@@ -7073,7 +7111,7 @@ var AssistantNode = ({
                 overflowY: "auto"
               },
               children: /* @__PURE__ */ jsx44(
-                Text13,
+                Text14,
                 {
                   style: {
                     fontSize: 11,
@@ -7087,8 +7125,8 @@ var AssistantNode = ({
             }
           )
         ] }),
-        tools && tools.length > 0 && /* @__PURE__ */ jsxs24("div", { style: { marginBottom: 16 }, children: [
-          /* @__PURE__ */ jsxs24(
+        tools && tools.length > 0 && /* @__PURE__ */ jsxs25("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsxs25(
             "div",
             {
               style: {
@@ -7107,8 +7145,8 @@ var AssistantNode = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs24(
-                  Text13,
+                /* @__PURE__ */ jsxs25(
+                  Text14,
                   {
                     style: {
                       fontSize: 12,
@@ -7125,7 +7163,7 @@ var AssistantNode = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx44(Space15, { size: [8, 8], wrap: true, children: tools.map((tool, index) => /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx44(Space16, { size: [8, 8], wrap: true, children: tools.map((tool, index) => /* @__PURE__ */ jsx44(
             Tag6,
             {
               color: "blue",
@@ -7138,8 +7176,8 @@ var AssistantNode = ({
             index
           )) })
         ] }),
-        subAgents && subAgents.length > 0 && /* @__PURE__ */ jsxs24("div", { style: { marginBottom: 16 }, children: [
-          /* @__PURE__ */ jsxs24(
+        subAgents && subAgents.length > 0 && /* @__PURE__ */ jsxs25("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsxs25(
             "div",
             {
               style: {
@@ -7158,8 +7196,8 @@ var AssistantNode = ({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsxs24(
-                  Text13,
+                /* @__PURE__ */ jsxs25(
+                  Text14,
                   {
                     style: {
                       fontSize: 12,
@@ -7176,7 +7214,7 @@ var AssistantNode = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx44(Space15, { size: [8, 8], wrap: true, children: subAgents.map((subAgent, index) => /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx44(Space16, { size: [8, 8], wrap: true, children: subAgents.map((subAgent, index) => /* @__PURE__ */ jsx44(
             Tag6,
             {
               style: {
@@ -7192,7 +7230,7 @@ var AssistantNode = ({
           )) })
         ] }),
         /* @__PURE__ */ jsx44(Divider2, { style: { margin: "16px 0" } }),
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25(
           "div",
           {
             style: {
@@ -7203,7 +7241,7 @@ var AssistantNode = ({
             },
             children: [
               /* @__PURE__ */ jsx44(
-                Button17,
+                Button18,
                 {
                   type: "primary",
                   block: true,
@@ -7215,7 +7253,7 @@ var AssistantNode = ({
                 }
               ),
               /* @__PURE__ */ jsx44(
-                Button17,
+                Button18,
                 {
                   icon: /* @__PURE__ */ jsx44(CopyOutlined2, {}),
                   onClick: () => handleCopy(assistant.id),
@@ -7228,7 +7266,7 @@ var AssistantNode = ({
       ]
     }
   );
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       style: {
@@ -7236,7 +7274,7 @@ var AssistantNode = ({
       },
       children: [
         /* @__PURE__ */ jsx44(Handle, { type: "target", position: Position.Top }),
-        /* @__PURE__ */ jsxs24(
+        /* @__PURE__ */ jsxs25(
           "div",
           {
             onClick: () => onClick?.(assistant),
@@ -7305,7 +7343,7 @@ var AssistantNode = ({
                         e.currentTarget.style.background = token.colorBgContainer;
                       },
                       children: /* @__PURE__ */ jsx44(
-                        InfoCircleOutlined2,
+                        InfoCircleOutlined3,
                         {
                           style: {
                             fontSize: 14,
@@ -7317,7 +7355,7 @@ var AssistantNode = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsxs24(
+              /* @__PURE__ */ jsxs25(
                 "div",
                 {
                   style: {
@@ -7327,7 +7365,7 @@ var AssistantNode = ({
                     gap: 10
                   },
                   children: [
-                    /* @__PURE__ */ jsxs24(
+                    /* @__PURE__ */ jsxs25(
                       "div",
                       {
                         style: {
@@ -7336,7 +7374,7 @@ var AssistantNode = ({
                           gap: 10
                         },
                         children: [
-                          /* @__PURE__ */ jsxs24(
+                          /* @__PURE__ */ jsxs25(
                             "div",
                             {
                               style: {
@@ -7345,7 +7383,7 @@ var AssistantNode = ({
                               },
                               children: [
                                 /* @__PURE__ */ jsx44(
-                                  Avatar5,
+                                  Avatar4,
                                   {
                                     size: 44,
                                     icon: /* @__PURE__ */ jsx44(UserOutlined3, {}),
@@ -7376,7 +7414,7 @@ var AssistantNode = ({
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsxs24(
+                          /* @__PURE__ */ jsxs25(
                             "div",
                             {
                               style: {
@@ -7385,7 +7423,7 @@ var AssistantNode = ({
                               },
                               children: [
                                 /* @__PURE__ */ jsx44(
-                                  Text13,
+                                  Text14,
                                   {
                                     strong: true,
                                     style: {
@@ -7400,7 +7438,7 @@ var AssistantNode = ({
                                     children: assistant.name
                                   }
                                 ),
-                                /* @__PURE__ */ jsxs24(
+                                /* @__PURE__ */ jsxs25(
                                   "div",
                                   {
                                     style: {
@@ -7419,7 +7457,7 @@ var AssistantNode = ({
                                         }
                                       ),
                                       /* @__PURE__ */ jsx44(
-                                        Text13,
+                                        Text14,
                                         {
                                           style: {
                                             fontSize: 9,
@@ -7453,7 +7491,7 @@ var AssistantNode = ({
                           {
                             title: assistant.description.length > 150 ? assistant.description : void 0,
                             placement: "top",
-                            children: /* @__PURE__ */ jsxs24(
+                            children: /* @__PURE__ */ jsxs25(
                               "div",
                               {
                                 style: {
@@ -7479,7 +7517,7 @@ var AssistantNode = ({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsxs24(
+                    /* @__PURE__ */ jsxs25(
                       "div",
                       {
                         style: {
@@ -7507,7 +7545,7 @@ var AssistantNode = ({
                               children: getAgentTypeLabel(agentType)
                             }
                           ),
-                          tools && tools.length > 0 && /* @__PURE__ */ jsxs24(
+                          tools && tools.length > 0 && /* @__PURE__ */ jsxs25(
                             Tag6,
                             {
                               style: {
@@ -7562,7 +7600,7 @@ var AssistantNode = ({
 var AssistantNode_default = AssistantNode;
 
 // src/components/Chat/AssistantFlow.tsx
-import { jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
 var AssistantFlowInner = ({ onNodeClick }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
@@ -7806,7 +7844,7 @@ var AssistantFlowInner = ({ onNodeClick }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx45("div", { style: { width: "100%", height: "100%", background: "#fafafa" }, children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx45("div", { style: { width: "100%", height: "100%", background: "#fafafa" }, children: /* @__PURE__ */ jsxs26(
     ReactFlow,
     {
       nodes,
@@ -7836,20 +7874,20 @@ import {
   ReactFlowProvider as ReactFlowProvider2
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { Button as Button20, theme as theme6 } from "antd";
+import { Button as Button21, theme as theme5 } from "antd";
 import { PlusOutlined as PlusOutlined4 } from "@ant-design/icons";
 
 // src/components/Chat/SkillNode.tsx
 import { useEffect as useEffect18, useMemo as useMemo11, useState as useState25 } from "react";
 import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
 import {
-  Avatar as Avatar6,
-  Typography as Typography16,
-  theme as theme4,
+  Avatar as Avatar5,
+  Typography as Typography17,
+  theme as theme3,
   Tag as Tag7,
   Tooltip as Tooltip9,
-  Space as Space16,
-  Button as Button18,
+  Space as Space17,
+  Button as Button19,
   Divider as Divider3,
   Input,
   Modal,
@@ -7859,14 +7897,14 @@ import {
   BookOutlined,
   BranchesOutlined as BranchesOutlined2,
   CopyrightOutlined,
-  InfoCircleOutlined as InfoCircleOutlined3,
+  InfoCircleOutlined as InfoCircleOutlined4,
   FileTextOutlined as FileTextOutlined5,
   CopyOutlined as CopyOutlined3,
   PlusOutlined as PlusOutlined2
 } from "@ant-design/icons";
 import { Client as Client4 } from "@axiom-lattice/client-sdk";
-import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
-var { Text: Text14 } = Typography16;
+import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs27 } from "react/jsx-runtime";
+var { Text: Text15 } = Typography17;
 var { TextArea } = Input;
 var getBadgeColor2 = (name) => {
   const colors = [
@@ -7894,7 +7932,7 @@ var getBadgeColor2 = (name) => {
   return colors[Math.abs(hash) % colors.length];
 };
 var SkillNode = ({ data }) => {
-  const { token } = theme4.useToken();
+  const { token } = theme3.useToken();
   const { config } = useLatticeChatShellContext();
   const client = useMemo11(
     () => new Client4({
@@ -8068,7 +8106,7 @@ var SkillNode = ({ data }) => {
       setSaving(false);
     }
   };
-  const editingView = /* @__PURE__ */ jsxs26(
+  const editingView = /* @__PURE__ */ jsxs27(
     "div",
     {
       style: {
@@ -8077,8 +8115,8 @@ var SkillNode = ({ data }) => {
         gap: 12
       },
       children: [
-        /* @__PURE__ */ jsxs26("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-          /* @__PURE__ */ jsx46(Text14, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
+        /* @__PURE__ */ jsxs27("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsx46(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
           /* @__PURE__ */ jsx46(
             TextArea,
             {
@@ -8089,8 +8127,8 @@ var SkillNode = ({ data }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs26("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-          /* @__PURE__ */ jsx46(Text14, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
+        /* @__PURE__ */ jsxs27("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsx46(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
           /* @__PURE__ */ jsx46(
             Input,
             {
@@ -8100,8 +8138,8 @@ var SkillNode = ({ data }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs26("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-          /* @__PURE__ */ jsx46(Text14, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
+        /* @__PURE__ */ jsxs27("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsx46(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
           /* @__PURE__ */ jsx46(
             Input,
             {
@@ -8111,7 +8149,7 @@ var SkillNode = ({ data }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs26(
+        /* @__PURE__ */ jsxs27(
           "div",
           {
             style: {
@@ -8122,7 +8160,7 @@ var SkillNode = ({ data }) => {
             },
             children: [
               /* @__PURE__ */ jsx46(
-                Text14,
+                Text15,
                 {
                   style: {
                     fontSize: 12,
@@ -8133,7 +8171,7 @@ var SkillNode = ({ data }) => {
                 }
               ),
               /* @__PURE__ */ jsx46(
-                Button18,
+                Button19,
                 {
                   size: "small",
                   icon: /* @__PURE__ */ jsx46(PlusOutlined2, {}),
@@ -8144,9 +8182,9 @@ var SkillNode = ({ data }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs26(Space16, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
+        /* @__PURE__ */ jsxs27(Space17, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
           metadataRows.length === 0 && /* @__PURE__ */ jsx46(
-            Text14,
+            Text15,
             {
               style: {
                 fontSize: 11,
@@ -8155,7 +8193,7 @@ var SkillNode = ({ data }) => {
               children: "No metadata yet. Use Add to create one."
             }
           ),
-          metadataRows.map((row, index) => /* @__PURE__ */ jsxs26(
+          metadataRows.map((row, index) => /* @__PURE__ */ jsxs27(
             "div",
             {
               style: {
@@ -8165,11 +8203,11 @@ var SkillNode = ({ data }) => {
                 width: "100%"
               },
               children: [
-                /* @__PURE__ */ jsxs26(Text14, { style: { fontSize: 11, color: token.colorTextSecondary }, children: [
+                /* @__PURE__ */ jsxs27(Text15, { style: { fontSize: 11, color: token.colorTextSecondary }, children: [
                   "Meta ",
                   index + 1
                 ] }),
-                /* @__PURE__ */ jsxs26(Space16, { style: { width: "100%" }, size: 8, wrap: true, children: [
+                /* @__PURE__ */ jsxs27(Space17, { style: { width: "100%" }, size: 8, wrap: true, children: [
                   /* @__PURE__ */ jsx46(
                     Input,
                     {
@@ -8194,8 +8232,8 @@ var SkillNode = ({ data }) => {
             index
           ))
         ] }),
-        /* @__PURE__ */ jsxs26("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-          /* @__PURE__ */ jsx46(Text14, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
+        /* @__PURE__ */ jsxs27("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsx46(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
           /* @__PURE__ */ jsx46(
             TextArea,
             {
@@ -8209,7 +8247,7 @@ var SkillNode = ({ data }) => {
       ]
     }
   );
-  const detailCardContent = /* @__PURE__ */ jsxs26(
+  const detailCardContent = /* @__PURE__ */ jsxs27(
     "div",
     {
       style: {
@@ -8228,8 +8266,8 @@ var SkillNode = ({ data }) => {
               justifyContent: "space-between",
               marginBottom: 16
             },
-            children: /* @__PURE__ */ jsxs26("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsxs26(
+            children: /* @__PURE__ */ jsxs27("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxs27(
                 "div",
                 {
                   style: {
@@ -8240,7 +8278,7 @@ var SkillNode = ({ data }) => {
                   },
                   children: [
                     /* @__PURE__ */ jsx46(
-                      Text14,
+                      Text15,
                       {
                         strong: true,
                         style: {
@@ -8276,7 +8314,7 @@ var SkillNode = ({ data }) => {
                     gap: 6
                   },
                   children: /* @__PURE__ */ jsx46(
-                    Text14,
+                    Text15,
                     {
                       style: {
                         fontSize: 11,
@@ -8291,9 +8329,9 @@ var SkillNode = ({ data }) => {
             ] })
           }
         ),
-        isEditing ? editingView : /* @__PURE__ */ jsxs26(Fragment6, { children: [
-          currentSkill.description && /* @__PURE__ */ jsx46("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs26(
-            Text14,
+        isEditing ? editingView : /* @__PURE__ */ jsxs27(Fragment6, { children: [
+          currentSkill.description && /* @__PURE__ */ jsx46("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs27(
+            Text15,
             {
               style: {
                 fontSize: 12,
@@ -8308,8 +8346,8 @@ var SkillNode = ({ data }) => {
               ]
             }
           ) }),
-          metadataEntries.length > 0 && /* @__PURE__ */ jsxs26("div", { style: { marginBottom: 16 }, children: [
-            /* @__PURE__ */ jsxs26(
+          metadataEntries.length > 0 && /* @__PURE__ */ jsxs27("div", { style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsxs27(
               "div",
               {
                 style: {
@@ -8320,7 +8358,7 @@ var SkillNode = ({ data }) => {
                 },
                 children: [
                   /* @__PURE__ */ jsx46(
-                    InfoCircleOutlined3,
+                    InfoCircleOutlined4,
                     {
                       style: {
                         fontSize: 14,
@@ -8328,8 +8366,8 @@ var SkillNode = ({ data }) => {
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxs26(
-                    Text14,
+                  /* @__PURE__ */ jsxs27(
+                    Text15,
                     {
                       style: {
                         fontSize: 12,
@@ -8354,7 +8392,7 @@ var SkillNode = ({ data }) => {
                   borderRadius: 6,
                   overflow: "hidden"
                 },
-                children: metadataEntries.map(([key, value], index) => /* @__PURE__ */ jsxs26(
+                children: metadataEntries.map(([key, value], index) => /* @__PURE__ */ jsxs27(
                   "div",
                   {
                     style: {
@@ -8399,8 +8437,8 @@ var SkillNode = ({ data }) => {
               }
             )
           ] }),
-          hasSubSkills && /* @__PURE__ */ jsxs26("div", { style: { marginBottom: 16 }, children: [
-            /* @__PURE__ */ jsxs26(
+          hasSubSkills && /* @__PURE__ */ jsxs27("div", { style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsxs27(
               "div",
               {
                 style: {
@@ -8419,8 +8457,8 @@ var SkillNode = ({ data }) => {
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxs26(
-                    Text14,
+                  /* @__PURE__ */ jsxs27(
+                    Text15,
                     {
                       style: {
                         fontSize: 12,
@@ -8437,7 +8475,7 @@ var SkillNode = ({ data }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx46(Space16, { size: [8, 8], wrap: true, children: currentSkill.subSkills.map(
+            /* @__PURE__ */ jsx46(Space17, { size: [8, 8], wrap: true, children: currentSkill.subSkills.map(
               (subSkill, index) => /* @__PURE__ */ jsx46(
                 Tag7,
                 {
@@ -8454,7 +8492,7 @@ var SkillNode = ({ data }) => {
               )
             ) })
           ] }),
-          (currentSkill.license || currentSkill.compatibility) && /* @__PURE__ */ jsx46("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs26(Space16, { size: [8, 8], wrap: true, children: [
+          (currentSkill.license || currentSkill.compatibility) && /* @__PURE__ */ jsx46("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs27(Space17, { size: [8, 8], wrap: true, children: [
             currentSkill.license && /* @__PURE__ */ jsx46(
               Tag7,
               {
@@ -8494,9 +8532,9 @@ var SkillNode = ({ data }) => {
               }
             )
           ] }) }),
-          (currentSkill.createdAt || currentSkill.updatedAt) && /* @__PURE__ */ jsx46("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs26(Space16, { direction: "vertical", size: 4, children: [
-            currentSkill.createdAt && /* @__PURE__ */ jsxs26(
-              Text14,
+          (currentSkill.createdAt || currentSkill.updatedAt) && /* @__PURE__ */ jsx46("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs27(Space17, { direction: "vertical", size: 4, children: [
+            currentSkill.createdAt && /* @__PURE__ */ jsxs27(
+              Text15,
               {
                 style: {
                   fontSize: 11,
@@ -8509,8 +8547,8 @@ var SkillNode = ({ data }) => {
                 ]
               }
             ),
-            currentSkill.updatedAt && /* @__PURE__ */ jsxs26(
-              Text14,
+            currentSkill.updatedAt && /* @__PURE__ */ jsxs27(
+              Text15,
               {
                 style: {
                   fontSize: 11,
@@ -8524,8 +8562,8 @@ var SkillNode = ({ data }) => {
               }
             )
           ] }) }),
-          currentSkill.content && /* @__PURE__ */ jsxs26("div", { style: { marginBottom: 0 }, children: [
-            /* @__PURE__ */ jsxs26(
+          currentSkill.content && /* @__PURE__ */ jsxs27("div", { style: { marginBottom: 0 }, children: [
+            /* @__PURE__ */ jsxs27(
               "div",
               {
                 style: {
@@ -8545,7 +8583,7 @@ var SkillNode = ({ data }) => {
                     }
                   ),
                   /* @__PURE__ */ jsx46(
-                    Text14,
+                    Text15,
                     {
                       style: {
                         fontSize: 12,
@@ -8571,7 +8609,7 @@ var SkillNode = ({ data }) => {
                   overflowY: "auto"
                 },
                 children: /* @__PURE__ */ jsx46(
-                  Text14,
+                  Text15,
                   {
                     style: {
                       fontSize: 11,
@@ -8596,9 +8634,9 @@ var SkillNode = ({ data }) => {
               justifyContent: "space-between",
               gap: 8
             },
-            children: isEditing ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
+            children: isEditing ? /* @__PURE__ */ jsxs27(Fragment6, { children: [
               /* @__PURE__ */ jsx46(
-                Button18,
+                Button19,
                 {
                   block: true,
                   onClick: () => {
@@ -8612,7 +8650,7 @@ var SkillNode = ({ data }) => {
                 }
               ),
               /* @__PURE__ */ jsx46(
-                Button18,
+                Button19,
                 {
                   type: "primary",
                   block: true,
@@ -8624,9 +8662,9 @@ var SkillNode = ({ data }) => {
                   children: "Save"
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs26(Fragment6, { children: [
+            ] }) : /* @__PURE__ */ jsxs27(Fragment6, { children: [
               /* @__PURE__ */ jsx46(
-                Button18,
+                Button19,
                 {
                   type: "primary",
                   block: true,
@@ -8638,7 +8676,7 @@ var SkillNode = ({ data }) => {
                 }
               ),
               /* @__PURE__ */ jsx46(
-                Button18,
+                Button19,
                 {
                   danger: true,
                   onClick: (e) => {
@@ -8649,7 +8687,7 @@ var SkillNode = ({ data }) => {
                 }
               ),
               /* @__PURE__ */ jsx46(
-                Button18,
+                Button19,
                 {
                   icon: /* @__PURE__ */ jsx46(CopyOutlined3, {}),
                   onClick: () => handleCopy(currentSkill.id),
@@ -8670,7 +8708,7 @@ var SkillNode = ({ data }) => {
     height: 0,
     pointerEvents: "none"
   };
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       style: {
@@ -8716,7 +8754,7 @@ var SkillNode = ({ data }) => {
               e.currentTarget.style.transform = "translateY(0)";
               e.currentTarget.style.boxShadow = `0 1px 4px rgba(0, 0, 0, 0.08)`;
             },
-            children: /* @__PURE__ */ jsxs26(
+            children: /* @__PURE__ */ jsxs27(
               "div",
               {
                 style: {
@@ -8726,7 +8764,7 @@ var SkillNode = ({ data }) => {
                   gap: 10
                 },
                 children: [
-                  /* @__PURE__ */ jsxs26(
+                  /* @__PURE__ */ jsxs27(
                     "div",
                     {
                       style: {
@@ -8735,7 +8773,7 @@ var SkillNode = ({ data }) => {
                         gap: 10
                       },
                       children: [
-                        /* @__PURE__ */ jsxs26(
+                        /* @__PURE__ */ jsxs27(
                           "div",
                           {
                             style: {
@@ -8744,7 +8782,7 @@ var SkillNode = ({ data }) => {
                             },
                             children: [
                               /* @__PURE__ */ jsx46(
-                                Avatar6,
+                                Avatar5,
                                 {
                                   size: 44,
                                   icon: /* @__PURE__ */ jsx46(BookOutlined, {}),
@@ -8787,7 +8825,7 @@ var SkillNode = ({ data }) => {
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsxs26(
+                        /* @__PURE__ */ jsxs27(
                           "div",
                           {
                             style: {
@@ -8796,7 +8834,7 @@ var SkillNode = ({ data }) => {
                             },
                             children: [
                               /* @__PURE__ */ jsx46(
-                                Text14,
+                                Text15,
                                 {
                                   strong: true,
                                   style: {
@@ -8811,7 +8849,7 @@ var SkillNode = ({ data }) => {
                                   children: currentSkill.name
                                 }
                               ),
-                              /* @__PURE__ */ jsxs26(
+                              /* @__PURE__ */ jsxs27(
                                 "div",
                                 {
                                   style: {
@@ -8830,7 +8868,7 @@ var SkillNode = ({ data }) => {
                                       }
                                     ),
                                     /* @__PURE__ */ jsx46(
-                                      Text14,
+                                      Text15,
                                       {
                                         style: {
                                           fontSize: 9,
@@ -8864,7 +8902,7 @@ var SkillNode = ({ data }) => {
                         {
                           title: currentSkill.description.length > 150 ? currentSkill.description : void 0,
                           placement: "top",
-                          children: /* @__PURE__ */ jsxs26(
+                          children: /* @__PURE__ */ jsxs27(
                             "div",
                             {
                               style: {
@@ -8890,7 +8928,7 @@ var SkillNode = ({ data }) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsxs26(
+                  /* @__PURE__ */ jsxs27(
                     "div",
                     {
                       style: {
@@ -8919,7 +8957,7 @@ var SkillNode = ({ data }) => {
                             children: category.toUpperCase()
                           }
                         ),
-                        hasSubSkills && /* @__PURE__ */ jsxs26(
+                        hasSubSkills && /* @__PURE__ */ jsxs27(
                           Tag7,
                           {
                             style: {
@@ -8974,7 +9012,7 @@ var SkillNode = ({ data }) => {
                               fontWeight: 500,
                               lineHeight: "14px"
                             },
-                            icon: /* @__PURE__ */ jsx46(InfoCircleOutlined3, {}),
+                            icon: /* @__PURE__ */ jsx46(InfoCircleOutlined4, {}),
                             children: currentSkill.compatibility
                           }
                         )
@@ -9026,16 +9064,16 @@ import {
   Modal as Modal2,
   Form,
   Input as Input2,
-  Button as Button19,
+  Button as Button20,
   message as message6,
-  Space as Space17,
-  Typography as Typography17
+  Space as Space18,
+  Typography as Typography18
 } from "antd";
 import { PlusOutlined as PlusOutlined3 } from "@ant-design/icons";
-import { theme as theme5 } from "antd";
-import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
+import { theme as theme4 } from "antd";
+import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
 var { TextArea: TextArea2 } = Input2;
-var { Text: Text15 } = Typography17;
+var { Text: Text16 } = Typography18;
 var CreateSkillModal = ({
   open,
   onCancel,
@@ -9044,7 +9082,7 @@ var CreateSkillModal = ({
   const [form] = Form.useForm();
   const [loading, setLoading] = useState26(false);
   const { config } = useLatticeChatShellContext();
-  const { token } = theme5.useToken();
+  const { token } = theme4.useToken();
   const defaultMetadataRows = [{ key: "category", value: "global" }];
   const [metadataRows, setMetadataRows] = useState26(defaultMetadataRows);
   const handleSubmit = async () => {
@@ -9136,7 +9174,7 @@ var CreateSkillModal = ({
           layout: "vertical",
           onFinish: handleSubmit,
           autoComplete: "off",
-          children: /* @__PURE__ */ jsxs27(
+          children: /* @__PURE__ */ jsxs28(
             "div",
             {
               style: {
@@ -9145,8 +9183,8 @@ var CreateSkillModal = ({
                 gap: 12
               },
               children: [
-                /* @__PURE__ */ jsxs27("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx47(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Name" }),
+                /* @__PURE__ */ jsxs28("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx47(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Name" }),
                   /* @__PURE__ */ jsx47(
                     Form.Item,
                     {
@@ -9164,8 +9202,8 @@ var CreateSkillModal = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs27("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx47(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
+                /* @__PURE__ */ jsxs28("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx47(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
                   /* @__PURE__ */ jsx47(
                     Form.Item,
                     {
@@ -9184,16 +9222,16 @@ var CreateSkillModal = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs27("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx47(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
+                /* @__PURE__ */ jsxs28("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx47(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
                   /* @__PURE__ */ jsx47(Form.Item, { name: "license", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx47(Input2, { placeholder: "License" }) })
                 ] }),
-                /* @__PURE__ */ jsxs27("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx47(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
+                /* @__PURE__ */ jsxs28("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx47(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
                   /* @__PURE__ */ jsx47(Form.Item, { name: "compatibility", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx47(Input2, { placeholder: "Compatibility" }) })
                 ] }),
-                /* @__PURE__ */ jsxs27("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ jsxs27(
+                /* @__PURE__ */ jsxs28("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsxs28(
                     "div",
                     {
                       style: {
@@ -9204,7 +9242,7 @@ var CreateSkillModal = ({
                       },
                       children: [
                         /* @__PURE__ */ jsx47(
-                          Text15,
+                          Text16,
                           {
                             style: {
                               fontSize: 12,
@@ -9215,7 +9253,7 @@ var CreateSkillModal = ({
                           }
                         ),
                         /* @__PURE__ */ jsx47(
-                          Button19,
+                          Button20,
                           {
                             size: "small",
                             icon: /* @__PURE__ */ jsx47(PlusOutlined3, {}),
@@ -9226,9 +9264,9 @@ var CreateSkillModal = ({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs27(Space17, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
+                  /* @__PURE__ */ jsxs28(Space18, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
                     metadataRows.length === 0 && /* @__PURE__ */ jsx47(
-                      Text15,
+                      Text16,
                       {
                         style: {
                           fontSize: 11,
@@ -9237,7 +9275,7 @@ var CreateSkillModal = ({
                         children: "No metadata yet. Use Add to create one."
                       }
                     ),
-                    metadataRows.map((row, index) => /* @__PURE__ */ jsxs27(
+                    metadataRows.map((row, index) => /* @__PURE__ */ jsxs28(
                       "div",
                       {
                         style: {
@@ -9247,8 +9285,8 @@ var CreateSkillModal = ({
                           width: "100%"
                         },
                         children: [
-                          /* @__PURE__ */ jsxs27(
-                            Text15,
+                          /* @__PURE__ */ jsxs28(
+                            Text16,
                             {
                               style: { fontSize: 11, color: token.colorTextSecondary },
                               children: [
@@ -9257,7 +9295,7 @@ var CreateSkillModal = ({
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsxs27(Space17, { style: { width: "100%" }, size: 8, wrap: true, children: [
+                          /* @__PURE__ */ jsxs28(Space18, { style: { width: "100%" }, size: 8, wrap: true, children: [
                             /* @__PURE__ */ jsx47(
                               Input2,
                               {
@@ -9283,8 +9321,8 @@ var CreateSkillModal = ({
                     ))
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs27("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx47(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
+                /* @__PURE__ */ jsxs28("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx47(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
                   /* @__PURE__ */ jsx47(Form.Item, { name: "content", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx47(
                     TextArea2,
                     {
@@ -9293,7 +9331,7 @@ var CreateSkillModal = ({
                     }
                   ) })
                 ] }),
-                /* @__PURE__ */ jsxs27(
+                /* @__PURE__ */ jsxs28(
                   "div",
                   {
                     style: {
@@ -9304,8 +9342,8 @@ var CreateSkillModal = ({
                       marginTop: 8
                     },
                     children: [
-                      /* @__PURE__ */ jsx47(Button19, { onClick: handleCancel, children: "Cancel" }),
-                      /* @__PURE__ */ jsx47(Button19, { type: "primary", htmlType: "submit", loading, children: "Create Skill" })
+                      /* @__PURE__ */ jsx47(Button20, { onClick: handleCancel, children: "Cancel" }),
+                      /* @__PURE__ */ jsx47(Button20, { type: "primary", htmlType: "submit", loading, children: "Create Skill" })
                     ]
                   }
                 )
@@ -9320,14 +9358,14 @@ var CreateSkillModal = ({
 var CreateSkillModal_default = CreateSkillModal;
 
 // src/components/Chat/SkillFlow.tsx
-import { jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
 var SkillFlowInner = ({ onNodeClick }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState2([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState2([]);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState27(false);
   const [skills, setSkills] = useState27([]);
   const [skillsLoading, setSkillsLoading] = useState27(false);
-  const { token } = theme6.useToken();
+  const { token } = theme5.useToken();
   const { config } = useLatticeChatShellContext();
   const nodeTypes = useMemo12(
     () => ({
@@ -9508,8 +9546,8 @@ var SkillFlowInner = ({ onNodeClick }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxs28("div", { style: { width: "100%", height: "100%", background: "#fafafa", position: "relative" }, children: [
-    /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29("div", { style: { width: "100%", height: "100%", background: "#fafafa", position: "relative" }, children: [
+    /* @__PURE__ */ jsxs29(
       ReactFlow2,
       {
         nodes,
@@ -9534,7 +9572,7 @@ var SkillFlowInner = ({ onNodeClick }) => {
           zIndex: 10
         },
         children: /* @__PURE__ */ jsx48(
-          Button20,
+          Button21,
           {
             type: "primary",
             size: "large",
@@ -9567,164 +9605,274 @@ var SkillFlowInner = ({ onNodeClick }) => {
 var SkillFlow = (props) => /* @__PURE__ */ jsx48(ReactFlowProvider2, { children: /* @__PURE__ */ jsx48(SkillFlowInner, { ...props }) });
 var SkillFlow_default = SkillFlow;
 
-// src/components/Chat/ChatSidebar.tsx
-import { Fragment as Fragment7, jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
-var useStyles4 = createStyles13(({ 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};
+// src/components/Chat/ToolsList.tsx
+import { List as List4, Avatar as Avatar6, theme as theme6, Alert as Alert4, Button as Button22, Tag as Tag8 } from "antd";
+import { ReloadOutlined as ReloadOutlined3 } from "@ant-design/icons";
+import { useEffect as useEffect20, useState as useState28, useCallback as useCallback14 } from "react";
+import { jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
+var ToolsList = ({
+  onToolSelect,
+  autoLoad = true
+}) => {
+  const { token } = theme6.useToken();
+  const { config } = useLatticeChatShellContext();
+  const [state, setState] = useState28({
+    tools: [],
+    isLoading: false,
+    error: null
+  });
+  const [selectedToolId, setSelectedToolId] = useState28(null);
+  const fetchTools = useCallback14(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);
+  }, [config]);
+  const handleToolSelect = useCallback14(
+    (tool) => {
+      setSelectedToolId(tool.id);
+      onToolSelect?.(tool);
+    },
+    [onToolSelect]
+  );
+  const handleRefresh = useCallback14(() => {
+    fetchTools();
+  }, [fetchTools]);
+  useEffect20(() => {
+    if (autoLoad) {
+      fetchTools();
     }
-  `,
-  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;
-    }
-
-    &::-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__ */ jsx49("div", { style, children: /* @__PURE__ */ jsx49(
+      Alert4,
+      {
+        message: "Error Loading Tools",
+        description: state.error.message,
+        type: "error",
+        showIcon: true,
+        action: /* @__PURE__ */ jsx49(
+          Button22,
+          {
+            size: "small",
+            icon: /* @__PURE__ */ jsx49(ReloadOutlined3, {}),
+            onClick: handleRefresh,
+            children: "Retry"
+          }
+        )
       }
-    }
-  `,
-  section: css`
-    margin-bottom: ${token.marginLG}px;
+    ) });
+  }
+  return /* @__PURE__ */ jsxs30("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsx49(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: token.paddingSM,
+          right: token.paddingSM,
+          zIndex: 1
+        },
+        children: /* @__PURE__ */ jsx49(
+          Button22,
+          {
+            type: "text",
+            size: "small",
+            icon: /* @__PURE__ */ jsx49(ReloadOutlined3, {}),
+            onClick: handleRefresh,
+            title: "Refresh tools",
+            style: {
+              color: token.colorTextSecondary
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx49(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          overflowY: "auto",
+          overflowX: "hidden",
+          paddingTop: token.paddingLG
+        },
+        children: /* @__PURE__ */ jsx49(
+          List4,
+          {
+            dataSource: state.tools,
+            loading: state.isLoading,
+            locale: {
+              emptyText: /* @__PURE__ */ jsxs30(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: token.marginSM,
+                    padding: token.paddingLG
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx49("div", { style: { color: token.colorTextSecondary }, children: "No tools available" }),
+                    /* @__PURE__ */ jsx49(
+                      Button22,
+                      {
+                        icon: /* @__PURE__ */ jsx49(ReloadOutlined3, {}),
+                        onClick: handleRefresh,
+                        type: "dashed",
+                        size: "small",
+                        children: "Refresh"
+                      }
+                    )
+                  ]
+                }
+              )
+            },
+            style: {
+              ...style,
+              paddingTop: 0
+            },
+            renderItem: (tool) => /* @__PURE__ */ jsx49(
+              List4.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__ */ jsx49(
+                  List4.Item.Meta,
+                  {
+                    avatar: /* @__PURE__ */ jsx49(
+                      Avatar6,
+                      {
+                        size: "small",
+                        style: {
+                          backgroundColor: token.colorFillSecondary,
+                          color: token.colorText
+                        },
+                        children: tool.name.charAt(0).toUpperCase()
+                      }
+                    ),
+                    title: /* @__PURE__ */ jsxs30(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          gap: token.marginXS
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx49("span", { children: tool.name }),
+                          tool.needUserApprove && /* @__PURE__ */ jsx49(
+                            Tag8,
+                            {
+                              color: "warning",
+                              style: {
+                                fontSize: "10px",
+                                padding: "2px 6px",
+                                margin: 0,
+                                lineHeight: "1.2"
+                              },
+                              children: "Requires approval"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    description: /* @__PURE__ */ jsx49(
+                      "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
+import { Fragment as Fragment7, jsx as jsx50, jsxs as jsxs31 } from "react/jsx-runtime";
+var useStyles4 = createStyles13(({ 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;
@@ -9754,252 +9902,74 @@ var useStyles4 = createStyles13(({ 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] = useState28(false);
-  const [isFirstCollapse, setIsFirstCollapse] = useState28(false);
-  const [isFlowModalOpen, setIsFlowModalOpen] = useState28(false);
-  const [isSkillFlowModalOpen, setIsSkillFlowModalOpen] = useState28(false);
-  const prevIsCollapsedRef = useRef13(false);
-  const handleToggleCollapse = () => {
-    setMenuCollapsed(!menuCollapsed);
-  };
+  const [isFlowModalOpen, setIsFlowModalOpen] = useState29(false);
+  const [isSkillFlowModalOpen, setIsSkillFlowModalOpen] = useState29(false);
+  const [isToolsModalOpen, setIsToolsModalOpen] = useState29(false);
   const handleSettingsClick = () => {
     setSettingsModalOpen(true);
     onSettingsClick?.();
   };
+  const handleAssistantFlowClick = () => {
+    setIsFlowModalOpen(true);
+  };
   const handleSkillFlowClick = () => {
     setIsSkillFlowModalOpen(true);
   };
-  const isCollapsed = menuCollapsed || sideAppVisible;
-  useEffect20(() => {
-    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__ */ jsxs29(Fragment7, { children: [
-    /* @__PURE__ */ jsxs29(
-      "div",
-      {
-        className: `${styles.sidebar} ${isFirstCollapse ? "firstTimeHighlight" : ""}`,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        children: [
-          /* @__PURE__ */ jsx49(
-            Tooltip10,
-            {
-              title: "Move the mouse over the collapsed sidebar to see the assistants and threads",
-              open: isFirstCollapse,
-              placement: "right",
-              children: isFirstCollapse && /* @__PURE__ */ jsx49("div", { style: { marginTop: "400px" } })
-            }
-          ),
-          !isCollapsed && /* @__PURE__ */ jsxs29(Fragment7, { children: [
-            /* @__PURE__ */ jsxs29("div", { className: styles.content, children: [
-              /* @__PURE__ */ jsxs29("div", { className: styles.section, children: [
-                /* @__PURE__ */ jsxs29("div", { className: styles.sectionTitle, children: [
-                  /* @__PURE__ */ jsx49("span", { children: "Assistants" }),
-                  /* @__PURE__ */ jsx49(
-                    Button21,
-                    {
-                      type: "text",
-                      icon: /* @__PURE__ */ jsx49(ApartmentOutlined, {}),
-                      onClick: () => setIsFlowModalOpen(true),
-                      className: styles.sectionTitleButton,
-                      title: "View Assistant Flow Canvas",
-                      size: "small"
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx49(AssistantList, {})
-              ] }),
-              /* @__PURE__ */ jsx49(Divider4, { className: styles.divider }),
-              enableThreadList && /* @__PURE__ */ jsxs29("div", { className: styles.section, children: [
-                /* @__PURE__ */ jsx49("div", { className: styles.sectionTitle, children: "Threads" }),
-                /* @__PURE__ */ jsx49(
-                  AgentConversations,
-                  {
-                    enableThreadCreation,
-                    enableThreadList
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs29("div", { className: styles.footer, children: [
-              /* @__PURE__ */ jsx49(
-                "button",
-                {
-                  className: styles.actionButton,
-                  onClick: handleToggleCollapse,
-                  title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                  "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                  children: isCollapsed ? /* @__PURE__ */ jsx49(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx49(MenuFoldOutlined, {})
-                }
-              ),
-              /* @__PURE__ */ jsx49(
-                "button",
-                {
-                  className: styles.actionButton,
-                  onClick: handleSkillFlowClick,
-                  title: "Skill Flow Canvas",
-                  "aria-label": "Skill Flow Canvas",
-                  children: /* @__PURE__ */ jsx49(ThunderboltOutlined2, {})
-                }
-              ),
-              /* @__PURE__ */ jsx49(
-                "button",
-                {
-                  className: styles.actionButton,
-                  onClick: handleSettingsClick,
-                  title: "Settings",
-                  "aria-label": "Settings",
-                  children: /* @__PURE__ */ jsx49(SettingOutlined2, {})
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    ),
-    isCollapsed && /* @__PURE__ */ jsxs29(
-      "div",
-      {
-        className: `${styles.hoverOverlay} ${isHovered ? "visible" : ""}`,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        children: [
-          /* @__PURE__ */ jsxs29("div", { className: styles.hoverContent, children: [
-            /* @__PURE__ */ jsxs29("div", { className: styles.section, children: [
-              /* @__PURE__ */ jsxs29("div", { className: styles.sectionTitle, children: [
-                /* @__PURE__ */ jsx49("span", { children: "Assistants" }),
-                /* @__PURE__ */ jsx49(
-                  Button21,
-                  {
-                    type: "text",
-                    icon: /* @__PURE__ */ jsx49(ApartmentOutlined, {}),
-                    onClick: () => setIsFlowModalOpen(true),
-                    className: styles.sectionTitleButton,
-                    title: "View Assistant Flow Canvas",
-                    size: "small"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsx49(AssistantList, {})
-            ] }),
-            /* @__PURE__ */ jsx49(Divider4, { className: styles.divider }),
-            enableThreadList && /* @__PURE__ */ jsxs29("div", { className: styles.section, children: [
-              /* @__PURE__ */ jsx49("div", { className: styles.sectionTitle, children: "Threads" }),
-              /* @__PURE__ */ jsx49(
-                AgentConversations,
-                {
-                  enableThreadCreation,
-                  enableThreadList
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs29("div", { className: styles.footer, children: [
-            /* @__PURE__ */ jsx49(
-              "button",
-              {
-                className: styles.actionButton,
-                onClick: handleToggleCollapse,
-                title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                children: isCollapsed ? /* @__PURE__ */ jsx49(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx49(MenuFoldOutlined, {})
-              }
-            ),
-            /* @__PURE__ */ jsx49(
-              "button",
-              {
-                className: styles.actionButton,
-                onClick: handleSkillFlowClick,
-                title: "Skill Flow Canvas",
-                "aria-label": "Skill Flow Canvas",
-                children: /* @__PURE__ */ jsx49(ThunderboltOutlined2, {})
-              }
-            ),
-            /* @__PURE__ */ jsx49(
-              "button",
-              {
-                className: styles.actionButton,
-                onClick: handleSettingsClick,
-                title: "Settings",
-                "aria-label": "Settings",
-                children: /* @__PURE__ */ jsx49(SettingOutlined2, {})
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsxs31(Fragment7, { children: [
+    /* @__PURE__ */ jsx50("div", { className: styles.sidebar, children: /* @__PURE__ */ jsxs31("div", { className: styles.buttonContainer, children: [
+      /* @__PURE__ */ jsx50(
+        "button",
+        {
+          className: styles.actionButton,
+          onClick: handleAssistantFlowClick,
+          title: "Assistant Flow Canvas",
+          "aria-label": "Assistant Flow Canvas",
+          children: /* @__PURE__ */ jsx50(ApartmentOutlined, {})
+        }
+      ),
+      /* @__PURE__ */ jsx50(
+        "button",
+        {
+          className: styles.actionButton,
+          onClick: handleSkillFlowClick,
+          title: "Skill Flow Canvas",
+          "aria-label": "Skill Flow Canvas",
+          children: /* @__PURE__ */ jsx50(ThunderboltOutlined2, {})
+        }
+      ),
+      /* @__PURE__ */ jsx50(
+        "button",
+        {
+          className: styles.actionButton,
+          onClick: handleToolsClick,
+          title: "Tools List",
+          "aria-label": "Tools List",
+          children: /* @__PURE__ */ jsx50(ToolOutlined3, {})
+        }
+      ),
+      /* @__PURE__ */ jsx50(
+        "button",
+        {
+          className: styles.actionButton,
+          onClick: handleSettingsClick,
+          title: "Settings",
+          "aria-label": "Settings",
+          children: /* @__PURE__ */ jsx50(SettingOutlined2, {})
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx50(
       Modal3,
       {
         destroyOnHidden: true,
@@ -10013,7 +9983,7 @@ var ChatSidebar = ({
           height: "calc(100vh - 120px)",
           padding: 0
         },
-        children: /* @__PURE__ */ jsx49("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx49(
+        children: /* @__PURE__ */ jsx50("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx50(
           AssistantFlow_default,
           {
             onNodeClick: (assistant) => {
@@ -10024,7 +9994,7 @@ var ChatSidebar = ({
         ) })
       }
     ),
-    /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx50(
       Modal3,
       {
         destroyOnHidden: true,
@@ -10038,7 +10008,7 @@ var ChatSidebar = ({
           height: "calc(100vh - 120px)",
           padding: 0
         },
-        children: /* @__PURE__ */ jsx49("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx49(
+        children: /* @__PURE__ */ jsx50("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx50(
           SkillFlow_default,
           {
             onNodeClick: (skill) => {
@@ -10047,19 +10017,45 @@ var ChatSidebar = ({
           }
         ) })
       }
+    ),
+    /* @__PURE__ */ jsx50(
+      Modal3,
+      {
+        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__ */ jsx50("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx50(
+          ToolsList,
+          {
+            onToolSelect: (tool) => {
+              console.log("Tool selected:", tool);
+            }
+          }
+        ) })
+      }
     )
   ] });
 };
 
 // src/components/Chat/LatticeChatView.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var LatticeChatView = (props) => {
+  const shellContext = useContext8(LatticeChatShellContext);
+  const { showSideMenu } = shellContext.config;
   const { assistantId, thread } = useConversationContext();
   const { currentAssistant } = useAssistantContext();
   const {
     config: { baseURL }
   } = useLatticeChatShellContext();
-  return assistantId && thread ? /* @__PURE__ */ jsx50(
+  return assistantId && thread ? /* @__PURE__ */ jsx51(
     AxiomLatticeProvider,
     {
       config: {
@@ -10068,14 +10064,14 @@ var LatticeChatView = (props) => {
         assistantId,
         transport: "sse"
       },
-      children: /* @__PURE__ */ jsx50(
+      children: /* @__PURE__ */ jsx51(
         LatticeChat,
         {
           thread_id: thread?.id,
           assistant_id: assistantId,
           name: currentAssistant?.name,
           description: currentAssistant?.description,
-          menu: /* @__PURE__ */ jsx50(ChatSidebar, {})
+          menu: showSideMenu ? /* @__PURE__ */ jsx51(ChatSidebar, {}) : void 0
         }
       )
     }
@@ -10083,24 +10079,24 @@ var LatticeChatView = (props) => {
 };
 
 // src/components/Chat/SettingsModal.tsx
-import { useState as useState29, useEffect as useEffect21, useRef as useRef14 } from "react";
+import { useState as useState30, useEffect as useEffect21, useRef as useRef13 } from "react";
 import {
   Modal as Modal4,
   Input as Input3,
-  Button as Button22,
+  Button as Button24,
   message as message7,
-  Typography as Typography18,
-  Alert as Alert4,
+  Typography as Typography19,
+  Alert as Alert5,
   Select,
   Switch,
-  Space as Space18,
+  Space as Space19,
   Tabs as Tabs2
 } from "antd";
 import {
   SaveOutlined,
   EnvironmentOutlined,
-  ReloadOutlined as ReloadOutlined3,
-  CheckCircleOutlined as CheckCircleOutlined5,
+  ReloadOutlined as ReloadOutlined4,
+  CheckCircleOutlined as CheckCircleOutlined6,
   ApiOutlined as ApiOutlined2,
   LinkOutlined,
   CheckCircleFilled,
@@ -10109,8 +10105,8 @@ import {
   CloudServerOutlined
 } from "@ant-design/icons";
 import { createStyles as createStyles14 } from "antd-style";
-import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
-var { Text: Text16, Title: Title3 } = Typography18;
+import { Fragment as Fragment8, jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
+var { Text: Text17, Title: Title3 } = Typography19;
 var { TextArea: TextArea3 } = Input3;
 var useStyles5 = createStyles14(({ token, css }) => ({
   //   settingsModal: css`
@@ -10458,12 +10454,12 @@ var SETTINGS_MENU_ITEMS = [
   {
     key: "environment",
     label: "Environment Variables",
-    icon: /* @__PURE__ */ jsx51(EnvironmentOutlined, {})
+    icon: /* @__PURE__ */ jsx52(EnvironmentOutlined, {})
   },
   {
     key: "models",
     label: "Model Configuration",
-    icon: /* @__PURE__ */ jsx51(ApiOutlined2, {})
+    icon: /* @__PURE__ */ jsx52(ApiOutlined2, {})
   }
 ];
 var SettingsModal = ({
@@ -10472,7 +10468,7 @@ var SettingsModal = ({
 }) => {
   const { styles } = useStyles5();
   const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
-  const [connections, setConnections] = useState29(() => {
+  const [connections, setConnections] = useState30(() => {
     if (typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem("lattice_server_connections");
@@ -10495,21 +10491,21 @@ var SettingsModal = ({
     }
     return [];
   });
-  const [serverConfigs, setServerConfigs] = useState29({});
-  const connectionsRef = useRef14(connections);
+  const [serverConfigs, setServerConfigs] = useState30({});
+  const connectionsRef = useRef13(connections);
   useEffect21(() => {
     connectionsRef.current = connections;
   }, [connections]);
-  const [activeTabKey, setActiveTabKey] = useState29(
+  const [activeTabKey, setActiveTabKey] = useState30(
     connections.length > 0 ? connections[0].id : ""
   );
-  const [activeMenu, setActiveMenu] = useState29("environment");
-  const [loading, setLoading] = useState29(false);
-  const [showAddServerModal, setShowAddServerModal] = useState29(false);
-  const [newServerUrl, setNewServerUrl] = useState29("");
-  const [newServerName, setNewServerName] = useState29("");
-  const [newServerApiKey, setNewServerApiKey] = useState29("");
-  const [addingServer, setAddingServer] = useState29(false);
+  const [activeMenu, setActiveMenu] = useState30("environment");
+  const [loading, setLoading] = useState30(false);
+  const [showAddServerModal, setShowAddServerModal] = useState30(false);
+  const [newServerUrl, setNewServerUrl] = useState30("");
+  const [newServerName, setNewServerName] = useState30("");
+  const [newServerApiKey, setNewServerApiKey] = useState30("");
+  const [addingServer, setAddingServer] = useState30(false);
   const saveConnections = (newConnections) => {
     setConnections(newConnections);
     if (typeof window !== "undefined") {
@@ -10909,25 +10905,25 @@ var SettingsModal = ({
         }
       }));
     };
-    return /* @__PURE__ */ jsxs30("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ jsx51(
-        Alert4,
+    return /* @__PURE__ */ jsxs32("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx52(
+        Alert5,
         {
           message: "Configuration Effect",
-          description: /* @__PURE__ */ jsxs30("div", { children: [
-            /* @__PURE__ */ jsxs30("div", { style: { marginBottom: 8 }, children: [
-              /* @__PURE__ */ jsx51(
-                CheckCircleOutlined5,
+          description: /* @__PURE__ */ jsxs32("div", { children: [
+            /* @__PURE__ */ jsxs32("div", { style: { marginBottom: 8 }, children: [
+              /* @__PURE__ */ jsx52(
+                CheckCircleOutlined6,
                 {
                   style: { color: "#52c41a", marginRight: 8 }
                 }
               ),
-              /* @__PURE__ */ jsx51("strong", { children: "Immediately effective:" }),
+              /* @__PURE__ */ jsx52("strong", { children: "Immediately effective:" }),
               " QUEUE_SERVICE_TYPE, REDIS_URL, REDIS_PASSWORD, QUEUE_NAME"
             ] }),
-            /* @__PURE__ */ jsxs30("div", { children: [
-              /* @__PURE__ */ jsx51(ReloadOutlined3, { style: { color: "#faad14", marginRight: 8 } }),
-              /* @__PURE__ */ jsx51("strong", { children: "Requires restart:" }),
+            /* @__PURE__ */ jsxs32("div", { children: [
+              /* @__PURE__ */ jsx52(ReloadOutlined4, { style: { color: "#faad14", marginRight: 8 } }),
+              /* @__PURE__ */ jsx52("strong", { children: "Requires restart:" }),
               " PORT (server must be restarted to change port)"
             ] })
           ] }),
@@ -10936,8 +10932,8 @@ var SettingsModal = ({
           className: styles.alertCard
         }
       ),
-      /* @__PURE__ */ jsx51("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx51(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__ */ jsx51(
+      /* @__PURE__ */ jsx52("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx52(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__ */ jsx52(
         TextArea3,
         {
           value: config.envText,
@@ -11014,10 +11010,10 @@ QUEUE_NAME=tasks`,
         }));
       }
     };
-    return /* @__PURE__ */ jsxs30("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ jsx51("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx51(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__ */ jsxs30("div", { className: styles.card, children: [
-        /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsxs32("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx52("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx52(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__ */ jsxs32("div", { className: styles.card, children: [
+        /* @__PURE__ */ jsxs32(
           "div",
           {
             style: {
@@ -11029,13 +11025,13 @@ QUEUE_NAME=tasks`,
               borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
             },
             children: [
-              /* @__PURE__ */ jsxs30("div", { children: [
-                /* @__PURE__ */ jsxs30(Text16, { strong: true, style: { fontSize: 16 }, children: [
+              /* @__PURE__ */ jsxs32("div", { children: [
+                /* @__PURE__ */ jsxs32(Text17, { strong: true, style: { fontSize: 16 }, children: [
                   "Model ",
                   index + 1
                 ] }),
-                model.key && /* @__PURE__ */ jsxs30(
-                  Text16,
+                model.key && /* @__PURE__ */ jsxs32(
+                  Text17,
                   {
                     type: "secondary",
                     style: { marginLeft: 8, fontSize: 12 },
@@ -11047,8 +11043,8 @@ QUEUE_NAME=tasks`,
                   }
                 )
               ] }),
-              config.models.length > 1 && /* @__PURE__ */ jsx51(
-                Button22,
+              config.models.length > 1 && /* @__PURE__ */ jsx52(
+                Button24,
                 {
                   type: "text",
                   danger: true,
@@ -11064,10 +11060,10 @@ QUEUE_NAME=tasks`,
             ]
           }
         ),
-        /* @__PURE__ */ jsxs30(Space18, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ jsxs30("div", { children: [
-            /* @__PURE__ */ jsx51(Text16, { className: styles.formLabel, children: "Key *" }),
-            /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsxs32(Space19, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs32("div", { children: [
+            /* @__PURE__ */ jsx52(Text17, { className: styles.formLabel, children: "Key *" }),
+            /* @__PURE__ */ jsx52(
               Input3,
               {
                 placeholder: "e.g., default, gpt-4, claude",
@@ -11076,11 +11072,11 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx51(Text16, { className: styles.formDescription, children: "Unique identifier for this model" })
+            /* @__PURE__ */ jsx52(Text17, { className: styles.formDescription, children: "Unique identifier for this model" })
           ] }),
-          /* @__PURE__ */ jsxs30("div", { children: [
-            /* @__PURE__ */ jsx51(Text16, { className: styles.formLabel, children: "Provider *" }),
-            /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsxs32("div", { children: [
+            /* @__PURE__ */ jsx52(Text17, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ jsx52(
               Select,
               {
                 style: { width: "100%", height: 40 },
@@ -11096,9 +11092,9 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs30("div", { children: [
-            /* @__PURE__ */ jsx51(Text16, { className: styles.formLabel, children: "Model Name *" }),
-            /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsxs32("div", { children: [
+            /* @__PURE__ */ jsx52(Text17, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ jsx52(
               Input3,
               {
                 placeholder: "e.g., gpt-4, claude-3-opus, kimi-k2-250905",
@@ -11108,9 +11104,9 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs30("div", { children: [
-            /* @__PURE__ */ jsx51(Text16, { className: styles.formLabel, children: "API Key" }),
-            /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsxs32("div", { children: [
+            /* @__PURE__ */ jsx52(Text17, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ jsx52(
               Input3.Password,
               {
                 placeholder: "Enter your API key",
@@ -11119,11 +11115,11 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx51(Text16, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+            /* @__PURE__ */ jsx52(Text17, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
           ] }),
-          /* @__PURE__ */ jsxs30("div", { children: [
-            /* @__PURE__ */ jsx51(Text16, { className: styles.formLabel, children: "Base URL" }),
-            /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsxs32("div", { children: [
+            /* @__PURE__ */ jsx52(Text17, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ jsx52(
               Input3,
               {
                 placeholder: "e.g., https://api.openai.com/v1",
@@ -11132,22 +11128,22 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx51(Text16, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+            /* @__PURE__ */ jsx52(Text17, { className: styles.formDescription, children: "Optional custom base URL for the API" })
           ] }),
-          /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsxs30(Space18, { children: [
-            /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx52("div", { children: /* @__PURE__ */ jsxs32(Space19, { children: [
+            /* @__PURE__ */ jsx52(
               Switch,
               {
                 checked: model.streaming,
                 onChange: (checked) => handleModelChange(index, "streaming", checked)
               }
             ),
-            /* @__PURE__ */ jsx51(Text16, { children: "Enable Streaming" })
+            /* @__PURE__ */ jsx52(Text17, { children: "Enable Streaming" })
           ] }) }),
-          /* @__PURE__ */ jsxs30("div", { style: { display: "flex", gap: 20 }, children: [
-            /* @__PURE__ */ jsxs30("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx51(Text16, { className: styles.formLabel, children: "Max Tokens" }),
-              /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsxs32("div", { style: { display: "flex", gap: 20 }, children: [
+            /* @__PURE__ */ jsxs32("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx52(Text17, { className: styles.formLabel, children: "Max Tokens" }),
+              /* @__PURE__ */ jsx52(
                 Input3,
                 {
                   type: "number",
@@ -11162,9 +11158,9 @@ QUEUE_NAME=tasks`,
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs30("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx51(Text16, { className: styles.formLabel, children: "Temperature" }),
-              /* @__PURE__ */ jsx51(
+            /* @__PURE__ */ jsxs32("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx52(Text17, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ jsx52(
                 Input3,
                 {
                   type: "number",
@@ -11183,8 +11179,8 @@ QUEUE_NAME=tasks`,
           ] })
         ] })
       ] }, index)),
-      /* @__PURE__ */ jsx51(
-        Button22,
+      /* @__PURE__ */ jsx52(
+        Button24,
         {
           type: "dashed",
           onClick: handleAddModel,
@@ -11211,8 +11207,8 @@ QUEUE_NAME=tasks`,
   );
   const currentConnection = connections.find((c) => c.id === activeTabKey);
   const renderTabLabel = (connection) => {
-    return /* @__PURE__ */ jsxs30("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx51(
+    return /* @__PURE__ */ jsxs32("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx52(
         CloudServerOutlined,
         {
           style: {
@@ -11221,14 +11217,14 @@ QUEUE_NAME=tasks`,
           }
         }
       ),
-      /* @__PURE__ */ jsx51("span", { children: connection.name }),
-      connection.connected && /* @__PURE__ */ jsx51(
+      /* @__PURE__ */ jsx52("span", { children: connection.name }),
+      connection.connected && /* @__PURE__ */ jsx52(
         CheckCircleFilled,
         {
           style: { color: "#52c41a", fontSize: 12, marginLeft: 8 }
         }
       ),
-      connection.error && !connection.connecting && /* @__PURE__ */ jsx51(
+      connection.error && !connection.connecting && /* @__PURE__ */ jsx52(
         CloseCircleFilled,
         {
           style: { color: "#ff4d4f", fontSize: 12, marginLeft: 8 }
@@ -11239,35 +11235,35 @@ QUEUE_NAME=tasks`,
   const tabItems = connections.map((connection) => ({
     key: connection.id,
     label: renderTabLabel(connection),
-    children: /* @__PURE__ */ jsx51("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx51(Fragment8, { children: /* @__PURE__ */ jsxs30("div", { style: { display: "flex", height: "100%" }, children: [
-      /* @__PURE__ */ jsx51("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs30(
+    children: /* @__PURE__ */ jsx52("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx52(Fragment8, { children: /* @__PURE__ */ jsxs32("div", { style: { display: "flex", height: "100%" }, children: [
+      /* @__PURE__ */ jsx52("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs32(
         "div",
         {
           className: `${styles.menuItem} ${activeMenu === item.key ? "active" : ""}`,
           onClick: () => setActiveMenu(item.key),
           children: [
-            /* @__PURE__ */ jsx51("span", { className: styles.menuItemIcon, children: item.icon }),
-            /* @__PURE__ */ jsx51("span", { className: styles.menuItemText, children: item.label })
+            /* @__PURE__ */ jsx52("span", { className: styles.menuItemIcon, children: item.icon }),
+            /* @__PURE__ */ jsx52("span", { className: styles.menuItemText, children: item.label })
           ]
         },
         item.key
       )) }),
-      /* @__PURE__ */ jsxs30("div", { className: styles.content, children: [
-        /* @__PURE__ */ jsxs30("div", { className: styles.contentHeader, children: [
-          /* @__PURE__ */ jsxs30("div", { className: styles.contentHeaderLeft, children: [
-            /* @__PURE__ */ jsx51(Title3, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
-            /* @__PURE__ */ jsxs30(Text16, { className: styles.contentDescription, children: [
+      /* @__PURE__ */ jsxs32("div", { className: styles.content, children: [
+        /* @__PURE__ */ jsxs32("div", { className: styles.contentHeader, children: [
+          /* @__PURE__ */ jsxs32("div", { className: styles.contentHeaderLeft, children: [
+            /* @__PURE__ */ jsx52(Title3, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
+            /* @__PURE__ */ jsxs32(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__ */ jsxs30("div", { className: styles.contentHeaderRight, children: [
-            /* @__PURE__ */ jsx51(Button22, { onClick: onClose, children: "Cancel" }),
-            /* @__PURE__ */ jsx51(
-              Button22,
+          /* @__PURE__ */ jsxs32("div", { className: styles.contentHeaderRight, children: [
+            /* @__PURE__ */ jsx52(Button24, { onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx52(
+              Button24,
               {
                 type: "primary",
-                icon: /* @__PURE__ */ jsx51(SaveOutlined, {}),
+                icon: /* @__PURE__ */ jsx52(SaveOutlined, {}),
                 onClick: handleSave,
                 loading,
                 children: "Save Configuration"
@@ -11275,9 +11271,9 @@ QUEUE_NAME=tasks`,
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx51("div", { className: styles.contentBody, children: renderContent(connection.id) })
+        /* @__PURE__ */ jsx52("div", { className: styles.contentBody, children: renderContent(connection.id) })
       ] })
-    ] }) }) : /* @__PURE__ */ jsx51(
+    ] }) }) : /* @__PURE__ */ jsx52(
       "div",
       {
         style: {
@@ -11289,29 +11285,29 @@ QUEUE_NAME=tasks`,
           gap: 16,
           padding: 48
         },
-        children: connection.connecting ? /* @__PURE__ */ jsxs30(Fragment8, { children: [
-          /* @__PURE__ */ jsx51(LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
-          /* @__PURE__ */ jsx51(Title3, { level: 4, children: "Connecting..." }),
-          /* @__PURE__ */ jsxs30(Text16, { type: "secondary", style: { textAlign: "center" }, children: [
+        children: connection.connecting ? /* @__PURE__ */ jsxs32(Fragment8, { children: [
+          /* @__PURE__ */ jsx52(LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
+          /* @__PURE__ */ jsx52(Title3, { level: 4, children: "Connecting..." }),
+          /* @__PURE__ */ jsxs32(Text17, { type: "secondary", style: { textAlign: "center" }, children: [
             "Connecting to ",
             connection.url
           ] })
-        ] }) : /* @__PURE__ */ jsxs30(Fragment8, { children: [
-          /* @__PURE__ */ jsx51(LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
-          /* @__PURE__ */ jsx51(Title3, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
-          /* @__PURE__ */ jsx51(
-            Text16,
+        ] }) : /* @__PURE__ */ jsxs32(Fragment8, { children: [
+          /* @__PURE__ */ jsx52(LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
+          /* @__PURE__ */ jsx52(Title3, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
+          /* @__PURE__ */ jsx52(
+            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__ */ jsx51(
-            Button22,
+          /* @__PURE__ */ jsx52(
+            Button24,
             {
               type: "primary",
-              icon: /* @__PURE__ */ jsx51(LinkOutlined, {}),
+              icon: /* @__PURE__ */ jsx52(LinkOutlined, {}),
               onClick: () => checkConnection(connection.id),
               loading: connection.connecting,
               style: { marginTop: 16 },
@@ -11323,8 +11319,8 @@ QUEUE_NAME=tasks`,
     ) }),
     closable: connections.length > 1
   }));
-  return /* @__PURE__ */ jsxs30(Fragment8, { children: [
-    /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs32(Fragment8, { children: [
+    /* @__PURE__ */ jsx52(
       Modal4,
       {
         open,
@@ -11333,7 +11329,7 @@ QUEUE_NAME=tasks`,
         width: "80%",
         footer: null,
         title: "Settings",
-        children: /* @__PURE__ */ jsx51("div", { children: /* @__PURE__ */ jsx51(
+        children: /* @__PURE__ */ jsx52("div", { children: /* @__PURE__ */ jsx52(
           Tabs2,
           {
             activeKey: activeTabKey,
@@ -11347,7 +11343,7 @@ QUEUE_NAME=tasks`,
               }
             },
             items: tabItems,
-            addIcon: /* @__PURE__ */ jsxs30(
+            addIcon: /* @__PURE__ */ jsxs32(
               "div",
               {
                 style: {
@@ -11357,8 +11353,8 @@ QUEUE_NAME=tasks`,
                   padding: "4px 8px"
                 },
                 children: [
-                  /* @__PURE__ */ jsx51(PlusOutlined5, {}),
-                  /* @__PURE__ */ jsx51("span", { children: "Add Server" })
+                  /* @__PURE__ */ jsx52(PlusOutlined5, {}),
+                  /* @__PURE__ */ jsx52("span", { children: "Add Server" })
                 ]
               }
             )
@@ -11366,7 +11362,7 @@ QUEUE_NAME=tasks`,
         ) })
       }
     ),
-    /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx52(
       Modal4,
       {
         title: "Add New Server",
@@ -11380,10 +11376,10 @@ QUEUE_NAME=tasks`,
         },
         confirmLoading: addingServer,
         className: styles.addServerModal,
-        children: /* @__PURE__ */ jsxs30(Space18, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ jsxs30("div", { children: [
-            /* @__PURE__ */ jsx51(Text16, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
-            /* @__PURE__ */ jsx51(
+        children: /* @__PURE__ */ jsxs32(Space19, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs32("div", { children: [
+            /* @__PURE__ */ jsx52(Text17, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
+            /* @__PURE__ */ jsx52(
               Input3,
               {
                 placeholder: "e.g., Production Server",
@@ -11392,11 +11388,11 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx51(Text16, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+            /* @__PURE__ */ jsx52(Text17, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
           ] }),
-          /* @__PURE__ */ jsxs30("div", { children: [
-            /* @__PURE__ */ jsx51(Text16, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
-            /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsxs32("div", { children: [
+            /* @__PURE__ */ jsx52(Text17, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ jsx52(
               Input3,
               {
                 placeholder: "e.g., http://localhost:4001",
@@ -11405,11 +11401,11 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx51(Text16, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+            /* @__PURE__ */ jsx52(Text17, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
           ] }),
-          /* @__PURE__ */ jsxs30("div", { children: [
-            /* @__PURE__ */ jsx51(Text16, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
-            /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsxs32("div", { children: [
+            /* @__PURE__ */ jsx52(Text17, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ jsx52(
               Input3.Password,
               {
                 placeholder: "Optional: Enter API key for authentication",
@@ -11418,7 +11414,7 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx51(Text16, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+            /* @__PURE__ */ jsx52(Text17, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
           ] })
         ] })
       }
@@ -11427,10 +11423,10 @@ QUEUE_NAME=tasks`,
 };
 
 // src/components/Chat/AgentServerSetting.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var AgentServerSetting = () => {
   const { settingsModalOpen, setSettingsModalOpen } = useLatticeChatShellContext();
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     SettingsModal,
     {
       open: settingsModalOpen,
@@ -11440,11 +11436,12 @@ var AgentServerSetting = () => {
 };
 
 // src/components/Chat/LatticeChatShell.tsx
-import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
 var LatticeChatShell = (props) => {
-  return /* @__PURE__ */ jsxs31(LatticeChatShellContextProvider, { ...props, children: [
-    /* @__PURE__ */ jsx53(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ jsx53(ConversationContextProvider, { children: /* @__PURE__ */ jsx53(LatticeChatView, {}) }) }),
-    /* @__PURE__ */ jsx53(AgentServerSetting, {})
+  const { initialConfig } = props;
+  return /* @__PURE__ */ jsxs33(LatticeChatShellContextProvider, { ...props, children: [
+    /* @__PURE__ */ jsx54(AssistantContextProvider, { autoLoad: true, initialAssistantId: initialConfig?.assistantId, children: /* @__PURE__ */ jsx54(ConversationContextProvider, { children: /* @__PURE__ */ jsx54(LatticeChatView, {}) }) }),
+    /* @__PURE__ */ jsx54(AgentServerSetting, {})
   ] });
 };
 export {