@axiom-lattice/react-sdk 2.1.23 → 2.1.24

package/dist/index.js

@@ -35,6 +35,8 @@ __export(index_exports, {
   AgentThreadProvider: () => AgentThreadProvider,
   AssistantContext: () => AssistantContext,
   AssistantContextProvider: () => AssistantContextProvider,
+  AssistantFlow: () => AssistantFlow_default,
+  AssistantNode: () => AssistantNode_default,
   AxiomLatticeProvider: () => AxiomLatticeProvider,
   ChatUIContext: () => ChatUIContext,
   ChatUIContextProvider: () => ChatUIContextProvider,
@@ -51,6 +53,8 @@ __export(index_exports, {
   MDViewFormItem: () => MDViewFormItem,
   ScheduleButton: () => ScheduleButton,
   SideAppViewBrowser: () => SideAppViewBrowser,
+  SkillFlow: () => SkillFlow_default,
+  SkillNode: () => SkillNode_default,
   getElement: () => getElement,
   regsiterElement: () => regsiterElement,
   useAgentChat: () => useAgentChat,
@@ -198,7 +202,7 @@ function useChat(threadId, options = {}) {
         stopStreamingRef.current = null;
       }
       const { input, command, streaming = true } = data;
-      const { message: message6, files, ...rest } = input || {};
+      const { message: message8, files, ...rest } = input || {};
       setState((prev) => ({
         ...prev,
         isLoading: true,
@@ -207,7 +211,7 @@ function useChat(threadId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message6 || command?.resume?.message || "",
+        content: message8 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -536,7 +540,7 @@ function AgentThreadProvider({
         stopStreamingRef.current = null;
       }
       const { input, command, streaming = true } = data;
-      const { message: message6, files, ...rest } = input || {};
+      const { message: message8, files, ...rest } = input || {};
       setState((prev) => ({
         ...prev,
         isLoading: true,
@@ -544,7 +548,7 @@ function AgentThreadProvider({
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message6 || command?.resume?.message || "",
+        content: message8 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -1890,7 +1894,7 @@ var import_icons = require("@ant-design/icons");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var { Text } = import_antd2.Typography;
 var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = true }) => {
-  const { dataSource, message: message6 } = data ?? {};
+  const { dataSource, message: message8 } = data ?? {};
   const [expandedRowKeys, setExpandedRowKeys] = (0, import_react9.useState)([]);
   const { openSideApp } = useChatUIContext();
   const processedData = dataSource?.map((item, index) => ({
@@ -1974,7 +1978,7 @@ var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = t
     {
       size: "small",
       title: () => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_antd2.Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_antd2.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { strong: true, style: { fontSize: 16 }, children: message6 || "" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_antd2.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Text, { strong: true, style: { fontSize: 16 }, children: message8 || "" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_antd2.Space, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             import_antd2.Button,
@@ -1995,8 +1999,8 @@ var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = t
               onClick: () => {
                 openSideApp({
                   component_key: "generic_data_table",
-                  message: message6 || "",
-                  data: { dataSource, message: message6 }
+                  message: message8 || "",
+                  data: { dataSource, message: message8 }
                 });
               },
               children: [
@@ -2152,11 +2156,11 @@ var ConfirmFeedback = ({
   data,
   interactive = true
 }) => {
-  const { message: message6, type, config, feedback, options } = data ?? {};
+  const { message: message8, type, config, feedback, options } = data ?? {};
   const { sendMessage } = useAgentChat();
   const [clicked, setClicked] = (0, import_react11.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_antd3.Space, { direction: "vertical", style: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MDResponse, { content: message6 }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MDResponse, { content: message8 }),
     options ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_antd3.Space, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       import_antd3.Button,
       {
@@ -3281,7 +3285,7 @@ var AttachmentsCard = ({
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text15 } = import_antd9.Typography;
+  const { Text: Text18 } = import_antd9.Typography;
   const [showAll, setShowAll] = (0, import_react14.useState)(false);
   const { openSideApp } = useChatUIContext();
   const getStyles = () => {
@@ -3356,7 +3360,7 @@ var AttachmentsCard = ({
     );
   };
   const renderFileDescription = (item) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd9.Space, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_antd9.Space, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    Text15,
+    Text18,
     {
       type: "secondary",
       style: {
@@ -3428,7 +3432,7 @@ var AttachmentsCard = ({
         }
       ),
       item.files && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text15, { type: "secondary", style: { fontSize: "12px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text18, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
@@ -4078,7 +4082,7 @@ var import_ErrorBoundary = __toESM(require("antd/es/alert/ErrorBoundary"));
 var import_react17 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var LazyBubble = ({
-  message: message6,
+  message: message8,
   renderContent,
   autoLoadRightPanel
 }) => {
@@ -4109,10 +4113,10 @@ var LazyBubble = ({
     autoLoadRightPanel?.();
   }, []);
   const getPlaceholder = () => {
-    const estimatedHeight = message6.content ? Math.min(100, message6.content.length / 5) : 100;
+    const estimatedHeight = message8.content ? Math.min(100, message8.content.length / 5) : 100;
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message6) : getPlaceholder() }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_ErrorBoundary.default, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message8) : getPlaceholder() }) });
 };
 var MemoizedBubbleList = (0, import_react17.memo)(
   ({
@@ -4143,8 +4147,8 @@ var MessageList = ({
       messageLengthRef.current = messages?.length;
     }
   }, [messages?.length]);
-  const renderContent = (0, import_react17.useCallback)((message6) => {
-    const { content } = message6;
+  const renderContent = (0, import_react17.useCallback)((message8) => {
+    const { content } = message8;
     try {
       const json = JSON.parse(content);
       if (json.action && json.message) {
@@ -4152,7 +4156,7 @@ var MessageList = ({
       }
     } catch (error) {
     }
-    const tool_calls_md = message6.tool_calls?.map((tool_call) => {
+    const tool_calls_md = message8.tool_calls?.map((tool_call) => {
       return `\`\`\`tool_call
 ${JSON.stringify(tool_call)}
 \`\`\``;
@@ -4161,17 +4165,17 @@ ${JSON.stringify(tool_call)}
     return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_antd15.Space, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MDResponse, { content: content_md }) });
   }, []);
   const items = (0, import_react17.useMemo)(
-    () => messages.map((message6, index) => ({
-      key: message6.id,
-      role: message6.role,
+    () => messages.map((message8, index) => ({
+      key: message8.id,
+      role: message8.role,
       typing: false,
       content: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         LazyBubble,
         {
-          message: message6,
+          message: message8,
           renderContent,
           autoLoadRightPanel: () => {
-            const { content, role: role2 } = message6;
+            const { content, role: role2 } = message8;
             const isNewAddedMessage = messageLengthRef.current > 1 && messageLengthRef.current + 1 === messages.length;
             if (index === messages.length - 1 && isNewAddedMessage && role2 === "ai") {
               try {
@@ -6304,53 +6308,2713 @@ var AgentConversations = () => {
 };
 
 // src/components/Chat/ChatSidebar.tsx
+var import_react36 = require("react");
+var import_antd33 = require("antd");
+var import_icons20 = require("@ant-design/icons");
+
+// src/components/Chat/AssistantList.tsx
+var import_x7 = require("@ant-design/x");
+var import_antd27 = require("antd");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var AssistantList = () => {
+  const { token } = import_antd27.theme.useToken();
+  const { assistants, selectAssistant, currentAssistant } = useAssistantContext();
+  const style = {
+    width: "100%",
+    background: "transparent",
+    borderRadius: token.borderRadius
+  };
+  const items = assistants.map((assistant) => ({
+    key: assistant.id,
+    label: assistant.name,
+    icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      import_antd27.Avatar,
+      {
+        size: "small",
+        style: {
+          backgroundColor: token.colorFillSecondary,
+          color: token.colorText
+        },
+        children: assistant.name.charAt(0).toUpperCase()
+      }
+    )
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    import_x7.Conversations,
+    {
+      items,
+      activeKey: currentAssistant?.id,
+      style,
+      onActiveChange: (key) => {
+        selectAssistant(key);
+      }
+    }
+  );
+};
+
+// src/components/Chat/ChatSidebar.tsx
+var import_antd_style12 = require("antd-style");
+
+// src/components/Chat/AssistantFlow.tsx
+var import_react29 = require("react");
+var import_react30 = require("@xyflow/react");
+var import_style = require("@xyflow/react/dist/style.css");
+
+// src/components/Chat/AssistantNode.tsx
 var import_react27 = require("react");
+var import_react28 = require("@xyflow/react");
 var import_antd28 = require("antd");
 var import_icons16 = require("@ant-design/icons");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var { Text: Text14 } = import_antd28.Typography;
+var getBadgeColor = (id) => {
+  const colors = [
+    "#1890ff",
+    // Blue
+    "#52c41a",
+    // Green
+    "#faad14",
+    // Orange
+    "#f5222d",
+    // Red
+    "#722ed1",
+    // Purple
+    "#13c2c2",
+    // Cyan
+    "#eb2f96",
+    // Magenta
+    "#fa8c16"
+    // Orange Red
+  ];
+  let hash = 0;
+  for (let i = 0; i < id.length; i++) {
+    hash = id.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+};
+var AssistantNode = ({
+  data
+}) => {
+  const { token } = import_antd28.theme.useToken();
+  if (!data) {
+    return null;
+  }
+  const { assistant, onClick } = data;
+  if (!assistant) {
+    return null;
+  }
+  const badgeColor = getBadgeColor(assistant.id);
+  const initials = assistant.name?.split(" ").map((n) => n.charAt(0)).join("").toUpperCase().slice(0, 2) || "A";
+  const { modelKey, tools, agentType, prompt, subAgents } = (0, import_react27.useMemo)(() => {
+    if (!assistant.graphDefinition) {
+      return {
+        modelKey: void 0,
+        tools: [],
+        agentType: void 0,
+        prompt: void 0,
+        subAgents: []
+      };
+    }
+    try {
+      const graphDef = typeof assistant.graphDefinition === "string" ? JSON.parse(assistant.graphDefinition) : assistant.graphDefinition;
+      return {
+        modelKey: graphDef.modelKey || graphDef.model,
+        tools: graphDef.tools || [],
+        agentType: graphDef.type,
+        prompt: graphDef.prompt,
+        subAgents: graphDef.subAgents || []
+      };
+    } catch (error) {
+      return {
+        modelKey: void 0,
+        tools: [],
+        agentType: void 0,
+        prompt: void 0,
+        subAgents: []
+      };
+    }
+  }, [assistant.graphDefinition]);
+  const getAgentTypeLabel = (type) => {
+    if (!type) return "";
+    const typeMap = {
+      react: "REACT",
+      deep_agent: "DEEP AGENT",
+      plan_execute: "PLAN EXECUTE",
+      sequential: "SEQUENTIAL"
+    };
+    return typeMap[type] || type.toUpperCase();
+  };
+  const handleCopy = (text) => {
+    navigator.clipboard.writeText(text);
+  };
+  const detailCardContent = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "div",
+    {
+      style: {
+        width: 480,
+        maxHeight: "80vh",
+        overflowY: "auto",
+        padding: 16
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              marginBottom: 16
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    marginBottom: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                      Text14,
+                      {
+                        strong: true,
+                        style: {
+                          fontSize: 18,
+                          fontWeight: 600,
+                          color: token.colorText
+                        },
+                        children: assistant.name
+                      }
+                    ),
+                    agentType && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                      import_antd28.Tag,
+                      {
+                        color: "purple",
+                        style: {
+                          margin: 0,
+                          fontSize: 10,
+                          padding: "2px 8px",
+                          fontWeight: 600
+                        },
+                        children: getAgentTypeLabel(agentType)
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    Text14,
+                    {
+                      style: {
+                        fontSize: 11,
+                        color: token.colorTextTertiary,
+                        fontFamily: "monospace"
+                      },
+                      children: `>_ ${assistant.id}`
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        assistant.description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          Text14,
+          {
+            style: {
+              fontSize: 12,
+              color: token.colorText,
+              lineHeight: 1.6,
+              fontStyle: "italic"
+            },
+            children: [
+              '"',
+              assistant.description,
+              '"'
+            ]
+          }
+        ) }),
+        modelKey && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                marginBottom: 8
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  import_icons16.SettingOutlined,
+                  {
+                    style: {
+                      fontSize: 14,
+                      color: token.colorTextSecondary
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  Text14,
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: token.colorTextSecondary,
+                      fontWeight: 500
+                    },
+                    children: "Model Engine"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_antd28.Tag,
+            {
+              color: "blue",
+              style: {
+                fontSize: 11,
+                padding: "4px 12px"
+              },
+              children: modelKey
+            }
+          )
+        ] }),
+        prompt && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                marginBottom: 8
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  import_icons16.CodeOutlined,
+                  {
+                    style: {
+                      fontSize: 14,
+                      color: token.colorTextSecondary
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  Text14,
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: token.colorTextSecondary,
+                      fontWeight: 600,
+                      letterSpacing: 0.5
+                    },
+                    children: "SYSTEM PROMPT"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            "div",
+            {
+              style: {
+                padding: 12,
+                background: token.colorFillTertiary,
+                border: `1px solid ${token.colorBorderSecondary}`,
+                borderRadius: 4,
+                maxHeight: 200,
+                overflowY: "auto"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                Text14,
+                {
+                  style: {
+                    fontSize: 11,
+                    color: token.colorText,
+                    lineHeight: 1.6,
+                    whiteSpace: "pre-wrap"
+                  },
+                  children: prompt
+                }
+              )
+            }
+          )
+        ] }),
+        tools && tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                marginBottom: 8
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  import_icons16.ToolOutlined,
+                  {
+                    style: {
+                      fontSize: 14,
+                      color: token.colorTextSecondary
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                  Text14,
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: token.colorTextSecondary,
+                      fontWeight: 500
+                    },
+                    children: [
+                      "Available Tools (",
+                      tools.length,
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_antd28.Space, { size: [8, 8], wrap: true, children: tools.map((tool, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_antd28.Tag,
+            {
+              color: "blue",
+              style: {
+                fontSize: 11,
+                padding: "4px 12px"
+              },
+              children: tool.replace(/_/g, " ")
+            },
+            index
+          )) })
+        ] }),
+        subAgents && subAgents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                marginBottom: 8
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  import_icons16.BranchesOutlined,
+                  {
+                    style: {
+                      fontSize: 14,
+                      color: token.colorTextSecondary
+                    }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                  Text14,
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: token.colorTextSecondary,
+                      fontWeight: 500
+                    },
+                    children: [
+                      "Sub-Agent Architecture (",
+                      subAgents.length,
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_antd28.Space, { size: [8, 8], wrap: true, children: subAgents.map((subAgent, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            import_antd28.Tag,
+            {
+              style: {
+                fontSize: 11,
+                padding: "4px 12px",
+                backgroundColor: token.colorFillTertiary,
+                color: token.colorText,
+                border: `1px solid ${token.colorBorderSecondary}`
+              },
+              children: `> ${subAgent}`
+            },
+            index
+          )) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_antd28.Divider, { style: { margin: "16px 0" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_antd28.Button,
+                {
+                  type: "primary",
+                  block: true,
+                  onClick: () => onClick?.(assistant),
+                  style: {
+                    flex: 1
+                  },
+                  children: "Configure Agent"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_antd28.Button,
+                {
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons16.CopyOutlined, {}),
+                  onClick: () => handleCopy(assistant.id),
+                  title: "\u590D\u5236 ID"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "div",
+    {
+      style: {
+        padding: 4
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react28.Handle, { type: "target", position: import_react28.Position.Top }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          "div",
+          {
+            onClick: () => onClick?.(assistant),
+            style: {
+              width: 260,
+              minHeight: 180,
+              background: token.colorBgContainer,
+              borderRadius: 8,
+              boxShadow: `0 1px 4px rgba(0, 0, 0, 0.08)`,
+              cursor: onClick ? "pointer" : "default",
+              overflow: "hidden",
+              transition: "all 0.2s ease",
+              position: "relative",
+              border: `1px solid ${token.colorBorder}`,
+              display: "flex",
+              flexDirection: "column"
+            },
+            onMouseEnter: (e) => {
+              if (onClick) {
+                e.currentTarget.style.transform = "translateY(-2px)";
+                e.currentTarget.style.boxShadow = `0 2px 8px rgba(0, 0, 0, 0.12)`;
+              }
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.transform = "translateY(0)";
+              e.currentTarget.style.boxShadow = `0 1px 4px rgba(0, 0, 0, 0.08)`;
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_antd28.Popover,
+                {
+                  content: detailCardContent,
+                  title: null,
+                  trigger: "hover",
+                  placement: "rightTop",
+                  overlayStyle: {
+                    maxWidth: "none"
+                  },
+                  overlayInnerStyle: {
+                    padding: 0
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    "div",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                      },
+                      style: {
+                        position: "absolute",
+                        top: 8,
+                        right: 8,
+                        zIndex: 10,
+                        cursor: "pointer",
+                        padding: 4,
+                        borderRadius: 4,
+                        background: token.colorBgContainer,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        transition: "all 0.2s ease"
+                      },
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.background = token.colorFillSecondary;
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.background = token.colorBgContainer;
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                        import_icons16.InfoCircleOutlined,
+                        {
+                          style: {
+                            fontSize: 14,
+                            color: token.colorTextSecondary
+                          }
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                "div",
+                {
+                  style: {
+                    padding: 12,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 10
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "flex-start",
+                          gap: 10
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                position: "relative",
+                                flexShrink: 0
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                                  import_antd28.Avatar,
+                                  {
+                                    size: 44,
+                                    icon: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons16.UserOutlined, {}),
+                                    style: {
+                                      backgroundColor: badgeColor,
+                                      color: "#fff",
+                                      fontSize: 16,
+                                      fontWeight: 600
+                                    },
+                                    children: initials
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                                  "div",
+                                  {
+                                    style: {
+                                      position: "absolute",
+                                      bottom: 0,
+                                      right: 0,
+                                      width: 10,
+                                      height: 10,
+                                      borderRadius: "50%",
+                                      background: "#52c41a",
+                                      border: `2px solid ${token.colorBgContainer}`
+                                    }
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                flex: 1,
+                                minWidth: 0
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                                  Text14,
+                                  {
+                                    strong: true,
+                                    style: {
+                                      fontSize: 14,
+                                      fontWeight: 600,
+                                      display: "block",
+                                      marginBottom: 3,
+                                      color: token.colorText,
+                                      lineHeight: 1.3
+                                    },
+                                    ellipsis: { tooltip: assistant.name },
+                                    children: assistant.name
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: 4
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                                        import_icons16.IdcardOutlined,
+                                        {
+                                          style: {
+                                            fontSize: 9,
+                                            color: token.colorTextTertiary
+                                          }
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                                        Text14,
+                                        {
+                                          style: {
+                                            fontSize: 9,
+                                            color: token.colorTextTertiary
+                                          },
+                                          ellipsis: { tooltip: assistant.id },
+                                          children: assistant.id
+                                        }
+                                      )
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    assistant.description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                      "div",
+                      {
+                        style: {
+                          padding: 8,
+                          background: token.colorFillTertiary,
+                          border: `1px solid ${token.colorBorderSecondary}`,
+                          borderRadius: 4,
+                          borderLeft: `2px solid ${badgeColor}`
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                          import_antd28.Tooltip,
+                          {
+                            title: assistant.description.length > 150 ? assistant.description : void 0,
+                            placement: "top",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                              "div",
+                              {
+                                style: {
+                                  fontSize: 10,
+                                  color: token.colorText,
+                                  lineHeight: 1.5,
+                                  fontStyle: "italic",
+                                  display: "-webkit-box",
+                                  WebkitLineClamp: 3,
+                                  WebkitBoxOrient: "vertical",
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis",
+                                  cursor: assistant.description.length > 150 ? "help" : "default"
+                                },
+                                children: [
+                                  '"',
+                                  assistant.description,
+                                  '"'
+                                ]
+                              }
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          flexWrap: "wrap",
+                          gap: 4,
+                          padding: "4px 0",
+                          marginTop: "auto"
+                        },
+                        children: [
+                          agentType && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                            import_antd28.Tag,
+                            {
+                              style: {
+                                margin: 0,
+                                fontSize: 7,
+                                padding: "2px 6px",
+                                borderRadius: 6,
+                                backgroundColor: token.colorPrimaryBg,
+                                color: token.colorPrimary,
+                                border: `1px solid ${token.colorPrimaryBorder}`,
+                                fontWeight: 500,
+                                lineHeight: "14px"
+                              },
+                              children: getAgentTypeLabel(agentType)
+                            }
+                          ),
+                          tools && tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                            import_antd28.Tag,
+                            {
+                              style: {
+                                margin: 0,
+                                fontSize: 7,
+                                padding: "2px 6px",
+                                borderRadius: 6,
+                                backgroundColor: token.colorSuccessBg,
+                                color: token.colorSuccess,
+                                border: `1px solid ${token.colorSuccessBorder}`,
+                                fontWeight: 500,
+                                lineHeight: "14px"
+                              },
+                              children: [
+                                tools.length,
+                                " Tools"
+                              ]
+                            }
+                          ),
+                          modelKey && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                            import_antd28.Tag,
+                            {
+                              style: {
+                                margin: 0,
+                                fontSize: 7,
+                                padding: "2px 6px",
+                                borderRadius: 6,
+                                backgroundColor: token.colorWarningBg,
+                                color: token.colorWarning,
+                                border: `1px solid ${token.colorWarningBorder}`,
+                                fontWeight: 500,
+                                lineHeight: "14px"
+                              },
+                              title: modelKey,
+                              children: modelKey.length > 12 ? `${modelKey.slice(0, 12)}...` : modelKey
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react28.Handle, { type: "source", position: import_react28.Position.Bottom })
+      ]
+    }
+  );
+};
+var AssistantNode_default = AssistantNode;
+
+// src/components/Chat/AssistantFlow.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+var AssistantFlowInner = ({
+  assistants,
+  onNodeClick
+}) => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react30.useNodesState)([]);
+  const [edges, setEdges, onEdgesChange] = (0, import_react30.useEdgesState)([]);
+  const nodeTypes = (0, import_react29.useMemo)(
+    () => ({
+      assistant: AssistantNode_default
+    }),
+    []
+  );
+  (0, import_react29.useEffect)(() => {
+    if (!assistants || assistants.length === 0) {
+      setNodes([]);
+      setEdges([]);
+      return;
+    }
+    const initialNodes = [];
+    const initialEdges = [];
+    const nodeWidth = 280;
+    const nodeHeight = 200;
+    const horizontalSpacing = 320;
+    const verticalSpacing = 300;
+    const nodesPerRow = Math.ceil(Math.sqrt(assistants.length));
+    const assistantMap = /* @__PURE__ */ new Map();
+    const relationships = [];
+    assistants.forEach((assistant) => {
+      assistantMap.set(assistant.id, assistant);
+    });
+    assistants.forEach((assistant) => {
+      if (assistant.graphDefinition) {
+        try {
+          const graphDef = typeof assistant.graphDefinition === "string" ? JSON.parse(assistant.graphDefinition) : assistant.graphDefinition;
+          if (graphDef.subAgents && Array.isArray(graphDef.subAgents)) {
+            graphDef.subAgents.forEach((subAgentKey) => {
+              const subAssistant = assistants.find(
+                (a) => a.id === subAgentKey || a.id === String(subAgentKey)
+              );
+              if (subAssistant && subAssistant.id !== assistant.id) {
+                relationships.push({
+                  source: assistant.id,
+                  target: subAssistant.id
+                });
+              }
+            });
+          }
+          if (graphDef.internalSubAgents && Array.isArray(graphDef.internalSubAgents)) {
+            graphDef.internalSubAgents.forEach((internalSubAgent) => {
+              if (internalSubAgent.key) {
+                const subAssistant = assistants.find(
+                  (a) => a.id === internalSubAgent.key || a.id === String(internalSubAgent.key)
+                );
+                if (subAssistant && subAssistant.id !== assistant.id) {
+                  relationships.push({
+                    source: assistant.id,
+                    target: subAssistant.id
+                  });
+                }
+              }
+            });
+          }
+          if (graphDef.nodes && Array.isArray(graphDef.nodes)) {
+            graphDef.nodes.forEach((node) => {
+              if (node.assistantId && node.assistantId !== assistant.id) {
+                const targetAssistant = assistants.find(
+                  (a) => a.id === node.assistantId || a.id === String(node.assistantId)
+                );
+                if (targetAssistant) {
+                  relationships.push({
+                    source: assistant.id,
+                    target: targetAssistant.id
+                  });
+                }
+              }
+            });
+          }
+          if (graphDef.edges && Array.isArray(graphDef.edges)) {
+            graphDef.edges.forEach((edge) => {
+              if (edge.source && edge.target) {
+                const sourceId = typeof edge.source === "string" ? edge.source : edge.source.id || edge.source.assistantId;
+                const targetId = typeof edge.target === "string" ? edge.target : edge.target.id || edge.target.assistantId;
+                const sourceAssistant = assistants.find(
+                  (a) => a.id === sourceId || a.id === String(sourceId)
+                );
+                const targetAssistant = assistants.find(
+                  (a) => a.id === targetId || a.id === String(targetId)
+                );
+                if (sourceAssistant && targetAssistant) {
+                  relationships.push({
+                    source: sourceAssistant.id,
+                    target: targetAssistant.id
+                  });
+                }
+              }
+            });
+          }
+        } catch (error) {
+          console.warn(
+            `Failed to parse graphDefinition for assistant ${assistant.id}:`,
+            error
+          );
+        }
+      }
+    });
+    const hasRelationships = relationships.length > 0;
+    if (hasRelationships) {
+      const processedIds = /* @__PURE__ */ new Set();
+      const levelMap = /* @__PURE__ */ new Map();
+      const childrenMap = /* @__PURE__ */ new Map();
+      relationships.forEach((rel) => {
+        if (!childrenMap.has(rel.source)) {
+          childrenMap.set(rel.source, []);
+        }
+        childrenMap.get(rel.source).push(rel.target);
+      });
+      const queue = [];
+      const rootNodes = assistants.filter(
+        (a) => !relationships.some((r) => r.target === a.id)
+      );
+      if (rootNodes.length === 0 && assistants.length > 0) {
+        queue.push({ id: assistants[0].id, level: 0 });
+      } else {
+        rootNodes.forEach((root) => {
+          queue.push({ id: root.id, level: 0 });
+        });
+      }
+      while (queue.length > 0) {
+        const { id, level } = queue.shift();
+        if (processedIds.has(id)) continue;
+        processedIds.add(id);
+        levelMap.set(id, level);
+        const children = childrenMap.get(id) || [];
+        children.forEach((childId) => {
+          if (!processedIds.has(childId)) {
+            queue.push({ id: childId, level: level + 1 });
+          }
+        });
+      }
+      assistants.forEach((assistant) => {
+        if (!levelMap.has(assistant.id)) {
+          levelMap.set(assistant.id, 0);
+        }
+      });
+      const levelGroups = /* @__PURE__ */ new Map();
+      assistants.forEach((assistant) => {
+        const level = levelMap.get(assistant.id) || 0;
+        if (!levelGroups.has(level)) {
+          levelGroups.set(level, []);
+        }
+        levelGroups.get(level).push(assistant);
+      });
+      levelGroups.forEach((group, level) => {
+        const y = level * verticalSpacing;
+        const groupWidth = (group.length - 1) * horizontalSpacing;
+        const startX = -groupWidth / 2;
+        group.forEach((assistant, index) => {
+          const x = startX + index * horizontalSpacing;
+          initialNodes.push({
+            id: assistant.id,
+            type: "assistant",
+            data: {
+              assistant,
+              onClick: () => onNodeClick?.(assistant)
+            },
+            position: { x, y }
+          });
+        });
+      });
+      relationships.forEach((rel) => {
+        if (assistantMap.has(rel.source) && assistantMap.has(rel.target)) {
+          initialEdges.push({
+            id: `e${rel.source}-${rel.target}`,
+            source: rel.source,
+            target: rel.target,
+            animated: true,
+            style: { stroke: "#1677ff" },
+            type: "smoothstep"
+          });
+        }
+      });
+    } else {
+      assistants.forEach((assistant, index) => {
+        const row = Math.floor(index / nodesPerRow);
+        const col = index % nodesPerRow;
+        const x = col * horizontalSpacing - (nodesPerRow - 1) * horizontalSpacing / 2;
+        const y = row * verticalSpacing;
+        initialNodes.push({
+          id: assistant.id,
+          type: "assistant",
+          data: {
+            assistant,
+            onClick: () => onNodeClick?.(assistant)
+          },
+          position: { x, y }
+        });
+      });
+    }
+    setNodes(initialNodes);
+    setEdges(initialEdges);
+  }, [assistants, setNodes, setEdges, onNodeClick]);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { width: "100%", height: "100%", background: "#fafafa" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    import_react30.ReactFlow,
+    {
+      nodes,
+      edges,
+      onNodesChange,
+      onEdgesChange,
+      nodeTypes,
+      fitView: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react30.Background, { color: "#eee", gap: 20 }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react30.Controls, {})
+      ]
+    }
+  ) });
+};
+var AssistantFlow = (props) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react30.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(AssistantFlowInner, { ...props }) });
+var AssistantFlow_default = AssistantFlow;
+
+// src/components/Chat/SkillFlow.tsx
+var import_react34 = require("react");
+var import_react35 = require("@xyflow/react");
+var import_style2 = require("@xyflow/react/dist/style.css");
+var import_antd32 = require("antd");
+var import_icons19 = require("@ant-design/icons");
+
+// src/components/Chat/SkillNode.tsx
+var import_react31 = require("react");
+var import_react32 = require("@xyflow/react");
+var import_antd29 = require("antd");
+var import_icons17 = require("@ant-design/icons");
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var { Text: Text15 } = import_antd29.Typography;
+var { TextArea } = import_antd29.Input;
+var getBadgeColor2 = (name) => {
+  const colors = [
+    "#1890ff",
+    // Blue
+    "#52c41a",
+    // Green
+    "#faad14",
+    // Orange
+    "#f5222d",
+    // Red
+    "#722ed1",
+    // Purple
+    "#13c2c2",
+    // Cyan
+    "#eb2f96",
+    // Magenta
+    "#fa8c16"
+    // Orange Red
+  ];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return colors[Math.abs(hash) % colors.length];
+};
+var SkillNode = ({ data }) => {
+  const { token } = import_antd29.theme.useToken();
+  const { config } = useLatticeChatShellContext();
+  if (!data) {
+    return null;
+  }
+  const { skill, onClick } = data;
+  if (!skill) {
+    return null;
+  }
+  const [currentSkill, setCurrentSkill] = (0, import_react31.useState)(skill);
+  const badgeColor = getBadgeColor2(currentSkill.name);
+  const initials = currentSkill.name?.split("-").map((n) => n.charAt(0)).join("").toUpperCase().slice(0, 2) || "SK";
+  const hasSubSkills = currentSkill.subSkills && currentSkill.subSkills.length > 0;
+  const category = currentSkill.metadata && currentSkill.metadata.category || "global";
+  const metadataEntries = (0, import_react31.useMemo)(
+    () => currentSkill.metadata ? Object.entries(
+      currentSkill.metadata
+    ).filter(
+      ([key, value]) => key && value
+    ) : [],
+    [currentSkill.metadata]
+  );
+  const formatDate = (value) => {
+    if (!value) return "";
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime())) return "";
+    return date.toLocaleString();
+  };
+  const handleCopy = (text) => {
+    navigator.clipboard.writeText(text);
+  };
+  const [isEditing, setIsEditing] = (0, import_react31.useState)(false);
+  const [draftSkill, setDraftSkill] = (0, import_react31.useState)({
+    ...skill,
+    id: skill.name
+  });
+  const [metadataRows, setMetadataRows] = (0, import_react31.useState)(
+    metadataEntries.map(([key, value]) => ({
+      key,
+      value
+    }))
+  );
+  const [isModalOpen, setIsModalOpen] = (0, import_react31.useState)(false);
+  const [saving, setSaving] = (0, import_react31.useState)(false);
+  (0, import_react31.useEffect)(() => {
+    setIsEditing(false);
+    setCurrentSkill(skill);
+    setDraftSkill({ ...skill, id: skill.name });
+    setMetadataRows(
+      Object.entries(
+        skill.metadata || {}
+      ).map(([key, value]) => ({ key, value }))
+    );
+  }, [skill]);
+  const handleFieldChange = (field, value) => {
+    if (field === "name") {
+      setDraftSkill((prev) => ({
+        ...prev,
+        name: value,
+        id: value
+        // keep id and name identical
+      }));
+      return;
+    }
+    setDraftSkill((prev) => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+  const handleDelete = () => {
+    import_antd29.Modal.confirm({
+      title: "Delete skill",
+      content: `Are you sure you want to delete "${currentSkill.name}"? This action cannot be undone.`,
+      okText: "Delete",
+      okType: "danger",
+      cancelText: "Cancel",
+      onOk: async () => {
+        try {
+          const headers = {};
+          if (config.apiKey) {
+            headers["Authorization"] = `Bearer ${config.apiKey}`;
+          }
+          const response = await fetch(
+            `${config.baseURL}/api/skills/${currentSkill.id}`,
+            {
+              method: "DELETE",
+              headers
+            }
+          );
+          let data2 = {};
+          try {
+            data2 = await response.json();
+          } catch {
+          }
+          if (response.ok && (data2.success ?? true)) {
+            import_antd29.message.success("Skill deleted successfully");
+            setIsModalOpen(false);
+            onClick?.(currentSkill);
+          } else {
+            import_antd29.message.error(data2.message || "Failed to delete skill");
+          }
+        } catch (error) {
+          import_antd29.message.error(
+            error?.message || "An error occurred while deleting the skill"
+          );
+        }
+      }
+    });
+  };
+  const syncMetadataRows = (rows) => {
+    setMetadataRows(rows);
+    const metadataObject = rows.reduce((acc, curr) => {
+      if (curr.key) {
+        acc[curr.key] = curr.value;
+      }
+      return acc;
+    }, {});
+    setDraftSkill((prev) => ({
+      ...prev,
+      metadata: metadataObject
+    }));
+  };
+  const handleMetadataChange = (index, field, value) => {
+    const next = [...metadataRows];
+    next[index] = {
+      ...next[index],
+      [field]: value
+    };
+    syncMetadataRows(next);
+  };
+  const handleAddMetadataRow = () => {
+    syncMetadataRows([...metadataRows, { key: "", value: "" }]);
+  };
+  const handleSave = async () => {
+    try {
+      setSaving(true);
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (config.apiKey) {
+        headers["Authorization"] = `Bearer ${config.apiKey}`;
+      }
+      const requestBody = {
+        name: draftSkill.name,
+        description: draftSkill.description,
+        license: draftSkill.license || void 0,
+        compatibility: draftSkill.compatibility || void 0,
+        metadata: draftSkill.metadata || void 0,
+        content: draftSkill.content || void 0,
+        subSkills: draftSkill.subSkills || void 0
+      };
+      const response = await fetch(
+        `${config.baseURL}/api/skills/${currentSkill.id}`,
+        {
+          method: "PUT",
+          headers,
+          body: JSON.stringify(requestBody)
+        }
+      );
+      const data2 = await response.json();
+      if (response.ok && data2.success) {
+        import_antd29.message.success("Skill updated successfully");
+        const updatedSkill = data2.data || draftSkill;
+        setCurrentSkill(updatedSkill);
+        setDraftSkill({ ...updatedSkill, id: updatedSkill.name });
+        setMetadataRows(
+          Object.entries(
+            updatedSkill.metadata || {}
+          ).map(([key, value]) => ({ key, value }))
+        );
+        setIsEditing(false);
+        onClick?.(updatedSkill);
+      } else {
+        import_antd29.message.error(data2.message || "Failed to update skill");
+      }
+    } catch (error) {
+      import_antd29.message.error(
+        error.message || "An error occurred while updating the skill"
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+  const editingView = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 12
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            TextArea,
+            {
+              value: draftSkill.description,
+              onChange: (e) => handleFieldChange("description", e.target.value),
+              placeholder: "Description",
+              autoSize: { minRows: 2, maxRows: 4 }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            import_antd29.Input,
+            {
+              value: draftSkill.license,
+              onChange: (e) => handleFieldChange("license", e.target.value),
+              placeholder: "License"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            import_antd29.Input,
+            {
+              value: draftSkill.compatibility,
+              onChange: (e) => handleFieldChange("compatibility", e.target.value),
+              placeholder: "Compatibility"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                Text15,
+                {
+                  style: {
+                    fontSize: 12,
+                    color: token.colorTextSecondary,
+                    fontWeight: 500
+                  },
+                  children: "Metadata"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_antd29.Button,
+                {
+                  size: "small",
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.PlusOutlined, {}),
+                  onClick: handleAddMetadataRow,
+                  children: "Add"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_antd29.Space, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
+          metadataRows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            Text15,
+            {
+              style: {
+                fontSize: 11,
+                color: token.colorTextTertiary
+              },
+              children: "No metadata yet. Use Add to create one."
+            }
+          ),
+          metadataRows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+                width: "100%"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Text15, { style: { fontSize: 11, color: token.colorTextSecondary }, children: [
+                  "Meta ",
+                  index + 1
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_antd29.Space, { style: { width: "100%" }, size: 8, wrap: true, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    import_antd29.Input,
+                    {
+                      value: row.key,
+                      placeholder: "Key",
+                      style: { width: 140 },
+                      onChange: (e) => handleMetadataChange(index, "key", e.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    import_antd29.Input,
+                    {
+                      value: row.value,
+                      placeholder: "Value",
+                      style: { flex: 1, minWidth: 200 },
+                      onChange: (e) => handleMetadataChange(index, "value", e.target.value)
+                    }
+                  )
+                ] })
+              ]
+            },
+            index
+          ))
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            TextArea,
+            {
+              value: draftSkill.content,
+              onChange: (e) => handleFieldChange("content", e.target.value),
+              placeholder: "Content",
+              autoSize: { minRows: 4, maxRows: 8 }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  const detailCardContent = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      style: {
+        width: 480,
+        maxHeight: "80vh",
+        overflowY: "auto",
+        padding: 16
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              marginBottom: 16
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    marginBottom: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                      Text15,
+                      {
+                        strong: true,
+                        style: {
+                          fontSize: 18,
+                          fontWeight: 600,
+                          color: token.colorText
+                        },
+                        children: currentSkill.name
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                      import_antd29.Tag,
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: 10,
+                          padding: "2px 8px",
+                          fontWeight: 600
+                        },
+                        color: "geekblue",
+                        children: category.toUpperCase()
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    Text15,
+                    {
+                      style: {
+                        fontSize: 11,
+                        color: token.colorTextTertiary,
+                        fontFamily: "monospace"
+                      },
+                      children: `>_ ${currentSkill.id}`
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        isEditing ? editingView : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+          currentSkill.description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+            Text15,
+            {
+              style: {
+                fontSize: 12,
+                color: token.colorText,
+                lineHeight: 1.6,
+                fontStyle: "italic"
+              },
+              children: [
+                '"',
+                currentSkill.description,
+                '"'
+              ]
+            }
+          ) }),
+          metadataEntries.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  marginBottom: 8
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    import_icons17.InfoCircleOutlined,
+                    {
+                      style: {
+                        fontSize: 14,
+                        color: token.colorTextSecondary
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                    Text15,
+                    {
+                      style: {
+                        fontSize: 12,
+                        color: token.colorTextSecondary,
+                        fontWeight: 500
+                      },
+                      children: [
+                        "Metadata (",
+                        metadataEntries.length,
+                        ")"
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              "div",
+              {
+                style: {
+                  border: `1px solid ${token.colorBorderSecondary}`,
+                  borderRadius: 6,
+                  overflow: "hidden"
+                },
+                children: metadataEntries.map(([key, value], index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "stretch",
+                      borderBottom: index === metadataEntries.length - 1 ? "none" : `1px solid ${token.colorBorderSecondary}`
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                        "div",
+                        {
+                          style: {
+                            width: 140,
+                            padding: "8px 10px",
+                            background: token.colorFillTertiary,
+                            borderRight: `1px solid ${token.colorBorderSecondary}`,
+                            fontSize: 11,
+                            color: token.colorTextSecondary,
+                            fontWeight: 600,
+                            textTransform: "capitalize"
+                          },
+                          children: key
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                        "div",
+                        {
+                          style: {
+                            flex: 1,
+                            padding: "8px 10px",
+                            fontSize: 11,
+                            color: token.colorText,
+                            wordBreak: "break-word"
+                          },
+                          children: value
+                        }
+                      )
+                    ]
+                  },
+                  key
+                ))
+              }
+            )
+          ] }),
+          hasSubSkills && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  marginBottom: 8
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    import_icons17.BranchesOutlined,
+                    {
+                      style: {
+                        fontSize: 14,
+                        color: token.colorTextSecondary
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                    Text15,
+                    {
+                      style: {
+                        fontSize: 12,
+                        color: token.colorTextSecondary,
+                        fontWeight: 500
+                      },
+                      children: [
+                        "Sub-Skills (",
+                        currentSkill.subSkills.length,
+                        ")"
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_antd29.Space, { size: [8, 8], wrap: true, children: currentSkill.subSkills.map(
+              (subSkill, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_antd29.Tag,
+                {
+                  style: {
+                    fontSize: 11,
+                    padding: "4px 12px",
+                    backgroundColor: token.colorFillTertiary,
+                    color: token.colorText,
+                    border: `1px solid ${token.colorBorderSecondary}`
+                  },
+                  children: subSkill
+                },
+                index
+              )
+            ) })
+          ] }),
+          (currentSkill.license || currentSkill.compatibility) && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_antd29.Space, { size: [8, 8], wrap: true, children: [
+            currentSkill.license && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              import_antd29.Tag,
+              {
+                icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.CopyrightOutlined, {}),
+                style: {
+                  margin: 0,
+                  fontSize: 11,
+                  padding: "4px 12px",
+                  borderRadius: 6,
+                  backgroundColor: token.colorInfoBg,
+                  color: token.colorInfo,
+                  border: `1px solid ${token.colorInfoBorder}`,
+                  fontWeight: 500,
+                  lineHeight: "16px"
+                },
+                children: currentSkill.license
+              }
+            ),
+            currentSkill.compatibility && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              import_antd29.Tag,
+              {
+                style: {
+                  margin: 0,
+                  fontSize: 11,
+                  padding: "4px 12px",
+                  borderRadius: 6,
+                  backgroundColor: token.colorSuccessBg,
+                  color: token.colorSuccess,
+                  border: `1px solid ${token.colorSuccessBorder}`,
+                  fontWeight: 500,
+                  lineHeight: "16px",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 4
+                },
+                children: currentSkill.compatibility
+              }
+            )
+          ] }) }),
+          (currentSkill.createdAt || currentSkill.updatedAt) && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_antd29.Space, { direction: "vertical", size: 4, children: [
+            currentSkill.createdAt && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              Text15,
+              {
+                style: {
+                  fontSize: 11,
+                  color: token.colorTextTertiary,
+                  fontFamily: "monospace"
+                },
+                children: [
+                  "Created: ",
+                  formatDate(currentSkill.createdAt)
+                ]
+              }
+            ),
+            currentSkill.updatedAt && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              Text15,
+              {
+                style: {
+                  fontSize: 11,
+                  color: token.colorTextTertiary,
+                  fontFamily: "monospace"
+                },
+                children: [
+                  "Updated: ",
+                  formatDate(currentSkill.updatedAt)
+                ]
+              }
+            )
+          ] }) }),
+          currentSkill.content && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { marginBottom: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  marginBottom: 8
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    import_icons17.FileTextOutlined,
+                    {
+                      style: {
+                        fontSize: 14,
+                        color: token.colorTextSecondary
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    Text15,
+                    {
+                      style: {
+                        fontSize: 12,
+                        color: token.colorTextSecondary,
+                        fontWeight: 600,
+                        letterSpacing: 0.5
+                      },
+                      children: "CONTENT"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              "div",
+              {
+                style: {
+                  padding: 12,
+                  background: token.colorFillTertiary,
+                  border: `1px solid ${token.colorBorderSecondary}`,
+                  borderRadius: 4,
+                  maxHeight: 200,
+                  overflowY: "auto"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  Text15,
+                  {
+                    style: {
+                      fontSize: 11,
+                      color: token.colorText,
+                      lineHeight: 1.6,
+                      whiteSpace: "pre-wrap"
+                    },
+                    children: currentSkill.content
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_antd29.Divider, { style: { margin: "16px 0" } }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 8
+            },
+            children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_antd29.Button,
+                {
+                  block: true,
+                  onClick: () => {
+                    setIsEditing(false);
+                    setDraftSkill(skill);
+                  },
+                  style: {
+                    flex: 1
+                  },
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_antd29.Button,
+                {
+                  type: "primary",
+                  block: true,
+                  onClick: handleSave,
+                  loading: saving,
+                  style: {
+                    flex: 1
+                  },
+                  children: "Save"
+                }
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_antd29.Button,
+                {
+                  type: "primary",
+                  block: true,
+                  onClick: () => setIsEditing(true),
+                  style: {
+                    flex: 1
+                  },
+                  children: "Edit Skill"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_antd29.Button, { danger: true, onClick: handleDelete, children: "Delete" }),
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                import_antd29.Button,
+                {
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.CopyOutlined, {}),
+                  onClick: () => handleCopy(currentSkill.id),
+                  title: "Copy ID"
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+  const hiddenHandleStyle = {
+    opacity: 0,
+    background: "transparent",
+    border: "none",
+    width: 0,
+    height: 0,
+    pointerEvents: "none"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    "div",
+    {
+      style: {
+        padding: 4
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          import_react32.Handle,
+          {
+            type: "target",
+            position: import_react32.Position.Top,
+            style: hiddenHandleStyle,
+            isConnectable: false
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          "div",
+          {
+            onClick: () => {
+              setIsModalOpen(true);
+            },
+            style: {
+              width: 280,
+              minHeight: 200,
+              background: token.colorBgContainer,
+              borderRadius: 8,
+              boxShadow: `0 1px 6px rgba(0, 0, 0, 0.08)`,
+              cursor: onClick ? "pointer" : "default",
+              overflow: "hidden",
+              transition: "all 0.2s ease",
+              position: "relative",
+              border: `1px solid ${token.colorBorder}`,
+              display: "flex",
+              flexDirection: "column"
+            },
+            onMouseEnter: (e) => {
+              if (onClick) {
+                e.currentTarget.style.transform = "translateY(-2px)";
+                e.currentTarget.style.boxShadow = `0 2px 8px rgba(0, 0, 0, 0.12)`;
+              }
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.transform = "translateY(0)";
+              e.currentTarget.style.boxShadow = `0 1px 4px rgba(0, 0, 0, 0.08)`;
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              "div",
+              {
+                style: {
+                  padding: 12,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 10
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "flex-start",
+                        gap: 10
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                          "div",
+                          {
+                            style: {
+                              position: "relative",
+                              flexShrink: 0
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                                import_antd29.Avatar,
+                                {
+                                  size: 44,
+                                  icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.BookOutlined, {}),
+                                  style: {
+                                    backgroundColor: badgeColor,
+                                    color: "#fff",
+                                    fontSize: 16,
+                                    fontWeight: 600
+                                  },
+                                  children: initials
+                                }
+                              ),
+                              hasSubSkills && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                                "div",
+                                {
+                                  style: {
+                                    position: "absolute",
+                                    bottom: -2,
+                                    right: -2,
+                                    width: 18,
+                                    height: 18,
+                                    borderRadius: "50%",
+                                    background: token.colorPrimary,
+                                    border: `2px solid ${token.colorBgContainer}`,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center"
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                                    import_icons17.BranchesOutlined,
+                                    {
+                                      style: {
+                                        fontSize: 10,
+                                        color: "#fff"
+                                      }
+                                    }
+                                  )
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                          "div",
+                          {
+                            style: {
+                              flex: 1,
+                              minWidth: 0
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                                Text15,
+                                {
+                                  strong: true,
+                                  style: {
+                                    fontSize: 14,
+                                    fontWeight: 600,
+                                    display: "block",
+                                    marginBottom: 3,
+                                    color: token.colorText,
+                                    lineHeight: 1.3
+                                  },
+                                  ellipsis: { tooltip: currentSkill.name },
+                                  children: currentSkill.name
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                                "div",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 4
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                                      import_icons17.FileTextOutlined,
+                                      {
+                                        style: {
+                                          fontSize: 9,
+                                          color: token.colorTextTertiary
+                                        }
+                                      }
+                                    ),
+                                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                                      Text15,
+                                      {
+                                        style: {
+                                          fontSize: 9,
+                                          color: token.colorTextTertiary
+                                        },
+                                        ellipsis: { tooltip: currentSkill.id },
+                                        children: currentSkill.id
+                                      }
+                                    )
+                                  ]
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  currentSkill.description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    "div",
+                    {
+                      style: {
+                        padding: 8,
+                        background: token.colorFillTertiary,
+                        border: `1px solid ${token.colorBorderSecondary}`,
+                        borderRadius: 4,
+                        borderLeft: `2px solid ${badgeColor}`
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                        import_antd29.Tooltip,
+                        {
+                          title: currentSkill.description.length > 150 ? currentSkill.description : void 0,
+                          placement: "top",
+                          children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                fontSize: 10,
+                                color: token.colorText,
+                                lineHeight: 1.5,
+                                fontStyle: "italic",
+                                display: "-webkit-box",
+                                WebkitLineClamp: 3,
+                                WebkitBoxOrient: "vertical",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                cursor: currentSkill.description.length > 150 ? "help" : "default"
+                              },
+                              children: [
+                                '"',
+                                currentSkill.description,
+                                '"'
+                              ]
+                            }
+                          )
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        flexWrap: "wrap",
+                        gap: 4,
+                        padding: "4px 0",
+                        marginTop: "auto"
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                          import_antd29.Tag,
+                          {
+                            style: {
+                              margin: 0,
+                              fontSize: 8,
+                              padding: "2px 6px",
+                              borderRadius: 6,
+                              backgroundColor: token.colorPrimaryBg,
+                              color: token.colorPrimary,
+                              border: `1px solid ${token.colorPrimaryBorder}`,
+                              fontWeight: 600,
+                              lineHeight: "14px",
+                              textTransform: "capitalize"
+                            },
+                            children: category.toUpperCase()
+                          }
+                        ),
+                        hasSubSkills && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                          import_antd29.Tag,
+                          {
+                            style: {
+                              margin: 0,
+                              fontSize: 8,
+                              padding: "2px 6px",
+                              borderRadius: 6,
+                              backgroundColor: token.colorSuccessBg,
+                              color: token.colorSuccess,
+                              border: `1px solid ${token.colorSuccessBorder}`,
+                              fontWeight: 500,
+                              lineHeight: "14px",
+                              display: "inline-flex",
+                              alignItems: "center"
+                            },
+                            children: [
+                              "SUB-SKILLS (",
+                              currentSkill.subSkills.length,
+                              ")"
+                            ]
+                          }
+                        ),
+                        currentSkill.license && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                          import_antd29.Tag,
+                          {
+                            style: {
+                              margin: 0,
+                              fontSize: 7,
+                              padding: "2px 6px",
+                              borderRadius: 6,
+                              backgroundColor: token.colorInfoBg,
+                              color: token.colorInfo,
+                              border: `1px solid ${token.colorInfoBorder}`,
+                              fontWeight: 500,
+                              lineHeight: "14px"
+                            },
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.CopyrightOutlined, {}),
+                            children: currentSkill.license
+                          }
+                        ),
+                        currentSkill.compatibility && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                          import_antd29.Tag,
+                          {
+                            style: {
+                              margin: 0,
+                              fontSize: 7,
+                              padding: "2px 6px",
+                              borderRadius: 6,
+                              backgroundColor: token.colorSuccessBg,
+                              color: token.colorSuccess,
+                              border: `1px solid ${token.colorSuccessBorder}`,
+                              fontWeight: 500,
+                              lineHeight: "14px"
+                            },
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.InfoCircleOutlined, {}),
+                            children: currentSkill.compatibility
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          import_antd29.Modal,
+          {
+            open: isModalOpen,
+            onCancel: () => {
+              setIsModalOpen(false);
+              setIsEditing(false);
+              setDraftSkill({ ...currentSkill, id: currentSkill.name });
+            },
+            footer: null,
+            width: 520,
+            destroyOnClose: true,
+            title: null,
+            styles: {
+              body: { padding: 0 }
+            },
+            children: detailCardContent
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+          import_react32.Handle,
+          {
+            type: "source",
+            position: import_react32.Position.Bottom,
+            style: hiddenHandleStyle,
+            isConnectable: false
+          }
+        )
+      ]
+    }
+  );
+};
+var SkillNode_default = SkillNode;
 
-// src/components/Chat/AssistantList.tsx
-var import_x7 = require("@ant-design/x");
-var import_antd27 = require("antd");
-var import_jsx_runtime42 = require("react/jsx-runtime");
-var AssistantList = () => {
-  const { token } = import_antd27.theme.useToken();
-  const { assistants, selectAssistant, currentAssistant } = useAssistantContext();
-  const style = {
-    width: "100%",
-    background: "transparent",
-    borderRadius: token.borderRadius
+// src/components/Chat/CreateSkillModal.tsx
+var import_react33 = require("react");
+var import_antd30 = require("antd");
+var import_icons18 = require("@ant-design/icons");
+var import_antd31 = require("antd");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var { TextArea: TextArea2 } = import_antd30.Input;
+var { Text: Text16 } = import_antd30.Typography;
+var CreateSkillModal = ({
+  open,
+  onCancel,
+  onSuccess
+}) => {
+  const [form] = import_antd30.Form.useForm();
+  const [loading, setLoading] = (0, import_react33.useState)(false);
+  const { config } = useLatticeChatShellContext();
+  const { token } = import_antd31.theme.useToken();
+  const defaultMetadataRows = [{ key: "category", value: "global" }];
+  const [metadataRows, setMetadataRows] = (0, import_react33.useState)(defaultMetadataRows);
+  const handleSubmit = async () => {
+    try {
+      const values = await form.validateFields();
+      setLoading(true);
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (config.apiKey) {
+        headers["Authorization"] = `Bearer ${config.apiKey}`;
+      }
+      const metadataObject = metadataRows.length > 0 ? metadataRows.reduce((acc, curr) => {
+        if (curr.key) {
+          acc[curr.key] = curr.value;
+        }
+        return acc;
+      }, {}) : void 0;
+      const requestBody = {
+        id: values.name,
+        // id must equal name
+        name: values.name,
+        description: values.description,
+        license: values.license || void 0,
+        compatibility: values.compatibility || void 0,
+        metadata: metadataObject,
+        content: values.content || void 0,
+        subSkills: void 0
+        // subSkills not in create form
+      };
+      const response = await fetch(`${config.baseURL}/api/skills`, {
+        method: "POST",
+        headers,
+        body: JSON.stringify(requestBody)
+      });
+      const data = await response.json();
+      if (response.ok && data.success) {
+        import_antd30.message.success("Skill created successfully");
+        form.resetFields();
+        setMetadataRows(defaultMetadataRows);
+        onSuccess?.();
+        onCancel();
+      } else {
+        import_antd30.message.error(data.message || "Failed to create skill");
+      }
+    } catch (error) {
+      if (error.errorFields) {
+        return;
+      }
+      import_antd30.message.error(
+        error.message || "An error occurred while creating the skill"
+      );
+    } finally {
+      setLoading(false);
+    }
   };
-  const items = assistants.map((assistant) => ({
-    key: assistant.id,
-    label: assistant.name,
-    icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-      import_antd27.Avatar,
+  const handleCancel = () => {
+    form.resetFields();
+    setMetadataRows(defaultMetadataRows);
+    onCancel();
+  };
+  const handleMetadataChange = (index, field, value) => {
+    const next = [...metadataRows];
+    next[index] = {
+      ...next[index],
+      [field]: value
+    };
+    setMetadataRows(next);
+  };
+  const handleAddMetadataRow = () => {
+    setMetadataRows([...metadataRows, { key: "", value: "" }]);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    import_antd30.Modal,
+    {
+      title: "Create New Skill",
+      open,
+      onCancel: handleCancel,
+      footer: null,
+      width: 520,
+      destroyOnClose: true,
+      styles: {
+        body: { padding: 16 }
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        import_antd30.Form,
+        {
+          form,
+          layout: "vertical",
+          onFinish: handleSubmit,
+          autoComplete: "off",
+          children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: 12
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Name" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    import_antd30.Form.Item,
+                    {
+                      name: "name",
+                      rules: [
+                        { required: true, message: "Please enter skill name" },
+                        {
+                          pattern: /^[a-z0-9]+(-[a-z0-9]+)*$/,
+                          message: "Name must be lowercase alphanumeric with single hyphens (e.g., 'my-skill')"
+                        },
+                        { min: 1, max: 64, message: "Name must be 1-64 characters" }
+                      ],
+                      style: { marginBottom: 0 },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_antd30.Input, { placeholder: "e.g., data-analysis" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    import_antd30.Form.Item,
+                    {
+                      name: "description",
+                      rules: [
+                        { required: true, message: "Please enter skill description" }
+                      ],
+                      style: { marginBottom: 0 },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                        TextArea2,
+                        {
+                          placeholder: "Description",
+                          autoSize: { minRows: 2, maxRows: 4 }
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_antd30.Form.Item, { name: "license", style: { marginBottom: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_antd30.Input, { placeholder: "License" }) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_antd30.Form.Item, { name: "compatibility", style: { marginBottom: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_antd30.Input, { placeholder: "Compatibility" }) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        gap: 8
+                      },
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                          Text16,
+                          {
+                            style: {
+                              fontSize: 12,
+                              color: token.colorTextSecondary,
+                              fontWeight: 500
+                            },
+                            children: "Metadata"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                          import_antd30.Button,
+                          {
+                            size: "small",
+                            icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons18.PlusOutlined, {}),
+                            onClick: handleAddMetadataRow,
+                            children: "Add"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_antd30.Space, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
+                    metadataRows.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                      Text16,
+                      {
+                        style: {
+                          fontSize: 11,
+                          color: token.colorTextTertiary
+                        },
+                        children: "No metadata yet. Use Add to create one."
+                      }
+                    ),
+                    metadataRows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: 4,
+                          width: "100%"
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+                            Text16,
+                            {
+                              style: { fontSize: 11, color: token.colorTextSecondary },
+                              children: [
+                                "Meta ",
+                                index + 1
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_antd30.Space, { style: { width: "100%" }, size: 8, wrap: true, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                              import_antd30.Input,
+                              {
+                                value: row.key,
+                                placeholder: "Key",
+                                style: { width: 140 },
+                                onChange: (e) => handleMetadataChange(index, "key", e.target.value)
+                              }
+                            ),
+                            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                              import_antd30.Input,
+                              {
+                                value: row.value,
+                                placeholder: "Value",
+                                style: { flex: 1, minWidth: 200 },
+                                onChange: (e) => handleMetadataChange(index, "value", e.target.value)
+                              }
+                            )
+                          ] })
+                        ]
+                      },
+                      index
+                    ))
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_antd30.Form.Item, { name: "content", style: { marginBottom: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                    TextArea2,
+                    {
+                      placeholder: "Content",
+                      autoSize: { minRows: 4, maxRows: 8 }
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "flex-end",
+                      gap: 8,
+                      marginTop: 8
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_antd30.Button, { onClick: handleCancel, children: "Cancel" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_antd30.Button, { type: "primary", htmlType: "submit", loading, children: "Create Skill" })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var CreateSkillModal_default = CreateSkillModal;
+
+// src/components/Chat/SkillFlow.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var SkillFlowInner = ({
+  skills,
+  onNodeClick,
+  onRefresh
+}) => {
+  const [nodes, setNodes, onNodesChange] = (0, import_react35.useNodesState)([]);
+  const [edges, setEdges, onEdgesChange] = (0, import_react35.useEdgesState)([]);
+  const [isCreateModalOpen, setIsCreateModalOpen] = (0, import_react34.useState)(false);
+  const { token } = import_antd32.theme.useToken();
+  const nodeTypes = (0, import_react34.useMemo)(
+    () => ({
+      skill: SkillNode_default
+    }),
+    []
+  );
+  (0, import_react34.useEffect)(() => {
+    if (!skills || skills.length === 0) {
+      setNodes([]);
+      setEdges([]);
+      return;
+    }
+    const initialNodes = [];
+    const initialEdges = [];
+    const nodeWidth = 280;
+    const nodeHeight = 220;
+    const horizontalSpacing = 320;
+    const verticalSpacing = 300;
+    const skillMap = /* @__PURE__ */ new Map();
+    const relationships = [];
+    const childrenMap = /* @__PURE__ */ new Map();
+    skills.forEach((skill) => {
+      skillMap.set(skill.name, skill);
+      if (skill.subSkills && skill.subSkills.length > 0) {
+        if (!childrenMap.has(skill.name)) {
+          childrenMap.set(skill.name, []);
+        }
+        skill.subSkills.forEach((subSkillName) => {
+          const subSkill = skills.find((s) => s.name === subSkillName);
+          if (subSkill) {
+            relationships.push({
+              source: skill.name,
+              target: subSkillName
+            });
+            childrenMap.get(skill.name).push(subSkillName);
+          }
+        });
+      }
+    });
+    const hasRelationships = relationships.length > 0;
+    if (hasRelationships) {
+      const processedIds = /* @__PURE__ */ new Set();
+      const levelMap = /* @__PURE__ */ new Map();
+      const parentMap = /* @__PURE__ */ new Map();
+      relationships.forEach((rel) => {
+        parentMap.set(rel.target, rel.source);
+      });
+      const queue = [];
+      const rootNodes = skills.filter(
+        (s) => !parentMap.has(s.name)
+        // No parent means it's a root
+      );
+      if (rootNodes.length === 0 && skills.length > 0) {
+        queue.push({ id: skills[0].name, level: 0 });
+      } else {
+        rootNodes.forEach((root) => {
+          queue.push({ id: root.name, level: 0 });
+        });
+      }
+      while (queue.length > 0) {
+        const { id, level } = queue.shift();
+        if (processedIds.has(id)) continue;
+        processedIds.add(id);
+        levelMap.set(id, level);
+        const children = childrenMap.get(id) || [];
+        children.forEach((childId) => {
+          if (!processedIds.has(childId)) {
+            queue.push({ id: childId, level: level + 1 });
+          }
+        });
+      }
+      skills.forEach((skill) => {
+        if (!levelMap.has(skill.name)) {
+          levelMap.set(skill.name, 0);
+        }
+      });
+      const levelGroups = /* @__PURE__ */ new Map();
+      skills.forEach((skill) => {
+        const level = levelMap.get(skill.name) || 0;
+        if (!levelGroups.has(level)) {
+          levelGroups.set(level, []);
+        }
+        levelGroups.get(level).push(skill);
+      });
+      levelGroups.forEach((group, level) => {
+        const y = level * verticalSpacing;
+        const groupWidth = (group.length - 1) * horizontalSpacing;
+        const startX = -groupWidth / 2;
+        group.forEach((skill, index) => {
+          const x = startX + index * horizontalSpacing;
+          initialNodes.push({
+            id: skill.name,
+            type: "skill",
+            data: {
+              skill,
+              onClick: () => onNodeClick?.(skill)
+            },
+            position: { x, y }
+          });
+        });
+      });
+      relationships.forEach((rel) => {
+        if (skillMap.has(rel.source) && skillMap.has(rel.target)) {
+          initialEdges.push({
+            id: `e${rel.source}-${rel.target}`,
+            source: rel.source,
+            target: rel.target,
+            style: { stroke: "#1677ff", strokeWidth: 2 },
+            type: "smoothstep"
+          });
+        }
+      });
+    } else {
+      const nodesPerRow = Math.ceil(Math.sqrt(skills.length));
+      skills.forEach((skill, index) => {
+        const row = Math.floor(index / nodesPerRow);
+        const col = index % nodesPerRow;
+        const x = col * horizontalSpacing - (nodesPerRow - 1) * horizontalSpacing / 2;
+        const y = row * verticalSpacing;
+        initialNodes.push({
+          id: skill.name,
+          type: "skill",
+          data: {
+            skill,
+            onClick: () => onNodeClick?.(skill)
+          },
+          position: { x, y }
+        });
+      });
+    }
+    setNodes(initialNodes);
+    setEdges(initialEdges);
+  }, [skills, setNodes, setEdges, onNodeClick]);
+  const handleSkillCreated = async () => {
+    if (onRefresh) {
+      await onRefresh();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { width: "100%", height: "100%", background: "#fafafa", position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      import_react35.ReactFlow,
+      {
+        nodes,
+        edges,
+        onNodesChange,
+        onEdgesChange,
+        nodeTypes,
+        fitView: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react35.Background, { color: "#eee", gap: 20 }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react35.Controls, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      "div",
       {
-        size: "small",
         style: {
-          backgroundColor: token.colorFillSecondary,
-          color: token.colorText
+          position: "absolute",
+          bottom: 20,
+          right: 20,
+          zIndex: 10
         },
-        children: assistant.name.charAt(0).toUpperCase()
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          import_antd32.Button,
+          {
+            type: "primary",
+            size: "large",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons19.PlusOutlined, {}),
+            onClick: () => setIsCreateModalOpen(true),
+            style: {
+              height: 48,
+              width: 48,
+              borderRadius: "50%",
+              boxShadow: token.boxShadowTertiary,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 0
+            }
+          }
+        )
       }
-    )
-  }));
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_x7.Conversations,
-    {
-      items,
-      activeKey: currentAssistant?.id,
-      style,
-      onActiveChange: (key) => {
-        selectAssistant(key);
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      CreateSkillModal_default,
+      {
+        open: isCreateModalOpen,
+        onCancel: () => setIsCreateModalOpen(false),
+        onSuccess: handleSkillCreated
       }
-    }
-  );
+    )
+  ] });
 };
+var SkillFlow = (props) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react35.ReactFlowProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SkillFlowInner, { ...props }) });
+var SkillFlow_default = SkillFlow;
 
 // src/components/Chat/ChatSidebar.tsx
-var import_antd_style12 = require("antd-style");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 var useStyles4 = (0, import_antd_style12.createStyles)(({ token, css }) => ({
   sidebar: css`
     display: flex;
@@ -6453,6 +9117,22 @@ var useStyles4 = (0, import_antd_style12.createStyles)(({ token, css }) => ({
     letter-spacing: 0.5px;
     padding: 0 ${token.paddingXS}px;
     margin-bottom: ${token.marginSM}px;
+    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;
+    background: transparent;
+
+    &:hover {
+      color: ${token.colorPrimary};
+      background: transparent;
+    }
   `,
   footer: css`
     display: flex;
@@ -6558,10 +9238,15 @@ var ChatSidebar = ({
 }) => {
   const { styles } = useStyles4();
   const { setMenuCollapsed, menuCollapsed, sideAppVisible } = useChatUIContext();
-  const { setSettingsModalOpen } = useLatticeChatShellContext();
-  const [isHovered, setIsHovered] = (0, import_react27.useState)(false);
-  const [isFirstCollapse, setIsFirstCollapse] = (0, import_react27.useState)(false);
-  const prevIsCollapsedRef = (0, import_react27.useRef)(false);
+  const { setSettingsModalOpen, config } = useLatticeChatShellContext();
+  const { assistants, selectAssistant } = useAssistantContext();
+  const [isHovered, setIsHovered] = (0, import_react36.useState)(false);
+  const [isFirstCollapse, setIsFirstCollapse] = (0, import_react36.useState)(false);
+  const [isFlowModalOpen, setIsFlowModalOpen] = (0, import_react36.useState)(false);
+  const [isSkillFlowModalOpen, setIsSkillFlowModalOpen] = (0, import_react36.useState)(false);
+  const [skills, setSkills] = (0, import_react36.useState)([]);
+  const [skillsLoading, setSkillsLoading] = (0, import_react36.useState)(false);
+  const prevIsCollapsedRef = (0, import_react36.useRef)(false);
   const handleToggleCollapse = () => {
     setMenuCollapsed(!menuCollapsed);
   };
@@ -6569,8 +9254,37 @@ var ChatSidebar = ({
     setSettingsModalOpen(true);
     onSettingsClick?.();
   };
+  const handleSkillFlowClick = async () => {
+    setIsSkillFlowModalOpen(true);
+    if (skills.length === 0 && !skillsLoading) {
+      await fetchSkills();
+    }
+  };
+  const fetchSkills = async () => {
+    setSkillsLoading(true);
+    try {
+      const headers = {};
+      if (config.apiKey) {
+        headers["Authorization"] = `Bearer ${config.apiKey}`;
+      }
+      const response = await fetch(`${config.baseURL}/api/skills`, {
+        headers
+      });
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success && data.data && Array.isArray(data.data.records)) {
+          setSkills(data.data.records);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fetch skills:", error);
+      setSkills([]);
+    } finally {
+      setSkillsLoading(false);
+    }
+  };
   const isCollapsed = menuCollapsed || sideAppVisible;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const prevIsCollapsed = prevIsCollapsedRef.current;
     if (isCollapsed) {
       const hasSeenFirstCollapse = localStorage.getItem(FIRST_COLLAPSE_KEY);
@@ -6599,54 +9313,77 @@ var ChatSidebar = ({
   const handleMouseLeave = () => {
     setIsHovered(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       "div",
       {
         className: `${styles.sidebar} ${isFirstCollapse ? "firstTimeHighlight" : ""}`,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_antd28.Tooltip,
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            import_antd33.Tooltip,
             {
               title: "Move the mouse over the collapsed sidebar to see the assistants and threads",
               open: isFirstCollapse,
               placement: "right",
-              children: isFirstCollapse && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { style: { marginTop: "400px" } })
+              children: isFirstCollapse && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { marginTop: "400px" } })
             }
           ),
-          !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: styles.content, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: styles.section, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.sectionTitle, children: "Assistants" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AssistantList, {})
+          !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: styles.content, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: styles.section, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: styles.sectionTitle, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: "Assistants" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                    import_antd33.Button,
+                    {
+                      type: "text",
+                      icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons20.ApartmentOutlined, {}),
+                      onClick: () => setIsFlowModalOpen(true),
+                      className: styles.sectionTitleButton,
+                      title: "View Assistant Flow Canvas",
+                      size: "small"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AssistantList, {})
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_antd28.Divider, { className: styles.divider }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: styles.section, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AgentConversations, {})
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_antd33.Divider, { className: styles.divider }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: styles.section, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AgentConversations, {})
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: styles.footer, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: styles.footer, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "button",
                 {
                   className: styles.actionButton,
                   onClick: handleToggleCollapse,
                   title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
                   "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                  children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons16.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons16.MenuFoldOutlined, {})
+                  children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons20.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons20.MenuFoldOutlined, {})
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                "button",
+                {
+                  className: styles.actionButton,
+                  onClick: handleSkillFlowClick,
+                  title: "Skill Flow Canvas",
+                  "aria-label": "Skill Flow Canvas",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons20.ThunderboltOutlined, {})
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "button",
                 {
                   className: styles.actionButton,
                   onClick: handleSettingsClick,
                   title: "Settings",
                   "aria-label": "Settings",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons16.SettingOutlined, {})
+                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons20.SettingOutlined, {})
                 }
               )
             ] })
@@ -6654,61 +9391,145 @@ var ChatSidebar = ({
         ]
       }
     ),
-    isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
       "div",
       {
         className: `${styles.hoverOverlay} ${isHovered ? "visible" : ""}`,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: styles.hoverContent, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: styles.section, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.sectionTitle, children: "Assistants" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AssistantList, {})
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: styles.hoverContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: styles.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: styles.sectionTitle, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: "Assistants" }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  import_antd33.Button,
+                  {
+                    type: "text",
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons20.ApartmentOutlined, {}),
+                    onClick: () => setIsFlowModalOpen(true),
+                    className: styles.sectionTitleButton,
+                    title: "View Assistant Flow Canvas",
+                    size: "small"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AssistantList, {})
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_antd28.Divider, { className: styles.divider }),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: styles.section, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AgentConversations, {})
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_antd33.Divider, { className: styles.divider }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: styles.section, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: styles.sectionTitle, children: "Threads" }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(AgentConversations, {})
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: styles.footer, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: styles.footer, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               "button",
               {
                 className: styles.actionButton,
                 onClick: handleToggleCollapse,
                 title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
                 "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons16.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons16.MenuFoldOutlined, {})
+                children: isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons20.MenuUnfoldOutlined, {}) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons20.MenuFoldOutlined, {})
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              "button",
+              {
+                className: styles.actionButton,
+                onClick: handleSkillFlowClick,
+                title: "Skill Flow Canvas",
+                "aria-label": "Skill Flow Canvas",
+                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons20.ThunderboltOutlined, {})
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
               "button",
               {
                 className: styles.actionButton,
                 onClick: handleSettingsClick,
                 title: "Settings",
                 "aria-label": "Settings",
-                children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_icons16.SettingOutlined, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons20.SettingOutlined, {})
               }
             )
           ] })
         ]
       }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      import_antd33.Modal,
+      {
+        title: "Assistant Overview",
+        open: isFlowModalOpen,
+        onCancel: () => setIsFlowModalOpen(false),
+        footer: null,
+        width: "90%",
+        style: { top: 20 },
+        bodyStyle: {
+          height: "calc(100vh - 120px)",
+          padding: 0
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          AssistantFlow_default,
+          {
+            assistants,
+            onNodeClick: (assistant) => {
+              selectAssistant(assistant.id);
+              setIsFlowModalOpen(false);
+            }
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      import_antd33.Modal,
+      {
+        title: "Skill Overview",
+        open: isSkillFlowModalOpen,
+        onCancel: () => setIsSkillFlowModalOpen(false),
+        footer: null,
+        width: "90%",
+        style: { top: 20 },
+        bodyStyle: {
+          height: "calc(100vh - 120px)",
+          padding: 0
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { width: "100%", height: "100%" }, children: skillsLoading ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%"
+            },
+            children: "Loading skills..."
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          SkillFlow_default,
+          {
+            skills,
+            onNodeClick: (skill) => {
+              console.log("Skill clicked:", skill);
+            },
+            onRefresh: fetchSkills
+          }
+        ) })
+      }
     )
   ] });
 };
 
 // src/components/Chat/LatticeChatView.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var LatticeChatView = (props) => {
   const { assistantId, thread } = useConversationContext();
   const { currentAssistant } = useAssistantContext();
   const {
     config: { baseURL }
   } = useLatticeChatShellContext();
-  return assistantId && thread ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return assistantId && thread ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
     AxiomLatticeProvider,
     {
       config: {
@@ -6717,14 +9538,14 @@ var LatticeChatView = (props) => {
         assistantId,
         transport: "sse"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         LatticeChat,
         {
           thread_id: thread?.id,
           assistant_id: assistantId,
           name: currentAssistant?.name,
           description: currentAssistant?.description,
-          menu: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ChatSidebar, {})
+          menu: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ChatSidebar, {})
         }
       )
     }
@@ -6732,13 +9553,13 @@ var LatticeChatView = (props) => {
 };
 
 // src/components/Chat/SettingsModal.tsx
-var import_react28 = require("react");
-var import_antd29 = require("antd");
-var import_icons17 = require("@ant-design/icons");
+var import_react37 = require("react");
+var import_antd34 = require("antd");
+var import_icons21 = require("@ant-design/icons");
 var import_antd_style13 = require("antd-style");
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var { Text: Text14, Title: Title3 } = import_antd29.Typography;
-var { TextArea } = import_antd29.Input;
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var { Text: Text17, Title: Title3 } = import_antd34.Typography;
+var { TextArea: TextArea3 } = import_antd34.Input;
 var useStyles5 = (0, import_antd_style13.createStyles)(({ token, css }) => ({
   //   settingsModal: css`
   //     .ant-modal {
@@ -7085,12 +9906,12 @@ var SETTINGS_MENU_ITEMS = [
   {
     key: "environment",
     label: "Environment Variables",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.EnvironmentOutlined, {})
+    icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons21.EnvironmentOutlined, {})
   },
   {
     key: "models",
     label: "Model Configuration",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.ApiOutlined, {})
+    icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons21.ApiOutlined, {})
   }
 ];
 var SettingsModal = ({
@@ -7099,7 +9920,7 @@ var SettingsModal = ({
 }) => {
   const { styles } = useStyles5();
   const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
-  const [connections, setConnections] = (0, import_react28.useState)(() => {
+  const [connections, setConnections] = (0, import_react37.useState)(() => {
     if (typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem("lattice_server_connections");
@@ -7122,21 +9943,21 @@ var SettingsModal = ({
     }
     return [];
   });
-  const [serverConfigs, setServerConfigs] = (0, import_react28.useState)({});
-  const connectionsRef = (0, import_react28.useRef)(connections);
-  (0, import_react28.useEffect)(() => {
+  const [serverConfigs, setServerConfigs] = (0, import_react37.useState)({});
+  const connectionsRef = (0, import_react37.useRef)(connections);
+  (0, import_react37.useEffect)(() => {
     connectionsRef.current = connections;
   }, [connections]);
-  const [activeTabKey, setActiveTabKey] = (0, import_react28.useState)(
+  const [activeTabKey, setActiveTabKey] = (0, import_react37.useState)(
     connections.length > 0 ? connections[0].id : ""
   );
-  const [activeMenu, setActiveMenu] = (0, import_react28.useState)("environment");
-  const [loading, setLoading] = (0, import_react28.useState)(false);
-  const [showAddServerModal, setShowAddServerModal] = (0, import_react28.useState)(false);
-  const [newServerUrl, setNewServerUrl] = (0, import_react28.useState)("");
-  const [newServerName, setNewServerName] = (0, import_react28.useState)("");
-  const [newServerApiKey, setNewServerApiKey] = (0, import_react28.useState)("");
-  const [addingServer, setAddingServer] = (0, import_react28.useState)(false);
+  const [activeMenu, setActiveMenu] = (0, import_react37.useState)("environment");
+  const [loading, setLoading] = (0, import_react37.useState)(false);
+  const [showAddServerModal, setShowAddServerModal] = (0, import_react37.useState)(false);
+  const [newServerUrl, setNewServerUrl] = (0, import_react37.useState)("");
+  const [newServerName, setNewServerName] = (0, import_react37.useState)("");
+  const [newServerApiKey, setNewServerApiKey] = (0, import_react37.useState)("");
+  const [addingServer, setAddingServer] = (0, import_react37.useState)(false);
   const saveConnections = (newConnections) => {
     setConnections(newConnections);
     if (typeof window !== "undefined") {
@@ -7275,7 +10096,7 @@ var SettingsModal = ({
       }
     } catch (error) {
       console.error("Failed to load configuration:", error);
-      import_antd29.message.error("Failed to load current configuration");
+      import_antd34.message.error("Failed to load current configuration");
     }
   };
   const loadModelsConfig = async (serverId) => {
@@ -7326,7 +10147,7 @@ var SettingsModal = ({
       console.error("Failed to load models configuration:", error);
     }
   };
-  (0, import_react28.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (open && activeTabKey) {
       initializeServerConfig(activeTabKey);
       const connection = connections.find((c) => c.id === activeTabKey);
@@ -7335,7 +10156,7 @@ var SettingsModal = ({
       }
     }
   }, [open, activeTabKey]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (open && activeTabKey) {
       const connection = connections.find((c) => c.id === activeTabKey);
       if (connection?.connected) {
@@ -7349,7 +10170,7 @@ var SettingsModal = ({
   }, [open, activeTabKey, activeMenu]);
   const handleAddServer = async () => {
     if (!newServerUrl.trim()) {
-      import_antd29.message.error("Please enter a server URL");
+      import_antd34.message.error("Please enter a server URL");
       return;
     }
     let normalizedUrl = newServerUrl.trim();
@@ -7375,7 +10196,7 @@ var SettingsModal = ({
     setNewServerUrl("");
     setNewServerName("");
     setNewServerApiKey("");
-    import_antd29.message.success("Server added successfully");
+    import_antd34.message.success("Server added successfully");
   };
   const handleDeleteServer = (serverId) => {
     const newConnections = connections.filter((c) => c.id !== serverId);
@@ -7392,7 +10213,7 @@ var SettingsModal = ({
         setActiveTabKey("");
       }
     }
-    import_antd29.message.success("Server deleted");
+    import_antd34.message.success("Server deleted");
   };
   const handleTabChange = (newTabKey) => {
     setConnections(
@@ -7406,12 +10227,12 @@ var SettingsModal = ({
   const handleSave = async () => {
     const connection = connections.find((c) => c.id === activeTabKey);
     if (!connection || !connection.connected) {
-      import_antd29.message.error("Please connect to a server first");
+      import_antd34.message.error("Please connect to a server first");
       return;
     }
     const url = connection.url;
     if (!url) {
-      import_antd29.message.error("Please connect to a server first");
+      import_antd34.message.error("Please connect to a server first");
       return;
     }
     try {
@@ -7475,23 +10296,23 @@ var SettingsModal = ({
         const data = await response.json();
         if (response.ok && data.success) {
           if (data.requiresRestart && data.requiresRestart.length > 0) {
-            import_antd29.message.warning(
+            import_antd34.message.warning(
               `Configuration saved. Please restart the server for ${data.requiresRestart.join(
                 ", "
               )} to take effect.`,
               5
             );
           } else {
-            import_antd29.message.success("Configuration saved and applied successfully");
+            import_antd34.message.success("Configuration saved and applied successfully");
           }
           if (data.warnings && data.warnings.length > 0) {
             data.warnings.forEach((warning) => {
-              import_antd29.message.warning(warning, 5);
+              import_antd34.message.warning(warning, 5);
             });
           }
           onClose();
         } else {
-          import_antd29.message.error(data.error || "Failed to save configuration");
+          import_antd34.message.error(data.error || "Failed to save configuration");
         }
       } else if (activeMenu === "models") {
         const validModels = config.models.filter(
@@ -7510,17 +10331,17 @@ var SettingsModal = ({
         });
         const data = await response.json();
         if (response.ok && data.success) {
-          import_antd29.message.success(
+          import_antd34.message.success(
             "Model configuration saved and registered successfully"
           );
           onClose();
         } else {
-          import_antd29.message.error(data.error || "Failed to save model configuration");
+          import_antd34.message.error(data.error || "Failed to save model configuration");
         }
       }
     } catch (error) {
       console.error("Failed to save configuration:", error);
-      import_antd29.message.error(error.message || "Failed to save configuration");
+      import_antd34.message.error(error.message || "Failed to save configuration");
     } finally {
       setLoading(false);
     }
@@ -7536,25 +10357,25 @@ var SettingsModal = ({
         }
       }));
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        import_antd29.Alert,
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        import_antd34.Alert,
         {
           message: "Configuration Effect",
-          description: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { marginBottom: 8 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                import_icons17.CheckCircleOutlined,
+          description: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { style: { marginBottom: 8 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                import_icons21.CheckCircleOutlined,
                 {
                   style: { color: "#52c41a", marginRight: 8 }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("strong", { children: "Immediately effective:" }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("strong", { children: "Immediately effective:" }),
               " QUEUE_SERVICE_TYPE, REDIS_URL, REDIS_PASSWORD, QUEUE_NAME"
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.ReloadOutlined, { style: { color: "#faad14", marginRight: 8 } }),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("strong", { children: "Requires restart:" }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons21.ReloadOutlined, { style: { color: "#faad14", marginRight: 8 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("strong", { children: "Requires restart:" }),
               " PORT (server must be restarted to change port)"
             ] })
           ] }),
@@ -7563,9 +10384,9 @@ var SettingsModal = ({
           className: styles.alertCard
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure environment variables in .env format (key=value). One variable per line. Leave password fields empty to keep current values." }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        TextArea,
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure environment variables in .env format (key=value). One variable per line. Leave password fields empty to keep current values." }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        TextArea3,
         {
           value: config.envText,
           onChange: (e) => setEnvText(e.target.value),
@@ -7641,10 +10462,10 @@ QUEUE_NAME=tasks`,
         }));
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure model lattices. Each model will be registered with the provided key and can be used by agents." }) }),
-      config.models.map((model, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: styles.card, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { type: "secondary", style: { fontSize: 14, lineHeight: 1.6 }, children: "Configure model lattices. Each model will be registered with the provided key and can be used by agents." }) }),
+      config.models.map((model, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: styles.card, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
           "div",
           {
             style: {
@@ -7656,13 +10477,13 @@ QUEUE_NAME=tasks`,
               borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Text14, { strong: true, style: { fontSize: 16 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Text17, { strong: true, style: { fontSize: 16 }, children: [
                   "Model ",
                   index + 1
                 ] }),
-                model.key && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-                  Text14,
+                model.key && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+                  Text17,
                   {
                     type: "secondary",
                     style: { marginLeft: 8, fontSize: 12 },
@@ -7674,8 +10495,8 @@ QUEUE_NAME=tasks`,
                   }
                 )
               ] }),
-              config.models.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                import_antd29.Button,
+              config.models.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                import_antd34.Button,
                 {
                   type: "text",
                   danger: true,
@@ -7691,11 +10512,11 @@ QUEUE_NAME=tasks`,
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_antd29.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { className: styles.formLabel, children: "Key *" }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              import_antd29.Input,
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_antd34.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { className: styles.formLabel, children: "Key *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              import_antd34.Input,
               {
                 placeholder: "e.g., default, gpt-4, claude",
                 value: model.key,
@@ -7703,12 +10524,12 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { className: styles.formDescription, children: "Unique identifier for this model" })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { className: styles.formDescription, children: "Unique identifier for this model" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { className: styles.formLabel, children: "Provider *" }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              import_antd29.Select,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              import_antd34.Select,
               {
                 style: { width: "100%", height: 40 },
                 value: model.provider,
@@ -7723,10 +10544,10 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { className: styles.formLabel, children: "Model Name *" }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              import_antd29.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              import_antd34.Input,
               {
                 placeholder: "e.g., gpt-4, claude-3-opus, kimi-k2-250905",
                 value: model.model,
@@ -7735,10 +10556,10 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { className: styles.formLabel, children: "API Key" }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              import_antd29.Input.Password,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              import_antd34.Input.Password,
               {
                 placeholder: "Enter your API key",
                 value: model.apiKey,
@@ -7746,12 +10567,12 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { className: styles.formLabel, children: "Base URL" }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              import_antd29.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              import_antd34.Input,
               {
                 placeholder: "e.g., https://api.openai.com/v1",
                 value: model.baseURL,
@@ -7759,23 +10580,23 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { className: styles.formDescription, children: "Optional custom base URL for the API" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_antd29.Space, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              import_antd29.Switch,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_antd34.Space, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              import_antd34.Switch,
               {
                 checked: model.streaming,
                 onChange: (checked) => handleModelChange(index, "streaming", checked)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { children: "Enable Streaming" })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { children: "Enable Streaming" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", gap: 20 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { className: styles.formLabel, children: "Max Tokens" }),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                import_antd29.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { style: { display: "flex", gap: 20 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { className: styles.formLabel, children: "Max Tokens" }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                import_antd34.Input,
                 {
                   type: "number",
                   placeholder: "e.g., 4096",
@@ -7789,10 +10610,10 @@ QUEUE_NAME=tasks`,
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { className: styles.formLabel, children: "Temperature" }),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-                import_antd29.Input,
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+                import_antd34.Input,
                 {
                   type: "number",
                   step: "0.1",
@@ -7810,8 +10631,8 @@ QUEUE_NAME=tasks`,
           ] })
         ] })
       ] }, index)),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        import_antd29.Button,
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        import_antd34.Button,
         {
           type: "dashed",
           onClick: handleAddModel,
@@ -7838,9 +10659,9 @@ QUEUE_NAME=tasks`,
   );
   const currentConnection = connections.find((c) => c.id === activeTabKey);
   const renderTabLabel = (connection) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        import_icons17.CloudServerOutlined,
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        import_icons21.CloudServerOutlined,
         {
           style: {
             marginRight: 8,
@@ -7848,15 +10669,15 @@ QUEUE_NAME=tasks`,
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: connection.name }),
-      connection.connected && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        import_icons17.CheckCircleFilled,
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: connection.name }),
+      connection.connected && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        import_icons21.CheckCircleFilled,
         {
           style: { color: "#52c41a", fontSize: 12, marginLeft: 8 }
         }
       ),
-      connection.error && !connection.connecting && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        import_icons17.CloseCircleFilled,
+      connection.error && !connection.connecting && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        import_icons21.CloseCircleFilled,
         {
           style: { color: "#ff4d4f", fontSize: 12, marginLeft: 8 }
         }
@@ -7866,35 +10687,35 @@ QUEUE_NAME=tasks`,
   const tabItems = connections.map((connection) => ({
     key: connection.id,
     label: renderTabLabel(connection),
-    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { display: "flex", height: "100%" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_jsx_runtime50.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { style: { display: "flex", height: "100%" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
         "div",
         {
           className: `${styles.menuItem} ${activeMenu === item.key ? "active" : ""}`,
           onClick: () => setActiveMenu(item.key),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.menuItemIcon, children: item.icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: styles.menuItemText, children: item.label })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: styles.menuItemIcon, children: item.icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: styles.menuItemText, children: item.label })
           ]
         },
         item.key
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: styles.content, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: styles.contentHeader, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: styles.contentHeaderLeft, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Title3, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Text14, { className: styles.contentDescription, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: styles.content, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: styles.contentHeader, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: styles.contentHeaderLeft, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Title3, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Text17, { className: styles.contentDescription, children: [
               activeMenu === "environment" && "Manage environment variables for the gateway server",
               activeMenu === "models" && "Configure and register model lattices for use by agents"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: styles.contentHeaderRight, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_antd29.Button, { onClick: onClose, children: "Cancel" }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              import_antd29.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: styles.contentHeaderRight, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_antd34.Button, { onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              import_antd34.Button,
               {
                 type: "primary",
-                icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.SaveOutlined, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons21.SaveOutlined, {}),
                 onClick: handleSave,
                 loading,
                 children: "Save Configuration"
@@ -7902,9 +10723,9 @@ QUEUE_NAME=tasks`,
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: styles.contentBody, children: renderContent(connection.id) })
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: styles.contentBody, children: renderContent(connection.id) })
       ] })
-    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "div",
       {
         style: {
@@ -7916,29 +10737,29 @@ QUEUE_NAME=tasks`,
           gap: 16,
           padding: 48
         },
-        children: connection.connecting ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Title3, { level: 4, children: "Connecting..." }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(Text14, { type: "secondary", style: { textAlign: "center" }, children: [
+        children: connection.connecting ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons21.LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Title3, { level: 4, children: "Connecting..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Text17, { type: "secondary", style: { textAlign: "center" }, children: [
             "Connecting to ",
             connection.url
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Title3, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            Text14,
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons21.LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Title3, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            Text17,
             {
               type: "secondary",
               style: { textAlign: "center", maxWidth: 400 },
               children: connection.error ? `Failed to connect to ${connection.url}. Please check the server URL and try again.` : `Click "Reconnect" to connect to ${connection.url}`
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-            import_antd29.Button,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            import_antd34.Button,
             {
               type: "primary",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.LinkOutlined, {}),
+              icon: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons21.LinkOutlined, {}),
               onClick: () => checkConnection(connection.id),
               loading: connection.connecting,
               style: { marginTop: 16 },
@@ -7950,9 +10771,9 @@ QUEUE_NAME=tasks`,
     ) }),
     closable: connections.length > 1
   }));
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      import_antd29.Modal,
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      import_antd34.Modal,
       {
         open,
         onCancel: onClose,
@@ -7960,8 +10781,8 @@ QUEUE_NAME=tasks`,
         width: "80%",
         footer: null,
         title: "Settings",
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-          import_antd29.Tabs,
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+          import_antd34.Tabs,
           {
             activeKey: activeTabKey,
             onChange: handleTabChange,
@@ -7974,7 +10795,7 @@ QUEUE_NAME=tasks`,
               }
             },
             items: tabItems,
-            addIcon: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+            addIcon: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
               "div",
               {
                 style: {
@@ -7984,8 +10805,8 @@ QUEUE_NAME=tasks`,
                   padding: "4px 8px"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_icons17.PlusOutlined, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: "Add Server" })
+                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_icons21.PlusOutlined, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: "Add Server" })
                 ]
               }
             )
@@ -7993,8 +10814,8 @@ QUEUE_NAME=tasks`,
         ) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-      import_antd29.Modal,
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      import_antd34.Modal,
       {
         title: "Add New Server",
         open: showAddServerModal,
@@ -8007,11 +10828,11 @@ QUEUE_NAME=tasks`,
         },
         confirmLoading: addingServer,
         className: styles.addServerModal,
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_antd29.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              import_antd29.Input,
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_antd34.Space, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              import_antd34.Input,
               {
                 placeholder: "e.g., Production Server",
                 value: newServerName,
@@ -8019,12 +10840,12 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              import_antd29.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              import_antd34.Input,
               {
                 placeholder: "e.g., http://localhost:4001",
                 value: newServerUrl,
@@ -8032,12 +10853,12 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-              import_antd29.Input.Password,
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+              import_antd34.Input.Password,
               {
                 placeholder: "Optional: Enter API key for authentication",
                 value: newServerApiKey,
@@ -8045,7 +10866,7 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Text14, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Text17, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
           ] })
         ] })
       }
@@ -8054,10 +10875,10 @@ QUEUE_NAME=tasks`,
 };
 
 // src/components/Chat/AgentServerSetting.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var AgentServerSetting = () => {
   const { settingsModalOpen, setSettingsModalOpen } = useLatticeChatShellContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     SettingsModal,
     {
       open: settingsModalOpen,
@@ -8067,11 +10888,11 @@ var AgentServerSetting = () => {
 };
 
 // src/components/Chat/LatticeChatShell.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var LatticeChatShell = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(LatticeChatShellContextProvider, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ConversationContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LatticeChatView, {}) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AgentServerSetting, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(LatticeChatShellContextProvider, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ConversationContextProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(LatticeChatView, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AgentServerSetting, {})
   ] });
 };
 // Annotate the CommonJS export names for ESM import in node:
@@ -8080,6 +10901,8 @@ var LatticeChatShell = (props) => {
   AgentThreadProvider,
   AssistantContext,
   AssistantContextProvider,
+  AssistantFlow,
+  AssistantNode,
   AxiomLatticeProvider,
   ChatUIContext,
   ChatUIContextProvider,
@@ -8096,6 +10919,8 @@ var LatticeChatShell = (props) => {
   MDViewFormItem,
   ScheduleButton,
   SideAppViewBrowser,
+  SkillFlow,
+  SkillNode,
   getElement,
   regsiterElement,
   useAgentChat,