@axiom-lattice/react-sdk 2.1.23 → 2.1.24

package/dist/index.mjs

@@ -136,7 +136,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,
@@ -145,7 +145,7 @@ function useChat(threadId, options = {}) {
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message6 || command?.resume?.message || "",
+        content: message8 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -483,7 +483,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,
@@ -491,7 +491,7 @@ function AgentThreadProvider({
       }));
       const userMessage = {
         id: Date.now().toString(),
-        content: message6 || command?.resume?.message || "",
+        content: message8 || command?.resume?.message || "",
         files,
         role: "human"
       };
@@ -1842,7 +1842,7 @@ import { DownloadOutlined, ExpandAltOutlined } from "@ant-design/icons";
 import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 var { Text } = 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] = useState8([]);
   const { openSideApp } = useChatUIContext();
   const processedData = dataSource?.map((item, index) => ({
@@ -1926,7 +1926,7 @@ var GenericDataTable = ({ data, interactive = true, default_open_in_side_app = t
     {
       size: "small",
       title: () => /* @__PURE__ */ jsxs3(Flex, { justify: "space-between", align: "center", children: [
-        /* @__PURE__ */ jsx9(Space, { children: /* @__PURE__ */ jsx9(Text, { strong: true, style: { fontSize: 16 }, children: message6 || "" }) }),
+        /* @__PURE__ */ jsx9(Space, { children: /* @__PURE__ */ jsx9(Text, { strong: true, style: { fontSize: 16 }, children: message8 || "" }) }),
         /* @__PURE__ */ jsxs3(Space, { children: [
           /* @__PURE__ */ jsx9(
             Button,
@@ -1947,8 +1947,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: [
@@ -2104,11 +2104,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] = useState10(false);
   return /* @__PURE__ */ jsxs4(Space2, { direction: "vertical", style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx11(MDResponse, { content: message6 }),
+    /* @__PURE__ */ jsx11(MDResponse, { content: message8 }),
     options ? /* @__PURE__ */ jsx11(Space2, { style: { justifyContent: "flex-end", width: "100%" }, children: options?.map((option) => /* @__PURE__ */ jsx11(
       Button2,
       {
@@ -3267,7 +3267,7 @@ var AttachmentsCard = ({
   columns = 1,
   showDownloadButton = false
 }) => {
-  const { Text: Text15 } = Typography7;
+  const { Text: Text18 } = Typography7;
   const [showAll, setShowAll] = useState13(false);
   const { openSideApp } = useChatUIContext();
   const getStyles = () => {
@@ -3342,7 +3342,7 @@ var AttachmentsCard = ({
     );
   };
   const renderFileDescription = (item) => /* @__PURE__ */ jsx19(Space7, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ jsx19(Space7, { children: /* @__PURE__ */ jsx19(
-    Text15,
+    Text18,
     {
       type: "secondary",
       style: {
@@ -3414,7 +3414,7 @@ var AttachmentsCard = ({
         }
       ),
       item.files && /* @__PURE__ */ jsxs10("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ jsxs10(Text15, { type: "secondary", style: { fontSize: "12px" }, children: [
+        /* @__PURE__ */ jsxs10(Text18, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
@@ -4086,7 +4086,7 @@ import {
 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var LazyBubble = ({
-  message: message6,
+  message: message8,
   renderContent,
   autoLoadRightPanel
 }) => {
@@ -4117,10 +4117,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__ */ jsx26("div", { style: { height: `${estimatedHeight}px`, minHeight: "50px" } });
   };
-  return /* @__PURE__ */ jsx26(ErrorBoundary, { children: /* @__PURE__ */ jsx26("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message6) : getPlaceholder() }) });
+  return /* @__PURE__ */ jsx26(ErrorBoundary, { children: /* @__PURE__ */ jsx26("div", { ref, style: { width: "100%" }, children: isVisible || wasEverVisible ? renderContent(message8) : getPlaceholder() }) });
 };
 var MemoizedBubbleList = memo(
   ({
@@ -4151,8 +4151,8 @@ var MessageList = ({
       messageLengthRef.current = messages?.length;
     }
   }, [messages?.length]);
-  const renderContent = useCallback7((message6) => {
-    const { content } = message6;
+  const renderContent = useCallback7((message8) => {
+    const { content } = message8;
     try {
       const json = JSON.parse(content);
       if (json.action && json.message) {
@@ -4160,7 +4160,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)}
 \`\`\``;
@@ -4169,17 +4169,17 @@ ${JSON.stringify(tool_call)}
     return /* @__PURE__ */ jsx26(Space10, { direction: "vertical", style: { width: "100%" }, children: /* @__PURE__ */ jsx26(MDResponse, { content: content_md }) });
   }, []);
   const items = useMemo4(
-    () => messages.map((message6, index) => ({
-      key: message6.id,
-      role: message6.role,
+    () => messages.map((message8, index) => ({
+      key: message8.id,
+      role: message8.role,
       typing: false,
       content: /* @__PURE__ */ jsx26(
         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 {
@@ -6373,12 +6373,14 @@ var AgentConversations = () => {
 };
 
 // src/components/Chat/ChatSidebar.tsx
-import { useState as useState24, useEffect as useEffect17, useRef as useRef13 } from "react";
-import { Divider as Divider2, Tooltip as Tooltip6 } from "antd";
+import { useState as useState27, useEffect as useEffect20, useRef as useRef13 } from "react";
+import { Divider as Divider4, Tooltip as Tooltip8, Modal as Modal3, Button as Button20 } from "antd";
 import {
   MenuFoldOutlined,
   MenuUnfoldOutlined,
-  SettingOutlined
+  SettingOutlined as SettingOutlined2,
+  ApartmentOutlined,
+  ThunderboltOutlined as ThunderboltOutlined2
 } from "@ant-design/icons";
 
 // src/components/Chat/AssistantList.tsx
@@ -6423,7 +6425,2718 @@ var AssistantList = () => {
 
 // src/components/Chat/ChatSidebar.tsx
 import { createStyles as createStyles12 } from "antd-style";
-import { Fragment as Fragment5, jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+
+// src/components/Chat/AssistantFlow.tsx
+import { useMemo as useMemo10, useEffect as useEffect17 } from "react";
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  useNodesState,
+  useEdgesState,
+  ReactFlowProvider
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+
+// src/components/Chat/AssistantNode.tsx
+import { useMemo as useMemo9 } from "react";
+import { Handle, Position } from "@xyflow/react";
+import { Avatar as Avatar5, Typography as Typography16, theme as theme3, Tag as Tag6, Tooltip as Tooltip6, Space as Space15, Popover as Popover2, Button as Button16, Divider as Divider2 } from "antd";
+import {
+  UserOutlined as UserOutlined3,
+  ToolOutlined as ToolOutlined2,
+  SettingOutlined,
+  IdcardOutlined,
+  InfoCircleOutlined as InfoCircleOutlined2,
+  CopyOutlined as CopyOutlined2,
+  CodeOutlined as CodeOutlined4,
+  BranchesOutlined
+} from "@ant-design/icons";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+var { Text: Text14 } = Typography16;
+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 } = theme3.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 } = useMemo9(() => {
+    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__ */ jsxs23(
+    "div",
+    {
+      style: {
+        width: 480,
+        maxHeight: "80vh",
+        overflowY: "auto",
+        padding: 16
+      },
+      children: [
+        /* @__PURE__ */ jsx43(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              marginBottom: 16
+            },
+            children: /* @__PURE__ */ jsxs23("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxs23(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    marginBottom: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx43(
+                      Text14,
+                      {
+                        strong: true,
+                        style: {
+                          fontSize: 18,
+                          fontWeight: 600,
+                          color: token.colorText
+                        },
+                        children: assistant.name
+                      }
+                    ),
+                    agentType && /* @__PURE__ */ jsx43(
+                      Tag6,
+                      {
+                        color: "purple",
+                        style: {
+                          margin: 0,
+                          fontSize: 10,
+                          padding: "2px 8px",
+                          fontWeight: 600
+                        },
+                        children: getAgentTypeLabel(agentType)
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx43(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6
+                  },
+                  children: /* @__PURE__ */ jsx43(
+                    Text14,
+                    {
+                      style: {
+                        fontSize: 11,
+                        color: token.colorTextTertiary,
+                        fontFamily: "monospace"
+                      },
+                      children: `>_ ${assistant.id}`
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        assistant.description && /* @__PURE__ */ jsx43("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs23(
+          Text14,
+          {
+            style: {
+              fontSize: 12,
+              color: token.colorText,
+              lineHeight: 1.6,
+              fontStyle: "italic"
+            },
+            children: [
+              '"',
+              assistant.description,
+              '"'
+            ]
+          }
+        ) }),
+        modelKey && /* @__PURE__ */ jsxs23("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsxs23(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                marginBottom: 8
+              },
+              children: [
+                /* @__PURE__ */ jsx43(
+                  SettingOutlined,
+                  {
+                    style: {
+                      fontSize: 14,
+                      color: token.colorTextSecondary
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx43(
+                  Text14,
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: token.colorTextSecondary,
+                      fontWeight: 500
+                    },
+                    children: "Model Engine"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx43(
+            Tag6,
+            {
+              color: "blue",
+              style: {
+                fontSize: 11,
+                padding: "4px 12px"
+              },
+              children: modelKey
+            }
+          )
+        ] }),
+        prompt && /* @__PURE__ */ jsxs23("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsxs23(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                marginBottom: 8
+              },
+              children: [
+                /* @__PURE__ */ jsx43(
+                  CodeOutlined4,
+                  {
+                    style: {
+                      fontSize: 14,
+                      color: token.colorTextSecondary
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx43(
+                  Text14,
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: token.colorTextSecondary,
+                      fontWeight: 600,
+                      letterSpacing: 0.5
+                    },
+                    children: "SYSTEM PROMPT"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx43(
+            "div",
+            {
+              style: {
+                padding: 12,
+                background: token.colorFillTertiary,
+                border: `1px solid ${token.colorBorderSecondary}`,
+                borderRadius: 4,
+                maxHeight: 200,
+                overflowY: "auto"
+              },
+              children: /* @__PURE__ */ jsx43(
+                Text14,
+                {
+                  style: {
+                    fontSize: 11,
+                    color: token.colorText,
+                    lineHeight: 1.6,
+                    whiteSpace: "pre-wrap"
+                  },
+                  children: prompt
+                }
+              )
+            }
+          )
+        ] }),
+        tools && tools.length > 0 && /* @__PURE__ */ jsxs23("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsxs23(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                marginBottom: 8
+              },
+              children: [
+                /* @__PURE__ */ jsx43(
+                  ToolOutlined2,
+                  {
+                    style: {
+                      fontSize: 14,
+                      color: token.colorTextSecondary
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs23(
+                  Text14,
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: token.colorTextSecondary,
+                      fontWeight: 500
+                    },
+                    children: [
+                      "Available Tools (",
+                      tools.length,
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx43(Space15, { size: [8, 8], wrap: true, children: tools.map((tool, index) => /* @__PURE__ */ jsx43(
+            Tag6,
+            {
+              color: "blue",
+              style: {
+                fontSize: 11,
+                padding: "4px 12px"
+              },
+              children: tool.replace(/_/g, " ")
+            },
+            index
+          )) })
+        ] }),
+        subAgents && subAgents.length > 0 && /* @__PURE__ */ jsxs23("div", { style: { marginBottom: 16 }, children: [
+          /* @__PURE__ */ jsxs23(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                marginBottom: 8
+              },
+              children: [
+                /* @__PURE__ */ jsx43(
+                  BranchesOutlined,
+                  {
+                    style: {
+                      fontSize: 14,
+                      color: token.colorTextSecondary
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs23(
+                  Text14,
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: token.colorTextSecondary,
+                      fontWeight: 500
+                    },
+                    children: [
+                      "Sub-Agent Architecture (",
+                      subAgents.length,
+                      ")"
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx43(Space15, { size: [8, 8], wrap: true, children: subAgents.map((subAgent, index) => /* @__PURE__ */ jsx43(
+            Tag6,
+            {
+              style: {
+                fontSize: 11,
+                padding: "4px 12px",
+                backgroundColor: token.colorFillTertiary,
+                color: token.colorText,
+                border: `1px solid ${token.colorBorderSecondary}`
+              },
+              children: `> ${subAgent}`
+            },
+            index
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx43(Divider2, { style: { margin: "16px 0" } }),
+        /* @__PURE__ */ jsxs23(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx43(
+                Button16,
+                {
+                  type: "primary",
+                  block: true,
+                  onClick: () => onClick?.(assistant),
+                  style: {
+                    flex: 1
+                  },
+                  children: "Configure Agent"
+                }
+              ),
+              /* @__PURE__ */ jsx43(
+                Button16,
+                {
+                  icon: /* @__PURE__ */ jsx43(CopyOutlined2, {}),
+                  onClick: () => handleCopy(assistant.id),
+                  title: "\u590D\u5236 ID"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      style: {
+        padding: 4
+      },
+      children: [
+        /* @__PURE__ */ jsx43(Handle, { type: "target", position: Position.Top }),
+        /* @__PURE__ */ jsxs23(
+          "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__ */ jsx43(
+                Popover2,
+                {
+                  content: detailCardContent,
+                  title: null,
+                  trigger: "hover",
+                  placement: "rightTop",
+                  overlayStyle: {
+                    maxWidth: "none"
+                  },
+                  overlayInnerStyle: {
+                    padding: 0
+                  },
+                  children: /* @__PURE__ */ jsx43(
+                    "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__ */ jsx43(
+                        InfoCircleOutlined2,
+                        {
+                          style: {
+                            fontSize: 14,
+                            color: token.colorTextSecondary
+                          }
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs23(
+                "div",
+                {
+                  style: {
+                    padding: 12,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 10
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs23(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          alignItems: "flex-start",
+                          gap: 10
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs23(
+                            "div",
+                            {
+                              style: {
+                                position: "relative",
+                                flexShrink: 0
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx43(
+                                  Avatar5,
+                                  {
+                                    size: 44,
+                                    icon: /* @__PURE__ */ jsx43(UserOutlined3, {}),
+                                    style: {
+                                      backgroundColor: badgeColor,
+                                      color: "#fff",
+                                      fontSize: 16,
+                                      fontWeight: 600
+                                    },
+                                    children: initials
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx43(
+                                  "div",
+                                  {
+                                    style: {
+                                      position: "absolute",
+                                      bottom: 0,
+                                      right: 0,
+                                      width: 10,
+                                      height: 10,
+                                      borderRadius: "50%",
+                                      background: "#52c41a",
+                                      border: `2px solid ${token.colorBgContainer}`
+                                    }
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs23(
+                            "div",
+                            {
+                              style: {
+                                flex: 1,
+                                minWidth: 0
+                              },
+                              children: [
+                                /* @__PURE__ */ jsx43(
+                                  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__ */ jsxs23(
+                                  "div",
+                                  {
+                                    style: {
+                                      display: "flex",
+                                      alignItems: "center",
+                                      gap: 4
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ jsx43(
+                                        IdcardOutlined,
+                                        {
+                                          style: {
+                                            fontSize: 9,
+                                            color: token.colorTextTertiary
+                                          }
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsx43(
+                                        Text14,
+                                        {
+                                          style: {
+                                            fontSize: 9,
+                                            color: token.colorTextTertiary
+                                          },
+                                          ellipsis: { tooltip: assistant.id },
+                                          children: assistant.id
+                                        }
+                                      )
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    assistant.description && /* @__PURE__ */ jsx43(
+                      "div",
+                      {
+                        style: {
+                          padding: 8,
+                          background: token.colorFillTertiary,
+                          border: `1px solid ${token.colorBorderSecondary}`,
+                          borderRadius: 4,
+                          borderLeft: `2px solid ${badgeColor}`
+                        },
+                        children: /* @__PURE__ */ jsx43(
+                          Tooltip6,
+                          {
+                            title: assistant.description.length > 150 ? assistant.description : void 0,
+                            placement: "top",
+                            children: /* @__PURE__ */ jsxs23(
+                              "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__ */ jsxs23(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          flexWrap: "wrap",
+                          gap: 4,
+                          padding: "4px 0",
+                          marginTop: "auto"
+                        },
+                        children: [
+                          agentType && /* @__PURE__ */ jsx43(
+                            Tag6,
+                            {
+                              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__ */ jsxs23(
+                            Tag6,
+                            {
+                              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__ */ jsx43(
+                            Tag6,
+                            {
+                              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__ */ jsx43(Handle, { type: "source", position: Position.Bottom })
+      ]
+    }
+  );
+};
+var AssistantNode_default = AssistantNode;
+
+// src/components/Chat/AssistantFlow.tsx
+import { jsx as jsx44, jsxs as jsxs24 } from "react/jsx-runtime";
+var AssistantFlowInner = ({
+  assistants,
+  onNodeClick
+}) => {
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const nodeTypes = useMemo10(
+    () => ({
+      assistant: AssistantNode_default
+    }),
+    []
+  );
+  useEffect17(() => {
+    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__ */ jsx44("div", { style: { width: "100%", height: "100%", background: "#fafafa" }, children: /* @__PURE__ */ jsxs24(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      onNodesChange,
+      onEdgesChange,
+      nodeTypes,
+      fitView: true,
+      children: [
+        /* @__PURE__ */ jsx44(Background, { color: "#eee", gap: 20 }),
+        /* @__PURE__ */ jsx44(Controls, {})
+      ]
+    }
+  ) });
+};
+var AssistantFlow = (props) => /* @__PURE__ */ jsx44(ReactFlowProvider, { children: /* @__PURE__ */ jsx44(AssistantFlowInner, { ...props }) });
+var AssistantFlow_default = AssistantFlow;
+
+// src/components/Chat/SkillFlow.tsx
+import { useMemo as useMemo12, useEffect as useEffect19, useState as useState26 } from "react";
+import {
+  ReactFlow as ReactFlow2,
+  Background as Background2,
+  Controls as Controls2,
+  useNodesState as useNodesState2,
+  useEdgesState as useEdgesState2,
+  ReactFlowProvider as ReactFlowProvider2
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { Button as Button19, theme as theme6 } from "antd";
+import { PlusOutlined as PlusOutlined3 } from "@ant-design/icons";
+
+// src/components/Chat/SkillNode.tsx
+import { useEffect as useEffect18, useMemo as useMemo11, useState as useState24 } from "react";
+import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
+import {
+  Avatar as Avatar6,
+  Typography as Typography17,
+  theme as theme4,
+  Tag as Tag7,
+  Tooltip as Tooltip7,
+  Space as Space16,
+  Button as Button17,
+  Divider as Divider3,
+  Input,
+  Modal,
+  message as message5
+} from "antd";
+import {
+  BookOutlined,
+  BranchesOutlined as BranchesOutlined2,
+  CopyrightOutlined,
+  InfoCircleOutlined as InfoCircleOutlined3,
+  FileTextOutlined as FileTextOutlined5,
+  CopyOutlined as CopyOutlined3,
+  PlusOutlined
+} from "@ant-design/icons";
+import { Fragment as Fragment5, jsx as jsx45, jsxs as jsxs25 } from "react/jsx-runtime";
+var { Text: Text15 } = Typography17;
+var { TextArea } = 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 } = theme4.useToken();
+  const { config } = useLatticeChatShellContext();
+  if (!data) {
+    return null;
+  }
+  const { skill, onClick } = data;
+  if (!skill) {
+    return null;
+  }
+  const [currentSkill, setCurrentSkill] = useState24(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 = useMemo11(
+    () => 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] = useState24(false);
+  const [draftSkill, setDraftSkill] = useState24({
+    ...skill,
+    id: skill.name
+  });
+  const [metadataRows, setMetadataRows] = useState24(
+    metadataEntries.map(([key, value]) => ({
+      key,
+      value
+    }))
+  );
+  const [isModalOpen, setIsModalOpen] = useState24(false);
+  const [saving, setSaving] = useState24(false);
+  useEffect18(() => {
+    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 = () => {
+    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)) {
+            message5.success("Skill deleted successfully");
+            setIsModalOpen(false);
+            onClick?.(currentSkill);
+          } else {
+            message5.error(data2.message || "Failed to delete skill");
+          }
+        } catch (error) {
+          message5.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) {
+        message5.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 {
+        message5.error(data2.message || "Failed to update skill");
+      }
+    } catch (error) {
+      message5.error(
+        error.message || "An error occurred while updating the skill"
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+  const editingView = /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        gap: 12
+      },
+      children: [
+        /* @__PURE__ */ jsxs25("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsx45(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
+          /* @__PURE__ */ jsx45(
+            TextArea,
+            {
+              value: draftSkill.description,
+              onChange: (e) => handleFieldChange("description", e.target.value),
+              placeholder: "Description",
+              autoSize: { minRows: 2, maxRows: 4 }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs25("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsx45(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
+          /* @__PURE__ */ jsx45(
+            Input,
+            {
+              value: draftSkill.license,
+              onChange: (e) => handleFieldChange("license", e.target.value),
+              placeholder: "License"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs25("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsx45(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
+          /* @__PURE__ */ jsx45(
+            Input,
+            {
+              value: draftSkill.compatibility,
+              onChange: (e) => handleFieldChange("compatibility", e.target.value),
+              placeholder: "Compatibility"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs25(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx45(
+                Text15,
+                {
+                  style: {
+                    fontSize: 12,
+                    color: token.colorTextSecondary,
+                    fontWeight: 500
+                  },
+                  children: "Metadata"
+                }
+              ),
+              /* @__PURE__ */ jsx45(
+                Button17,
+                {
+                  size: "small",
+                  icon: /* @__PURE__ */ jsx45(PlusOutlined, {}),
+                  onClick: handleAddMetadataRow,
+                  children: "Add"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs25(Space16, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
+          metadataRows.length === 0 && /* @__PURE__ */ jsx45(
+            Text15,
+            {
+              style: {
+                fontSize: 11,
+                color: token.colorTextTertiary
+              },
+              children: "No metadata yet. Use Add to create one."
+            }
+          ),
+          metadataRows.map((row, index) => /* @__PURE__ */ jsxs25(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: 4,
+                width: "100%"
+              },
+              children: [
+                /* @__PURE__ */ jsxs25(Text15, { style: { fontSize: 11, color: token.colorTextSecondary }, children: [
+                  "Meta ",
+                  index + 1
+                ] }),
+                /* @__PURE__ */ jsxs25(Space16, { style: { width: "100%" }, size: 8, wrap: true, children: [
+                  /* @__PURE__ */ jsx45(
+                    Input,
+                    {
+                      value: row.key,
+                      placeholder: "Key",
+                      style: { width: 140 },
+                      onChange: (e) => handleMetadataChange(index, "key", e.target.value)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx45(
+                    Input,
+                    {
+                      value: row.value,
+                      placeholder: "Value",
+                      style: { flex: 1, minWidth: 200 },
+                      onChange: (e) => handleMetadataChange(index, "value", e.target.value)
+                    }
+                  )
+                ] })
+              ]
+            },
+            index
+          ))
+        ] }),
+        /* @__PURE__ */ jsxs25("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsx45(Text15, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
+          /* @__PURE__ */ jsx45(
+            TextArea,
+            {
+              value: draftSkill.content,
+              onChange: (e) => handleFieldChange("content", e.target.value),
+              placeholder: "Content",
+              autoSize: { minRows: 4, maxRows: 8 }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+  const detailCardContent = /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      style: {
+        width: 480,
+        maxHeight: "80vh",
+        overflowY: "auto",
+        padding: 16
+      },
+      children: [
+        /* @__PURE__ */ jsx45(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              marginBottom: 16
+            },
+            children: /* @__PURE__ */ jsxs25("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxs25(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    marginBottom: 8
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx45(
+                      Text15,
+                      {
+                        strong: true,
+                        style: {
+                          fontSize: 18,
+                          fontWeight: 600,
+                          color: token.colorText
+                        },
+                        children: currentSkill.name
+                      }
+                    ),
+                    /* @__PURE__ */ jsx45(
+                      Tag7,
+                      {
+                        style: {
+                          margin: 0,
+                          fontSize: 10,
+                          padding: "2px 8px",
+                          fontWeight: 600
+                        },
+                        color: "geekblue",
+                        children: category.toUpperCase()
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx45(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6
+                  },
+                  children: /* @__PURE__ */ jsx45(
+                    Text15,
+                    {
+                      style: {
+                        fontSize: 11,
+                        color: token.colorTextTertiary,
+                        fontFamily: "monospace"
+                      },
+                      children: `>_ ${currentSkill.id}`
+                    }
+                  )
+                }
+              )
+            ] })
+          }
+        ),
+        isEditing ? editingView : /* @__PURE__ */ jsxs25(Fragment5, { children: [
+          currentSkill.description && /* @__PURE__ */ jsx45("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs25(
+            Text15,
+            {
+              style: {
+                fontSize: 12,
+                color: token.colorText,
+                lineHeight: 1.6,
+                fontStyle: "italic"
+              },
+              children: [
+                '"',
+                currentSkill.description,
+                '"'
+              ]
+            }
+          ) }),
+          metadataEntries.length > 0 && /* @__PURE__ */ jsxs25("div", { style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsxs25(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  marginBottom: 8
+                },
+                children: [
+                  /* @__PURE__ */ jsx45(
+                    InfoCircleOutlined3,
+                    {
+                      style: {
+                        fontSize: 14,
+                        color: token.colorTextSecondary
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs25(
+                    Text15,
+                    {
+                      style: {
+                        fontSize: 12,
+                        color: token.colorTextSecondary,
+                        fontWeight: 500
+                      },
+                      children: [
+                        "Metadata (",
+                        metadataEntries.length,
+                        ")"
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx45(
+              "div",
+              {
+                style: {
+                  border: `1px solid ${token.colorBorderSecondary}`,
+                  borderRadius: 6,
+                  overflow: "hidden"
+                },
+                children: metadataEntries.map(([key, value], index) => /* @__PURE__ */ jsxs25(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "stretch",
+                      borderBottom: index === metadataEntries.length - 1 ? "none" : `1px solid ${token.colorBorderSecondary}`
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx45(
+                        "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__ */ jsx45(
+                        "div",
+                        {
+                          style: {
+                            flex: 1,
+                            padding: "8px 10px",
+                            fontSize: 11,
+                            color: token.colorText,
+                            wordBreak: "break-word"
+                          },
+                          children: value
+                        }
+                      )
+                    ]
+                  },
+                  key
+                ))
+              }
+            )
+          ] }),
+          hasSubSkills && /* @__PURE__ */ jsxs25("div", { style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsxs25(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  marginBottom: 8
+                },
+                children: [
+                  /* @__PURE__ */ jsx45(
+                    BranchesOutlined2,
+                    {
+                      style: {
+                        fontSize: 14,
+                        color: token.colorTextSecondary
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs25(
+                    Text15,
+                    {
+                      style: {
+                        fontSize: 12,
+                        color: token.colorTextSecondary,
+                        fontWeight: 500
+                      },
+                      children: [
+                        "Sub-Skills (",
+                        currentSkill.subSkills.length,
+                        ")"
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx45(Space16, { size: [8, 8], wrap: true, children: currentSkill.subSkills.map(
+              (subSkill, index) => /* @__PURE__ */ jsx45(
+                Tag7,
+                {
+                  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__ */ jsx45("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs25(Space16, { size: [8, 8], wrap: true, children: [
+            currentSkill.license && /* @__PURE__ */ jsx45(
+              Tag7,
+              {
+                icon: /* @__PURE__ */ jsx45(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__ */ jsx45(
+              Tag7,
+              {
+                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__ */ jsx45("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs25(Space16, { direction: "vertical", size: 4, children: [
+            currentSkill.createdAt && /* @__PURE__ */ jsxs25(
+              Text15,
+              {
+                style: {
+                  fontSize: 11,
+                  color: token.colorTextTertiary,
+                  fontFamily: "monospace"
+                },
+                children: [
+                  "Created: ",
+                  formatDate(currentSkill.createdAt)
+                ]
+              }
+            ),
+            currentSkill.updatedAt && /* @__PURE__ */ jsxs25(
+              Text15,
+              {
+                style: {
+                  fontSize: 11,
+                  color: token.colorTextTertiary,
+                  fontFamily: "monospace"
+                },
+                children: [
+                  "Updated: ",
+                  formatDate(currentSkill.updatedAt)
+                ]
+              }
+            )
+          ] }) }),
+          currentSkill.content && /* @__PURE__ */ jsxs25("div", { style: { marginBottom: 0 }, children: [
+            /* @__PURE__ */ jsxs25(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 8,
+                  marginBottom: 8
+                },
+                children: [
+                  /* @__PURE__ */ jsx45(
+                    FileTextOutlined5,
+                    {
+                      style: {
+                        fontSize: 14,
+                        color: token.colorTextSecondary
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx45(
+                    Text15,
+                    {
+                      style: {
+                        fontSize: 12,
+                        color: token.colorTextSecondary,
+                        fontWeight: 600,
+                        letterSpacing: 0.5
+                      },
+                      children: "CONTENT"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx45(
+              "div",
+              {
+                style: {
+                  padding: 12,
+                  background: token.colorFillTertiary,
+                  border: `1px solid ${token.colorBorderSecondary}`,
+                  borderRadius: 4,
+                  maxHeight: 200,
+                  overflowY: "auto"
+                },
+                children: /* @__PURE__ */ jsx45(
+                  Text15,
+                  {
+                    style: {
+                      fontSize: 11,
+                      color: token.colorText,
+                      lineHeight: 1.6,
+                      whiteSpace: "pre-wrap"
+                    },
+                    children: currentSkill.content
+                  }
+                )
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx45(Divider3, { style: { margin: "16px 0" } }),
+        /* @__PURE__ */ jsx45(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: 8
+            },
+            children: isEditing ? /* @__PURE__ */ jsxs25(Fragment5, { children: [
+              /* @__PURE__ */ jsx45(
+                Button17,
+                {
+                  block: true,
+                  onClick: () => {
+                    setIsEditing(false);
+                    setDraftSkill(skill);
+                  },
+                  style: {
+                    flex: 1
+                  },
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx45(
+                Button17,
+                {
+                  type: "primary",
+                  block: true,
+                  onClick: handleSave,
+                  loading: saving,
+                  style: {
+                    flex: 1
+                  },
+                  children: "Save"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs25(Fragment5, { children: [
+              /* @__PURE__ */ jsx45(
+                Button17,
+                {
+                  type: "primary",
+                  block: true,
+                  onClick: () => setIsEditing(true),
+                  style: {
+                    flex: 1
+                  },
+                  children: "Edit Skill"
+                }
+              ),
+              /* @__PURE__ */ jsx45(Button17, { danger: true, onClick: handleDelete, children: "Delete" }),
+              /* @__PURE__ */ jsx45(
+                Button17,
+                {
+                  icon: /* @__PURE__ */ jsx45(CopyOutlined3, {}),
+                  onClick: () => handleCopy(currentSkill.id),
+                  title: "Copy ID"
+                }
+              )
+            ] })
+          }
+        )
+      ]
+    }
+  );
+  const hiddenHandleStyle = {
+    opacity: 0,
+    background: "transparent",
+    border: "none",
+    width: 0,
+    height: 0,
+    pointerEvents: "none"
+  };
+  return /* @__PURE__ */ jsxs25(
+    "div",
+    {
+      style: {
+        padding: 4
+      },
+      children: [
+        /* @__PURE__ */ jsx45(
+          Handle2,
+          {
+            type: "target",
+            position: Position2.Top,
+            style: hiddenHandleStyle,
+            isConnectable: false
+          }
+        ),
+        /* @__PURE__ */ jsx45(
+          "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__ */ jsxs25(
+              "div",
+              {
+                style: {
+                  padding: 12,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 10
+                },
+                children: [
+                  /* @__PURE__ */ jsxs25(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "flex-start",
+                        gap: 10
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxs25(
+                          "div",
+                          {
+                            style: {
+                              position: "relative",
+                              flexShrink: 0
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx45(
+                                Avatar6,
+                                {
+                                  size: 44,
+                                  icon: /* @__PURE__ */ jsx45(BookOutlined, {}),
+                                  style: {
+                                    backgroundColor: badgeColor,
+                                    color: "#fff",
+                                    fontSize: 16,
+                                    fontWeight: 600
+                                  },
+                                  children: initials
+                                }
+                              ),
+                              hasSubSkills && /* @__PURE__ */ jsx45(
+                                "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__ */ jsx45(
+                                    BranchesOutlined2,
+                                    {
+                                      style: {
+                                        fontSize: 10,
+                                        color: "#fff"
+                                      }
+                                    }
+                                  )
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs25(
+                          "div",
+                          {
+                            style: {
+                              flex: 1,
+                              minWidth: 0
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx45(
+                                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__ */ jsxs25(
+                                "div",
+                                {
+                                  style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 4
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ jsx45(
+                                      FileTextOutlined5,
+                                      {
+                                        style: {
+                                          fontSize: 9,
+                                          color: token.colorTextTertiary
+                                        }
+                                      }
+                                    ),
+                                    /* @__PURE__ */ jsx45(
+                                      Text15,
+                                      {
+                                        style: {
+                                          fontSize: 9,
+                                          color: token.colorTextTertiary
+                                        },
+                                        ellipsis: { tooltip: currentSkill.id },
+                                        children: currentSkill.id
+                                      }
+                                    )
+                                  ]
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  currentSkill.description && /* @__PURE__ */ jsx45(
+                    "div",
+                    {
+                      style: {
+                        padding: 8,
+                        background: token.colorFillTertiary,
+                        border: `1px solid ${token.colorBorderSecondary}`,
+                        borderRadius: 4,
+                        borderLeft: `2px solid ${badgeColor}`
+                      },
+                      children: /* @__PURE__ */ jsx45(
+                        Tooltip7,
+                        {
+                          title: currentSkill.description.length > 150 ? currentSkill.description : void 0,
+                          placement: "top",
+                          children: /* @__PURE__ */ jsxs25(
+                            "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__ */ jsxs25(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        flexWrap: "wrap",
+                        gap: 4,
+                        padding: "4px 0",
+                        marginTop: "auto"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx45(
+                          Tag7,
+                          {
+                            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__ */ jsxs25(
+                          Tag7,
+                          {
+                            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__ */ jsx45(
+                          Tag7,
+                          {
+                            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__ */ jsx45(CopyrightOutlined, {}),
+                            children: currentSkill.license
+                          }
+                        ),
+                        currentSkill.compatibility && /* @__PURE__ */ jsx45(
+                          Tag7,
+                          {
+                            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__ */ jsx45(InfoCircleOutlined3, {}),
+                            children: currentSkill.compatibility
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx45(
+          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__ */ jsx45(
+          Handle2,
+          {
+            type: "source",
+            position: Position2.Bottom,
+            style: hiddenHandleStyle,
+            isConnectable: false
+          }
+        )
+      ]
+    }
+  );
+};
+var SkillNode_default = SkillNode;
+
+// src/components/Chat/CreateSkillModal.tsx
+import { useState as useState25 } from "react";
+import {
+  Modal as Modal2,
+  Form,
+  Input as Input2,
+  Button as Button18,
+  message as message6,
+  Space as Space17,
+  Typography as Typography18
+} from "antd";
+import { PlusOutlined as PlusOutlined2 } from "@ant-design/icons";
+import { theme as theme5 } from "antd";
+import { jsx as jsx46, jsxs as jsxs26 } from "react/jsx-runtime";
+var { TextArea: TextArea2 } = Input2;
+var { Text: Text16 } = Typography18;
+var CreateSkillModal = ({
+  open,
+  onCancel,
+  onSuccess
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState25(false);
+  const { config } = useLatticeChatShellContext();
+  const { token } = theme5.useToken();
+  const defaultMetadataRows = [{ key: "category", value: "global" }];
+  const [metadataRows, setMetadataRows] = useState25(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) {
+        message6.success("Skill created successfully");
+        form.resetFields();
+        setMetadataRows(defaultMetadataRows);
+        onSuccess?.();
+        onCancel();
+      } else {
+        message6.error(data.message || "Failed to create skill");
+      }
+    } catch (error) {
+      if (error.errorFields) {
+        return;
+      }
+      message6.error(
+        error.message || "An error occurred while creating the skill"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+  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__ */ jsx46(
+    Modal2,
+    {
+      title: "Create New Skill",
+      open,
+      onCancel: handleCancel,
+      footer: null,
+      width: 520,
+      destroyOnClose: true,
+      styles: {
+        body: { padding: 16 }
+      },
+      children: /* @__PURE__ */ jsx46(
+        Form,
+        {
+          form,
+          layout: "vertical",
+          onFinish: handleSubmit,
+          autoComplete: "off",
+          children: /* @__PURE__ */ jsxs26(
+            "div",
+            {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                gap: 12
+              },
+              children: [
+                /* @__PURE__ */ jsxs26("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx46(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Name" }),
+                  /* @__PURE__ */ jsx46(
+                    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__ */ jsx46(Input2, { placeholder: "e.g., data-analysis" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs26("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx46(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
+                  /* @__PURE__ */ jsx46(
+                    Form.Item,
+                    {
+                      name: "description",
+                      rules: [
+                        { required: true, message: "Please enter skill description" }
+                      ],
+                      style: { marginBottom: 0 },
+                      children: /* @__PURE__ */ jsx46(
+                        TextArea2,
+                        {
+                          placeholder: "Description",
+                          autoSize: { minRows: 2, maxRows: 4 }
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs26("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx46(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
+                  /* @__PURE__ */ jsx46(Form.Item, { name: "license", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx46(Input2, { placeholder: "License" }) })
+                ] }),
+                /* @__PURE__ */ jsxs26("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx46(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
+                  /* @__PURE__ */ jsx46(Form.Item, { name: "compatibility", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx46(Input2, { placeholder: "Compatibility" }) })
+                ] }),
+                /* @__PURE__ */ jsxs26("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsxs26(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "space-between",
+                        gap: 8
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx46(
+                          Text16,
+                          {
+                            style: {
+                              fontSize: 12,
+                              color: token.colorTextSecondary,
+                              fontWeight: 500
+                            },
+                            children: "Metadata"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx46(
+                          Button18,
+                          {
+                            size: "small",
+                            icon: /* @__PURE__ */ jsx46(PlusOutlined2, {}),
+                            onClick: handleAddMetadataRow,
+                            children: "Add"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs26(Space17, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
+                    metadataRows.length === 0 && /* @__PURE__ */ jsx46(
+                      Text16,
+                      {
+                        style: {
+                          fontSize: 11,
+                          color: token.colorTextTertiary
+                        },
+                        children: "No metadata yet. Use Add to create one."
+                      }
+                    ),
+                    metadataRows.map((row, index) => /* @__PURE__ */ jsxs26(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: 4,
+                          width: "100%"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs26(
+                            Text16,
+                            {
+                              style: { fontSize: 11, color: token.colorTextSecondary },
+                              children: [
+                                "Meta ",
+                                index + 1
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs26(Space17, { style: { width: "100%" }, size: 8, wrap: true, children: [
+                            /* @__PURE__ */ jsx46(
+                              Input2,
+                              {
+                                value: row.key,
+                                placeholder: "Key",
+                                style: { width: 140 },
+                                onChange: (e) => handleMetadataChange(index, "key", e.target.value)
+                              }
+                            ),
+                            /* @__PURE__ */ jsx46(
+                              Input2,
+                              {
+                                value: row.value,
+                                placeholder: "Value",
+                                style: { flex: 1, minWidth: 200 },
+                                onChange: (e) => handleMetadataChange(index, "value", e.target.value)
+                              }
+                            )
+                          ] })
+                        ]
+                      },
+                      index
+                    ))
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs26("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx46(Text16, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
+                  /* @__PURE__ */ jsx46(Form.Item, { name: "content", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx46(
+                    TextArea2,
+                    {
+                      placeholder: "Content",
+                      autoSize: { minRows: 4, maxRows: 8 }
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ jsxs26(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "flex-end",
+                      gap: 8,
+                      marginTop: 8
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx46(Button18, { onClick: handleCancel, children: "Cancel" }),
+                      /* @__PURE__ */ jsx46(Button18, { type: "primary", htmlType: "submit", loading, children: "Create Skill" })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+var CreateSkillModal_default = CreateSkillModal;
+
+// src/components/Chat/SkillFlow.tsx
+import { jsx as jsx47, jsxs as jsxs27 } from "react/jsx-runtime";
+var SkillFlowInner = ({
+  skills,
+  onNodeClick,
+  onRefresh
+}) => {
+  const [nodes, setNodes, onNodesChange] = useNodesState2([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState2([]);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState26(false);
+  const { token } = theme6.useToken();
+  const nodeTypes = useMemo12(
+    () => ({
+      skill: SkillNode_default
+    }),
+    []
+  );
+  useEffect19(() => {
+    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__ */ jsxs27("div", { style: { width: "100%", height: "100%", background: "#fafafa", position: "relative" }, children: [
+    /* @__PURE__ */ jsxs27(
+      ReactFlow2,
+      {
+        nodes,
+        edges,
+        onNodesChange,
+        onEdgesChange,
+        nodeTypes,
+        fitView: true,
+        children: [
+          /* @__PURE__ */ jsx47(Background2, { color: "#eee", gap: 20 }),
+          /* @__PURE__ */ jsx47(Controls2, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx47(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          bottom: 20,
+          right: 20,
+          zIndex: 10
+        },
+        children: /* @__PURE__ */ jsx47(
+          Button19,
+          {
+            type: "primary",
+            size: "large",
+            icon: /* @__PURE__ */ jsx47(PlusOutlined3, {}),
+            onClick: () => setIsCreateModalOpen(true),
+            style: {
+              height: 48,
+              width: 48,
+              borderRadius: "50%",
+              boxShadow: token.boxShadowTertiary,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 0
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx47(
+      CreateSkillModal_default,
+      {
+        open: isCreateModalOpen,
+        onCancel: () => setIsCreateModalOpen(false),
+        onSuccess: handleSkillCreated
+      }
+    )
+  ] });
+};
+var SkillFlow = (props) => /* @__PURE__ */ jsx47(ReactFlowProvider2, { children: /* @__PURE__ */ jsx47(SkillFlowInner, { ...props }) });
+var SkillFlow_default = SkillFlow;
+
+// src/components/Chat/ChatSidebar.tsx
+import { Fragment as Fragment6, jsx as jsx48, jsxs as jsxs28 } from "react/jsx-runtime";
 var useStyles4 = createStyles12(({ token, css }) => ({
   sidebar: css`
     display: flex;
@@ -6526,6 +9239,22 @@ var useStyles4 = createStyles12(({ 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;
@@ -6631,9 +9360,14 @@ var ChatSidebar = ({
 }) => {
   const { styles } = useStyles4();
   const { setMenuCollapsed, menuCollapsed, sideAppVisible } = useChatUIContext();
-  const { setSettingsModalOpen } = useLatticeChatShellContext();
-  const [isHovered, setIsHovered] = useState24(false);
-  const [isFirstCollapse, setIsFirstCollapse] = useState24(false);
+  const { setSettingsModalOpen, config } = useLatticeChatShellContext();
+  const { assistants, selectAssistant } = useAssistantContext();
+  const [isHovered, setIsHovered] = useState27(false);
+  const [isFirstCollapse, setIsFirstCollapse] = useState27(false);
+  const [isFlowModalOpen, setIsFlowModalOpen] = useState27(false);
+  const [isSkillFlowModalOpen, setIsSkillFlowModalOpen] = useState27(false);
+  const [skills, setSkills] = useState27([]);
+  const [skillsLoading, setSkillsLoading] = useState27(false);
   const prevIsCollapsedRef = useRef13(false);
   const handleToggleCollapse = () => {
     setMenuCollapsed(!menuCollapsed);
@@ -6642,8 +9376,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;
-  useEffect17(() => {
+  useEffect20(() => {
     const prevIsCollapsed = prevIsCollapsedRef.current;
     if (isCollapsed) {
       const hasSeenFirstCollapse = localStorage.getItem(FIRST_COLLAPSE_KEY);
@@ -6672,54 +9435,77 @@ var ChatSidebar = ({
   const handleMouseLeave = () => {
     setIsHovered(false);
   };
-  return /* @__PURE__ */ jsxs23(Fragment5, { children: [
-    /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs28(Fragment6, { children: [
+    /* @__PURE__ */ jsxs28(
       "div",
       {
         className: `${styles.sidebar} ${isFirstCollapse ? "firstTimeHighlight" : ""}`,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [
-          /* @__PURE__ */ jsx43(
-            Tooltip6,
+          /* @__PURE__ */ jsx48(
+            Tooltip8,
             {
               title: "Move the mouse over the collapsed sidebar to see the assistants and threads",
               open: isFirstCollapse,
               placement: "right",
-              children: isFirstCollapse && /* @__PURE__ */ jsx43("div", { style: { marginTop: "400px" } })
+              children: isFirstCollapse && /* @__PURE__ */ jsx48("div", { style: { marginTop: "400px" } })
             }
           ),
-          !isCollapsed && /* @__PURE__ */ jsxs23(Fragment5, { children: [
-            /* @__PURE__ */ jsxs23("div", { className: styles.content, children: [
-              /* @__PURE__ */ jsxs23("div", { className: styles.section, children: [
-                /* @__PURE__ */ jsx43("div", { className: styles.sectionTitle, children: "Assistants" }),
-                /* @__PURE__ */ jsx43(AssistantList, {})
+          !isCollapsed && /* @__PURE__ */ jsxs28(Fragment6, { children: [
+            /* @__PURE__ */ jsxs28("div", { className: styles.content, children: [
+              /* @__PURE__ */ jsxs28("div", { className: styles.section, children: [
+                /* @__PURE__ */ jsxs28("div", { className: styles.sectionTitle, children: [
+                  /* @__PURE__ */ jsx48("span", { children: "Assistants" }),
+                  /* @__PURE__ */ jsx48(
+                    Button20,
+                    {
+                      type: "text",
+                      icon: /* @__PURE__ */ jsx48(ApartmentOutlined, {}),
+                      onClick: () => setIsFlowModalOpen(true),
+                      className: styles.sectionTitleButton,
+                      title: "View Assistant Flow Canvas",
+                      size: "small"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx48(AssistantList, {})
               ] }),
-              /* @__PURE__ */ jsx43(Divider2, { className: styles.divider }),
-              /* @__PURE__ */ jsxs23("div", { className: styles.section, children: [
-                /* @__PURE__ */ jsx43("div", { className: styles.sectionTitle, children: "Threads" }),
-                /* @__PURE__ */ jsx43(AgentConversations, {})
+              /* @__PURE__ */ jsx48(Divider4, { className: styles.divider }),
+              /* @__PURE__ */ jsxs28("div", { className: styles.section, children: [
+                /* @__PURE__ */ jsx48("div", { className: styles.sectionTitle, children: "Threads" }),
+                /* @__PURE__ */ jsx48(AgentConversations, {})
               ] })
             ] }),
-            /* @__PURE__ */ jsxs23("div", { className: styles.footer, children: [
-              /* @__PURE__ */ jsx43(
+            /* @__PURE__ */ jsxs28("div", { className: styles.footer, children: [
+              /* @__PURE__ */ jsx48(
                 "button",
                 {
                   className: styles.actionButton,
                   onClick: handleToggleCollapse,
                   title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
                   "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                  children: isCollapsed ? /* @__PURE__ */ jsx43(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx43(MenuFoldOutlined, {})
+                  children: isCollapsed ? /* @__PURE__ */ jsx48(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx48(MenuFoldOutlined, {})
                 }
               ),
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx48(
+                "button",
+                {
+                  className: styles.actionButton,
+                  onClick: handleSkillFlowClick,
+                  title: "Skill Flow Canvas",
+                  "aria-label": "Skill Flow Canvas",
+                  children: /* @__PURE__ */ jsx48(ThunderboltOutlined2, {})
+                }
+              ),
+              /* @__PURE__ */ jsx48(
                 "button",
                 {
                   className: styles.actionButton,
                   onClick: handleSettingsClick,
                   title: "Settings",
                   "aria-label": "Settings",
-                  children: /* @__PURE__ */ jsx43(SettingOutlined, {})
+                  children: /* @__PURE__ */ jsx48(SettingOutlined2, {})
                 }
               )
             ] })
@@ -6727,61 +9513,145 @@ var ChatSidebar = ({
         ]
       }
     ),
-    isCollapsed && /* @__PURE__ */ jsxs23(
+    isCollapsed && /* @__PURE__ */ jsxs28(
       "div",
       {
         className: `${styles.hoverOverlay} ${isHovered ? "visible" : ""}`,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [
-          /* @__PURE__ */ jsxs23("div", { className: styles.hoverContent, children: [
-            /* @__PURE__ */ jsxs23("div", { className: styles.section, children: [
-              /* @__PURE__ */ jsx43("div", { className: styles.sectionTitle, children: "Assistants" }),
-              /* @__PURE__ */ jsx43(AssistantList, {})
+          /* @__PURE__ */ jsxs28("div", { className: styles.hoverContent, children: [
+            /* @__PURE__ */ jsxs28("div", { className: styles.section, children: [
+              /* @__PURE__ */ jsxs28("div", { className: styles.sectionTitle, children: [
+                /* @__PURE__ */ jsx48("span", { children: "Assistants" }),
+                /* @__PURE__ */ jsx48(
+                  Button20,
+                  {
+                    type: "text",
+                    icon: /* @__PURE__ */ jsx48(ApartmentOutlined, {}),
+                    onClick: () => setIsFlowModalOpen(true),
+                    className: styles.sectionTitleButton,
+                    title: "View Assistant Flow Canvas",
+                    size: "small"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx48(AssistantList, {})
             ] }),
-            /* @__PURE__ */ jsx43(Divider2, { className: styles.divider }),
-            /* @__PURE__ */ jsxs23("div", { className: styles.section, children: [
-              /* @__PURE__ */ jsx43("div", { className: styles.sectionTitle, children: "Threads" }),
-              /* @__PURE__ */ jsx43(AgentConversations, {})
+            /* @__PURE__ */ jsx48(Divider4, { className: styles.divider }),
+            /* @__PURE__ */ jsxs28("div", { className: styles.section, children: [
+              /* @__PURE__ */ jsx48("div", { className: styles.sectionTitle, children: "Threads" }),
+              /* @__PURE__ */ jsx48(AgentConversations, {})
             ] })
           ] }),
-          /* @__PURE__ */ jsxs23("div", { className: styles.footer, children: [
-            /* @__PURE__ */ jsx43(
+          /* @__PURE__ */ jsxs28("div", { className: styles.footer, children: [
+            /* @__PURE__ */ jsx48(
               "button",
               {
                 className: styles.actionButton,
                 onClick: handleToggleCollapse,
                 title: isCollapsed ? "Expand sidebar" : "Collapse sidebar",
                 "aria-label": isCollapsed ? "Expand sidebar" : "Collapse sidebar",
-                children: isCollapsed ? /* @__PURE__ */ jsx43(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx43(MenuFoldOutlined, {})
+                children: isCollapsed ? /* @__PURE__ */ jsx48(MenuUnfoldOutlined, {}) : /* @__PURE__ */ jsx48(MenuFoldOutlined, {})
+              }
+            ),
+            /* @__PURE__ */ jsx48(
+              "button",
+              {
+                className: styles.actionButton,
+                onClick: handleSkillFlowClick,
+                title: "Skill Flow Canvas",
+                "aria-label": "Skill Flow Canvas",
+                children: /* @__PURE__ */ jsx48(ThunderboltOutlined2, {})
               }
             ),
-            /* @__PURE__ */ jsx43(
+            /* @__PURE__ */ jsx48(
               "button",
               {
                 className: styles.actionButton,
                 onClick: handleSettingsClick,
                 title: "Settings",
                 "aria-label": "Settings",
-                children: /* @__PURE__ */ jsx43(SettingOutlined, {})
+                children: /* @__PURE__ */ jsx48(SettingOutlined2, {})
               }
             )
           ] })
         ]
       }
+    ),
+    /* @__PURE__ */ jsx48(
+      Modal3,
+      {
+        title: "Assistant Overview",
+        open: isFlowModalOpen,
+        onCancel: () => setIsFlowModalOpen(false),
+        footer: null,
+        width: "90%",
+        style: { top: 20 },
+        bodyStyle: {
+          height: "calc(100vh - 120px)",
+          padding: 0
+        },
+        children: /* @__PURE__ */ jsx48("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx48(
+          AssistantFlow_default,
+          {
+            assistants,
+            onNodeClick: (assistant) => {
+              selectAssistant(assistant.id);
+              setIsFlowModalOpen(false);
+            }
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx48(
+      Modal3,
+      {
+        title: "Skill Overview",
+        open: isSkillFlowModalOpen,
+        onCancel: () => setIsSkillFlowModalOpen(false),
+        footer: null,
+        width: "90%",
+        style: { top: 20 },
+        bodyStyle: {
+          height: "calc(100vh - 120px)",
+          padding: 0
+        },
+        children: /* @__PURE__ */ jsx48("div", { style: { width: "100%", height: "100%" }, children: skillsLoading ? /* @__PURE__ */ jsx48(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100%"
+            },
+            children: "Loading skills..."
+          }
+        ) : /* @__PURE__ */ jsx48(
+          SkillFlow_default,
+          {
+            skills,
+            onNodeClick: (skill) => {
+              console.log("Skill clicked:", skill);
+            },
+            onRefresh: fetchSkills
+          }
+        ) })
+      }
     )
   ] });
 };
 
 // src/components/Chat/LatticeChatView.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var LatticeChatView = (props) => {
   const { assistantId, thread } = useConversationContext();
   const { currentAssistant } = useAssistantContext();
   const {
     config: { baseURL }
   } = useLatticeChatShellContext();
-  return assistantId && thread ? /* @__PURE__ */ jsx44(
+  return assistantId && thread ? /* @__PURE__ */ jsx49(
     AxiomLatticeProvider,
     {
       config: {
@@ -6790,14 +9660,14 @@ var LatticeChatView = (props) => {
         assistantId,
         transport: "sse"
       },
-      children: /* @__PURE__ */ jsx44(
+      children: /* @__PURE__ */ jsx49(
         LatticeChat,
         {
           thread_id: thread?.id,
           assistant_id: assistantId,
           name: currentAssistant?.name,
           description: currentAssistant?.description,
-          menu: /* @__PURE__ */ jsx44(ChatSidebar, {})
+          menu: /* @__PURE__ */ jsx49(ChatSidebar, {})
         }
       )
     }
@@ -6805,17 +9675,17 @@ var LatticeChatView = (props) => {
 };
 
 // src/components/Chat/SettingsModal.tsx
-import { useState as useState25, useEffect as useEffect18, useRef as useRef14 } from "react";
+import { useState as useState28, useEffect as useEffect21, useRef as useRef14 } from "react";
 import {
-  Modal,
-  Input,
-  Button as Button16,
-  message as message5,
-  Typography as Typography16,
+  Modal as Modal4,
+  Input as Input3,
+  Button as Button21,
+  message as message7,
+  Typography as Typography19,
   Alert as Alert4,
   Select,
   Switch,
-  Space as Space15,
+  Space as Space18,
   Tabs as Tabs2
 } from "antd";
 import {
@@ -6823,17 +9693,17 @@ import {
   EnvironmentOutlined,
   ReloadOutlined as ReloadOutlined3,
   CheckCircleOutlined as CheckCircleOutlined5,
-  ApiOutlined,
+  ApiOutlined as ApiOutlined2,
   LinkOutlined,
   CheckCircleFilled,
   CloseCircleFilled,
-  PlusOutlined,
+  PlusOutlined as PlusOutlined4,
   CloudServerOutlined
 } from "@ant-design/icons";
 import { createStyles as createStyles13 } from "antd-style";
-import { Fragment as Fragment6, jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
-var { Text: Text14, Title: Title3 } = Typography16;
-var { TextArea } = Input;
+import { Fragment as Fragment7, jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
+var { Text: Text17, Title: Title3 } = Typography19;
+var { TextArea: TextArea3 } = Input3;
 var useStyles5 = createStyles13(({ token, css }) => ({
   //   settingsModal: css`
   //     .ant-modal {
@@ -7180,12 +10050,12 @@ var SETTINGS_MENU_ITEMS = [
   {
     key: "environment",
     label: "Environment Variables",
-    icon: /* @__PURE__ */ jsx45(EnvironmentOutlined, {})
+    icon: /* @__PURE__ */ jsx50(EnvironmentOutlined, {})
   },
   {
     key: "models",
     label: "Model Configuration",
-    icon: /* @__PURE__ */ jsx45(ApiOutlined, {})
+    icon: /* @__PURE__ */ jsx50(ApiOutlined2, {})
   }
 ];
 var SettingsModal = ({
@@ -7194,7 +10064,7 @@ var SettingsModal = ({
 }) => {
   const { styles } = useStyles5();
   const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
-  const [connections, setConnections] = useState25(() => {
+  const [connections, setConnections] = useState28(() => {
     if (typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem("lattice_server_connections");
@@ -7217,21 +10087,21 @@ var SettingsModal = ({
     }
     return [];
   });
-  const [serverConfigs, setServerConfigs] = useState25({});
+  const [serverConfigs, setServerConfigs] = useState28({});
   const connectionsRef = useRef14(connections);
-  useEffect18(() => {
+  useEffect21(() => {
     connectionsRef.current = connections;
   }, [connections]);
-  const [activeTabKey, setActiveTabKey] = useState25(
+  const [activeTabKey, setActiveTabKey] = useState28(
     connections.length > 0 ? connections[0].id : ""
   );
-  const [activeMenu, setActiveMenu] = useState25("environment");
-  const [loading, setLoading] = useState25(false);
-  const [showAddServerModal, setShowAddServerModal] = useState25(false);
-  const [newServerUrl, setNewServerUrl] = useState25("");
-  const [newServerName, setNewServerName] = useState25("");
-  const [newServerApiKey, setNewServerApiKey] = useState25("");
-  const [addingServer, setAddingServer] = useState25(false);
+  const [activeMenu, setActiveMenu] = useState28("environment");
+  const [loading, setLoading] = useState28(false);
+  const [showAddServerModal, setShowAddServerModal] = useState28(false);
+  const [newServerUrl, setNewServerUrl] = useState28("");
+  const [newServerName, setNewServerName] = useState28("");
+  const [newServerApiKey, setNewServerApiKey] = useState28("");
+  const [addingServer, setAddingServer] = useState28(false);
   const saveConnections = (newConnections) => {
     setConnections(newConnections);
     if (typeof window !== "undefined") {
@@ -7370,7 +10240,7 @@ var SettingsModal = ({
       }
     } catch (error) {
       console.error("Failed to load configuration:", error);
-      message5.error("Failed to load current configuration");
+      message7.error("Failed to load current configuration");
     }
   };
   const loadModelsConfig = async (serverId) => {
@@ -7421,7 +10291,7 @@ var SettingsModal = ({
       console.error("Failed to load models configuration:", error);
     }
   };
-  useEffect18(() => {
+  useEffect21(() => {
     if (open && activeTabKey) {
       initializeServerConfig(activeTabKey);
       const connection = connections.find((c) => c.id === activeTabKey);
@@ -7430,7 +10300,7 @@ var SettingsModal = ({
       }
     }
   }, [open, activeTabKey]);
-  useEffect18(() => {
+  useEffect21(() => {
     if (open && activeTabKey) {
       const connection = connections.find((c) => c.id === activeTabKey);
       if (connection?.connected) {
@@ -7444,7 +10314,7 @@ var SettingsModal = ({
   }, [open, activeTabKey, activeMenu]);
   const handleAddServer = async () => {
     if (!newServerUrl.trim()) {
-      message5.error("Please enter a server URL");
+      message7.error("Please enter a server URL");
       return;
     }
     let normalizedUrl = newServerUrl.trim();
@@ -7470,7 +10340,7 @@ var SettingsModal = ({
     setNewServerUrl("");
     setNewServerName("");
     setNewServerApiKey("");
-    message5.success("Server added successfully");
+    message7.success("Server added successfully");
   };
   const handleDeleteServer = (serverId) => {
     const newConnections = connections.filter((c) => c.id !== serverId);
@@ -7487,7 +10357,7 @@ var SettingsModal = ({
         setActiveTabKey("");
       }
     }
-    message5.success("Server deleted");
+    message7.success("Server deleted");
   };
   const handleTabChange = (newTabKey) => {
     setConnections(
@@ -7501,12 +10371,12 @@ var SettingsModal = ({
   const handleSave = async () => {
     const connection = connections.find((c) => c.id === activeTabKey);
     if (!connection || !connection.connected) {
-      message5.error("Please connect to a server first");
+      message7.error("Please connect to a server first");
       return;
     }
     const url = connection.url;
     if (!url) {
-      message5.error("Please connect to a server first");
+      message7.error("Please connect to a server first");
       return;
     }
     try {
@@ -7570,23 +10440,23 @@ var SettingsModal = ({
         const data = await response.json();
         if (response.ok && data.success) {
           if (data.requiresRestart && data.requiresRestart.length > 0) {
-            message5.warning(
+            message7.warning(
               `Configuration saved. Please restart the server for ${data.requiresRestart.join(
                 ", "
               )} to take effect.`,
               5
             );
           } else {
-            message5.success("Configuration saved and applied successfully");
+            message7.success("Configuration saved and applied successfully");
           }
           if (data.warnings && data.warnings.length > 0) {
             data.warnings.forEach((warning) => {
-              message5.warning(warning, 5);
+              message7.warning(warning, 5);
             });
           }
           onClose();
         } else {
-          message5.error(data.error || "Failed to save configuration");
+          message7.error(data.error || "Failed to save configuration");
         }
       } else if (activeMenu === "models") {
         const validModels = config.models.filter(
@@ -7605,17 +10475,17 @@ var SettingsModal = ({
         });
         const data = await response.json();
         if (response.ok && data.success) {
-          message5.success(
+          message7.success(
             "Model configuration saved and registered successfully"
           );
           onClose();
         } else {
-          message5.error(data.error || "Failed to save model configuration");
+          message7.error(data.error || "Failed to save model configuration");
         }
       }
     } catch (error) {
       console.error("Failed to save configuration:", error);
-      message5.error(error.message || "Failed to save configuration");
+      message7.error(error.message || "Failed to save configuration");
     } finally {
       setLoading(false);
     }
@@ -7631,25 +10501,25 @@ var SettingsModal = ({
         }
       }));
     };
-    return /* @__PURE__ */ jsxs24("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsxs29("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx50(
         Alert4,
         {
           message: "Configuration Effect",
-          description: /* @__PURE__ */ jsxs24("div", { children: [
-            /* @__PURE__ */ jsxs24("div", { style: { marginBottom: 8 }, children: [
-              /* @__PURE__ */ jsx45(
+          description: /* @__PURE__ */ jsxs29("div", { children: [
+            /* @__PURE__ */ jsxs29("div", { style: { marginBottom: 8 }, children: [
+              /* @__PURE__ */ jsx50(
                 CheckCircleOutlined5,
                 {
                   style: { color: "#52c41a", marginRight: 8 }
                 }
               ),
-              /* @__PURE__ */ jsx45("strong", { children: "Immediately effective:" }),
+              /* @__PURE__ */ jsx50("strong", { children: "Immediately effective:" }),
               " QUEUE_SERVICE_TYPE, REDIS_URL, REDIS_PASSWORD, QUEUE_NAME"
             ] }),
-            /* @__PURE__ */ jsxs24("div", { children: [
-              /* @__PURE__ */ jsx45(ReloadOutlined3, { style: { color: "#faad14", marginRight: 8 } }),
-              /* @__PURE__ */ jsx45("strong", { children: "Requires restart:" }),
+            /* @__PURE__ */ jsxs29("div", { children: [
+              /* @__PURE__ */ jsx50(ReloadOutlined3, { style: { color: "#faad14", marginRight: 8 } }),
+              /* @__PURE__ */ jsx50("strong", { children: "Requires restart:" }),
               " PORT (server must be restarted to change port)"
             ] })
           ] }),
@@ -7658,9 +10528,9 @@ var SettingsModal = ({
           className: styles.alertCard
         }
       ),
-      /* @__PURE__ */ jsx45("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx45(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__ */ jsx45(
-        TextArea,
+      /* @__PURE__ */ jsx50("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx50(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__ */ jsx50(
+        TextArea3,
         {
           value: config.envText,
           onChange: (e) => setEnvText(e.target.value),
@@ -7736,10 +10606,10 @@ QUEUE_NAME=tasks`,
         }));
       }
     };
-    return /* @__PURE__ */ jsxs24("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ jsx45("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx45(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__ */ jsxs24("div", { className: styles.card, children: [
-        /* @__PURE__ */ jsxs24(
+    return /* @__PURE__ */ jsxs29("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx50("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx50(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__ */ jsxs29("div", { className: styles.card, children: [
+        /* @__PURE__ */ jsxs29(
           "div",
           {
             style: {
@@ -7751,13 +10621,13 @@ QUEUE_NAME=tasks`,
               borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
             },
             children: [
-              /* @__PURE__ */ jsxs24("div", { children: [
-                /* @__PURE__ */ jsxs24(Text14, { strong: true, style: { fontSize: 16 }, children: [
+              /* @__PURE__ */ jsxs29("div", { children: [
+                /* @__PURE__ */ jsxs29(Text17, { strong: true, style: { fontSize: 16 }, children: [
                   "Model ",
                   index + 1
                 ] }),
-                model.key && /* @__PURE__ */ jsxs24(
-                  Text14,
+                model.key && /* @__PURE__ */ jsxs29(
+                  Text17,
                   {
                     type: "secondary",
                     style: { marginLeft: 8, fontSize: 12 },
@@ -7769,8 +10639,8 @@ QUEUE_NAME=tasks`,
                   }
                 )
               ] }),
-              config.models.length > 1 && /* @__PURE__ */ jsx45(
-                Button16,
+              config.models.length > 1 && /* @__PURE__ */ jsx50(
+                Button21,
                 {
                   type: "text",
                   danger: true,
@@ -7786,11 +10656,11 @@ QUEUE_NAME=tasks`,
             ]
           }
         ),
-        /* @__PURE__ */ jsxs24(Space15, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ jsxs24("div", { children: [
-            /* @__PURE__ */ jsx45(Text14, { className: styles.formLabel, children: "Key *" }),
-            /* @__PURE__ */ jsx45(
-              Input,
+        /* @__PURE__ */ jsxs29(Space18, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs29("div", { children: [
+            /* @__PURE__ */ jsx50(Text17, { className: styles.formLabel, children: "Key *" }),
+            /* @__PURE__ */ jsx50(
+              Input3,
               {
                 placeholder: "e.g., default, gpt-4, claude",
                 value: model.key,
@@ -7798,11 +10668,11 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx45(Text14, { className: styles.formDescription, children: "Unique identifier for this model" })
+            /* @__PURE__ */ jsx50(Text17, { className: styles.formDescription, children: "Unique identifier for this model" })
           ] }),
-          /* @__PURE__ */ jsxs24("div", { children: [
-            /* @__PURE__ */ jsx45(Text14, { className: styles.formLabel, children: "Provider *" }),
-            /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsxs29("div", { children: [
+            /* @__PURE__ */ jsx50(Text17, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ jsx50(
               Select,
               {
                 style: { width: "100%", height: 40 },
@@ -7818,10 +10688,10 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs24("div", { children: [
-            /* @__PURE__ */ jsx45(Text14, { className: styles.formLabel, children: "Model Name *" }),
-            /* @__PURE__ */ jsx45(
-              Input,
+          /* @__PURE__ */ jsxs29("div", { children: [
+            /* @__PURE__ */ jsx50(Text17, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ jsx50(
+              Input3,
               {
                 placeholder: "e.g., gpt-4, claude-3-opus, kimi-k2-250905",
                 value: model.model,
@@ -7830,10 +10700,10 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs24("div", { children: [
-            /* @__PURE__ */ jsx45(Text14, { className: styles.formLabel, children: "API Key" }),
-            /* @__PURE__ */ jsx45(
-              Input.Password,
+          /* @__PURE__ */ jsxs29("div", { children: [
+            /* @__PURE__ */ jsx50(Text17, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ jsx50(
+              Input3.Password,
               {
                 placeholder: "Enter your API key",
                 value: model.apiKey,
@@ -7841,12 +10711,12 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx45(Text14, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+            /* @__PURE__ */ jsx50(Text17, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
           ] }),
-          /* @__PURE__ */ jsxs24("div", { children: [
-            /* @__PURE__ */ jsx45(Text14, { className: styles.formLabel, children: "Base URL" }),
-            /* @__PURE__ */ jsx45(
-              Input,
+          /* @__PURE__ */ jsxs29("div", { children: [
+            /* @__PURE__ */ jsx50(Text17, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ jsx50(
+              Input3,
               {
                 placeholder: "e.g., https://api.openai.com/v1",
                 value: model.baseURL,
@@ -7854,23 +10724,23 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx45(Text14, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+            /* @__PURE__ */ jsx50(Text17, { className: styles.formDescription, children: "Optional custom base URL for the API" })
           ] }),
-          /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsxs24(Space15, { children: [
-            /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx50("div", { children: /* @__PURE__ */ jsxs29(Space18, { children: [
+            /* @__PURE__ */ jsx50(
               Switch,
               {
                 checked: model.streaming,
                 onChange: (checked) => handleModelChange(index, "streaming", checked)
               }
             ),
-            /* @__PURE__ */ jsx45(Text14, { children: "Enable Streaming" })
+            /* @__PURE__ */ jsx50(Text17, { children: "Enable Streaming" })
           ] }) }),
-          /* @__PURE__ */ jsxs24("div", { style: { display: "flex", gap: 20 }, children: [
-            /* @__PURE__ */ jsxs24("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx45(Text14, { className: styles.formLabel, children: "Max Tokens" }),
-              /* @__PURE__ */ jsx45(
-                Input,
+          /* @__PURE__ */ jsxs29("div", { style: { display: "flex", gap: 20 }, children: [
+            /* @__PURE__ */ jsxs29("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx50(Text17, { className: styles.formLabel, children: "Max Tokens" }),
+              /* @__PURE__ */ jsx50(
+                Input3,
                 {
                   type: "number",
                   placeholder: "e.g., 4096",
@@ -7884,10 +10754,10 @@ QUEUE_NAME=tasks`,
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs24("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx45(Text14, { className: styles.formLabel, children: "Temperature" }),
-              /* @__PURE__ */ jsx45(
-                Input,
+            /* @__PURE__ */ jsxs29("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx50(Text17, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ jsx50(
+                Input3,
                 {
                   type: "number",
                   step: "0.1",
@@ -7905,8 +10775,8 @@ QUEUE_NAME=tasks`,
           ] })
         ] })
       ] }, index)),
-      /* @__PURE__ */ jsx45(
-        Button16,
+      /* @__PURE__ */ jsx50(
+        Button21,
         {
           type: "dashed",
           onClick: handleAddModel,
@@ -7933,8 +10803,8 @@ QUEUE_NAME=tasks`,
   );
   const currentConnection = connections.find((c) => c.id === activeTabKey);
   const renderTabLabel = (connection) => {
-    return /* @__PURE__ */ jsxs24("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsxs29("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx50(
         CloudServerOutlined,
         {
           style: {
@@ -7943,14 +10813,14 @@ QUEUE_NAME=tasks`,
           }
         }
       ),
-      /* @__PURE__ */ jsx45("span", { children: connection.name }),
-      connection.connected && /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsx50("span", { children: connection.name }),
+      connection.connected && /* @__PURE__ */ jsx50(
         CheckCircleFilled,
         {
           style: { color: "#52c41a", fontSize: 12, marginLeft: 8 }
         }
       ),
-      connection.error && !connection.connecting && /* @__PURE__ */ jsx45(
+      connection.error && !connection.connecting && /* @__PURE__ */ jsx50(
         CloseCircleFilled,
         {
           style: { color: "#ff4d4f", fontSize: 12, marginLeft: 8 }
@@ -7961,35 +10831,35 @@ QUEUE_NAME=tasks`,
   const tabItems = connections.map((connection) => ({
     key: connection.id,
     label: renderTabLabel(connection),
-    children: /* @__PURE__ */ jsx45("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx45(Fragment6, { children: /* @__PURE__ */ jsxs24("div", { style: { display: "flex", height: "100%" }, children: [
-      /* @__PURE__ */ jsx45("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs24(
+    children: /* @__PURE__ */ jsx50("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx50(Fragment7, { children: /* @__PURE__ */ jsxs29("div", { style: { display: "flex", height: "100%" }, children: [
+      /* @__PURE__ */ jsx50("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs29(
         "div",
         {
           className: `${styles.menuItem} ${activeMenu === item.key ? "active" : ""}`,
           onClick: () => setActiveMenu(item.key),
           children: [
-            /* @__PURE__ */ jsx45("span", { className: styles.menuItemIcon, children: item.icon }),
-            /* @__PURE__ */ jsx45("span", { className: styles.menuItemText, children: item.label })
+            /* @__PURE__ */ jsx50("span", { className: styles.menuItemIcon, children: item.icon }),
+            /* @__PURE__ */ jsx50("span", { className: styles.menuItemText, children: item.label })
           ]
         },
         item.key
       )) }),
-      /* @__PURE__ */ jsxs24("div", { className: styles.content, children: [
-        /* @__PURE__ */ jsxs24("div", { className: styles.contentHeader, children: [
-          /* @__PURE__ */ jsxs24("div", { className: styles.contentHeaderLeft, children: [
-            /* @__PURE__ */ jsx45(Title3, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
-            /* @__PURE__ */ jsxs24(Text14, { className: styles.contentDescription, children: [
+      /* @__PURE__ */ jsxs29("div", { className: styles.content, children: [
+        /* @__PURE__ */ jsxs29("div", { className: styles.contentHeader, children: [
+          /* @__PURE__ */ jsxs29("div", { className: styles.contentHeaderLeft, children: [
+            /* @__PURE__ */ jsx50(Title3, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
+            /* @__PURE__ */ jsxs29(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__ */ jsxs24("div", { className: styles.contentHeaderRight, children: [
-            /* @__PURE__ */ jsx45(Button16, { onClick: onClose, children: "Cancel" }),
-            /* @__PURE__ */ jsx45(
-              Button16,
+          /* @__PURE__ */ jsxs29("div", { className: styles.contentHeaderRight, children: [
+            /* @__PURE__ */ jsx50(Button21, { onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx50(
+              Button21,
               {
                 type: "primary",
-                icon: /* @__PURE__ */ jsx45(SaveOutlined, {}),
+                icon: /* @__PURE__ */ jsx50(SaveOutlined, {}),
                 onClick: handleSave,
                 loading,
                 children: "Save Configuration"
@@ -7997,9 +10867,9 @@ QUEUE_NAME=tasks`,
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx45("div", { className: styles.contentBody, children: renderContent(connection.id) })
+        /* @__PURE__ */ jsx50("div", { className: styles.contentBody, children: renderContent(connection.id) })
       ] })
-    ] }) }) : /* @__PURE__ */ jsx45(
+    ] }) }) : /* @__PURE__ */ jsx50(
       "div",
       {
         style: {
@@ -8011,29 +10881,29 @@ QUEUE_NAME=tasks`,
           gap: 16,
           padding: 48
         },
-        children: connection.connecting ? /* @__PURE__ */ jsxs24(Fragment6, { children: [
-          /* @__PURE__ */ jsx45(LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
-          /* @__PURE__ */ jsx45(Title3, { level: 4, children: "Connecting..." }),
-          /* @__PURE__ */ jsxs24(Text14, { type: "secondary", style: { textAlign: "center" }, children: [
+        children: connection.connecting ? /* @__PURE__ */ jsxs29(Fragment7, { children: [
+          /* @__PURE__ */ jsx50(LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
+          /* @__PURE__ */ jsx50(Title3, { level: 4, children: "Connecting..." }),
+          /* @__PURE__ */ jsxs29(Text17, { type: "secondary", style: { textAlign: "center" }, children: [
             "Connecting to ",
             connection.url
           ] })
-        ] }) : /* @__PURE__ */ jsxs24(Fragment6, { children: [
-          /* @__PURE__ */ jsx45(LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
-          /* @__PURE__ */ jsx45(Title3, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
-          /* @__PURE__ */ jsx45(
-            Text14,
+        ] }) : /* @__PURE__ */ jsxs29(Fragment7, { children: [
+          /* @__PURE__ */ jsx50(LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
+          /* @__PURE__ */ jsx50(Title3, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
+          /* @__PURE__ */ jsx50(
+            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__ */ jsx45(
-            Button16,
+          /* @__PURE__ */ jsx50(
+            Button21,
             {
               type: "primary",
-              icon: /* @__PURE__ */ jsx45(LinkOutlined, {}),
+              icon: /* @__PURE__ */ jsx50(LinkOutlined, {}),
               onClick: () => checkConnection(connection.id),
               loading: connection.connecting,
               style: { marginTop: 16 },
@@ -8045,9 +10915,9 @@ QUEUE_NAME=tasks`,
     ) }),
     closable: connections.length > 1
   }));
-  return /* @__PURE__ */ jsxs24(Fragment6, { children: [
-    /* @__PURE__ */ jsx45(
-      Modal,
+  return /* @__PURE__ */ jsxs29(Fragment7, { children: [
+    /* @__PURE__ */ jsx50(
+      Modal4,
       {
         open,
         onCancel: onClose,
@@ -8055,7 +10925,7 @@ QUEUE_NAME=tasks`,
         width: "80%",
         footer: null,
         title: "Settings",
-        children: /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45(
+        children: /* @__PURE__ */ jsx50("div", { children: /* @__PURE__ */ jsx50(
           Tabs2,
           {
             activeKey: activeTabKey,
@@ -8069,7 +10939,7 @@ QUEUE_NAME=tasks`,
               }
             },
             items: tabItems,
-            addIcon: /* @__PURE__ */ jsxs24(
+            addIcon: /* @__PURE__ */ jsxs29(
               "div",
               {
                 style: {
@@ -8079,8 +10949,8 @@ QUEUE_NAME=tasks`,
                   padding: "4px 8px"
                 },
                 children: [
-                  /* @__PURE__ */ jsx45(PlusOutlined, {}),
-                  /* @__PURE__ */ jsx45("span", { children: "Add Server" })
+                  /* @__PURE__ */ jsx50(PlusOutlined4, {}),
+                  /* @__PURE__ */ jsx50("span", { children: "Add Server" })
                 ]
               }
             )
@@ -8088,8 +10958,8 @@ QUEUE_NAME=tasks`,
         ) })
       }
     ),
-    /* @__PURE__ */ jsx45(
-      Modal,
+    /* @__PURE__ */ jsx50(
+      Modal4,
       {
         title: "Add New Server",
         open: showAddServerModal,
@@ -8102,11 +10972,11 @@ QUEUE_NAME=tasks`,
         },
         confirmLoading: addingServer,
         className: styles.addServerModal,
-        children: /* @__PURE__ */ jsxs24(Space15, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ jsxs24("div", { children: [
-            /* @__PURE__ */ jsx45(Text14, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
-            /* @__PURE__ */ jsx45(
-              Input,
+        children: /* @__PURE__ */ jsxs29(Space18, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs29("div", { children: [
+            /* @__PURE__ */ jsx50(Text17, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
+            /* @__PURE__ */ jsx50(
+              Input3,
               {
                 placeholder: "e.g., Production Server",
                 value: newServerName,
@@ -8114,12 +10984,12 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx45(Text14, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+            /* @__PURE__ */ jsx50(Text17, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
           ] }),
-          /* @__PURE__ */ jsxs24("div", { children: [
-            /* @__PURE__ */ jsx45(Text14, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
-            /* @__PURE__ */ jsx45(
-              Input,
+          /* @__PURE__ */ jsxs29("div", { children: [
+            /* @__PURE__ */ jsx50(Text17, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ jsx50(
+              Input3,
               {
                 placeholder: "e.g., http://localhost:4001",
                 value: newServerUrl,
@@ -8127,12 +10997,12 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx45(Text14, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+            /* @__PURE__ */ jsx50(Text17, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
           ] }),
-          /* @__PURE__ */ jsxs24("div", { children: [
-            /* @__PURE__ */ jsx45(Text14, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
-            /* @__PURE__ */ jsx45(
-              Input.Password,
+          /* @__PURE__ */ jsxs29("div", { children: [
+            /* @__PURE__ */ jsx50(Text17, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ jsx50(
+              Input3.Password,
               {
                 placeholder: "Optional: Enter API key for authentication",
                 value: newServerApiKey,
@@ -8140,7 +11010,7 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx45(Text14, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+            /* @__PURE__ */ jsx50(Text17, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
           ] })
         ] })
       }
@@ -8149,10 +11019,10 @@ QUEUE_NAME=tasks`,
 };
 
 // src/components/Chat/AgentServerSetting.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var AgentServerSetting = () => {
   const { settingsModalOpen, setSettingsModalOpen } = useLatticeChatShellContext();
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx51(
     SettingsModal,
     {
       open: settingsModalOpen,
@@ -8162,11 +11032,11 @@ var AgentServerSetting = () => {
 };
 
 // src/components/Chat/LatticeChatShell.tsx
-import { jsx as jsx47, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs30 } from "react/jsx-runtime";
 var LatticeChatShell = (props) => {
-  return /* @__PURE__ */ jsxs25(LatticeChatShellContextProvider, { ...props, children: [
-    /* @__PURE__ */ jsx47(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ jsx47(ConversationContextProvider, { children: /* @__PURE__ */ jsx47(LatticeChatView, {}) }) }),
-    /* @__PURE__ */ jsx47(AgentServerSetting, {})
+  return /* @__PURE__ */ jsxs30(LatticeChatShellContextProvider, { ...props, children: [
+    /* @__PURE__ */ jsx52(AssistantContextProvider, { autoLoad: true, children: /* @__PURE__ */ jsx52(ConversationContextProvider, { children: /* @__PURE__ */ jsx52(LatticeChatView, {}) }) }),
+    /* @__PURE__ */ jsx52(AgentServerSetting, {})
   ] });
 };
 export {
@@ -8174,6 +11044,8 @@ export {
   AgentThreadProvider,
   AssistantContext,
   AssistantContextProvider,
+  AssistantFlow_default as AssistantFlow,
+  AssistantNode_default as AssistantNode,
   AxiomLatticeProvider,
   ChatUIContext,
   ChatUIContextProvider,
@@ -8190,6 +11062,8 @@ export {
   MDViewFormItem,
   ScheduleButton,
   SideAppViewBrowser,
+  SkillFlow_default as SkillFlow,
+  SkillNode_default as SkillNode,
   getElement,
   regsiterElement,
   useAgentChat,