@elevasis/ui 1.0.0

package/dist/chunk-OXVOHOP3.js

@@ -0,0 +1,661 @@
+import { BaseNode, useGraphTheme, BaseEdge, useGraphHighlighting, calculateGraphHeight, Graph_default, GRAPH_CONSTANTS, GraphBackground, GraphFitViewButton, GraphFitViewHandler } from './chunk-HUWJXLLF.js';
+import { StyledMarkdown } from './chunk-3KMDHCAR.js';
+import { Stack, Group, Text, Badge, ActionIcon, Collapse, Card, ThemeIcon, SimpleGrid, Divider, Paper, Title, Space, Box } from '@mantine/core';
+import { IconBrain, IconFileText, IconChevronRight, IconTool, IconSettings, IconCpu, IconClockHour4, IconVersions, IconPlayerPlay, IconNetwork, IconSitemap } from '@tabler/icons-react';
+import { memo, useState, useMemo } from 'react';
+import JSONPretty from 'react-json-pretty';
+import 'react-json-pretty/themes/monikai.css';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ReactFlowProvider, ReactFlow } from '@xyflow/react';
+import dagre from '@dagrejs/dagre';
+import '@xyflow/react/dist/style.css';
+
+function CollapsibleJsonSection({ title, data, defaultExpanded = false }) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const [isHovered, setIsHovered] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        borderRadius: "var(--mantine-radius-default)",
+        backgroundColor: isHovered ? "var(--color-surface-hover, rgba(0,0,0,0.02))" : "transparent",
+        transition: "background-color var(--duration-fast) var(--easing)"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          Group,
+          {
+            gap: 4,
+            onClick: () => setIsExpanded(!isExpanded),
+            onMouseEnter: () => setIsHovered(true),
+            onMouseLeave: () => setIsHovered(false),
+            style: {
+              cursor: "pointer",
+              padding: "0.375rem 0.5rem",
+              userSelect: "none"
+            },
+            wrap: "nowrap",
+            children: [
+              /* @__PURE__ */ jsx(
+                ActionIcon,
+                {
+                  variant: "transparent",
+                  size: "xs",
+                  style: {
+                    transition: "transform var(--duration-fast) var(--easing)",
+                    transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
+                  },
+                  children: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 })
+                }
+              ),
+              title
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Collapse, { in: isExpanded, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: "0.75rem",
+              fontFamily: "var(--mantine-font-family-monospace)",
+              padding: "0.5rem",
+              overflow: "auto",
+              background: "var(--color-background)"
+            },
+            children: /* @__PURE__ */ jsx(
+              JSONPretty,
+              {
+                data,
+                theme: {
+                  main: "line-height:1.3;color:var(--color-text);background:transparent;overflow:auto;",
+                  error: "line-height:1.3;color:var(--color-error);background:transparent;overflow:auto;",
+                  key: "color:var(--color-text-dimmed);",
+                  string: "color:var(--color-success);",
+                  value: "color:var(--color-warning);",
+                  boolean: "color:var(--color-text-dimmed);"
+                }
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+function ContractDisplay({ contract, defaultExpanded = false }) {
+  return /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Contract" }),
+    /* @__PURE__ */ jsx(
+      CollapsibleJsonSection,
+      {
+        title: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Input Schema" }),
+        data: contract.inputSchema,
+        defaultExpanded
+      }
+    ),
+    contract.outputSchema != null && /* @__PURE__ */ jsx(
+      CollapsibleJsonSection,
+      {
+        title: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "Output Schema" }),
+        data: contract.outputSchema,
+        defaultExpanded
+      }
+    )
+  ] });
+}
+function ConfigCard({ icon, title, badge, items, color = "blue" }) {
+  const visibleItems = items.filter((item) => item.value !== void 0 && item.value !== null);
+  if (visibleItems.length === 0) return null;
+  return /* @__PURE__ */ jsx(Card, { padding: "sm", withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(ThemeIcon, { size: "sm", variant: "light", color, radius: "sm", children: icon }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { flex: 1, fontFamily: "var(--elevasis-font-family-subtitle)" }, children: title }),
+      badge && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color, children: badge })
+    ] }),
+    /* @__PURE__ */ jsx(Stack, { gap: 4, children: visibleItems.map((item, index) => /* @__PURE__ */ jsxs(Group, { gap: 6, wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", style: { minWidth: "fit-content" }, children: item.label }),
+      typeof item.value === "string" || typeof item.value === "number" ? /* @__PURE__ */ jsx(Text, { size: "xs", ff: item.mono ? "monospace" : void 0, truncate: true, style: { flex: 1 }, children: item.value }) : item.value
+    ] }, index)) })
+  ] }) });
+}
+function ToolsListDisplay({ tools, compact = false, maxVisible = 0 }) {
+  if (tools.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      !compact && /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, mb: "xs", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Tools" }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "No tools configured" })
+    ] });
+  }
+  const normalizedTools = tools.map((tool) => typeof tool === "string" ? { name: tool } : tool);
+  const visibleTools = maxVisible > 0 ? normalizedTools.slice(0, maxVisible) : normalizedTools;
+  const hiddenCount = maxVisible > 0 ? Math.max(0, normalizedTools.length - maxVisible) : 0;
+  return /* @__PURE__ */ jsxs("div", { children: [
+    !compact && /* @__PURE__ */ jsxs(Group, { gap: "xs", mb: "xs", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Tools" }),
+      /* @__PURE__ */ jsx(Badge, { variant: "light", size: "xs", children: tools.length })
+    ] }),
+    /* @__PURE__ */ jsx(SimpleGrid, { cols: 2, spacing: "xs", children: visibleTools.map((tool, index) => /* @__PURE__ */ jsxs(Card, { withBorder: true, p: "sm", children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", mb: tool.description ? "xs" : 0, children: [
+        /* @__PURE__ */ jsx(IconTool, { size: 16, style: { color: "var(--color-text-subtle)", flexShrink: 0 } }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", fw: 500, children: tool.name })
+      ] }),
+      tool.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: tool.description })
+    ] }, `${tool.name}-${index}`)) }),
+    hiddenCount > 0 && /* @__PURE__ */ jsxs(Text, { size: "sm", c: "dimmed", fs: "italic", mt: "xs", children: [
+      "+",
+      hiddenCount,
+      " more tools"
+    ] })
+  ] });
+}
+var NODE_WIDTH = 200;
+var NODE_HEIGHT = 100;
+var RANK_SEP = 80;
+var NODE_SEP = 30;
+function useNewKnowledgeMapLayout(knowledgeMap, agentName) {
+  return useMemo(() => {
+    if (!knowledgeMap || knowledgeMap.nodes.length === 0) {
+      return { nodes: [], edges: [] };
+    }
+    const agentNodeId = "__agent__";
+    const edges = knowledgeMap.nodes.map((node) => ({
+      id: `edge-${agentNodeId}-${node.id}`,
+      source: agentNodeId,
+      target: node.id,
+      type: "knowledgeMap",
+      data: {}
+    }));
+    const dagreGraph = new dagre.graphlib.Graph();
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+    dagreGraph.setGraph({
+      rankdir: "TB",
+      ranksep: RANK_SEP,
+      nodesep: NODE_SEP,
+      marginx: 40,
+      marginy: 40
+    });
+    dagreGraph.setNode(agentNodeId, { width: NODE_WIDTH, height: NODE_HEIGHT });
+    knowledgeMap.nodes.forEach((node) => {
+      dagreGraph.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+    });
+    edges.forEach((edge) => {
+      dagreGraph.setEdge(edge.source, edge.target);
+    });
+    dagre.layout(dagreGraph);
+    const agentDagreNode = dagreGraph.node(agentNodeId);
+    const agentNode = {
+      id: agentNodeId,
+      type: "knowledgeMap",
+      position: {
+        x: agentDagreNode.x - NODE_WIDTH / 2,
+        y: agentDagreNode.y - NODE_HEIGHT / 2
+      },
+      data: {
+        id: agentNodeId,
+        name: agentName,
+        description: "Agent with lazy-loading knowledge",
+        loaded: true,
+        hasPrompt: false,
+        isAgentNode: true
+      }
+    };
+    const knowledgeNodes = knowledgeMap.nodes.map((node) => {
+      const dagreNode = dagreGraph.node(node.id);
+      return {
+        id: node.id,
+        type: "knowledgeMap",
+        position: {
+          x: dagreNode.x - NODE_WIDTH / 2,
+          y: dagreNode.y - NODE_HEIGHT / 2
+        },
+        data: {
+          id: node.id,
+          name: node.id,
+          description: node.description,
+          loaded: node.loaded,
+          hasPrompt: node.hasPrompt,
+          isAgentNode: false
+        }
+      };
+    });
+    return { nodes: [agentNode, ...knowledgeNodes], edges };
+  }, [knowledgeMap, agentName]);
+}
+var NewKnowledgeMapNode = memo(function NewKnowledgeMapNode2({ data, selected }) {
+  const nodeColor = data.isAgentNode ? "violet" : data.loaded ? "teal" : "blue";
+  return /* @__PURE__ */ jsx(BaseNode, { color: nodeColor, selected, width: 200, handleDirection: "vertical", children: /* @__PURE__ */ jsxs(Stack, { gap: 6, children: [
+    /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
+      data.isAgentNode ? /* @__PURE__ */ jsx(IconBrain, { size: 16, style: { flexShrink: 0 } }) : data.loaded ? /* @__PURE__ */ jsx(IconBrain, { size: 16, style: { flexShrink: 0 } }) : /* @__PURE__ */ jsx(IconBrain, { size: 16, style: { flexShrink: 0, opacity: 0.4 } }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, truncate: true, style: { flex: 1, fontFamily: "var(--mantine-font-family-headings)" }, children: data.name })
+    ] }),
+    data.description && /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", lineClamp: 2, children: data.description }),
+    /* @__PURE__ */ jsx(Group, { gap: 4, children: data.isAgentNode ? /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: "Root" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          size: "xs",
+          variant: "light",
+          color: data.loaded ? "teal" : "gray",
+          leftSection: /* @__PURE__ */ jsx(IconBrain, { size: 10 }),
+          children: data.loaded ? "Loaded" : "Available"
+        }
+      ),
+      data.hasPrompt && /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "orange", leftSection: /* @__PURE__ */ jsx(IconFileText, { size: 10 }), children: "Prompt" })
+    ] }) })
+  ] }) });
+});
+var NewKnowledgeMapEdge = memo(function NewKnowledgeMapEdge2({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  selected,
+  data
+}) {
+  const colors = useGraphTheme();
+  return /* @__PURE__ */ jsx(
+    BaseEdge,
+    {
+      id,
+      sourceX,
+      sourceY,
+      targetX,
+      targetY,
+      sourcePosition,
+      targetPosition,
+      color: colors.primary,
+      glowColor: colors.primaryGlow,
+      animated: false,
+      selected,
+      dimmed: data?.dimmed
+    }
+  );
+});
+var nodeTypes = {
+  knowledgeMap: NewKnowledgeMapNode
+};
+var edgeTypes = {
+  knowledgeMap: NewKnowledgeMapEdge
+};
+function NewKnowledgeMapGraphInner({ knowledgeMap, agentName, compact, fitViewTrigger }) {
+  const { nodes: layoutNodes, edges: layoutEdges } = useNewKnowledgeMapLayout(knowledgeMap, agentName);
+  const { nodes, edges, handleNodeMouseEnter, handleNodeMouseLeave } = useGraphHighlighting(layoutNodes, layoutEdges);
+  if (!knowledgeMap || knowledgeMap.nodes.length === 0) {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      !compact && /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, mb: "xs", style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Knowledge Map" }),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "No knowledge nodes configured" })
+    ] });
+  }
+  const containerHeight = calculateGraphHeight({
+    itemCount: knowledgeMap.nodeCount,
+    minHeight: 250,
+    maxHeight: 450,
+    heightPerItem: 60
+  });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    !compact && /* @__PURE__ */ jsxs(Group, { gap: "xs", mb: "xs", children: [
+      /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Knowledge Map" }),
+      /* @__PURE__ */ jsxs(Badge, { variant: "light", size: "xs", children: [
+        knowledgeMap.nodeCount,
+        " ",
+        knowledgeMap.nodeCount === 1 ? "node" : "nodes"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: Graph_default.graphContainer,
+        style: {
+          width: "100%",
+          height: containerHeight,
+          border: "1px solid var(--color-border)",
+          borderRadius: "var(--mantine-radius-md)",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsxs(
+          ReactFlow,
+          {
+            nodes,
+            edges,
+            nodeTypes,
+            edgeTypes,
+            onNodeMouseEnter: handleNodeMouseEnter,
+            onNodeMouseLeave: handleNodeMouseLeave,
+            fitView: true,
+            fitViewOptions: { padding: 0.15 },
+            proOptions: { hideAttribution: true },
+            minZoom: GRAPH_CONSTANTS.MIN_ZOOM,
+            maxZoom: GRAPH_CONSTANTS.MAX_ZOOM,
+            nodesDraggable: false,
+            nodesConnectable: false,
+            elementsSelectable: true,
+            selectNodesOnDrag: false,
+            panOnDrag: true,
+            zoomOnScroll: true,
+            zoomOnPinch: true,
+            panOnScroll: false,
+            children: [
+              /* @__PURE__ */ jsx(GraphBackground, {}),
+              /* @__PURE__ */ jsx(GraphFitViewButton, { padding: 0.15, variant: "mantine", duration: 300 }),
+              /* @__PURE__ */ jsx(GraphFitViewHandler, { trigger: fitViewTrigger })
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+function NewKnowledgeMapGraph(props) {
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(NewKnowledgeMapGraphInner, { ...props }) });
+}
+function DefinitionSectionHeader({ expanded, onToggle, icon, title, count }) {
+  return /* @__PURE__ */ jsxs(Group, { gap: 4, onClick: onToggle, style: { cursor: "pointer", userSelect: "none" }, wrap: "nowrap", children: [
+    /* @__PURE__ */ jsx(
+      ActionIcon,
+      {
+        variant: "transparent",
+        size: "xs",
+        style: {
+          transition: "transform var(--duration-fast) var(--easing)",
+          transform: expanded ? "rotate(90deg)" : "rotate(0deg)"
+        },
+        children: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 })
+      }
+    ),
+    icon,
+    /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: title }),
+    count && /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+      "(",
+      count,
+      ")"
+    ] })
+  ] });
+}
+function AgentDefinitionDisplay({ agent, defaultExpanded = false }) {
+  const [systemPromptExpanded, setSystemPromptExpanded] = useState(defaultExpanded);
+  const [configExpanded, setConfigExpanded] = useState(defaultExpanded);
+  const [knowledgeMapExpanded, setKnowledgeMapExpanded] = useState(defaultExpanded);
+  const [knowledgeMapFitTrigger, setKnowledgeMapFitTrigger] = useState(0);
+  const [toolsExpanded, setToolsExpanded] = useState(defaultExpanded);
+  const [memoryPrefsExpanded, setMemoryPrefsExpanded] = useState(defaultExpanded);
+  const hasConstraints = agent.config.constraints && Object.keys(agent.config.constraints).length > 0;
+  const hasMemoryPreferences = !!agent.config.memoryPreferences;
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        DefinitionSectionHeader,
+        {
+          expanded: configExpanded,
+          onToggle: () => setConfigExpanded(!configExpanded),
+          icon: /* @__PURE__ */ jsx(IconSettings, { size: 16, color: "var(--color-text-subtle)" }),
+          title: "Configuration"
+        }
+      ),
+      /* @__PURE__ */ jsxs(Collapse, { in: configExpanded, children: [
+        /* @__PURE__ */ jsxs(SimpleGrid, { cols: 2, spacing: "sm", mt: "xs", pl: "xl", children: [
+          /* @__PURE__ */ jsx(
+            ConfigCard,
+            {
+              icon: /* @__PURE__ */ jsx(IconCpu, { size: 14 }),
+              title: "Model",
+              badge: agent.modelConfig.provider,
+              items: [
+                {
+                  label: "Model",
+                  value: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: agent.modelConfig.model })
+                },
+                { label: "Temperature", value: agent.modelConfig.temperature, mono: true },
+                { label: "Max Tokens", value: agent.modelConfig.maxOutputTokens?.toLocaleString(), mono: true },
+                { label: "Top P", value: agent.modelConfig.topP, mono: true },
+                {
+                  label: "Reasoning",
+                  value: agent.modelConfig.modelOptions && "reasoning_effort" in agent.modelConfig.modelOptions ? String(agent.modelConfig.modelOptions.reasoning_effort) : void 0,
+                  mono: true
+                },
+                {
+                  label: "Verbosity",
+                  value: agent.modelConfig.modelOptions && "verbosity" in agent.modelConfig.modelOptions ? String(agent.modelConfig.modelOptions.verbosity) : void 0,
+                  mono: true
+                }
+              ]
+            }
+          ),
+          hasConstraints && /* @__PURE__ */ jsx(
+            ConfigCard,
+            {
+              icon: /* @__PURE__ */ jsx(IconClockHour4, { size: 14 }),
+              title: "Constraints",
+              color: "orange",
+              items: [
+                { label: "Max Iterations", value: agent.config.constraints?.maxIterations, mono: true },
+                {
+                  label: "Timeout",
+                  value: agent.config.constraints?.timeout ? `${(agent.config.constraints.timeout / 1e3).toFixed(0)}s` : void 0,
+                  mono: true
+                },
+                { label: "Max Memory Keys", value: agent.config.constraints?.maxSessionMemoryKeys, mono: true },
+                {
+                  label: "Max Memory Tokens",
+                  value: agent.config.constraints?.maxMemoryTokens?.toLocaleString(),
+                  mono: true
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ConfigCard,
+            {
+              icon: /* @__PURE__ */ jsx(IconVersions, { size: 14 }),
+              title: "Version",
+              color: "grape",
+              items: [
+                {
+                  label: "Version",
+                  value: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: agent.config.version })
+                }
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ConfigCard,
+            {
+              icon: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 14 }),
+              title: "Execution Interface",
+              color: "teal",
+              items: [
+                {
+                  label: "Has Interface",
+                  value: agent.interface ? /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "green", children: "Yes" }) : /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "gray", children: "No" })
+                }
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { paddingLeft: "var(--mantine-spacing-xl)", marginTop: "var(--mantine-spacing-sm)" }, children: /* @__PURE__ */ jsx(ContractDisplay, { contract: agent.contract, defaultExpanded }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        DefinitionSectionHeader,
+        {
+          expanded: systemPromptExpanded,
+          onToggle: () => setSystemPromptExpanded(!systemPromptExpanded),
+          icon: /* @__PURE__ */ jsx(IconBrain, { size: 16, color: "var(--color-text-subtle)" }),
+          title: "System Prompt"
+        }
+      ),
+      /* @__PURE__ */ jsx(Collapse, { in: systemPromptExpanded, children: /* @__PURE__ */ jsx(Paper, { p: "sm", mt: "xs", children: /* @__PURE__ */ jsx(StyledMarkdown, { children: agent.config.systemPrompt }) }) })
+    ] }),
+    agent.knowledgeMap && agent.knowledgeMap.nodeCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          DefinitionSectionHeader,
+          {
+            expanded: knowledgeMapExpanded,
+            onToggle: () => {
+              const willExpand = !knowledgeMapExpanded;
+              setKnowledgeMapExpanded(willExpand);
+              if (willExpand) {
+                setKnowledgeMapFitTrigger((prev) => prev + 1);
+              }
+            },
+            icon: /* @__PURE__ */ jsx(IconNetwork, { size: 16, color: "var(--color-text-subtle)" }),
+            title: "Knowledge Map",
+            count: `${agent.knowledgeMap.nodeCount} ${agent.knowledgeMap.nodeCount === 1 ? "node" : "nodes"}`
+          }
+        ),
+        /* @__PURE__ */ jsx(Collapse, { in: knowledgeMapExpanded, children: /* @__PURE__ */ jsx("div", { style: { marginTop: "var(--mantine-spacing-xs)" }, children: /* @__PURE__ */ jsx(
+          NewKnowledgeMapGraph,
+          {
+            knowledgeMap: agent.knowledgeMap,
+            agentName: agent.config.name,
+            compact: true,
+            fitViewTrigger: knowledgeMapFitTrigger
+          }
+        ) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        DefinitionSectionHeader,
+        {
+          expanded: toolsExpanded,
+          onToggle: () => setToolsExpanded(!toolsExpanded),
+          icon: /* @__PURE__ */ jsx(IconTool, { size: 16, color: "var(--color-text-subtle)" }),
+          title: "Tools",
+          count: String(agent.tools.length)
+        }
+      ),
+      /* @__PURE__ */ jsx(Collapse, { in: toolsExpanded, children: /* @__PURE__ */ jsx("div", { style: { marginTop: "var(--mantine-spacing-xs)" }, children: /* @__PURE__ */ jsx(ToolsListDisplay, { tools: agent.tools, compact: true }) }) })
+    ] }),
+    hasMemoryPreferences && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          DefinitionSectionHeader,
+          {
+            expanded: memoryPrefsExpanded,
+            onToggle: () => setMemoryPrefsExpanded(!memoryPrefsExpanded),
+            title: "Memory Preferences"
+          }
+        ),
+        /* @__PURE__ */ jsx(Collapse, { in: memoryPrefsExpanded, children: /* @__PURE__ */ jsx(
+          Paper,
+          {
+            p: "sm",
+            mt: "xs",
+            style: {
+              backgroundColor: "var(--color-background)",
+              border: "1px solid var(--color-border)"
+            },
+            children: /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-wrap" }, children: agent.config.memoryPreferences })
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+function WorkflowDefinitionDisplay({ workflow, defaultExpanded = false }) {
+  const [configExpanded, setConfigExpanded] = useState(defaultExpanded);
+  return /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      Group,
+      {
+        gap: 4,
+        onClick: () => setConfigExpanded(!configExpanded),
+        style: { cursor: "pointer", userSelect: "none" },
+        wrap: "nowrap",
+        children: [
+          /* @__PURE__ */ jsx(
+            ActionIcon,
+            {
+              variant: "transparent",
+              size: "xs",
+              style: {
+                transition: "transform var(--duration-fast) var(--easing)",
+                transform: configExpanded ? "rotate(90deg)" : "rotate(0deg)"
+              },
+              children: /* @__PURE__ */ jsx(IconChevronRight, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsx(IconSettings, { size: 16, color: "var(--color-text-subtle)" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, style: { fontFamily: "var(--mantine-font-family-headings)" }, children: "Configuration" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(Collapse, { in: configExpanded, children: [
+      /* @__PURE__ */ jsxs(SimpleGrid, { cols: 2, spacing: "sm", mt: "xs", pl: "xl", children: [
+        /* @__PURE__ */ jsx(
+          ConfigCard,
+          {
+            icon: /* @__PURE__ */ jsx(IconVersions, { size: 14 }),
+            title: "Version",
+            color: "grape",
+            items: [
+              {
+                label: "Version",
+                value: /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: workflow.config.version })
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ConfigCard,
+          {
+            icon: /* @__PURE__ */ jsx(IconPlayerPlay, { size: 14 }),
+            title: "Execution Interface",
+            color: "teal",
+            items: [
+              {
+                label: "Has Interface",
+                value: workflow.interface ? /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "green", children: "Yes" }) : /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", color: "gray", children: "No" })
+              }
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { style: { paddingLeft: "var(--mantine-spacing-xl)", marginTop: "var(--mantine-spacing-sm)" }, children: /* @__PURE__ */ jsx(ContractDisplay, { contract: workflow.contract, defaultExpanded }) })
+    ] })
+  ] }) });
+}
+function isAgentDefinition(structure) {
+  return structure.config.type === "agent" && "modelConfig" in structure;
+}
+function isWorkflowDefinition(structure) {
+  return structure.config.type === "workflow" && "steps" in structure;
+}
+function ResourceDefinitionSection({
+  resourceDefinition,
+  defaultExpanded = false
+}) {
+  const isAgent = isAgentDefinition(resourceDefinition);
+  const isWorkflow = isWorkflowDefinition(resourceDefinition);
+  if (isAgent) {
+    return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "sm", children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(IconBrain, { size: 20 }),
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "Agent Definition" })
+      ] }),
+      /* @__PURE__ */ jsx(Space, { h: 0 }),
+      /* @__PURE__ */ jsx(AgentDefinitionDisplay, { agent: resourceDefinition, defaultExpanded })
+    ] }) });
+  }
+  if (isWorkflow) {
+    return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "sm", children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(IconSitemap, { size: 20 }),
+        /* @__PURE__ */ jsx(Title, { order: 3, children: "Workflow Definition" })
+      ] }),
+      /* @__PURE__ */ jsx(Space, { h: 0 }),
+      /* @__PURE__ */ jsx(WorkflowDefinitionDisplay, { workflow: resourceDefinition, defaultExpanded })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx(Paper, { withBorder: true, p: "sm", children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", fs: "italic", children: "Unknown resource type" }) });
+}
+
+export { AgentDefinitionDisplay, CollapsibleJsonSection, ConfigCard, ContractDisplay, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, ResourceDefinitionSection, ToolsListDisplay, WorkflowDefinitionDisplay, useNewKnowledgeMapLayout };