@inkeep/agents-manage-ui 0.33.2 → 0.34.0

package/src/features/agent/state/use-agent-store.ts

@@ -10,6 +10,7 @@ import type {
   SubAgentExternalAgentConfigLookup,
 } from '@/components/agent/agent';
 import type { AgentMetadata } from '@/components/agent/configuration/agent-types';
+import type { AnimatedEdge } from '@/components/agent/configuration/edge-types';
 import {
   type AnimatedNode,
   mcpNodeHandleId,
@@ -324,34 +325,28 @@ const agentState: StateCreator<AgentState> = (set, get) => ({
       set({ jsonSchemaMode });
     },
     animateGraph(event) {
-      function hasRelationWithSubAgent({
-        relationshipId,
-        subAgentId,
-      }: {
-        relationshipId: unknown;
-        subAgentId: string;
-      }): boolean {
-        if (typeof relationshipId !== 'string') {
-          return false;
-        }
-        const config = get().agentToolConfigLookup[subAgentId];
-        if (!config) {
-          return false;
-        }
-        return Object.keys(config).includes(relationshipId);
-      }
       // @ts-expect-error -- improve types
       const data = event.detail;
       set((state) => {
         const { edges: prevEdges, nodes: prevNodes } = state;
 
-        /** Wrapper function to always keep error state */
-        function changeNodeStatus(cb: (node: Node) => AnimatedNode['status']) {
+        function updateNodeStatus(
+          cb: (node: Node<AnimatedNode & Record<string, unknown>>) => AnimatedNode['status']
+        ) {
           return prevNodes.map((node) => {
-            if (node.data.status === 'error') {
-              return node;
-            }
-
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                status: cb(node),
+              },
+            };
+          });
+        }
+        function updateEdgeStatus(
+          cb: (edge: Edge<AnimatedEdge & Record<string, unknown>>) => AnimatedEdge['status']
+        ) {
+          return prevEdges.map((node) => {
             return {
               ...node,
               data: {
@@ -364,138 +359,123 @@ const agentState: StateCreator<AgentState> = (set, get) => ({
 
         switch (data.type) {
           case 'agent_initializing': {
-            // TODO
-            break;
+            return {
+              nodes: updateNodeStatus((node) => {
+                if (node.data.isDefault) {
+                  return 'delegating';
+                }
+                return node.data.status;
+              }),
+            };
           }
           case 'delegation_sent':
           case 'transfer': {
             const { fromSubAgent, targetSubAgent } = data.details.data;
 
             return {
-              edges: prevEdges.map((edge) => ({
-                ...edge,
-                data: {
-                  ...edge.data,
-                  delegating: edge.source === fromSubAgent && edge.target === targetSubAgent,
-                },
-              })),
-              nodes: changeNodeStatus((node) =>
-                node.id === fromSubAgent || node.id === targetSubAgent ? 'delegating' : null
+              edges: updateEdgeStatus((edge) =>
+                edge.source === fromSubAgent && edge.target === targetSubAgent
+                  ? 'delegating'
+                  : edge.data?.status
+              ),
+              nodes: updateNodeStatus((node) =>
+                node.id === fromSubAgent || node.id === targetSubAgent
+                  ? 'delegating'
+                  : node.data.status
               ),
             };
           }
           case 'delegation_returned': {
             const { targetSubAgent, fromSubAgent } = data.details.data;
             return {
-              edges: prevEdges.map((edge) => ({
-                ...edge,
-                data: {
-                  ...edge.data,
-                  delegating:
-                    edge.source === targetSubAgent && edge.target === fromSubAgent
-                      ? 'inverted'
-                      : false,
-                },
-              })),
-              nodes: changeNodeStatus((node) =>
-                node.id === targetSubAgent || node.id === fromSubAgent ? 'delegating' : null
+              edges: updateEdgeStatus((edge) =>
+                edge.source === targetSubAgent && edge.target === fromSubAgent
+                  ? 'inverted-delegating'
+                  : edge.data?.status
               ),
+              nodes: updateNodeStatus((node) => {
+                if (node.id === targetSubAgent) {
+                  return 'delegating';
+                }
+                return node.id === fromSubAgent ? 'inverted-delegating' : node.data.status;
+              }),
             };
           }
           case 'tool_call': {
-            const { toolName } = data.details.data;
+            const { relationshipId } = data.details.data;
             const { subAgentId } = data.details;
+            if (!relationshipId) {
+              console.warn('[type: tool_call] relationshipId is missing');
+            }
             return {
-              edges: prevEdges.map((edge) => {
+              edges: updateEdgeStatus((edge) => {
                 const node = prevNodes.find((node) => node.id === edge.target);
-                const toolId = node?.data.toolId as string;
-                const toolData = get().toolLookup[toolId];
-                const hasTool = toolData?.availableTools?.some((tool) => tool.name === toolName);
-                const hasDots = edge.source === subAgentId && hasTool;
-                return {
-                  ...edge,
-                  data: { ...edge.data, delegating: hasDots },
-                };
+                return !!relationshipId && relationshipId === node?.data.relationshipId
+                  ? 'delegating'
+                  : edge.data?.status;
               }),
-              nodes: changeNodeStatus((node) =>
+              nodes: updateNodeStatus((node) =>
                 node.data.id === subAgentId ||
-                hasRelationWithSubAgent({
-                  relationshipId: node.data.relationshipId,
-                  subAgentId,
-                })
+                (relationshipId && relationshipId === node.data.relationshipId)
                   ? 'delegating'
-                  : null
+                  : node.data.status
               ),
             };
           }
           case 'error': {
-            const { subAgentId } = data.details;
+            const { relationshipId } = data.details;
+            if (!relationshipId) {
+              console.warn('[type: error] relationshipId is missing');
+            }
             return {
-              nodes: changeNodeStatus((node) =>
-                hasRelationWithSubAgent({
-                  relationshipId: node.data.relationshipId,
-                  subAgentId,
-                })
+              nodes: updateNodeStatus((node) =>
+                relationshipId && relationshipId === node.data.relationshipId
                   ? 'error'
-                  : null
+                  : node.data.status
               ),
             };
           }
           case 'tool_result': {
-            const { toolName, error } = data.details.data;
+            const { error, relationshipId } = data.details.data;
             const { subAgentId } = data.details;
+            if (!relationshipId) {
+              console.warn('[type: tool_result] relationshipId is missing');
+            }
             return {
-              edges: prevEdges.map((edge) => {
+              edges: updateEdgeStatus((edge) => {
                 const node = prevNodes.find((node) => node.id === edge.target);
-                const toolId = node?.data.toolId as string;
-                const toolData = get().toolLookup[toolId];
-                const hasTool = toolData?.availableTools?.some((tool) => tool.name === toolName);
 
-                return {
-                  ...edge,
-                  data: {
-                    ...edge.data,
-                    delegating: subAgentId === edge.source && hasTool ? 'inverted' : false,
-                  },
-                };
+                return subAgentId === edge.source &&
+                  relationshipId &&
+                  relationshipId === node?.data.relationshipId
+                  ? 'inverted-delegating'
+                  : edge.data?.status;
               }),
-              nodes: changeNodeStatus((node) => {
-                let status: AnimatedNode['status'] = null;
-                if (
-                  hasRelationWithSubAgent({
-                    subAgentId,
-                    relationshipId: node.data.relationshipId,
-                  })
-                ) {
-                  status = error ? 'error' : 'executing';
-                } else if (node.id === subAgentId) {
-                  status = 'delegating';
+              nodes: updateNodeStatus((node) => {
+                if (relationshipId && relationshipId === node.data.relationshipId) {
+                  return error ? 'error' : 'inverted-delegating';
+                }
+                if (node.id === subAgentId) {
+                  return 'delegating';
                 }
 
-                return status;
+                return node.data.status;
               }),
             };
           }
           case 'completion': {
             return {
-              edges: prevEdges.map((edge) => ({
-                ...edge,
-                data: { ...edge.data, delegating: false },
-              })),
-              nodes: prevNodes.map((node) => ({
-                ...node,
-                data: { ...node.data, status: null },
-              })),
+              edges: updateEdgeStatus(() => null),
+              nodes: updateNodeStatus(() => null),
             };
           }
+          case 'agent_reasoning':
           case 'agent_generate': {
             const { subAgentId } = data.details;
             return {
-              edges: prevEdges.map((node) => ({
-                ...node,
-                data: { ...node.data, delegating: false },
-              })),
-              nodes: changeNodeStatus((node) => (node.id === subAgentId ? 'executing' : null)),
+              nodes: updateNodeStatus((node) =>
+                node.id === subAgentId ? 'executing' : node.data.status
+              ),
             };
           }
         }

package/src/features/agent/state/use-monaco-store.ts

@@ -1,16 +1,24 @@
 import { shikiToMonaco } from '@shikijs/monaco';
 import type * as Monaco from 'monaco-editor';
 import { createHighlighter, type HighlighterGeneric } from 'shiki';
-import { create } from 'zustand';
+import { create, type StateCreator } from 'zustand';
 import { devtools } from 'zustand/middleware';
 import { useShallow } from 'zustand/react/shallow';
 import { MONACO_THEME_NAME, TEMPLATE_LANGUAGE, VARIABLE_TOKEN } from '@/constants/theme';
 import monacoCompatibleSchema from '@/lib/monaco-editor/dynamic-ref-compatible-json-schema.json';
 
+const SUPPORTED_LANGUAGES = ['javascript', 'typescript', 'json'] as const;
+const SUPPORTED_THEMES = [MONACO_THEME_NAME.light, MONACO_THEME_NAME.dark] as const;
+
+type SupportedLanguage = (typeof SUPPORTED_LANGUAGES)[number];
+type SupportedTheme = (typeof SUPPORTED_THEMES)[number];
+
+type ShikiHighlighter = HighlighterGeneric<SupportedLanguage, SupportedTheme>;
+
 interface MonacoStateData {
   monaco: typeof Monaco | null;
   variableSuggestions: string[];
-  highlighter: HighlighterGeneric<any, any> | null;
+  highlighter: ShikiHighlighter | null;
 }
 
 interface MonacoActions {
@@ -33,123 +41,134 @@ const initialMonacoState: MonacoStateData = {
   highlighter: null,
 };
 
-export const monacoStore = create<MonacoState>()(
-  devtools((set, get) => ({
-    ...initialMonacoState,
-    // Separate "namespace" for actions
-    actions: {
-      setVariableSuggestions(variableSuggestions) {
-        set({ variableSuggestions });
-      },
-      setMonacoTheme(isDark) {
-        const monaco = get().monaco;
-        const monacoTheme = isDark ? MONACO_THEME_NAME.dark : MONACO_THEME_NAME.light;
-        monaco?.editor.setTheme(monacoTheme);
-      },
-      async setupHighlighter(isDark) {
-        const { highlighter: prevHighlighter, monaco, actions } = get();
-        const highlighter =
-          prevHighlighter ??
-          (await createHighlighter({
-            themes: [MONACO_THEME_NAME.light, MONACO_THEME_NAME.dark],
-            langs: ['javascript', 'typescript', 'json'],
-          }));
-        // Create the highlighter
-        // Register the themes from Shiki, and provide syntax highlighting for Monaco.
-        shikiToMonaco(highlighter, monaco);
-        actions.setMonacoTheme(isDark);
+let highlighterPromise: Promise<ShikiHighlighter> | null = null;
+
+// Fixes console warning:
+// [Shiki] 10 instances have been created. Shiki is supposed to be used as a singleton, consider refactoring your code
+// to cache your highlighter instance; Or call `highlighter.dispose()` to release unused instances.
+const getHighlighter = async (): Promise<ShikiHighlighter> => {
+  highlighterPromise ??= createHighlighter({
+    themes: [...SUPPORTED_THEMES],
+    langs: [...SUPPORTED_LANGUAGES],
+  });
+  return await highlighterPromise;
+};
+
+const monacoState: StateCreator<MonacoState> = (set, get) => ({
+  ...initialMonacoState,
+  // Separate "namespace" for actions
+  actions: {
+    setVariableSuggestions(variableSuggestions) {
+      set({ variableSuggestions });
+    },
+    setMonacoTheme(isDark) {
+      const monaco = get().monaco;
+      const monacoTheme = isDark ? MONACO_THEME_NAME.dark : MONACO_THEME_NAME.light;
+      monaco?.editor.setTheme(monacoTheme);
+    },
+    async setupHighlighter(isDark) {
+      const { highlighter: prevHighlighter, monaco, actions } = get();
+      const highlighter = prevHighlighter ?? (await getHighlighter());
+      // Create the highlighter
+      // Register the themes from Shiki, and provide syntax highlighting for Monaco.
+      shikiToMonaco(highlighter, monaco);
+      actions.setMonacoTheme(isDark);
+      if (!prevHighlighter) {
         set({ highlighter });
-      },
-      async setMonaco() {
-        const monaco = await import('monaco-editor');
-        // for cypress
-        window.monaco = monaco;
-        set({ monaco });
-        monaco.languages.register({ id: TEMPLATE_LANGUAGE });
-        monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-          // Fixes when `$schema` is `https://json-schema.org/draft/2020-12/schema`
-          // The schema uses meta-schema features ($dynamicRef) that are not yet supported by the validator
-          schemas: [
-            {
-              // Configure JSON language service with Monaco-compatible schema
-              uri: 'https://json-schema.org/draft/2020-12/schema',
-              fileMatch: ['json-schema-*.json'],
-              schema: monacoCompatibleSchema,
-            },
-          ],
-          enableSchemaRequest: true,
-        });
-        return [
-          // Define tokens for template variables
-          monaco.languages.setMonarchTokensProvider(TEMPLATE_LANGUAGE, {
-            tokenizer: {
-              root: [[/\{\{([^}]+)}}/, VARIABLE_TOKEN]],
-            },
-          }),
-          monaco.languages.registerCompletionItemProvider(TEMPLATE_LANGUAGE, {
-            triggerCharacters: ['{'],
-            provideCompletionItems(model, position) {
-              const { variableSuggestions } = get();
-
-              const textUntilPosition = model.getValueInRange({
-                startLineNumber: 1,
-                startColumn: 1,
-                endLineNumber: position.lineNumber,
-                endColumn: position.column,
-              });
-
-              // Check if we're inside a template variable (after {)
-              const match = textUntilPosition.match(/\{([^}]*)$/);
-              if (!match) {
-                console.log('No template variable match found');
-                return { suggestions: [] };
-              }
-
-              const query = match[1].toLowerCase();
-              const filteredSuggestions = variableSuggestions.filter((suggestion) =>
-                suggestion.toLowerCase().includes(query)
-              );
-
-              const word = model.getWordUntilPosition(position);
-              const range = new monaco.Range(
-                position.lineNumber,
-                word.startColumn,
-                position.lineNumber,
-                word.endColumn
-              );
-
-              const completionItems: Omit<
-                Monaco.languages.CompletionItem,
-                'kind' | 'range' | 'insertText'
-              >[] = [
-                // Add context suggestions
-                ...filteredSuggestions.map((label) => ({
-                  label,
-                  detail: 'Context variable',
-                  sortText: '0',
-                })),
-                // Add environment variables
-                {
-                  label: '$env.',
-                  detail: 'Environment variable',
-                  sortText: '1',
-                },
-              ];
-              return {
-                suggestions: completionItems.map((item) => ({
-                  kind: monaco.languages.CompletionItemKind.Module,
-                  range,
-                  insertText: `{${item.label}}}`,
-                  ...item,
-                })),
-              };
-            },
-          }),
-        ];
-      },
+        highlighterPromise = null;
+      }
     },
-  }))
-);
+    async setMonaco() {
+      const monaco = await import('monaco-editor');
+      // for cypress
+      window.monaco = monaco;
+      set({ monaco });
+      monaco.languages.register({ id: TEMPLATE_LANGUAGE });
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        // Fixes when `$schema` is `https://json-schema.org/draft/2020-12/schema`
+        // The schema uses meta-schema features ($dynamicRef) that are not yet supported by the validator
+        schemas: [
+          {
+            // Configure JSON language service with Monaco-compatible schema
+            uri: 'https://json-schema.org/draft/2020-12/schema',
+            fileMatch: ['json-schema-*.json'],
+            schema: monacoCompatibleSchema,
+          },
+        ],
+        enableSchemaRequest: true,
+      });
+      return [
+        // Define tokens for template variables
+        monaco.languages.setMonarchTokensProvider(TEMPLATE_LANGUAGE, {
+          tokenizer: {
+            root: [[/\{\{([^}]+)}}/, VARIABLE_TOKEN]],
+          },
+        }),
+        monaco.languages.registerCompletionItemProvider(TEMPLATE_LANGUAGE, {
+          triggerCharacters: ['{'],
+          provideCompletionItems(model, position) {
+            const { variableSuggestions } = get();
+
+            const textUntilPosition = model.getValueInRange({
+              startLineNumber: 1,
+              startColumn: 1,
+              endLineNumber: position.lineNumber,
+              endColumn: position.column,
+            });
+
+            // Check if we're inside a template variable (after {)
+            const match = textUntilPosition.match(/\{([^}]*)$/);
+            if (!match) {
+              console.log('No template variable match found');
+              return { suggestions: [] };
+            }
+
+            const query = match[1].toLowerCase();
+            const filteredSuggestions = variableSuggestions.filter((suggestion) =>
+              suggestion.toLowerCase().includes(query)
+            );
+
+            const word = model.getWordUntilPosition(position);
+            const range = new monaco.Range(
+              position.lineNumber,
+              word.startColumn,
+              position.lineNumber,
+              word.endColumn
+            );
+
+            const completionItems: Omit<
+              Monaco.languages.CompletionItem,
+              'kind' | 'range' | 'insertText'
+            >[] = [
+              // Add context suggestions
+              ...filteredSuggestions.map((label) => ({
+                label,
+                detail: 'Context variable',
+                sortText: '0',
+              })),
+              // Add environment variables
+              {
+                label: '$env.',
+                detail: 'Environment variable',
+                sortText: '1',
+              },
+            ];
+            return {
+              suggestions: completionItems.map((item) => ({
+                kind: monaco.languages.CompletionItemKind.Module,
+                range,
+                insertText: `{${item.label}}}`,
+                ...item,
+              })),
+            };
+          },
+        }),
+      ];
+    },
+  },
+});
+
+export const monacoStore = create<MonacoState>()(devtools(monacoState));
 
 /**
  * Actions are functions that update values in your store.

package/src/hooks/use-did-update.ts

@@ -0,0 +1,25 @@
+import { type DependencyList, type EffectCallback, useEffect, useRef } from 'react';
+
+/**
+ * Copied from @mantine/hooks
+ * @see https://github.com/mantinedev/mantine/blob/master/packages/@mantine/hooks/src/use-did-update/use-did-update.ts
+ */
+export function useDidUpdate(fn: EffectCallback, dependencies?: DependencyList) {
+  const mounted = useRef(false);
+
+  useEffect(
+    () => () => {
+      mounted.current = false;
+    },
+    []
+  );
+
+  useEffect(() => {
+    if (mounted.current) {
+      return fn();
+    }
+
+    mounted.current = true;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: ignore
+  }, dependencies);
+}

package/src/hooks/use-project-data.ts

@@ -6,8 +6,7 @@ import { fetchProjectAction } from '@/lib/actions/projects';
 import type { Project } from '@/lib/types/project';
 
 export function useProjectData() {
-  const params = useParams();
-  const { tenantId, projectId } = params;
+  const { tenantId, projectId } = useParams();
   const [project, setProject] = useState<Project | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);