@axiom-lattice/react-sdk 2.1.32 → 2.1.33

package/dist/index.mjs

@@ -4266,7 +4266,7 @@ var AttachmentsCard = ({
   const { config } = useLatticeChatShellContext();
   const baseURL = config.baseURL;
   const fileBaseURL = `${baseURL}/api/assistants/${assistantId}/threads/${threadId}/sandbox/downloadfile?path=`;
-  const { Text: Text21 } = Typography7;
+  const { Text: Text23 } = Typography7;
   const [showAll, setShowAll] = useState16(false);
   const { openSideApp } = useChatUIContext();
   const getStyles = () => {
@@ -4341,7 +4341,7 @@ var AttachmentsCard = ({
     );
   };
   const renderFileDescription = (item) => /* @__PURE__ */ jsx24(Space7, { direction: "vertical", size: size === "small" ? 2 : 4, children: /* @__PURE__ */ jsx24(Space7, { children: /* @__PURE__ */ jsx24(
-    Text21,
+    Text23,
     {
       type: "secondary",
       style: {
@@ -4415,7 +4415,7 @@ var AttachmentsCard = ({
         }
       ),
       item.files && /* @__PURE__ */ jsxs10("div", { style: { paddingLeft: "12px" }, children: [
-        /* @__PURE__ */ jsxs10(Text21, { type: "secondary", style: { fontSize: "12px" }, children: [
+        /* @__PURE__ */ jsxs10(Text23, { type: "secondary", style: { fontSize: "12px" }, children: [
           "\u5305\u542B\u6587\u4EF6(",
           item.files.length,
           ")"
@@ -7391,7 +7391,7 @@ var AgentConversations = ({
 import { useContext as useContext8 } from "react";
 
 // src/components/Chat/ChatSidebar.tsx
-import { useState as useState31 } from "react";
+import { useState as useState32 } from "react";
 import { Modal as Modal5 } from "antd";
 import {
   Bot,
@@ -7402,7 +7402,7 @@ import {
 import { createStyles as createStyles13 } from "antd-style";
 
 // src/components/Chat/AssistantFlow.tsx
-import { useMemo as useMemo12, useEffect as useEffect18, useState as useState26, useCallback as useCallback16, useRef as useRef14 } from "react";
+import { useMemo as useMemo12, useEffect as useEffect19, useState as useState27, useCallback as useCallback17, useRef as useRef14 } from "react";
 import {
   ReactFlow,
   Background,
@@ -7410,13 +7410,13 @@ import {
   useNodesState,
   useEdgesState,
   ReactFlowProvider,
-  useReactFlow as useReactFlow2
+  useReactFlow
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
 
 // src/components/Chat/AssistantNode.tsx
 import { useMemo as useMemo10 } from "react";
-import { Handle, Position, useReactFlow } from "@xyflow/react";
+import { Handle, Position } from "@xyflow/react";
 import { Avatar as Avatar4, Typography as Typography17, theme as theme2, Tag as Tag6, Tooltip as Tooltip9, Space as Space17 } from "antd";
 import {
   UserOutlined as UserOutlined3,
@@ -7425,7 +7425,6 @@ import {
   IdcardOutlined,
   BranchesOutlined,
   CodeOutlined as CodeOutlined4,
-  EditOutlined,
   MessageOutlined
 } from "@ant-design/icons";
 import { jsx as jsx47, jsxs as jsxs26 } from "react/jsx-runtime";
@@ -7457,11 +7456,9 @@ var getBadgeColor = (id) => {
 };
 var AssistantNode = ({
   data,
-  selected,
-  id
+  selected
 }) => {
   const { token } = theme2.useToken();
-  const { setNodes, fitView, getNodes } = useReactFlow();
   if (!data) {
     return null;
   }
@@ -7503,8 +7500,8 @@ var AssistantNode = ({
   const getAgentTypeLabel = (type) => {
     if (!type) return "";
     const typeMap = {
-      react: "REACT",
-      deep_agent: "DEEP AGENT",
+      react: "Executor",
+      deep_agent: "Orchestrator",
       plan_execute: "PLAN EXECUTE",
       sequential: "SEQUENTIAL"
     };
@@ -7901,62 +7898,6 @@ var AssistantNode = ({
               e.currentTarget.style.boxShadow = `0 1px 4px rgba(0, 0, 0, 0.08)`;
             },
             children: [
-              onConfigure && /* @__PURE__ */ jsx47(
-                "div",
-                {
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setNodes(
-                      (nodes) => nodes.map((node) => ({
-                        ...node,
-                        selected: node.id === id
-                      }))
-                    );
-                    const currentNode = getNodes().find((n) => n.id === id);
-                    if (currentNode) {
-                      fitView({
-                        nodes: [currentNode],
-                        duration: 400,
-                        minZoom: 0.5,
-                        maxZoom: 1.5
-                      });
-                    }
-                    onConfigure?.(assistant);
-                  },
-                  style: {
-                    position: "absolute",
-                    top: 8,
-                    right: 8,
-                    zIndex: 10,
-                    cursor: "pointer",
-                    padding: 6,
-                    borderRadius: 6,
-                    background: token.colorBgContainer,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    transition: "all 0.2s ease",
-                    border: `1px solid ${token.colorBorderSecondary}`
-                  },
-                  onMouseEnter: (e) => {
-                    e.currentTarget.style.background = token.colorPrimaryBg;
-                    e.currentTarget.style.borderColor = token.colorPrimary;
-                  },
-                  onMouseLeave: (e) => {
-                    e.currentTarget.style.background = token.colorBgContainer;
-                    e.currentTarget.style.borderColor = token.colorBorderSecondary;
-                  },
-                  children: /* @__PURE__ */ jsx47(
-                    EditOutlined,
-                    {
-                      style: {
-                        fontSize: 14,
-                        color: token.colorPrimary
-                      }
-                    }
-                  )
-                }
-              ),
               /* @__PURE__ */ jsxs26(
                 "div",
                 {
@@ -8217,14 +8158,11 @@ var AssistantNode = ({
                           onChat && /* @__PURE__ */ jsxs26(
                             "div",
                             {
+                              onMouseDown: (e) => {
+                                e.stopPropagation();
+                              },
                               onClick: (e) => {
                                 e.stopPropagation();
-                                setNodes(
-                                  (nodes) => nodes.map((node) => ({
-                                    ...node,
-                                    selected: node.id === id
-                                  }))
-                                );
                                 onChat(assistant);
                               },
                               style: {
@@ -9114,8 +9052,8 @@ var AgentConfigPanel = ({
                               value: agentType,
                               onChange: (value) => setAgentType(value),
                               options: [
-                                { value: "react", label: "React" },
-                                { value: "deep_agent", label: "Deep" }
+                                { value: "react", label: "Executor" },
+                                { value: "deep_agent", label: "Orchestrator" }
                               ],
                               block: true
                             }
@@ -9125,7 +9063,7 @@ var AgentConfigPanel = ({
                             {
                               type: "secondary",
                               style: { fontSize: 11, marginTop: 6, display: "block", lineHeight: 1.4 },
-                              children: agentType === "react" ? "React: Single-turn reasoning with tool calling for simple tasks" : "Deep: Multi-agent orchestration with sub-agents for complex workflows"
+                              children: agentType === "react" ? "Executor: Directly executes tasks using tools. Best for single-step operations like search, code execution, and data retrieval." : "Orchestrator: Coordinates multiple sub-agents to accomplish complex workflows. Best for multi-step tasks that require planning, delegation, and synthesis."
                             }
                           )
                         ]
@@ -9460,57 +9398,339 @@ var AgentConfigPanel = ({
 var AgentConfigPanel_default = AgentConfigPanel;
 
 // src/components/Chat/CreateAssistantModal.tsx
-import { useState as useState25 } from "react";
+import { useState as useState26, useCallback as useCallback16 } from "react";
 import {
   Modal as Modal2,
   Form as Form2,
-  Input as Input2,
+  Input as Input3,
   Button as Button20,
   message as message6,
   notification,
-  Typography as Typography19,
+  Typography as Typography21,
   Segmented as Segmented2,
-  theme as theme4
+  Divider as Divider3,
+  theme as theme5
 } from "antd";
-import { PlusOutlined as PlusOutlined2 } from "@ant-design/icons";
+import { PlusOutlined as PlusOutlined2, ForkOutlined as ForkOutlined2 } from "@ant-design/icons";
+
+// src/components/Chat/ParentAgentSelector.tsx
+import { useEffect as useEffect18, useState as useState25 } from "react";
+import { Select as Select2, Typography as Typography19 } from "antd";
 import { jsx as jsx49, jsxs as jsxs28 } from "react/jsx-runtime";
-var { TextArea: TextArea2 } = Input2;
 var { Text: Text17 } = Typography19;
+var ParentAgentSelector = ({
+  onSelect,
+  value,
+  placeholder = "Select a parent agent to extend..."
+}) => {
+  const { config } = useLatticeChatShellContext();
+  const [assistants, setAssistants] = useState25([]);
+  const [loading, setLoading] = useState25(false);
+  useEffect18(() => {
+    const fetchAssistants = async () => {
+      setLoading(true);
+      try {
+        const headers = {
+          "Content-Type": "application/json"
+        };
+        if (config.apiKey) {
+          headers["Authorization"] = `Bearer ${config.apiKey}`;
+        }
+        const response = await fetch(`${config.baseURL}/api/assistants`, {
+          method: "GET",
+          headers
+        });
+        const data = await response.json();
+        if (response.ok && data.success) {
+          setAssistants(data.data.records || []);
+        }
+      } catch (error) {
+        console.error("Failed to fetch assistants:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchAssistants();
+  }, [config.baseURL, config.apiKey]);
+  const handleChange = (selectedId) => {
+    if (!selectedId) {
+      onSelect(null);
+      return;
+    }
+    const selected = assistants.find((a) => a.id === selectedId);
+    onSelect(selected || null);
+  };
+  return /* @__PURE__ */ jsx49(
+    Select2,
+    {
+      showSearch: true,
+      allowClear: true,
+      value,
+      placeholder,
+      loading,
+      onChange: handleChange,
+      optionFilterProp: "label",
+      style: { width: "100%" },
+      options: assistants.map((assistant) => ({
+        value: assistant.id,
+        label: assistant.name || assistant.id,
+        description: assistant.description
+      })),
+      optionRender: (option) => /* @__PURE__ */ jsxs28("div", { children: [
+        /* @__PURE__ */ jsx49("div", { children: option.label }),
+        option.data.description && /* @__PURE__ */ jsx49(Text17, { type: "secondary", style: { fontSize: 12 }, children: option.data.description })
+      ] })
+    }
+  );
+};
+
+// src/components/Chat/SubAgentInheritList.tsx
+import { List as List5, Switch as Switch2, Input as Input2, Typography as Typography20, Tag as Tag8, theme as theme4 } from "antd";
+import { ForkOutlined, LinkOutlined } from "@ant-design/icons";
+import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
+var { Text: Text18 } = Typography20;
+var SubAgentInheritList = ({
+  subAgentKeys,
+  decisions,
+  onChange
+}) => {
+  const { token } = theme4.useToken();
+  const handleToggle = (key, clone) => {
+    const updated = decisions.map(
+      (d) => d.originalKey === key ? { ...d, clone, cloneKey: clone ? `${key}_clone` : void 0 } : d
+    );
+    onChange(updated);
+  };
+  const handleCloneKeyChange = (originalKey, cloneKey) => {
+    const updated = decisions.map(
+      (d) => d.originalKey === originalKey ? { ...d, cloneKey } : d
+    );
+    onChange(updated);
+  };
+  if (subAgentKeys.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs29("div", { children: [
+    /* @__PURE__ */ jsx50(Text18, { type: "secondary", style: { display: "block", marginBottom: 8 }, children: "Choose how to handle each sub-agent from the parent:" }),
+    /* @__PURE__ */ jsx50(
+      List5,
+      {
+        size: "small",
+        bordered: true,
+        dataSource: decisions,
+        style: { borderRadius: token.borderRadius },
+        renderItem: (decision) => /* @__PURE__ */ jsxs29(
+          List5.Item,
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "stretch",
+              gap: 8,
+              padding: "8px 16px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs29("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+                /* @__PURE__ */ jsxs29("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                  decision.clone ? /* @__PURE__ */ jsx50(ForkOutlined, { style: { color: token.colorPrimary } }) : /* @__PURE__ */ jsx50(LinkOutlined, { style: { color: token.colorTextSecondary } }),
+                  /* @__PURE__ */ jsx50(Text18, { style: { fontFamily: "monospace" }, children: decision.originalKey })
+                ] }),
+                /* @__PURE__ */ jsxs29("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                  /* @__PURE__ */ jsx50(Tag8, { color: decision.clone ? "blue" : "default", children: decision.clone ? "Clone as new" : "Reuse" }),
+                  /* @__PURE__ */ jsx50(
+                    Switch2,
+                    {
+                      size: "small",
+                      checked: decision.clone,
+                      onChange: (checked) => handleToggle(decision.originalKey, checked)
+                    }
+                  )
+                ] })
+              ] }),
+              decision.clone && /* @__PURE__ */ jsx50(
+                Input2,
+                {
+                  size: "small",
+                  placeholder: "Enter key for the cloned agent",
+                  value: decision.cloneKey,
+                  onChange: (e) => handleCloneKeyChange(decision.originalKey, e.target.value),
+                  style: { fontFamily: "monospace", fontSize: 12 },
+                  addonBefore: "Key"
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
+
+// src/components/Chat/CreateAssistantModal.tsx
+import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
+var { TextArea: TextArea2 } = Input3;
+var { Text: Text19 } = Typography21;
 var CreateAssistantModal = ({
   open,
   onCancel,
   onSuccess
 }) => {
   const [form] = Form2.useForm();
-  const [loading, setLoading] = useState25(false);
+  const [loading, setLoading] = useState26(false);
+  const [creationMode, setCreationMode] = useState26("scratch");
+  const [parentAssistant, setParentAssistant] = useState26(null);
+  const [subAgentDecisions, setSubAgentDecisions] = useState26([]);
   const { config } = useLatticeChatShellContext();
-  const { token } = theme4.useToken();
+  const { token } = theme5.useToken();
+  const getHeaders = useCallback16(() => {
+    const headers = { "Content-Type": "application/json" };
+    if (config.apiKey) {
+      headers["Authorization"] = `Bearer ${config.apiKey}`;
+    }
+    return headers;
+  }, [config.apiKey]);
+  const resetExtendState = useCallback16(() => {
+    setParentAssistant(null);
+    setSubAgentDecisions([]);
+  }, []);
+  const handleParentSelect = useCallback16(
+    (assistant) => {
+      setParentAssistant(assistant);
+      if (!assistant) {
+        form.resetFields(["key", "name", "description", "type", "prompt"]);
+        setSubAgentDecisions([]);
+        return;
+      }
+      const graphDef = typeof assistant.graphDefinition === "object" && assistant.graphDefinition !== null ? assistant.graphDefinition : {};
+      const parentKey = graphDef.key || assistant.id;
+      const parentName = assistant.name || graphDef.name || "";
+      form.setFieldsValue({
+        key: `${parentKey}_ext`,
+        name: parentName ? `${parentName} (Extended)` : "",
+        description: assistant.description || graphDef.description || "",
+        type: graphDef.type || "react",
+        prompt: graphDef.prompt || ""
+      });
+      const parentSubAgents2 = graphDef.subAgents || [];
+      setSubAgentDecisions(
+        parentSubAgents2.map((key) => ({ originalKey: key, clone: false }))
+      );
+    },
+    [form]
+  );
+  const handleModeChange = useCallback16(
+    (mode) => {
+      setCreationMode(mode);
+      if (mode === "scratch") {
+        resetExtendState();
+        form.resetFields();
+      }
+    },
+    [form, resetExtendState]
+  );
+  const cloneSubAgent = async (originalKey, newKey, headers) => {
+    const getResponse = await fetch(
+      `${config.baseURL}/api/assistants/${originalKey}`,
+      { method: "GET", headers }
+    );
+    const getData = await getResponse.json();
+    if (!getResponse.ok || !getData.success) {
+      throw new Error(`Failed to fetch sub-agent "${originalKey}" for cloning`);
+    }
+    const originalAssistant = getData.data;
+    const originalGraphDef = typeof originalAssistant.graphDefinition === "object" ? originalAssistant.graphDefinition : {};
+    const cloneBody = {
+      id: newKey,
+      name: `${originalAssistant.name} (Clone)`,
+      description: originalAssistant.description || "",
+      graphDefinition: {
+        ...originalGraphDef,
+        key: newKey,
+        name: `${originalAssistant.name} (Clone)`
+      }
+    };
+    const createResponse = await fetch(`${config.baseURL}/api/assistants`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify(cloneBody)
+    });
+    const createData = await createResponse.json();
+    if (!createResponse.ok || !createData.success) {
+      throw new Error(`Failed to clone sub-agent "${originalKey}"`);
+    }
+    return createData.data;
+  };
+  const buildScratchBody = (values) => ({
+    id: values.key,
+    name: values.name,
+    description: values.description || "",
+    graphDefinition: {
+      key: values.key,
+      name: values.name,
+      description: values.description || "",
+      type: values.type,
+      prompt: values.prompt || "",
+      tools: [],
+      skills: [],
+      subAgents: values.type === "deep_agent" ? [] : void 0,
+      middleware: []
+    }
+  });
+  const buildExtendBody = async (values, headers, createdAssistants) => {
+    if (!parentAssistant) {
+      throw new Error("No parent agent selected");
+    }
+    const cloneDecisions = subAgentDecisions.filter((d) => d.clone);
+    for (const decision of cloneDecisions) {
+      if (!decision.cloneKey || !decision.cloneKey.trim()) {
+        throw new Error(
+          `Please provide a key for the cloned sub-agent "${decision.originalKey}"`
+        );
+      }
+      if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(decision.cloneKey)) {
+        throw new Error(
+          `Invalid key "${decision.cloneKey}" for cloned sub-agent "${decision.originalKey}". Key must start with a letter and contain only letters, numbers, underscores, or hyphens.`
+        );
+      }
+    }
+    const resolvedSubAgents = [];
+    for (const decision of subAgentDecisions) {
+      if (decision.clone) {
+        const clonedAssistant = await cloneSubAgent(decision.originalKey, decision.cloneKey, headers);
+        createdAssistants.push(clonedAssistant);
+        resolvedSubAgents.push(decision.cloneKey);
+      } else {
+        resolvedSubAgents.push(decision.originalKey);
+      }
+    }
+    const parentGraphDef = typeof parentAssistant.graphDefinition === "object" ? parentAssistant.graphDefinition : {};
+    const graphDefinition = {
+      key: values.key,
+      name: values.name,
+      description: values.description || "",
+      extendsAgent: parentAssistant.id,
+      type: values.type || parentGraphDef.type
+    };
+    if (values.prompt && values.prompt !== parentGraphDef.prompt) {
+      graphDefinition.prompt = values.prompt;
+    }
+    if (resolvedSubAgents.length > 0 || parentGraphDef.subAgents && parentGraphDef.subAgents.length > 0) {
+      graphDefinition.subAgents = resolvedSubAgents;
+    }
+    return {
+      id: values.key,
+      name: values.name,
+      description: values.description || "",
+      graphDefinition
+    };
+  };
   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 requestBody = {
-        id: values.key,
-        name: values.name,
-        description: values.description || "",
-        graphDefinition: {
-          key: values.key,
-          name: values.name,
-          description: values.description || "",
-          type: values.type,
-          prompt: values.prompt || "",
-          tools: [],
-          skills: [],
-          subAgents: values.type === "deep_agent" ? [] : void 0,
-          middleware: []
-        }
-      };
+      const headers = getHeaders();
+      const createdAssistants = [];
+      const requestBody = creationMode === "scratch" ? buildScratchBody(values) : await buildExtendBody(values, headers, createdAssistants);
       const response = await fetch(`${config.baseURL}/api/assistants`, {
         method: "POST",
         headers,
@@ -9520,9 +9740,14 @@ var CreateAssistantModal = ({
       if (response.ok && data.success) {
         notification.success({
           message: "Created",
-          description: "Assistant created successfully"
+          description: creationMode === "extend" ? `Assistant created by extending "${parentAssistant?.name}"` : "Assistant created successfully"
         });
         form.resetFields();
+        resetExtendState();
+        setCreationMode("scratch");
+        for (const clonedAssistant of createdAssistants) {
+          onSuccess?.(clonedAssistant);
+        }
         onSuccess?.(data.data);
         onCancel();
       } else {
@@ -9532,141 +9757,235 @@ var CreateAssistantModal = ({
       if (error.errorFields) {
         return;
       }
-      message6.error(error.message || "An error occurred while creating the assistant");
+      message6.error(
+        error.message || "An error occurred while creating the assistant"
+      );
     } finally {
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx49(
+  const parentSubAgents = parentAssistant?.graphDefinition?.subAgents || [];
+  const showSubAgentList = creationMode === "extend" && parentAssistant && parentSubAgents.length > 0;
+  return /* @__PURE__ */ jsxs30(
     Modal2,
     {
       title: "Create New Assistant",
       open,
-      onCancel,
+      onCancel: () => {
+        resetExtendState();
+        setCreationMode("scratch");
+        onCancel();
+      },
       footer: [
-        /* @__PURE__ */ jsx49(Button20, { onClick: onCancel, children: "Cancel" }, "cancel"),
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx51(
+          Button20,
+          {
+            onClick: () => {
+              resetExtendState();
+              setCreationMode("scratch");
+              onCancel();
+            },
+            children: "Cancel"
+          },
+          "cancel"
+        ),
+        /* @__PURE__ */ jsx51(
           Button20,
           {
             type: "primary",
-            icon: /* @__PURE__ */ jsx49(PlusOutlined2, {}),
+            icon: creationMode === "extend" ? /* @__PURE__ */ jsx51(ForkOutlined2, {}) : /* @__PURE__ */ jsx51(PlusOutlined2, {}),
             loading,
             onClick: handleSubmit,
-            children: "Create"
+            children: creationMode === "extend" ? "Create (Extend)" : "Create"
           },
           "submit"
         )
       ],
       width: 600,
-      children: /* @__PURE__ */ jsxs28(
-        Form2,
-        {
-          form,
-          layout: "vertical",
-          autoComplete: "off",
-          initialValues: { type: "react" },
-          children: [
-            /* @__PURE__ */ jsx49(
-              Form2.Item,
-              {
-                name: "key",
-                label: "Key (ID)",
-                rules: [
-                  { required: true, message: "Please enter a unique key" },
-                  { pattern: /^[a-zA-Z][a-zA-Z0-9_-]*$/, message: "Key must start with a letter and contain only letters, numbers, underscores, or hyphens" }
-                ],
-                style: { marginBottom: 16 },
-                children: /* @__PURE__ */ jsx49(Input2, { placeholder: "e.g., my_assistant" })
-              }
-            ),
-            /* @__PURE__ */ jsx49(
-              Form2.Item,
-              {
-                name: "name",
-                label: "Name",
-                rules: [{ required: true, message: "Please enter a name" }],
-                style: { marginBottom: 16 },
-                children: /* @__PURE__ */ jsx49(Input2, { placeholder: "e.g., My Assistant" })
-              }
-            ),
-            /* @__PURE__ */ jsx49(
-              Form2.Item,
-              {
-                name: "description",
-                label: "Description",
-                rules: [{ required: true, message: "Please enter a description" }],
-                style: { marginBottom: 16 },
-                children: /* @__PURE__ */ jsx49(
-                  TextArea2,
-                  {
-                    placeholder: "Enter a description for this assistant...",
-                    autoSize: { minRows: 2, maxRows: 4 }
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx49(
-              Form2.Item,
-              {
-                name: "type",
-                label: "Agent Type",
-                rules: [{ required: true }],
-                style: { marginBottom: 16 },
-                children: /* @__PURE__ */ jsx49(
-                  Segmented2,
-                  {
-                    options: [
-                      { value: "react", label: "React" },
-                      { value: "deep_agent", label: "Deep" }
-                    ],
-                    block: true
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx49(
-              Form2.Item,
-              {
-                name: "prompt",
-                label: "System Prompt",
-                rules: [{ required: true, message: "Please enter a system prompt" }],
-                children: /* @__PURE__ */ jsx49(
-                  TextArea2,
-                  {
-                    placeholder: "Enter the system prompt for this agent...",
-                    autoSize: { minRows: 4, maxRows: 8 },
-                    style: {
-                      fontFamily: "monospace",
-                      fontSize: 13,
-                      lineHeight: 1.6
+      children: [
+        /* @__PURE__ */ jsxs30("div", { style: { marginBottom: 20 }, children: [
+          /* @__PURE__ */ jsx51(
+            Text19,
+            {
+              type: "secondary",
+              style: { display: "block", marginBottom: 8 },
+              children: "Creation Mode"
+            }
+          ),
+          /* @__PURE__ */ jsx51(
+            Segmented2,
+            {
+              value: creationMode,
+              onChange: handleModeChange,
+              options: [
+                { value: "scratch", label: "From Scratch" },
+                { value: "extend", label: "Extend Existing Agent" }
+              ],
+              block: true
+            }
+          )
+        ] }),
+        creationMode === "extend" && /* @__PURE__ */ jsxs30("div", { style: { marginBottom: 20 }, children: [
+          /* @__PURE__ */ jsx51(
+            Text19,
+            {
+              type: "secondary",
+              style: { display: "block", marginBottom: 8 },
+              children: "Parent Agent"
+            }
+          ),
+          /* @__PURE__ */ jsx51(
+            ParentAgentSelector,
+            {
+              value: parentAssistant?.id,
+              onSelect: handleParentSelect
+            }
+          ),
+          parentAssistant && /* @__PURE__ */ jsx51(
+            Text19,
+            {
+              type: "secondary",
+              style: { display: "block", marginTop: 4, fontSize: 12 },
+              children: "Fields left unchanged will be inherited from the parent agent."
+            }
+          )
+        ] }),
+        creationMode === "extend" && parentAssistant && /* @__PURE__ */ jsx51(Divider3, { style: { margin: "12px 0" } }),
+        /* @__PURE__ */ jsxs30(
+          Form2,
+          {
+            form,
+            layout: "vertical",
+            autoComplete: "off",
+            initialValues: { type: "react" },
+            children: [
+              /* @__PURE__ */ jsx51(
+                Form2.Item,
+                {
+                  name: "key",
+                  label: "Key (ID)",
+                  rules: [
+                    { required: true, message: "Please enter a unique key" },
+                    {
+                      pattern: /^[a-zA-Z][a-zA-Z0-9_-]*$/,
+                      message: "Key must start with a letter and contain only letters, numbers, underscores, or hyphens"
                     }
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
+                  ],
+                  style: { marginBottom: 16 },
+                  children: /* @__PURE__ */ jsx51(Input3, { placeholder: "e.g., my_assistant" })
+                }
+              ),
+              /* @__PURE__ */ jsx51(
+                Form2.Item,
+                {
+                  name: "name",
+                  label: "Name",
+                  rules: [{ required: true, message: "Please enter a name" }],
+                  style: { marginBottom: 16 },
+                  children: /* @__PURE__ */ jsx51(Input3, { placeholder: "e.g., My Assistant" })
+                }
+              ),
+              /* @__PURE__ */ jsx51(
+                Form2.Item,
+                {
+                  name: "description",
+                  label: "Description",
+                  rules: [
+                    { required: true, message: "Please enter a description" }
+                  ],
+                  style: { marginBottom: 16 },
+                  children: /* @__PURE__ */ jsx51(
+                    TextArea2,
+                    {
+                      placeholder: "Enter a description for this assistant...",
+                      autoSize: { minRows: 2, maxRows: 4 }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx51(
+                Form2.Item,
+                {
+                  name: "type",
+                  label: "Agent Type",
+                  rules: [{ required: true }],
+                  style: { marginBottom: 16 },
+                  children: /* @__PURE__ */ jsx51(
+                    Segmented2,
+                    {
+                      options: [
+                        { value: "react", label: "Executor" },
+                        { value: "deep_agent", label: "Orchestrator" }
+                      ],
+                      block: true
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx51(Form2.Item, { noStyle: true, shouldUpdate: (prev, cur) => prev.type !== cur.type, children: () => /* @__PURE__ */ jsx51(
+                Text19,
+                {
+                  type: "secondary",
+                  style: { fontSize: 12, display: "block", marginTop: -12, marginBottom: 16, lineHeight: 1.5 },
+                  children: form.getFieldValue("type") === "deep_agent" ? "Orchestrator: Coordinates multiple sub-agents to accomplish complex workflows. Best for multi-step tasks that require planning, delegation, and synthesis." : "Executor: Directly executes tasks using tools. Best for single-step operations like search, code execution, and data retrieval."
+                }
+              ) }),
+              /* @__PURE__ */ jsx51(
+                Form2.Item,
+                {
+                  name: "prompt",
+                  label: creationMode === "extend" && parentAssistant ? "System Prompt (leave unchanged to inherit from parent)" : "System Prompt",
+                  rules: creationMode === "scratch" ? [{ required: true, message: "Please enter a system prompt" }] : [],
+                  children: /* @__PURE__ */ jsx51(
+                    TextArea2,
+                    {
+                      placeholder: creationMode === "extend" && parentAssistant ? "Leave empty to inherit parent's prompt, or enter a new prompt to override..." : "Enter the system prompt for this agent...",
+                      autoSize: { minRows: 4, maxRows: 8 },
+                      style: {
+                        fontFamily: "monospace",
+                        fontSize: 13,
+                        lineHeight: 1.6
+                      }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        showSubAgentList && /* @__PURE__ */ jsxs30(Fragment8, { children: [
+          /* @__PURE__ */ jsx51(Divider3, { style: { margin: "12px 0" } }),
+          /* @__PURE__ */ jsx51(Text19, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Sub-Agents" }),
+          /* @__PURE__ */ jsx51(
+            SubAgentInheritList,
+            {
+              subAgentKeys: parentSubAgents,
+              decisions: subAgentDecisions,
+              onChange: setSubAgentDecisions
+            }
+          )
+        ] })
+      ]
     }
   );
 };
 var CreateAssistantModal_default = CreateAssistantModal;
 
 // src/components/Chat/AssistantFlow.tsx
-import { Button as Button21, message as message7, notification as notification2, theme as theme5 } from "antd";
+import { Button as Button21, message as message7, notification as notification2, theme as theme6 } from "antd";
 import { PlusOutlined as PlusOutlined3 } from "@ant-design/icons";
-import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
 var AssistantFlowInner = ({ onChat }) => {
-  const { setCenter, fitView } = useReactFlow2();
+  const { setCenter, fitView } = useReactFlow();
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const [assistants, setAssistants] = useState26([]);
-  const [assistantsLoading, setAssistantsLoading] = useState26(false);
-  const [configPanelVisible, setConfigPanelVisible] = useState26(false);
-  const [selectedAssistant, setSelectedAssistant] = useState26(null);
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState26(false);
+  const [assistants, setAssistants] = useState27([]);
+  const [assistantsLoading, setAssistantsLoading] = useState27(false);
+  const [configPanelVisible, setConfigPanelVisible] = useState27(false);
+  const [selectedAssistant, setSelectedAssistant] = useState27(null);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState27(false);
   const { config } = useLatticeChatShellContext();
-  const { token } = theme5.useToken();
+  const { token } = theme6.useToken();
   const { enableAssistantCreation = true, enableAssistantEditing = true } = config;
   const nodeTypes = useMemo12(
     () => ({
@@ -9674,14 +9993,29 @@ var AssistantFlowInner = ({ onChat }) => {
     }),
     []
   );
-  const handleConfigure = useCallback16((assistant) => {
+  const handleConfigure = useCallback17((assistant) => {
     setSelectedAssistant(assistant);
     setConfigPanelVisible(true);
   }, []);
-  const handleClosePanel = useCallback16(() => {
+  const handleClosePanel = useCallback17(() => {
     setConfigPanelVisible(false);
     setSelectedAssistant(null);
   }, []);
+  const handleSelectionChange = useCallback17(
+    ({ nodes: selectedNodes }) => {
+      if (selectedNodes.length === 1 && enableAssistantEditing) {
+        const nodeData = selectedNodes[0].data;
+        if (nodeData?.assistant) {
+          setSelectedAssistant(nodeData.assistant);
+          setConfigPanelVisible(true);
+        }
+      } else if (selectedNodes.length === 0) {
+        setConfigPanelVisible(false);
+        setSelectedAssistant(null);
+      }
+    },
+    [enableAssistantEditing]
+  );
   const fetchAssistants = async () => {
     setAssistantsLoading(true);
     try {
@@ -9705,10 +10039,10 @@ var AssistantFlowInner = ({ onChat }) => {
       setAssistantsLoading(false);
     }
   };
-  useEffect18(() => {
+  useEffect19(() => {
     fetchAssistants();
   }, []);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!assistants || assistants.length === 0) {
       setNodes([]);
       setEdges([]);
@@ -9995,7 +10329,7 @@ var AssistantFlowInner = ({ onChat }) => {
     });
     lastCreatedAssistantRef.current = createdAssistant;
   };
-  useEffect18(() => {
+  useEffect19(() => {
     if (selectedAssistant) {
       const node = nodes.find((n) => n.id === selectedAssistant.id);
       if (node) {
@@ -10003,7 +10337,7 @@ var AssistantFlowInner = ({ onChat }) => {
       }
     }
   }, [selectedAssistant, nodes, setCenter]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (assistants.length > 0 && selectedAssistant) {
       const assistant = assistants.find((a) => a.id === selectedAssistant.id);
       if (assistant && !configPanelVisible) {
@@ -10012,7 +10346,7 @@ var AssistantFlowInner = ({ onChat }) => {
     }
   }, [assistants, selectedAssistant, configPanelVisible]);
   const lastCreatedAssistantRef = useRef14(null);
-  useEffect18(() => {
+  useEffect19(() => {
     if (lastCreatedAssistantRef.current && !assistants.find((a) => a.id === lastCreatedAssistantRef.current?.id)) {
       lastCreatedAssistantRef.current = null;
     }
@@ -10027,7 +10361,7 @@ var AssistantFlowInner = ({ onChat }) => {
     }
   }, [nodes, setCenter]);
   if (assistantsLoading) {
-    return /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx52(
       "div",
       {
         style: {
@@ -10042,8 +10376,8 @@ var AssistantFlowInner = ({ onChat }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxs29("div", { style: { width: "100%", height: "100%", display: "flex" }, children: [
-    /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs31("div", { style: { width: "100%", height: "100%", display: "flex" }, children: [
+    /* @__PURE__ */ jsxs31(
       "div",
       {
         style: {
@@ -10053,22 +10387,23 @@ var AssistantFlowInner = ({ onChat }) => {
           position: "relative"
         },
         children: [
-          /* @__PURE__ */ jsxs29(
+          /* @__PURE__ */ jsxs31(
             ReactFlow,
             {
               nodes,
               edges,
               onNodesChange,
               onEdgesChange,
+              onSelectionChange: handleSelectionChange,
               nodeTypes,
               fitView: true,
               children: [
-                /* @__PURE__ */ jsx50(Background, { color: "#eee", gap: 20 }),
-                /* @__PURE__ */ jsx50(Controls, {})
+                /* @__PURE__ */ jsx52(Background, { color: "#eee", gap: 20 }),
+                /* @__PURE__ */ jsx52(Controls, {})
               ]
             }
           ),
-          enableAssistantCreation && /* @__PURE__ */ jsx50(
+          enableAssistantCreation && /* @__PURE__ */ jsx52(
             "div",
             {
               style: {
@@ -10077,12 +10412,12 @@ var AssistantFlowInner = ({ onChat }) => {
                 right: 20,
                 zIndex: 10
               },
-              children: /* @__PURE__ */ jsx50(
+              children: /* @__PURE__ */ jsx52(
                 Button21,
                 {
                   type: "primary",
                   size: "large",
-                  icon: /* @__PURE__ */ jsx50(PlusOutlined3, {}),
+                  icon: /* @__PURE__ */ jsx52(PlusOutlined3, {}),
                   onClick: () => setIsCreateModalOpen(true),
                   style: {
                     height: 48,
@@ -10101,7 +10436,7 @@ var AssistantFlowInner = ({ onChat }) => {
         ]
       }
     ),
-    /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx52(
       AgentConfigPanel_default,
       {
         visible: configPanelVisible,
@@ -10112,7 +10447,7 @@ var AssistantFlowInner = ({ onChat }) => {
         onDelete: handleDeleteAssistant
       }
     ),
-    /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx52(
       CreateAssistantModal_default,
       {
         open: isCreateModalOpen,
@@ -10122,11 +10457,11 @@ var AssistantFlowInner = ({ onChat }) => {
     )
   ] });
 };
-var AssistantFlow = (props) => /* @__PURE__ */ jsx50(ReactFlowProvider, { children: /* @__PURE__ */ jsx50(AssistantFlowInner, { ...props }) });
+var AssistantFlow = (props) => /* @__PURE__ */ jsx52(ReactFlowProvider, { children: /* @__PURE__ */ jsx52(AssistantFlowInner, { ...props }) });
 var AssistantFlow_default = AssistantFlow;
 
 // src/components/Chat/SkillFlow.tsx
-import { useMemo as useMemo14, useEffect as useEffect20, useState as useState29 } from "react";
+import { useMemo as useMemo14, useEffect as useEffect21, useState as useState30 } from "react";
 import {
   ReactFlow as ReactFlow2,
   Background as Background2,
@@ -10136,22 +10471,22 @@ import {
   ReactFlowProvider as ReactFlowProvider2
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { Button as Button24, theme as theme8 } from "antd";
+import { Button as Button24, theme as theme9 } from "antd";
 import { PlusOutlined as PlusOutlined6 } from "@ant-design/icons";
 
 // src/components/Chat/SkillNode.tsx
-import { useEffect as useEffect19, useMemo as useMemo13, useState as useState27 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo13, useState as useState28 } from "react";
 import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
 import {
   Avatar as Avatar6,
-  Typography as Typography20,
-  theme as theme6,
-  Tag as Tag8,
+  Typography as Typography22,
+  theme as theme7,
+  Tag as Tag9,
   Tooltip as Tooltip11,
-  Space as Space20,
+  Space as Space19,
   Button as Button22,
-  Divider as Divider3,
-  Input as Input3,
+  Divider as Divider4,
+  Input as Input4,
   Modal as Modal3,
   message as message8,
   notification as notification3
@@ -10166,9 +10501,9 @@ import {
   PlusOutlined as PlusOutlined4
 } from "@ant-design/icons";
 import { Client as Client4 } from "@axiom-lattice/client-sdk";
-import { Fragment as Fragment8, jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
-var { Text: Text18 } = Typography20;
-var { TextArea: TextArea3 } = Input3;
+import { Fragment as Fragment9, jsx as jsx53, jsxs as jsxs32 } from "react/jsx-runtime";
+var { Text: Text20 } = Typography22;
+var { TextArea: TextArea3 } = Input4;
 var getBadgeColor2 = (name) => {
   const colors = [
     "#1890ff",
@@ -10195,7 +10530,7 @@ var getBadgeColor2 = (name) => {
   return colors[Math.abs(hash) % colors.length];
 };
 var SkillNode = ({ data }) => {
-  const { token } = theme6.useToken();
+  const { token } = theme7.useToken();
   const { config } = useLatticeChatShellContext();
   const client = useMemo13(
     () => new Client4({
@@ -10214,7 +10549,7 @@ var SkillNode = ({ data }) => {
   if (!skill) {
     return null;
   }
-  const [currentSkill, setCurrentSkill] = useState27(skill);
+  const [currentSkill, setCurrentSkill] = useState28(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;
@@ -10236,20 +10571,20 @@ var SkillNode = ({ data }) => {
   const handleCopy = (text) => {
     navigator.clipboard.writeText(text);
   };
-  const [isEditing, setIsEditing] = useState27(false);
-  const [draftSkill, setDraftSkill] = useState27({
+  const [isEditing, setIsEditing] = useState28(false);
+  const [draftSkill, setDraftSkill] = useState28({
     ...skill,
     id: skill.name
   });
-  const [metadataRows, setMetadataRows] = useState27(
+  const [metadataRows, setMetadataRows] = useState28(
     metadataEntries.map(([key, value]) => ({
       key,
       value
     }))
   );
-  const [isModalOpen, setIsModalOpen] = useState27(false);
-  const [saving, setSaving] = useState27(false);
-  useEffect19(() => {
+  const [isModalOpen, setIsModalOpen] = useState28(false);
+  const [saving, setSaving] = useState28(false);
+  useEffect20(() => {
     setIsEditing(false);
     setCurrentSkill(skill);
     setDraftSkill({ ...skill, id: skill.name });
@@ -10375,7 +10710,7 @@ var SkillNode = ({ data }) => {
       setSaving(false);
     }
   };
-  const editingView = /* @__PURE__ */ jsxs30(
+  const editingView = /* @__PURE__ */ jsxs32(
     "div",
     {
       style: {
@@ -10384,9 +10719,9 @@ var SkillNode = ({ data }) => {
         gap: 12
       },
       children: [
-        /* @__PURE__ */ jsxs30("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-          /* @__PURE__ */ jsx51(Text18, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
-          /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsxs32("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsx53(Text20, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
+          /* @__PURE__ */ jsx53(
             TextArea3,
             {
               value: draftSkill.description,
@@ -10396,10 +10731,10 @@ var SkillNode = ({ data }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs30("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-          /* @__PURE__ */ jsx51(Text18, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
-          /* @__PURE__ */ jsx51(
-            Input3,
+        /* @__PURE__ */ jsxs32("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsx53(Text20, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
+          /* @__PURE__ */ jsx53(
+            Input4,
             {
               value: draftSkill.license,
               onChange: (e) => handleFieldChange("license", e.target.value),
@@ -10407,10 +10742,10 @@ var SkillNode = ({ data }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs30("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-          /* @__PURE__ */ jsx51(Text18, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
-          /* @__PURE__ */ jsx51(
-            Input3,
+        /* @__PURE__ */ jsxs32("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsx53(Text20, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
+          /* @__PURE__ */ jsx53(
+            Input4,
             {
               value: draftSkill.compatibility,
               onChange: (e) => handleFieldChange("compatibility", e.target.value),
@@ -10418,7 +10753,7 @@ var SkillNode = ({ data }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs30(
+        /* @__PURE__ */ jsxs32(
           "div",
           {
             style: {
@@ -10428,8 +10763,8 @@ var SkillNode = ({ data }) => {
               gap: 8
             },
             children: [
-              /* @__PURE__ */ jsx51(
-                Text18,
+              /* @__PURE__ */ jsx53(
+                Text20,
                 {
                   style: {
                     fontSize: 12,
@@ -10439,11 +10774,11 @@ var SkillNode = ({ data }) => {
                   children: "Metadata"
                 }
               ),
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx53(
                 Button22,
                 {
                   size: "small",
-                  icon: /* @__PURE__ */ jsx51(PlusOutlined4, {}),
+                  icon: /* @__PURE__ */ jsx53(PlusOutlined4, {}),
                   onClick: handleAddMetadataRow,
                   children: "Add"
                 }
@@ -10451,9 +10786,9 @@ var SkillNode = ({ data }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsxs30(Space20, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
-          metadataRows.length === 0 && /* @__PURE__ */ jsx51(
-            Text18,
+        /* @__PURE__ */ jsxs32(Space19, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
+          metadataRows.length === 0 && /* @__PURE__ */ jsx53(
+            Text20,
             {
               style: {
                 fontSize: 11,
@@ -10462,7 +10797,7 @@ var SkillNode = ({ data }) => {
               children: "No metadata yet. Use Add to create one."
             }
           ),
-          metadataRows.map((row, index) => /* @__PURE__ */ jsxs30(
+          metadataRows.map((row, index) => /* @__PURE__ */ jsxs32(
             "div",
             {
               style: {
@@ -10472,13 +10807,13 @@ var SkillNode = ({ data }) => {
                 width: "100%"
               },
               children: [
-                /* @__PURE__ */ jsxs30(Text18, { style: { fontSize: 11, color: token.colorTextSecondary }, children: [
+                /* @__PURE__ */ jsxs32(Text20, { style: { fontSize: 11, color: token.colorTextSecondary }, children: [
                   "Meta ",
                   index + 1
                 ] }),
-                /* @__PURE__ */ jsxs30(Space20, { style: { width: "100%" }, size: 8, wrap: true, children: [
-                  /* @__PURE__ */ jsx51(
-                    Input3,
+                /* @__PURE__ */ jsxs32(Space19, { style: { width: "100%" }, size: 8, wrap: true, children: [
+                  /* @__PURE__ */ jsx53(
+                    Input4,
                     {
                       value: row.key,
                       placeholder: "Key",
@@ -10486,8 +10821,8 @@ var SkillNode = ({ data }) => {
                       onChange: (e) => handleMetadataChange(index, "key", e.target.value)
                     }
                   ),
-                  /* @__PURE__ */ jsx51(
-                    Input3,
+                  /* @__PURE__ */ jsx53(
+                    Input4,
                     {
                       value: row.value,
                       placeholder: "Value",
@@ -10501,9 +10836,9 @@ var SkillNode = ({ data }) => {
             index
           ))
         ] }),
-        /* @__PURE__ */ jsxs30("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-          /* @__PURE__ */ jsx51(Text18, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
-          /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsxs32("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+          /* @__PURE__ */ jsx53(Text20, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
+          /* @__PURE__ */ jsx53(
             TextArea3,
             {
               value: draftSkill.content,
@@ -10516,7 +10851,7 @@ var SkillNode = ({ data }) => {
       ]
     }
   );
-  const detailCardContent = /* @__PURE__ */ jsxs30(
+  const detailCardContent = /* @__PURE__ */ jsxs32(
     "div",
     {
       style: {
@@ -10526,7 +10861,7 @@ var SkillNode = ({ data }) => {
         padding: 16
       },
       children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx53(
           "div",
           {
             style: {
@@ -10535,8 +10870,8 @@ var SkillNode = ({ data }) => {
               justifyContent: "space-between",
               marginBottom: 16
             },
-            children: /* @__PURE__ */ jsxs30("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsxs30(
+            children: /* @__PURE__ */ jsxs32("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsxs32(
                 "div",
                 {
                   style: {
@@ -10546,8 +10881,8 @@ var SkillNode = ({ data }) => {
                     marginBottom: 8
                   },
                   children: [
-                    /* @__PURE__ */ jsx51(
-                      Text18,
+                    /* @__PURE__ */ jsx53(
+                      Text20,
                       {
                         strong: true,
                         style: {
@@ -10558,8 +10893,8 @@ var SkillNode = ({ data }) => {
                         children: currentSkill.name
                       }
                     ),
-                    /* @__PURE__ */ jsx51(
-                      Tag8,
+                    /* @__PURE__ */ jsx53(
+                      Tag9,
                       {
                         style: {
                           margin: 0,
@@ -10574,7 +10909,7 @@ var SkillNode = ({ data }) => {
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx53(
                 "div",
                 {
                   style: {
@@ -10582,8 +10917,8 @@ var SkillNode = ({ data }) => {
                     alignItems: "center",
                     gap: 6
                   },
-                  children: /* @__PURE__ */ jsx51(
-                    Text18,
+                  children: /* @__PURE__ */ jsx53(
+                    Text20,
                     {
                       style: {
                         fontSize: 11,
@@ -10598,9 +10933,9 @@ var SkillNode = ({ data }) => {
             ] })
           }
         ),
-        isEditing ? editingView : /* @__PURE__ */ jsxs30(Fragment8, { children: [
-          currentSkill.description && /* @__PURE__ */ jsx51("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs30(
-            Text18,
+        isEditing ? editingView : /* @__PURE__ */ jsxs32(Fragment9, { children: [
+          currentSkill.description && /* @__PURE__ */ jsx53("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs32(
+            Text20,
             {
               style: {
                 fontSize: 12,
@@ -10615,8 +10950,8 @@ var SkillNode = ({ data }) => {
               ]
             }
           ) }),
-          metadataEntries.length > 0 && /* @__PURE__ */ jsxs30("div", { style: { marginBottom: 16 }, children: [
-            /* @__PURE__ */ jsxs30(
+          metadataEntries.length > 0 && /* @__PURE__ */ jsxs32("div", { style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsxs32(
               "div",
               {
                 style: {
@@ -10626,7 +10961,7 @@ var SkillNode = ({ data }) => {
                   marginBottom: 8
                 },
                 children: [
-                  /* @__PURE__ */ jsx51(
+                  /* @__PURE__ */ jsx53(
                     InfoCircleOutlined5,
                     {
                       style: {
@@ -10635,8 +10970,8 @@ var SkillNode = ({ data }) => {
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxs30(
-                    Text18,
+                  /* @__PURE__ */ jsxs32(
+                    Text20,
                     {
                       style: {
                         fontSize: 12,
@@ -10653,7 +10988,7 @@ var SkillNode = ({ data }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx51(
+            /* @__PURE__ */ jsx53(
               "div",
               {
                 style: {
@@ -10661,7 +10996,7 @@ var SkillNode = ({ data }) => {
                   borderRadius: 6,
                   overflow: "hidden"
                 },
-                children: metadataEntries.map(([key, value], index) => /* @__PURE__ */ jsxs30(
+                children: metadataEntries.map(([key, value], index) => /* @__PURE__ */ jsxs32(
                   "div",
                   {
                     style: {
@@ -10670,7 +11005,7 @@ var SkillNode = ({ data }) => {
                       borderBottom: index === metadataEntries.length - 1 ? "none" : `1px solid ${token.colorBorderSecondary}`
                     },
                     children: [
-                      /* @__PURE__ */ jsx51(
+                      /* @__PURE__ */ jsx53(
                         "div",
                         {
                           style: {
@@ -10686,7 +11021,7 @@ var SkillNode = ({ data }) => {
                           children: key
                         }
                       ),
-                      /* @__PURE__ */ jsx51(
+                      /* @__PURE__ */ jsx53(
                         "div",
                         {
                           style: {
@@ -10706,8 +11041,8 @@ var SkillNode = ({ data }) => {
               }
             )
           ] }),
-          hasSubSkills && /* @__PURE__ */ jsxs30("div", { style: { marginBottom: 16 }, children: [
-            /* @__PURE__ */ jsxs30(
+          hasSubSkills && /* @__PURE__ */ jsxs32("div", { style: { marginBottom: 16 }, children: [
+            /* @__PURE__ */ jsxs32(
               "div",
               {
                 style: {
@@ -10717,7 +11052,7 @@ var SkillNode = ({ data }) => {
                   marginBottom: 8
                 },
                 children: [
-                  /* @__PURE__ */ jsx51(
+                  /* @__PURE__ */ jsx53(
                     BranchesOutlined2,
                     {
                       style: {
@@ -10726,8 +11061,8 @@ var SkillNode = ({ data }) => {
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsxs30(
-                    Text18,
+                  /* @__PURE__ */ jsxs32(
+                    Text20,
                     {
                       style: {
                         fontSize: 12,
@@ -10744,9 +11079,9 @@ var SkillNode = ({ data }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx51(Space20, { size: [8, 8], wrap: true, children: currentSkill.subSkills.map(
-              (subSkill, index) => /* @__PURE__ */ jsx51(
-                Tag8,
+            /* @__PURE__ */ jsx53(Space19, { size: [8, 8], wrap: true, children: currentSkill.subSkills.map(
+              (subSkill, index) => /* @__PURE__ */ jsx53(
+                Tag9,
                 {
                   style: {
                     fontSize: 11,
@@ -10761,11 +11096,11 @@ var SkillNode = ({ data }) => {
               )
             ) })
           ] }),
-          (currentSkill.license || currentSkill.compatibility) && /* @__PURE__ */ jsx51("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs30(Space20, { size: [8, 8], wrap: true, children: [
-            currentSkill.license && /* @__PURE__ */ jsx51(
-              Tag8,
+          (currentSkill.license || currentSkill.compatibility) && /* @__PURE__ */ jsx53("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs32(Space19, { size: [8, 8], wrap: true, children: [
+            currentSkill.license && /* @__PURE__ */ jsx53(
+              Tag9,
               {
-                icon: /* @__PURE__ */ jsx51(CopyrightOutlined, {}),
+                icon: /* @__PURE__ */ jsx53(CopyrightOutlined, {}),
                 style: {
                   margin: 0,
                   fontSize: 11,
@@ -10780,8 +11115,8 @@ var SkillNode = ({ data }) => {
                 children: currentSkill.license
               }
             ),
-            currentSkill.compatibility && /* @__PURE__ */ jsx51(
-              Tag8,
+            currentSkill.compatibility && /* @__PURE__ */ jsx53(
+              Tag9,
               {
                 style: {
                   margin: 0,
@@ -10801,9 +11136,9 @@ var SkillNode = ({ data }) => {
               }
             )
           ] }) }),
-          (currentSkill.createdAt || currentSkill.updatedAt) && /* @__PURE__ */ jsx51("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs30(Space20, { direction: "vertical", size: 4, children: [
-            currentSkill.createdAt && /* @__PURE__ */ jsxs30(
-              Text18,
+          (currentSkill.createdAt || currentSkill.updatedAt) && /* @__PURE__ */ jsx53("div", { style: { marginBottom: 16 }, children: /* @__PURE__ */ jsxs32(Space19, { direction: "vertical", size: 4, children: [
+            currentSkill.createdAt && /* @__PURE__ */ jsxs32(
+              Text20,
               {
                 style: {
                   fontSize: 11,
@@ -10816,8 +11151,8 @@ var SkillNode = ({ data }) => {
                 ]
               }
             ),
-            currentSkill.updatedAt && /* @__PURE__ */ jsxs30(
-              Text18,
+            currentSkill.updatedAt && /* @__PURE__ */ jsxs32(
+              Text20,
               {
                 style: {
                   fontSize: 11,
@@ -10831,8 +11166,8 @@ var SkillNode = ({ data }) => {
               }
             )
           ] }) }),
-          currentSkill.content && /* @__PURE__ */ jsxs30("div", { style: { marginBottom: 0 }, children: [
-            /* @__PURE__ */ jsxs30(
+          currentSkill.content && /* @__PURE__ */ jsxs32("div", { style: { marginBottom: 0 }, children: [
+            /* @__PURE__ */ jsxs32(
               "div",
               {
                 style: {
@@ -10842,7 +11177,7 @@ var SkillNode = ({ data }) => {
                   marginBottom: 8
                 },
                 children: [
-                  /* @__PURE__ */ jsx51(
+                  /* @__PURE__ */ jsx53(
                     FileTextOutlined6,
                     {
                       style: {
@@ -10851,8 +11186,8 @@ var SkillNode = ({ data }) => {
                       }
                     }
                   ),
-                  /* @__PURE__ */ jsx51(
-                    Text18,
+                  /* @__PURE__ */ jsx53(
+                    Text20,
                     {
                       style: {
                         fontSize: 12,
@@ -10866,7 +11201,7 @@ var SkillNode = ({ data }) => {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx51(
+            /* @__PURE__ */ jsx53(
               "div",
               {
                 style: {
@@ -10877,8 +11212,8 @@ var SkillNode = ({ data }) => {
                   maxHeight: 200,
                   overflowY: "auto"
                 },
-                children: /* @__PURE__ */ jsx51(
-                  Text18,
+                children: /* @__PURE__ */ jsx53(
+                  Text20,
                   {
                     style: {
                       fontSize: 11,
@@ -10893,8 +11228,8 @@ var SkillNode = ({ data }) => {
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx51(Divider3, { style: { margin: "16px 0" } }),
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx53(Divider4, { style: { margin: "16px 0" } }),
+        /* @__PURE__ */ jsx53(
           "div",
           {
             style: {
@@ -10903,8 +11238,8 @@ var SkillNode = ({ data }) => {
               justifyContent: "space-between",
               gap: 8
             },
-            children: isEditing ? /* @__PURE__ */ jsxs30(Fragment8, { children: [
-              /* @__PURE__ */ jsx51(
+            children: isEditing ? /* @__PURE__ */ jsxs32(Fragment9, { children: [
+              /* @__PURE__ */ jsx53(
                 Button22,
                 {
                   block: true,
@@ -10918,7 +11253,7 @@ var SkillNode = ({ data }) => {
                   children: "Cancel"
                 }
               ),
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx53(
                 Button22,
                 {
                   type: "primary",
@@ -10931,8 +11266,8 @@ var SkillNode = ({ data }) => {
                   children: "Save"
                 }
               )
-            ] }) : /* @__PURE__ */ jsxs30(Fragment8, { children: [
-              /* @__PURE__ */ jsx51(
+            ] }) : /* @__PURE__ */ jsxs32(Fragment9, { children: [
+              /* @__PURE__ */ jsx53(
                 Button22,
                 {
                   type: "primary",
@@ -10944,7 +11279,7 @@ var SkillNode = ({ data }) => {
                   children: "Edit Skill"
                 }
               ),
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx53(
                 Button22,
                 {
                   danger: true,
@@ -10955,10 +11290,10 @@ var SkillNode = ({ data }) => {
                   children: "Delete"
                 }
               ),
-              /* @__PURE__ */ jsx51(
+              /* @__PURE__ */ jsx53(
                 Button22,
                 {
-                  icon: /* @__PURE__ */ jsx51(CopyOutlined2, {}),
+                  icon: /* @__PURE__ */ jsx53(CopyOutlined2, {}),
                   onClick: () => handleCopy(currentSkill.id),
                   title: "Copy ID"
                 }
@@ -10977,14 +11312,14 @@ var SkillNode = ({ data }) => {
     height: 0,
     pointerEvents: "none"
   };
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       style: {
         padding: 4
       },
       children: [
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx53(
           Handle2,
           {
             type: "target",
@@ -10993,7 +11328,7 @@ var SkillNode = ({ data }) => {
             isConnectable: false
           }
         ),
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx53(
           "div",
           {
             onClick: () => {
@@ -11023,7 +11358,7 @@ var SkillNode = ({ data }) => {
               e.currentTarget.style.transform = "translateY(0)";
               e.currentTarget.style.boxShadow = `0 1px 4px rgba(0, 0, 0, 0.08)`;
             },
-            children: /* @__PURE__ */ jsxs30(
+            children: /* @__PURE__ */ jsxs32(
               "div",
               {
                 style: {
@@ -11033,7 +11368,7 @@ var SkillNode = ({ data }) => {
                   gap: 10
                 },
                 children: [
-                  /* @__PURE__ */ jsxs30(
+                  /* @__PURE__ */ jsxs32(
                     "div",
                     {
                       style: {
@@ -11042,7 +11377,7 @@ var SkillNode = ({ data }) => {
                         gap: 10
                       },
                       children: [
-                        /* @__PURE__ */ jsxs30(
+                        /* @__PURE__ */ jsxs32(
                           "div",
                           {
                             style: {
@@ -11050,11 +11385,11 @@ var SkillNode = ({ data }) => {
                               flexShrink: 0
                             },
                             children: [
-                              /* @__PURE__ */ jsx51(
+                              /* @__PURE__ */ jsx53(
                                 Avatar6,
                                 {
                                   size: 44,
-                                  icon: /* @__PURE__ */ jsx51(BookOutlined, {}),
+                                  icon: /* @__PURE__ */ jsx53(BookOutlined, {}),
                                   style: {
                                     backgroundColor: badgeColor,
                                     color: "#fff",
@@ -11064,7 +11399,7 @@ var SkillNode = ({ data }) => {
                                   children: initials
                                 }
                               ),
-                              hasSubSkills && /* @__PURE__ */ jsx51(
+                              hasSubSkills && /* @__PURE__ */ jsx53(
                                 "div",
                                 {
                                   style: {
@@ -11080,7 +11415,7 @@ var SkillNode = ({ data }) => {
                                     alignItems: "center",
                                     justifyContent: "center"
                                   },
-                                  children: /* @__PURE__ */ jsx51(
+                                  children: /* @__PURE__ */ jsx53(
                                     BranchesOutlined2,
                                     {
                                       style: {
@@ -11094,7 +11429,7 @@ var SkillNode = ({ data }) => {
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsxs30(
+                        /* @__PURE__ */ jsxs32(
                           "div",
                           {
                             style: {
@@ -11102,8 +11437,8 @@ var SkillNode = ({ data }) => {
                               minWidth: 0
                             },
                             children: [
-                              /* @__PURE__ */ jsx51(
-                                Text18,
+                              /* @__PURE__ */ jsx53(
+                                Text20,
                                 {
                                   strong: true,
                                   style: {
@@ -11118,7 +11453,7 @@ var SkillNode = ({ data }) => {
                                   children: currentSkill.name
                                 }
                               ),
-                              /* @__PURE__ */ jsxs30(
+                              /* @__PURE__ */ jsxs32(
                                 "div",
                                 {
                                   style: {
@@ -11127,7 +11462,7 @@ var SkillNode = ({ data }) => {
                                     gap: 4
                                   },
                                   children: [
-                                    /* @__PURE__ */ jsx51(
+                                    /* @__PURE__ */ jsx53(
                                       FileTextOutlined6,
                                       {
                                         style: {
@@ -11136,8 +11471,8 @@ var SkillNode = ({ data }) => {
                                         }
                                       }
                                     ),
-                                    /* @__PURE__ */ jsx51(
-                                      Text18,
+                                    /* @__PURE__ */ jsx53(
+                                      Text20,
                                       {
                                         style: {
                                           fontSize: 9,
@@ -11156,7 +11491,7 @@ var SkillNode = ({ data }) => {
                       ]
                     }
                   ),
-                  currentSkill.description && /* @__PURE__ */ jsx51(
+                  currentSkill.description && /* @__PURE__ */ jsx53(
                     "div",
                     {
                       style: {
@@ -11166,12 +11501,12 @@ var SkillNode = ({ data }) => {
                         borderRadius: 4,
                         borderLeft: `2px solid ${badgeColor}`
                       },
-                      children: /* @__PURE__ */ jsx51(
+                      children: /* @__PURE__ */ jsx53(
                         Tooltip11,
                         {
                           title: currentSkill.description.length > 150 ? currentSkill.description : void 0,
                           placement: "top",
-                          children: /* @__PURE__ */ jsxs30(
+                          children: /* @__PURE__ */ jsxs32(
                             "div",
                             {
                               style: {
@@ -11197,7 +11532,7 @@ var SkillNode = ({ data }) => {
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsxs30(
+                  /* @__PURE__ */ jsxs32(
                     "div",
                     {
                       style: {
@@ -11208,8 +11543,8 @@ var SkillNode = ({ data }) => {
                         marginTop: "auto"
                       },
                       children: [
-                        /* @__PURE__ */ jsx51(
-                          Tag8,
+                        /* @__PURE__ */ jsx53(
+                          Tag9,
                           {
                             style: {
                               margin: 0,
@@ -11226,8 +11561,8 @@ var SkillNode = ({ data }) => {
                             children: category.toUpperCase()
                           }
                         ),
-                        hasSubSkills && /* @__PURE__ */ jsxs30(
-                          Tag8,
+                        hasSubSkills && /* @__PURE__ */ jsxs32(
+                          Tag9,
                           {
                             style: {
                               margin: 0,
@@ -11249,8 +11584,8 @@ var SkillNode = ({ data }) => {
                             ]
                           }
                         ),
-                        currentSkill.license && /* @__PURE__ */ jsx51(
-                          Tag8,
+                        currentSkill.license && /* @__PURE__ */ jsx53(
+                          Tag9,
                           {
                             style: {
                               margin: 0,
@@ -11263,12 +11598,12 @@ var SkillNode = ({ data }) => {
                               fontWeight: 500,
                               lineHeight: "14px"
                             },
-                            icon: /* @__PURE__ */ jsx51(CopyrightOutlined, {}),
+                            icon: /* @__PURE__ */ jsx53(CopyrightOutlined, {}),
                             children: currentSkill.license
                           }
                         ),
-                        currentSkill.compatibility && /* @__PURE__ */ jsx51(
-                          Tag8,
+                        currentSkill.compatibility && /* @__PURE__ */ jsx53(
+                          Tag9,
                           {
                             style: {
                               margin: 0,
@@ -11281,7 +11616,7 @@ var SkillNode = ({ data }) => {
                               fontWeight: 500,
                               lineHeight: "14px"
                             },
-                            icon: /* @__PURE__ */ jsx51(InfoCircleOutlined5, {}),
+                            icon: /* @__PURE__ */ jsx53(InfoCircleOutlined5, {}),
                             children: currentSkill.compatibility
                           }
                         )
@@ -11293,7 +11628,7 @@ var SkillNode = ({ data }) => {
             )
           }
         ),
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx53(
           Modal3,
           {
             open: isModalOpen,
@@ -11312,7 +11647,7 @@ var SkillNode = ({ data }) => {
             children: detailCardContent
           }
         ),
-        /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsx53(
           Handle2,
           {
             type: "source",
@@ -11328,33 +11663,33 @@ var SkillNode = ({ data }) => {
 var SkillNode_default = SkillNode;
 
 // src/components/Chat/CreateSkillModal.tsx
-import { useState as useState28 } from "react";
+import { useState as useState29 } from "react";
 import {
   Modal as Modal4,
   Form as Form3,
-  Input as Input4,
+  Input as Input5,
   Button as Button23,
   message as message9,
   notification as notification4,
-  Space as Space21,
-  Typography as Typography21
+  Space as Space20,
+  Typography as Typography23
 } from "antd";
 import { PlusOutlined as PlusOutlined5 } from "@ant-design/icons";
-import { theme as theme7 } from "antd";
-import { jsx as jsx52, jsxs as jsxs31 } from "react/jsx-runtime";
-var { TextArea: TextArea4 } = Input4;
-var { Text: Text19 } = Typography21;
+import { theme as theme8 } from "antd";
+import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
+var { TextArea: TextArea4 } = Input5;
+var { Text: Text21 } = Typography23;
 var CreateSkillModal = ({
   open,
   onCancel,
   onSuccess
 }) => {
   const [form] = Form3.useForm();
-  const [loading, setLoading] = useState28(false);
+  const [loading, setLoading] = useState29(false);
   const { config } = useLatticeChatShellContext();
-  const { token } = theme7.useToken();
+  const { token } = theme8.useToken();
   const defaultMetadataRows = [{ key: "category", value: "global" }];
-  const [metadataRows, setMetadataRows] = useState28(defaultMetadataRows);
+  const [metadataRows, setMetadataRows] = useState29(defaultMetadataRows);
   const handleSubmit = async () => {
     try {
       const values = await form.validateFields();
@@ -11428,7 +11763,7 @@ var CreateSkillModal = ({
   const handleAddMetadataRow = () => {
     setMetadataRows([...metadataRows, { key: "", value: "" }]);
   };
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx54(
     Modal4,
     {
       title: "Create New Skill",
@@ -11440,14 +11775,14 @@ var CreateSkillModal = ({
       styles: {
         body: { padding: 16 }
       },
-      children: /* @__PURE__ */ jsx52(
+      children: /* @__PURE__ */ jsx54(
         Form3,
         {
           form,
           layout: "vertical",
           onFinish: handleSubmit,
           autoComplete: "off",
-          children: /* @__PURE__ */ jsxs31(
+          children: /* @__PURE__ */ jsxs33(
             "div",
             {
               style: {
@@ -11456,9 +11791,9 @@ var CreateSkillModal = ({
                 gap: 12
               },
               children: [
-                /* @__PURE__ */ jsxs31("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx52(Text19, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Name" }),
-                  /* @__PURE__ */ jsx52(
+                /* @__PURE__ */ jsxs33("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx54(Text21, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Name" }),
+                  /* @__PURE__ */ jsx54(
                     Form3.Item,
                     {
                       name: "name",
@@ -11471,13 +11806,13 @@ var CreateSkillModal = ({
                         { min: 1, max: 64, message: "Name must be 1-64 characters" }
                       ],
                       style: { marginBottom: 0 },
-                      children: /* @__PURE__ */ jsx52(Input4, { placeholder: "e.g., data-analysis" })
+                      children: /* @__PURE__ */ jsx54(Input5, { placeholder: "e.g., data-analysis" })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs31("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx52(Text19, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
-                  /* @__PURE__ */ jsx52(
+                /* @__PURE__ */ jsxs33("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx54(Text21, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Description" }),
+                  /* @__PURE__ */ jsx54(
                     Form3.Item,
                     {
                       name: "description",
@@ -11485,7 +11820,7 @@ var CreateSkillModal = ({
                         { required: true, message: "Please enter skill description" }
                       ],
                       style: { marginBottom: 0 },
-                      children: /* @__PURE__ */ jsx52(
+                      children: /* @__PURE__ */ jsx54(
                         TextArea4,
                         {
                           placeholder: "Description",
@@ -11495,16 +11830,16 @@ var CreateSkillModal = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ jsxs31("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx52(Text19, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
-                  /* @__PURE__ */ jsx52(Form3.Item, { name: "license", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx52(Input4, { placeholder: "License" }) })
+                /* @__PURE__ */ jsxs33("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx54(Text21, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "License" }),
+                  /* @__PURE__ */ jsx54(Form3.Item, { name: "license", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx54(Input5, { placeholder: "License" }) })
                 ] }),
-                /* @__PURE__ */ jsxs31("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx52(Text19, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
-                  /* @__PURE__ */ jsx52(Form3.Item, { name: "compatibility", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx52(Input4, { placeholder: "Compatibility" }) })
+                /* @__PURE__ */ jsxs33("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx54(Text21, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Compatibility" }),
+                  /* @__PURE__ */ jsx54(Form3.Item, { name: "compatibility", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx54(Input5, { placeholder: "Compatibility" }) })
                 ] }),
-                /* @__PURE__ */ jsxs31("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ jsxs31(
+                /* @__PURE__ */ jsxs33("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsxs33(
                     "div",
                     {
                       style: {
@@ -11514,8 +11849,8 @@ var CreateSkillModal = ({
                         gap: 8
                       },
                       children: [
-                        /* @__PURE__ */ jsx52(
-                          Text19,
+                        /* @__PURE__ */ jsx54(
+                          Text21,
                           {
                             style: {
                               fontSize: 12,
@@ -11525,11 +11860,11 @@ var CreateSkillModal = ({
                             children: "Metadata"
                           }
                         ),
-                        /* @__PURE__ */ jsx52(
+                        /* @__PURE__ */ jsx54(
                           Button23,
                           {
                             size: "small",
-                            icon: /* @__PURE__ */ jsx52(PlusOutlined5, {}),
+                            icon: /* @__PURE__ */ jsx54(PlusOutlined5, {}),
                             onClick: handleAddMetadataRow,
                             children: "Add"
                           }
@@ -11537,9 +11872,9 @@ var CreateSkillModal = ({
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs31(Space21, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
-                    metadataRows.length === 0 && /* @__PURE__ */ jsx52(
-                      Text19,
+                  /* @__PURE__ */ jsxs33(Space20, { direction: "vertical", size: 8, style: { width: "100%" }, children: [
+                    metadataRows.length === 0 && /* @__PURE__ */ jsx54(
+                      Text21,
                       {
                         style: {
                           fontSize: 11,
@@ -11548,7 +11883,7 @@ var CreateSkillModal = ({
                         children: "No metadata yet. Use Add to create one."
                       }
                     ),
-                    metadataRows.map((row, index) => /* @__PURE__ */ jsxs31(
+                    metadataRows.map((row, index) => /* @__PURE__ */ jsxs33(
                       "div",
                       {
                         style: {
@@ -11558,8 +11893,8 @@ var CreateSkillModal = ({
                           width: "100%"
                         },
                         children: [
-                          /* @__PURE__ */ jsxs31(
-                            Text19,
+                          /* @__PURE__ */ jsxs33(
+                            Text21,
                             {
                               style: { fontSize: 11, color: token.colorTextSecondary },
                               children: [
@@ -11568,9 +11903,9 @@ var CreateSkillModal = ({
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsxs31(Space21, { style: { width: "100%" }, size: 8, wrap: true, children: [
-                            /* @__PURE__ */ jsx52(
-                              Input4,
+                          /* @__PURE__ */ jsxs33(Space20, { style: { width: "100%" }, size: 8, wrap: true, children: [
+                            /* @__PURE__ */ jsx54(
+                              Input5,
                               {
                                 value: row.key,
                                 placeholder: "Key",
@@ -11578,8 +11913,8 @@ var CreateSkillModal = ({
                                 onChange: (e) => handleMetadataChange(index, "key", e.target.value)
                               }
                             ),
-                            /* @__PURE__ */ jsx52(
-                              Input4,
+                            /* @__PURE__ */ jsx54(
+                              Input5,
                               {
                                 value: row.value,
                                 placeholder: "Value",
@@ -11594,9 +11929,9 @@ var CreateSkillModal = ({
                     ))
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs31("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
-                  /* @__PURE__ */ jsx52(Text19, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
-                  /* @__PURE__ */ jsx52(Form3.Item, { name: "content", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx52(
+                /* @__PURE__ */ jsxs33("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+                  /* @__PURE__ */ jsx54(Text21, { style: { fontSize: 12, color: token.colorTextSecondary }, children: "Content" }),
+                  /* @__PURE__ */ jsx54(Form3.Item, { name: "content", style: { marginBottom: 0 }, children: /* @__PURE__ */ jsx54(
                     TextArea4,
                     {
                       placeholder: "Content",
@@ -11604,7 +11939,7 @@ var CreateSkillModal = ({
                     }
                   ) })
                 ] }),
-                /* @__PURE__ */ jsxs31(
+                /* @__PURE__ */ jsxs33(
                   "div",
                   {
                     style: {
@@ -11615,8 +11950,8 @@ var CreateSkillModal = ({
                       marginTop: 8
                     },
                     children: [
-                      /* @__PURE__ */ jsx52(Button23, { onClick: handleCancel, children: "Cancel" }),
-                      /* @__PURE__ */ jsx52(Button23, { type: "primary", htmlType: "submit", loading, children: "Create Skill" })
+                      /* @__PURE__ */ jsx54(Button23, { onClick: handleCancel, children: "Cancel" }),
+                      /* @__PURE__ */ jsx54(Button23, { type: "primary", htmlType: "submit", loading, children: "Create Skill" })
                     ]
                   }
                 )
@@ -11631,14 +11966,14 @@ var CreateSkillModal = ({
 var CreateSkillModal_default = CreateSkillModal;
 
 // src/components/Chat/SkillFlow.tsx
-import { jsx as jsx53, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
 var SkillFlowInner = ({ onNodeClick }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState2([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState2([]);
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState29(false);
-  const [skills, setSkills] = useState29([]);
-  const [skillsLoading, setSkillsLoading] = useState29(false);
-  const { token } = theme8.useToken();
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState30(false);
+  const [skills, setSkills] = useState30([]);
+  const [skillsLoading, setSkillsLoading] = useState30(false);
+  const { token } = theme9.useToken();
   const { config } = useLatticeChatShellContext();
   const nodeTypes = useMemo14(
     () => ({
@@ -11669,10 +12004,10 @@ var SkillFlowInner = ({ onNodeClick }) => {
       setSkillsLoading(false);
     }
   };
-  useEffect20(() => {
+  useEffect21(() => {
     fetchSkills();
   }, []);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!skills || skills.length === 0) {
       setNodes([]);
       setEdges([]);
@@ -11804,7 +12139,7 @@ var SkillFlowInner = ({ onNodeClick }) => {
     await fetchSkills();
   };
   if (skillsLoading) {
-    return /* @__PURE__ */ jsx53(
+    return /* @__PURE__ */ jsx55(
       "div",
       {
         style: {
@@ -11819,8 +12154,8 @@ var SkillFlowInner = ({ onNodeClick }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsxs32("div", { style: { width: "100%", height: "100%", background: "#fafafa", position: "relative" }, children: [
-    /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs34("div", { style: { width: "100%", height: "100%", background: "#fafafa", position: "relative" }, children: [
+    /* @__PURE__ */ jsxs34(
       ReactFlow2,
       {
         nodes,
@@ -11830,12 +12165,12 @@ var SkillFlowInner = ({ onNodeClick }) => {
         nodeTypes,
         fitView: true,
         children: [
-          /* @__PURE__ */ jsx53(Background2, { color: "#eee", gap: 20 }),
-          /* @__PURE__ */ jsx53(Controls2, {})
+          /* @__PURE__ */ jsx55(Background2, { color: "#eee", gap: 20 }),
+          /* @__PURE__ */ jsx55(Controls2, {})
         ]
       }
     ),
-    /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx55(
       "div",
       {
         style: {
@@ -11844,12 +12179,12 @@ var SkillFlowInner = ({ onNodeClick }) => {
           right: 20,
           zIndex: 10
         },
-        children: /* @__PURE__ */ jsx53(
+        children: /* @__PURE__ */ jsx55(
           Button24,
           {
             type: "primary",
             size: "large",
-            icon: /* @__PURE__ */ jsx53(PlusOutlined6, {}),
+            icon: /* @__PURE__ */ jsx55(PlusOutlined6, {}),
             onClick: () => setIsCreateModalOpen(true),
             style: {
               height: 48,
@@ -11865,7 +12200,7 @@ var SkillFlowInner = ({ onNodeClick }) => {
         )
       }
     ),
-    /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx55(
       CreateSkillModal_default,
       {
         open: isCreateModalOpen,
@@ -11875,27 +12210,27 @@ var SkillFlowInner = ({ onNodeClick }) => {
     )
   ] });
 };
-var SkillFlow = (props) => /* @__PURE__ */ jsx53(ReactFlowProvider2, { children: /* @__PURE__ */ jsx53(SkillFlowInner, { ...props }) });
+var SkillFlow = (props) => /* @__PURE__ */ jsx55(ReactFlowProvider2, { children: /* @__PURE__ */ jsx55(SkillFlowInner, { ...props }) });
 var SkillFlow_default = SkillFlow;
 
 // src/components/Chat/ToolsList.tsx
-import { List as List5, Avatar as Avatar7, theme as theme9, Alert as Alert4, Button as Button25, Tag as Tag9 } from "antd";
+import { List as List6, Avatar as Avatar7, theme as theme10, Alert as Alert4, Button as Button25, Tag as Tag10 } from "antd";
 import { ReloadOutlined as ReloadOutlined3 } from "@ant-design/icons";
-import { useEffect as useEffect21, useState as useState30, useCallback as useCallback17 } from "react";
-import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useEffect as useEffect22, useState as useState31, useCallback as useCallback18 } from "react";
+import { jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
 var ToolsList = ({
   onToolSelect,
   autoLoad = true
 }) => {
-  const { token } = theme9.useToken();
+  const { token } = theme10.useToken();
   const { config } = useLatticeChatShellContext();
-  const [state, setState] = useState30({
+  const [state, setState] = useState31({
     tools: [],
     isLoading: false,
     error: null
   });
-  const [selectedToolId, setSelectedToolId] = useState30(null);
-  const fetchTools = useCallback17(async () => {
+  const [selectedToolId, setSelectedToolId] = useState31(null);
+  const fetchTools = useCallback18(async () => {
     setState((prev) => ({ ...prev, isLoading: true, error: null }));
     try {
       const headers = {};
@@ -11928,17 +12263,17 @@ var ToolsList = ({
       }));
     }
   }, [config]);
-  const handleToolSelect = useCallback17(
+  const handleToolSelect = useCallback18(
     (tool) => {
       setSelectedToolId(tool.id);
       onToolSelect?.(tool);
     },
     [onToolSelect]
   );
-  const handleRefresh = useCallback17(() => {
+  const handleRefresh = useCallback18(() => {
     fetchTools();
   }, [fetchTools]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (autoLoad) {
       fetchTools();
     }
@@ -11951,18 +12286,18 @@ var ToolsList = ({
     padding: token.paddingSM
   };
   if (state.error) {
-    return /* @__PURE__ */ jsx54("div", { style, children: /* @__PURE__ */ jsx54(
+    return /* @__PURE__ */ jsx56("div", { style, children: /* @__PURE__ */ jsx56(
       Alert4,
       {
         message: "Error Loading Tools",
         description: state.error.message,
         type: "error",
         showIcon: true,
-        action: /* @__PURE__ */ jsx54(
+        action: /* @__PURE__ */ jsx56(
           Button25,
           {
             size: "small",
-            icon: /* @__PURE__ */ jsx54(ReloadOutlined3, {}),
+            icon: /* @__PURE__ */ jsx56(ReloadOutlined3, {}),
             onClick: handleRefresh,
             children: "Retry"
           }
@@ -11970,8 +12305,8 @@ var ToolsList = ({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs33("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
-    /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsxs35("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsx56(
       "div",
       {
         style: {
@@ -11980,12 +12315,12 @@ var ToolsList = ({
           right: token.paddingSM,
           zIndex: 1
         },
-        children: /* @__PURE__ */ jsx54(
+        children: /* @__PURE__ */ jsx56(
           Button25,
           {
             type: "text",
             size: "small",
-            icon: /* @__PURE__ */ jsx54(ReloadOutlined3, {}),
+            icon: /* @__PURE__ */ jsx56(ReloadOutlined3, {}),
             onClick: handleRefresh,
             title: "Refresh tools",
             style: {
@@ -11995,7 +12330,7 @@ var ToolsList = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx54(
+    /* @__PURE__ */ jsx56(
       "div",
       {
         style: {
@@ -12005,13 +12340,13 @@ var ToolsList = ({
           overflowX: "hidden",
           paddingTop: token.paddingLG
         },
-        children: /* @__PURE__ */ jsx54(
-          List5,
+        children: /* @__PURE__ */ jsx56(
+          List6,
           {
             dataSource: state.tools,
             loading: state.isLoading,
             locale: {
-              emptyText: /* @__PURE__ */ jsxs33(
+              emptyText: /* @__PURE__ */ jsxs35(
                 "div",
                 {
                   style: {
@@ -12022,11 +12357,11 @@ var ToolsList = ({
                     padding: token.paddingLG
                   },
                   children: [
-                    /* @__PURE__ */ jsx54("div", { style: { color: token.colorTextSecondary }, children: "No tools available" }),
-                    /* @__PURE__ */ jsx54(
+                    /* @__PURE__ */ jsx56("div", { style: { color: token.colorTextSecondary }, children: "No tools available" }),
+                    /* @__PURE__ */ jsx56(
                       Button25,
                       {
-                        icon: /* @__PURE__ */ jsx54(ReloadOutlined3, {}),
+                        icon: /* @__PURE__ */ jsx56(ReloadOutlined3, {}),
                         onClick: handleRefresh,
                         type: "dashed",
                         size: "small",
@@ -12041,8 +12376,8 @@ var ToolsList = ({
               ...style,
               paddingTop: 0
             },
-            renderItem: (tool) => /* @__PURE__ */ jsx54(
-              List5.Item,
+            renderItem: (tool) => /* @__PURE__ */ jsx56(
+              List6.Item,
               {
                 onClick: () => handleToolSelect(tool),
                 style: {
@@ -12062,10 +12397,10 @@ var ToolsList = ({
                     e.currentTarget.style.backgroundColor = "transparent";
                   }
                 },
-                children: /* @__PURE__ */ jsx54(
-                  List5.Item.Meta,
+                children: /* @__PURE__ */ jsx56(
+                  List6.Item.Meta,
                   {
-                    avatar: /* @__PURE__ */ jsx54(
+                    avatar: /* @__PURE__ */ jsx56(
                       Avatar7,
                       {
                         size: "small",
@@ -12076,7 +12411,7 @@ var ToolsList = ({
                         children: tool.name.charAt(0).toUpperCase()
                       }
                     ),
-                    title: /* @__PURE__ */ jsxs33(
+                    title: /* @__PURE__ */ jsxs35(
                       "div",
                       {
                         style: {
@@ -12085,9 +12420,9 @@ var ToolsList = ({
                           gap: token.marginXS
                         },
                         children: [
-                          /* @__PURE__ */ jsx54("span", { children: tool.name }),
-                          tool.needUserApprove && /* @__PURE__ */ jsx54(
-                            Tag9,
+                          /* @__PURE__ */ jsx56("span", { children: tool.name }),
+                          tool.needUserApprove && /* @__PURE__ */ jsx56(
+                            Tag10,
                             {
                               color: "warning",
                               style: {
@@ -12102,7 +12437,7 @@ var ToolsList = ({
                         ]
                       }
                     ),
-                    description: /* @__PURE__ */ jsx54(
+                    description: /* @__PURE__ */ jsx56(
                       "div",
                       {
                         style: {
@@ -12128,7 +12463,7 @@ var ToolsList = ({
 };
 
 // src/components/Chat/ChatSidebar.tsx
-import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs36 } from "react/jsx-runtime";
 var useStyles4 = createStyles13(({ token, css }) => ({
   sidebar: css`
     display: flex;
@@ -12184,9 +12519,9 @@ var ChatSidebar = ({
   const { styles } = useStyles4();
   const { setSettingsModalOpen } = useLatticeChatShellContext();
   const { selectAssistant } = useAssistantContext();
-  const [isFlowModalOpen, setIsFlowModalOpen] = useState31(false);
-  const [isSkillFlowModalOpen, setIsSkillFlowModalOpen] = useState31(false);
-  const [isToolsModalOpen, setIsToolsModalOpen] = useState31(false);
+  const [isFlowModalOpen, setIsFlowModalOpen] = useState32(false);
+  const [isSkillFlowModalOpen, setIsSkillFlowModalOpen] = useState32(false);
+  const [isToolsModalOpen, setIsToolsModalOpen] = useState32(false);
   const handleSettingsClick = () => {
     setSettingsModalOpen(true);
     onSettingsClick?.();
@@ -12200,50 +12535,50 @@ var ChatSidebar = ({
   const handleToolsClick = () => {
     setIsToolsModalOpen(true);
   };
-  return /* @__PURE__ */ jsxs34(Fragment9, { children: [
-    /* @__PURE__ */ jsx55("div", { className: styles.sidebar, children: /* @__PURE__ */ jsxs34("div", { className: styles.buttonContainer, children: [
-      /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsxs36(Fragment10, { children: [
+    /* @__PURE__ */ jsx57("div", { className: styles.sidebar, children: /* @__PURE__ */ jsxs36("div", { className: styles.buttonContainer, children: [
+      /* @__PURE__ */ jsx57(
         "button",
         {
           className: styles.actionButton,
           onClick: handleAssistantFlowClick,
           title: "Assistant Flow Canvas",
           "aria-label": "Assistant Flow Canvas",
-          children: /* @__PURE__ */ jsx55(Bot, {})
+          children: /* @__PURE__ */ jsx57(Bot, {})
         }
       ),
-      /* @__PURE__ */ jsx55(
+      /* @__PURE__ */ jsx57(
         "button",
         {
           className: styles.actionButton,
           onClick: handleSkillFlowClick,
           title: "Skill Flow Canvas",
           "aria-label": "Skill Flow Canvas",
-          children: /* @__PURE__ */ jsx55(BrainCircuit, {})
+          children: /* @__PURE__ */ jsx57(BrainCircuit, {})
         }
       ),
-      /* @__PURE__ */ jsx55(
+      /* @__PURE__ */ jsx57(
         "button",
         {
           className: styles.actionButton,
           onClick: handleToolsClick,
           title: "Tools List",
           "aria-label": "Tools List",
-          children: /* @__PURE__ */ jsx55(Wrench, {})
+          children: /* @__PURE__ */ jsx57(Wrench, {})
         }
       ),
-      /* @__PURE__ */ jsx55(
+      /* @__PURE__ */ jsx57(
         "button",
         {
           className: styles.actionButton,
           onClick: handleSettingsClick,
           title: "Settings",
           "aria-label": "Settings",
-          children: /* @__PURE__ */ jsx55(Settings, {})
+          children: /* @__PURE__ */ jsx57(Settings, {})
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx57(
       Modal5,
       {
         destroyOnHidden: true,
@@ -12257,7 +12592,7 @@ var ChatSidebar = ({
           height: "calc(100vh - 120px)",
           padding: 0
         },
-        children: /* @__PURE__ */ jsx55("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx55(
+        children: /* @__PURE__ */ jsx57("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx57(
           AssistantFlow_default,
           {
             onChat: (assistant) => {
@@ -12268,7 +12603,7 @@ var ChatSidebar = ({
         ) })
       }
     ),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx57(
       Modal5,
       {
         destroyOnHidden: true,
@@ -12282,7 +12617,7 @@ var ChatSidebar = ({
           height: "calc(100vh - 120px)",
           padding: 0
         },
-        children: /* @__PURE__ */ jsx55("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx55(
+        children: /* @__PURE__ */ jsx57("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx57(
           SkillFlow_default,
           {
             onNodeClick: (skill) => {
@@ -12292,7 +12627,7 @@ var ChatSidebar = ({
         ) })
       }
     ),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx57(
       Modal5,
       {
         destroyOnHidden: true,
@@ -12306,7 +12641,7 @@ var ChatSidebar = ({
           height: "calc(100vh - 120px)",
           padding: 0
         },
-        children: /* @__PURE__ */ jsx55("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx55(
+        children: /* @__PURE__ */ jsx57("div", { style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx57(
           ToolsList,
           {
             onToolSelect: (tool) => {
@@ -12320,7 +12655,7 @@ var ChatSidebar = ({
 };
 
 // src/components/Chat/LatticeChatView.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var LatticeChatView = (props) => {
   const shellContext = useContext8(LatticeChatShellContext);
   const { showSideMenu } = shellContext.config;
@@ -12329,7 +12664,7 @@ var LatticeChatView = (props) => {
   const {
     config: { baseURL }
   } = useLatticeChatShellContext();
-  return assistantId && thread ? /* @__PURE__ */ jsx56(
+  return assistantId && thread ? /* @__PURE__ */ jsx58(
     AxiomLatticeProvider,
     {
       config: {
@@ -12338,14 +12673,14 @@ var LatticeChatView = (props) => {
         assistantId,
         transport: "sse"
       },
-      children: /* @__PURE__ */ jsx56(
+      children: /* @__PURE__ */ jsx58(
         LatticeChat,
         {
           thread_id: thread?.id,
           assistant_id: assistantId,
           name: currentAssistant?.name,
           description: currentAssistant?.description,
-          menu: showSideMenu ? /* @__PURE__ */ jsx56(ChatSidebar, {}) : void 0
+          menu: showSideMenu ? /* @__PURE__ */ jsx58(ChatSidebar, {}) : void 0
         }
       )
     }
@@ -12353,18 +12688,18 @@ var LatticeChatView = (props) => {
 };
 
 // src/components/Chat/SettingsModal.tsx
-import { useState as useState32, useEffect as useEffect22, useRef as useRef15 } from "react";
+import { useState as useState33, useEffect as useEffect23, useRef as useRef15 } from "react";
 import {
   Modal as Modal6,
-  Input as Input5,
+  Input as Input6,
   Button as Button26,
   message as message10,
   notification as notification5,
-  Typography as Typography22,
+  Typography as Typography24,
   Alert as Alert5,
   Select as Select3,
-  Switch as Switch2,
-  Space as Space22,
+  Switch as Switch3,
+  Space as Space21,
   Tabs
 } from "antd";
 import {
@@ -12373,16 +12708,16 @@ import {
   ReloadOutlined as ReloadOutlined4,
   CheckCircleOutlined as CheckCircleOutlined7,
   ApiOutlined,
-  LinkOutlined,
+  LinkOutlined as LinkOutlined2,
   CheckCircleFilled,
   CloseCircleFilled,
   PlusOutlined as PlusOutlined7,
   CloudServerOutlined
 } from "@ant-design/icons";
 import { createStyles as createStyles14 } from "antd-style";
-import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs35 } from "react/jsx-runtime";
-var { Text: Text20, Title: Title4 } = Typography22;
-var { TextArea: TextArea5 } = Input5;
+import { Fragment as Fragment11, jsx as jsx59, jsxs as jsxs37 } from "react/jsx-runtime";
+var { Text: Text22, Title: Title4 } = Typography24;
+var { TextArea: TextArea5 } = Input6;
 var useStyles5 = createStyles14(({ token, css }) => ({
   //   settingsModal: css`
   //     .ant-modal {
@@ -12729,12 +13064,12 @@ var SETTINGS_MENU_ITEMS = [
   {
     key: "environment",
     label: "Environment Variables",
-    icon: /* @__PURE__ */ jsx57(EnvironmentOutlined, {})
+    icon: /* @__PURE__ */ jsx59(EnvironmentOutlined, {})
   },
   {
     key: "models",
     label: "Model Configuration",
-    icon: /* @__PURE__ */ jsx57(ApiOutlined, {})
+    icon: /* @__PURE__ */ jsx59(ApiOutlined, {})
   }
 ];
 var SettingsModal = ({
@@ -12743,7 +13078,7 @@ var SettingsModal = ({
 }) => {
   const { styles } = useStyles5();
   const { config: shellConfig, updateConfigValue } = useLatticeChatShellContext();
-  const [connections, setConnections] = useState32(() => {
+  const [connections, setConnections] = useState33(() => {
     if (typeof window !== "undefined") {
       try {
         const stored = localStorage.getItem("lattice_server_connections");
@@ -12766,21 +13101,21 @@ var SettingsModal = ({
     }
     return [];
   });
-  const [serverConfigs, setServerConfigs] = useState32({});
+  const [serverConfigs, setServerConfigs] = useState33({});
   const connectionsRef = useRef15(connections);
-  useEffect22(() => {
+  useEffect23(() => {
     connectionsRef.current = connections;
   }, [connections]);
-  const [activeTabKey, setActiveTabKey] = useState32(
+  const [activeTabKey, setActiveTabKey] = useState33(
     connections.length > 0 ? connections[0].id : ""
   );
-  const [activeMenu, setActiveMenu] = useState32("environment");
-  const [loading, setLoading] = useState32(false);
-  const [showAddServerModal, setShowAddServerModal] = useState32(false);
-  const [newServerUrl, setNewServerUrl] = useState32("");
-  const [newServerName, setNewServerName] = useState32("");
-  const [newServerApiKey, setNewServerApiKey] = useState32("");
-  const [addingServer, setAddingServer] = useState32(false);
+  const [activeMenu, setActiveMenu] = useState33("environment");
+  const [loading, setLoading] = useState33(false);
+  const [showAddServerModal, setShowAddServerModal] = useState33(false);
+  const [newServerUrl, setNewServerUrl] = useState33("");
+  const [newServerName, setNewServerName] = useState33("");
+  const [newServerApiKey, setNewServerApiKey] = useState33("");
+  const [addingServer, setAddingServer] = useState33(false);
   const saveConnections = (newConnections) => {
     setConnections(newConnections);
     if (typeof window !== "undefined") {
@@ -12970,7 +13305,7 @@ var SettingsModal = ({
       console.error("Failed to load models configuration:", error);
     }
   };
-  useEffect22(() => {
+  useEffect23(() => {
     if (open && activeTabKey) {
       initializeServerConfig(activeTabKey);
       const connection = connections.find((c) => c.id === activeTabKey);
@@ -12979,7 +13314,7 @@ var SettingsModal = ({
       }
     }
   }, [open, activeTabKey]);
-  useEffect22(() => {
+  useEffect23(() => {
     if (open && activeTabKey) {
       const connection = connections.find((c) => c.id === activeTabKey);
       if (connection?.connected) {
@@ -13190,25 +13525,25 @@ var SettingsModal = ({
         }
       }));
     };
-    return /* @__PURE__ */ jsxs35("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ jsx57(
+    return /* @__PURE__ */ jsxs37("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx59(
         Alert5,
         {
           message: "Configuration Effect",
-          description: /* @__PURE__ */ jsxs35("div", { children: [
-            /* @__PURE__ */ jsxs35("div", { style: { marginBottom: 8 }, children: [
-              /* @__PURE__ */ jsx57(
+          description: /* @__PURE__ */ jsxs37("div", { children: [
+            /* @__PURE__ */ jsxs37("div", { style: { marginBottom: 8 }, children: [
+              /* @__PURE__ */ jsx59(
                 CheckCircleOutlined7,
                 {
                   style: { color: "#52c41a", marginRight: 8 }
                 }
               ),
-              /* @__PURE__ */ jsx57("strong", { children: "Immediately effective:" }),
+              /* @__PURE__ */ jsx59("strong", { children: "Immediately effective:" }),
               " QUEUE_SERVICE_TYPE, REDIS_URL, REDIS_PASSWORD, QUEUE_NAME"
             ] }),
-            /* @__PURE__ */ jsxs35("div", { children: [
-              /* @__PURE__ */ jsx57(ReloadOutlined4, { style: { color: "#faad14", marginRight: 8 } }),
-              /* @__PURE__ */ jsx57("strong", { children: "Requires restart:" }),
+            /* @__PURE__ */ jsxs37("div", { children: [
+              /* @__PURE__ */ jsx59(ReloadOutlined4, { style: { color: "#faad14", marginRight: 8 } }),
+              /* @__PURE__ */ jsx59("strong", { children: "Requires restart:" }),
               " PORT (server must be restarted to change port)"
             ] })
           ] }),
@@ -13217,8 +13552,8 @@ var SettingsModal = ({
           className: styles.alertCard
         }
       ),
-      /* @__PURE__ */ jsx57("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx57(Text20, { 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__ */ jsx57(
+      /* @__PURE__ */ jsx59("div", { style: { marginBottom: 24 }, children: /* @__PURE__ */ jsx59(Text22, { 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__ */ jsx59(
         TextArea5,
         {
           value: config.envText,
@@ -13295,10 +13630,10 @@ QUEUE_NAME=tasks`,
         }));
       }
     };
-    return /* @__PURE__ */ jsxs35("div", { className: styles.formContainer, children: [
-      /* @__PURE__ */ jsx57("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx57(Text20, { 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__ */ jsxs35("div", { className: styles.card, children: [
-        /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs37("div", { className: styles.formContainer, children: [
+      /* @__PURE__ */ jsx59("div", { style: { marginBottom: 32 }, children: /* @__PURE__ */ jsx59(Text22, { 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__ */ jsxs37("div", { className: styles.card, children: [
+        /* @__PURE__ */ jsxs37(
           "div",
           {
             style: {
@@ -13310,13 +13645,13 @@ QUEUE_NAME=tasks`,
               borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
             },
             children: [
-              /* @__PURE__ */ jsxs35("div", { children: [
-                /* @__PURE__ */ jsxs35(Text20, { strong: true, style: { fontSize: 16 }, children: [
+              /* @__PURE__ */ jsxs37("div", { children: [
+                /* @__PURE__ */ jsxs37(Text22, { strong: true, style: { fontSize: 16 }, children: [
                   "Model ",
                   index + 1
                 ] }),
-                model.key && /* @__PURE__ */ jsxs35(
-                  Text20,
+                model.key && /* @__PURE__ */ jsxs37(
+                  Text22,
                   {
                     type: "secondary",
                     style: { marginLeft: 8, fontSize: 12 },
@@ -13328,7 +13663,7 @@ QUEUE_NAME=tasks`,
                   }
                 )
               ] }),
-              config.models.length > 1 && /* @__PURE__ */ jsx57(
+              config.models.length > 1 && /* @__PURE__ */ jsx59(
                 Button26,
                 {
                   type: "text",
@@ -13345,11 +13680,11 @@ QUEUE_NAME=tasks`,
             ]
           }
         ),
-        /* @__PURE__ */ jsxs35(Space22, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ jsxs35("div", { children: [
-            /* @__PURE__ */ jsx57(Text20, { className: styles.formLabel, children: "Key *" }),
-            /* @__PURE__ */ jsx57(
-              Input5,
+        /* @__PURE__ */ jsxs37(Space21, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs37("div", { children: [
+            /* @__PURE__ */ jsx59(Text22, { className: styles.formLabel, children: "Key *" }),
+            /* @__PURE__ */ jsx59(
+              Input6,
               {
                 placeholder: "e.g., default, gpt-4, claude",
                 value: model.key,
@@ -13357,11 +13692,11 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx57(Text20, { className: styles.formDescription, children: "Unique identifier for this model" })
+            /* @__PURE__ */ jsx59(Text22, { className: styles.formDescription, children: "Unique identifier for this model" })
           ] }),
-          /* @__PURE__ */ jsxs35("div", { children: [
-            /* @__PURE__ */ jsx57(Text20, { className: styles.formLabel, children: "Provider *" }),
-            /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsxs37("div", { children: [
+            /* @__PURE__ */ jsx59(Text22, { className: styles.formLabel, children: "Provider *" }),
+            /* @__PURE__ */ jsx59(
               Select3,
               {
                 style: { width: "100%", height: 40 },
@@ -13377,10 +13712,10 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs35("div", { children: [
-            /* @__PURE__ */ jsx57(Text20, { className: styles.formLabel, children: "Model Name *" }),
-            /* @__PURE__ */ jsx57(
-              Input5,
+          /* @__PURE__ */ jsxs37("div", { children: [
+            /* @__PURE__ */ jsx59(Text22, { className: styles.formLabel, children: "Model Name *" }),
+            /* @__PURE__ */ jsx59(
+              Input6,
               {
                 placeholder: "e.g., gpt-4, claude-3-opus, kimi-k2-250905",
                 value: model.model,
@@ -13389,10 +13724,10 @@ QUEUE_NAME=tasks`,
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs35("div", { children: [
-            /* @__PURE__ */ jsx57(Text20, { className: styles.formLabel, children: "API Key" }),
-            /* @__PURE__ */ jsx57(
-              Input5.Password,
+          /* @__PURE__ */ jsxs37("div", { children: [
+            /* @__PURE__ */ jsx59(Text22, { className: styles.formLabel, children: "API Key" }),
+            /* @__PURE__ */ jsx59(
+              Input6.Password,
               {
                 placeholder: "Enter your API key",
                 value: model.apiKey,
@@ -13400,12 +13735,12 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx57(Text20, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
+            /* @__PURE__ */ jsx59(Text22, { className: styles.formDescription, children: "API key for the model provider. Leave empty to use environment variable." })
           ] }),
-          /* @__PURE__ */ jsxs35("div", { children: [
-            /* @__PURE__ */ jsx57(Text20, { className: styles.formLabel, children: "Base URL" }),
-            /* @__PURE__ */ jsx57(
-              Input5,
+          /* @__PURE__ */ jsxs37("div", { children: [
+            /* @__PURE__ */ jsx59(Text22, { className: styles.formLabel, children: "Base URL" }),
+            /* @__PURE__ */ jsx59(
+              Input6,
               {
                 placeholder: "e.g., https://api.openai.com/v1",
                 value: model.baseURL,
@@ -13413,23 +13748,23 @@ QUEUE_NAME=tasks`,
                 style: { height: 40 }
               }
             ),
-            /* @__PURE__ */ jsx57(Text20, { className: styles.formDescription, children: "Optional custom base URL for the API" })
+            /* @__PURE__ */ jsx59(Text22, { className: styles.formDescription, children: "Optional custom base URL for the API" })
           ] }),
-          /* @__PURE__ */ jsx57("div", { children: /* @__PURE__ */ jsxs35(Space22, { children: [
-            /* @__PURE__ */ jsx57(
-              Switch2,
+          /* @__PURE__ */ jsx59("div", { children: /* @__PURE__ */ jsxs37(Space21, { children: [
+            /* @__PURE__ */ jsx59(
+              Switch3,
               {
                 checked: model.streaming,
                 onChange: (checked) => handleModelChange(index, "streaming", checked)
               }
             ),
-            /* @__PURE__ */ jsx57(Text20, { children: "Enable Streaming" })
+            /* @__PURE__ */ jsx59(Text22, { children: "Enable Streaming" })
           ] }) }),
-          /* @__PURE__ */ jsxs35("div", { style: { display: "flex", gap: 20 }, children: [
-            /* @__PURE__ */ jsxs35("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx57(Text20, { className: styles.formLabel, children: "Max Tokens" }),
-              /* @__PURE__ */ jsx57(
-                Input5,
+          /* @__PURE__ */ jsxs37("div", { style: { display: "flex", gap: 20 }, children: [
+            /* @__PURE__ */ jsxs37("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx59(Text22, { className: styles.formLabel, children: "Max Tokens" }),
+              /* @__PURE__ */ jsx59(
+                Input6,
                 {
                   type: "number",
                   placeholder: "e.g., 4096",
@@ -13443,10 +13778,10 @@ QUEUE_NAME=tasks`,
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs35("div", { style: { flex: 1 }, children: [
-              /* @__PURE__ */ jsx57(Text20, { className: styles.formLabel, children: "Temperature" }),
-              /* @__PURE__ */ jsx57(
-                Input5,
+            /* @__PURE__ */ jsxs37("div", { style: { flex: 1 }, children: [
+              /* @__PURE__ */ jsx59(Text22, { className: styles.formLabel, children: "Temperature" }),
+              /* @__PURE__ */ jsx59(
+                Input6,
                 {
                   type: "number",
                   step: "0.1",
@@ -13464,7 +13799,7 @@ QUEUE_NAME=tasks`,
           ] })
         ] })
       ] }, index)),
-      /* @__PURE__ */ jsx57(
+      /* @__PURE__ */ jsx59(
         Button26,
         {
           type: "dashed",
@@ -13492,8 +13827,8 @@ QUEUE_NAME=tasks`,
   );
   const currentConnection = connections.find((c) => c.id === activeTabKey);
   const renderTabLabel = (connection) => {
-    return /* @__PURE__ */ jsxs35("div", { style: { display: "flex", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx57(
+    return /* @__PURE__ */ jsxs37("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx59(
         CloudServerOutlined,
         {
           style: {
@@ -13502,14 +13837,14 @@ QUEUE_NAME=tasks`,
           }
         }
       ),
-      /* @__PURE__ */ jsx57("span", { children: connection.name }),
-      connection.connected && /* @__PURE__ */ jsx57(
+      /* @__PURE__ */ jsx59("span", { children: connection.name }),
+      connection.connected && /* @__PURE__ */ jsx59(
         CheckCircleFilled,
         {
           style: { color: "#52c41a", fontSize: 12, marginLeft: 8 }
         }
       ),
-      connection.error && !connection.connecting && /* @__PURE__ */ jsx57(
+      connection.error && !connection.connecting && /* @__PURE__ */ jsx59(
         CloseCircleFilled,
         {
           style: { color: "#ff4d4f", fontSize: 12, marginLeft: 8 }
@@ -13520,35 +13855,35 @@ QUEUE_NAME=tasks`,
   const tabItems = connections.map((connection) => ({
     key: connection.id,
     label: renderTabLabel(connection),
-    children: /* @__PURE__ */ jsx57("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx57(Fragment10, { children: /* @__PURE__ */ jsxs35("div", { style: { display: "flex", height: "100%" }, children: [
-      /* @__PURE__ */ jsx57("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs35(
+    children: /* @__PURE__ */ jsx59("div", { className: styles.tabContent, children: connection.connected ? /* @__PURE__ */ jsx59(Fragment11, { children: /* @__PURE__ */ jsxs37("div", { style: { display: "flex", height: "100%" }, children: [
+      /* @__PURE__ */ jsx59("div", { className: styles.sidebar, children: SETTINGS_MENU_ITEMS.map((item) => /* @__PURE__ */ jsxs37(
         "div",
         {
           className: `${styles.menuItem} ${activeMenu === item.key ? "active" : ""}`,
           onClick: () => setActiveMenu(item.key),
           children: [
-            /* @__PURE__ */ jsx57("span", { className: styles.menuItemIcon, children: item.icon }),
-            /* @__PURE__ */ jsx57("span", { className: styles.menuItemText, children: item.label })
+            /* @__PURE__ */ jsx59("span", { className: styles.menuItemIcon, children: item.icon }),
+            /* @__PURE__ */ jsx59("span", { className: styles.menuItemText, children: item.label })
           ]
         },
         item.key
       )) }),
-      /* @__PURE__ */ jsxs35("div", { className: styles.content, children: [
-        /* @__PURE__ */ jsxs35("div", { className: styles.contentHeader, children: [
-          /* @__PURE__ */ jsxs35("div", { className: styles.contentHeaderLeft, children: [
-            /* @__PURE__ */ jsx57(Title4, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
-            /* @__PURE__ */ jsxs35(Text20, { className: styles.contentDescription, children: [
+      /* @__PURE__ */ jsxs37("div", { className: styles.content, children: [
+        /* @__PURE__ */ jsxs37("div", { className: styles.contentHeader, children: [
+          /* @__PURE__ */ jsxs37("div", { className: styles.contentHeaderLeft, children: [
+            /* @__PURE__ */ jsx59(Title4, { level: 3, className: styles.contentTitle, children: activeMenuItem?.label }),
+            /* @__PURE__ */ jsxs37(Text22, { 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__ */ jsxs35("div", { className: styles.contentHeaderRight, children: [
-            /* @__PURE__ */ jsx57(Button26, { onClick: onClose, children: "Cancel" }),
-            /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsxs37("div", { className: styles.contentHeaderRight, children: [
+            /* @__PURE__ */ jsx59(Button26, { onClick: onClose, children: "Cancel" }),
+            /* @__PURE__ */ jsx59(
               Button26,
               {
                 type: "primary",
-                icon: /* @__PURE__ */ jsx57(SaveOutlined2, {}),
+                icon: /* @__PURE__ */ jsx59(SaveOutlined2, {}),
                 onClick: handleSave,
                 loading,
                 children: "Save Configuration"
@@ -13556,9 +13891,9 @@ QUEUE_NAME=tasks`,
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx57("div", { className: styles.contentBody, children: renderContent(connection.id) })
+        /* @__PURE__ */ jsx59("div", { className: styles.contentBody, children: renderContent(connection.id) })
       ] })
-    ] }) }) : /* @__PURE__ */ jsx57(
+    ] }) }) : /* @__PURE__ */ jsx59(
       "div",
       {
         style: {
@@ -13570,29 +13905,29 @@ QUEUE_NAME=tasks`,
           gap: 16,
           padding: 48
         },
-        children: connection.connecting ? /* @__PURE__ */ jsxs35(Fragment10, { children: [
-          /* @__PURE__ */ jsx57(LinkOutlined, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
-          /* @__PURE__ */ jsx57(Title4, { level: 4, children: "Connecting..." }),
-          /* @__PURE__ */ jsxs35(Text20, { type: "secondary", style: { textAlign: "center" }, children: [
+        children: connection.connecting ? /* @__PURE__ */ jsxs37(Fragment11, { children: [
+          /* @__PURE__ */ jsx59(LinkOutlined2, { style: { fontSize: 64, color: "#1890ff" }, spin: true }),
+          /* @__PURE__ */ jsx59(Title4, { level: 4, children: "Connecting..." }),
+          /* @__PURE__ */ jsxs37(Text22, { type: "secondary", style: { textAlign: "center" }, children: [
             "Connecting to ",
             connection.url
           ] })
-        ] }) : /* @__PURE__ */ jsxs35(Fragment10, { children: [
-          /* @__PURE__ */ jsx57(LinkOutlined, { style: { fontSize: 64, color: "#d9d9d9" } }),
-          /* @__PURE__ */ jsx57(Title4, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
-          /* @__PURE__ */ jsx57(
-            Text20,
+        ] }) : /* @__PURE__ */ jsxs37(Fragment11, { children: [
+          /* @__PURE__ */ jsx59(LinkOutlined2, { style: { fontSize: 64, color: "#d9d9d9" } }),
+          /* @__PURE__ */ jsx59(Title4, { level: 4, type: "secondary", children: connection.error || "Not Connected" }),
+          /* @__PURE__ */ jsx59(
+            Text22,
             {
               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__ */ jsx57(
+          /* @__PURE__ */ jsx59(
             Button26,
             {
               type: "primary",
-              icon: /* @__PURE__ */ jsx57(LinkOutlined, {}),
+              icon: /* @__PURE__ */ jsx59(LinkOutlined2, {}),
               onClick: () => checkConnection(connection.id),
               loading: connection.connecting,
               style: { marginTop: 16 },
@@ -13604,8 +13939,8 @@ QUEUE_NAME=tasks`,
     ) }),
     closable: connections.length > 1
   }));
-  return /* @__PURE__ */ jsxs35(Fragment10, { children: [
-    /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs37(Fragment11, { children: [
+    /* @__PURE__ */ jsx59(
       Modal6,
       {
         open,
@@ -13614,7 +13949,7 @@ QUEUE_NAME=tasks`,
         width: "80%",
         footer: null,
         title: "Settings",
-        children: /* @__PURE__ */ jsx57("div", { children: /* @__PURE__ */ jsx57(
+        children: /* @__PURE__ */ jsx59("div", { children: /* @__PURE__ */ jsx59(
           Tabs,
           {
             activeKey: activeTabKey,
@@ -13628,7 +13963,7 @@ QUEUE_NAME=tasks`,
               }
             },
             items: tabItems,
-            addIcon: /* @__PURE__ */ jsxs35(
+            addIcon: /* @__PURE__ */ jsxs37(
               "div",
               {
                 style: {
@@ -13638,8 +13973,8 @@ QUEUE_NAME=tasks`,
                   padding: "4px 8px"
                 },
                 children: [
-                  /* @__PURE__ */ jsx57(PlusOutlined7, {}),
-                  /* @__PURE__ */ jsx57("span", { children: "Add Server" })
+                  /* @__PURE__ */ jsx59(PlusOutlined7, {}),
+                  /* @__PURE__ */ jsx59("span", { children: "Add Server" })
                 ]
               }
             )
@@ -13647,7 +13982,7 @@ QUEUE_NAME=tasks`,
         ) })
       }
     ),
-    /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx59(
       Modal6,
       {
         title: "Add New Server",
@@ -13661,11 +13996,11 @@ QUEUE_NAME=tasks`,
         },
         confirmLoading: addingServer,
         className: styles.addServerModal,
-        children: /* @__PURE__ */ jsxs35(Space22, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
-          /* @__PURE__ */ jsxs35("div", { children: [
-            /* @__PURE__ */ jsx57(Text20, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
-            /* @__PURE__ */ jsx57(
-              Input5,
+        children: /* @__PURE__ */ jsxs37(Space21, { direction: "vertical", style: { width: "100%" }, size: "large", children: [
+          /* @__PURE__ */ jsxs37("div", { children: [
+            /* @__PURE__ */ jsx59(Text22, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server Name" }),
+            /* @__PURE__ */ jsx59(
+              Input6,
               {
                 placeholder: "e.g., Production Server",
                 value: newServerName,
@@ -13673,12 +14008,12 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx57(Text20, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
+            /* @__PURE__ */ jsx59(Text22, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: Leave empty to use URL as name" })
           ] }),
-          /* @__PURE__ */ jsxs35("div", { children: [
-            /* @__PURE__ */ jsx57(Text20, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
-            /* @__PURE__ */ jsx57(
-              Input5,
+          /* @__PURE__ */ jsxs37("div", { children: [
+            /* @__PURE__ */ jsx59(Text22, { strong: true, style: { display: "block", marginBottom: 8 }, children: "Server URL *" }),
+            /* @__PURE__ */ jsx59(
+              Input6,
               {
                 placeholder: "e.g., http://localhost:4001",
                 value: newServerUrl,
@@ -13686,12 +14021,12 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx57(Text20, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
+            /* @__PURE__ */ jsx59(Text22, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Enter the full URL of the gateway server" })
           ] }),
-          /* @__PURE__ */ jsxs35("div", { children: [
-            /* @__PURE__ */ jsx57(Text20, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
-            /* @__PURE__ */ jsx57(
-              Input5.Password,
+          /* @__PURE__ */ jsxs37("div", { children: [
+            /* @__PURE__ */ jsx59(Text22, { strong: true, style: { display: "block", marginBottom: 8 }, children: "API Key" }),
+            /* @__PURE__ */ jsx59(
+              Input6.Password,
               {
                 placeholder: "Optional: Enter API key for authentication",
                 value: newServerApiKey,
@@ -13699,7 +14034,7 @@ QUEUE_NAME=tasks`,
                 onPressEnter: handleAddServer
               }
             ),
-            /* @__PURE__ */ jsx57(Text20, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
+            /* @__PURE__ */ jsx59(Text22, { type: "secondary", style: { fontSize: 12, marginTop: 4 }, children: "Optional: API key for server authentication" })
           ] })
         ] })
       }
@@ -13708,10 +14043,10 @@ QUEUE_NAME=tasks`,
 };
 
 // src/components/Chat/AgentServerSetting.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var AgentServerSetting = () => {
   const { settingsModalOpen, setSettingsModalOpen } = useLatticeChatShellContext();
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx60(
     SettingsModal,
     {
       open: settingsModalOpen,
@@ -13721,10 +14056,10 @@ var AgentServerSetting = () => {
 };
 
 // src/components/Chat/LatticeChatShell.tsx
-import { jsx as jsx59, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs38 } from "react/jsx-runtime";
 var LatticeChatShell = (props) => {
   const { enableAssistantCreation, enableAssistantEditing, ...restProps } = props;
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs38(
     LatticeChatShellContextProvider,
     {
       initialConfig: {
@@ -13733,8 +14068,8 @@ var LatticeChatShell = (props) => {
         ...restProps.initialConfig
       },
       children: [
-        /* @__PURE__ */ jsx59(AssistantContextProvider, { autoLoad: true, initialAssistantId: restProps.initialConfig?.assistantId, children: /* @__PURE__ */ jsx59(ConversationContextProvider, { children: /* @__PURE__ */ jsx59(LatticeChatView, {}) }) }),
-        /* @__PURE__ */ jsx59(AgentServerSetting, {})
+        /* @__PURE__ */ jsx61(AssistantContextProvider, { autoLoad: true, initialAssistantId: restProps.initialConfig?.assistantId, children: /* @__PURE__ */ jsx61(ConversationContextProvider, { children: /* @__PURE__ */ jsx61(LatticeChatView, {}) }) }),
+        /* @__PURE__ */ jsx61(AgentServerSetting, {})
       ]
     }
   );