@inkeep/agents-manage-ui 0.23.4 → 0.24.0

package/src/components/agent/playground/playground.tsx

@@ -1,11 +1,13 @@
 import { Bug, X } from 'lucide-react';
-import { nanoid } from 'nanoid';
 import { useState } from 'react';
+import { toast } from 'sonner';
 import { TimelineWrapper } from '@/components/traces/timeline/timeline-wrapper';
 import { Button } from '@/components/ui/button';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
 import { useChatActivitiesPolling } from '@/hooks/use-chat-activities-polling';
 import type { DataComponent } from '@/lib/api/data-components';
+import { generateId } from '@/lib/utils/id-utils';
+import { copyTraceToClipboard } from '@/lib/utils/trace-formatter';
 import { ChatWidget } from './chat-widget';
 import CustomHeadersDialog from './custom-headers-dialog';
 
@@ -26,9 +28,10 @@ export const Playground = ({
   setShowPlayground,
   dataComponentLookup = {},
 }: PlaygroundProps) => {
-  const [conversationId, setConversationId] = useState<string>(nanoid());
+  const [conversationId, setConversationId] = useState<string>(generateId());
   const [customHeaders, setCustomHeaders] = useState<Record<string, string>>({});
   const [showTraces, setShowTraces] = useState<boolean>(false);
+  const [isCopying, setIsCopying] = useState(false);
   const {
     chatActivities,
     isPolling,
@@ -41,6 +44,31 @@ export const Playground = ({
     conversationId,
   });
 
+  const handleCopyTrace = async () => {
+    if (!chatActivities) return;
+
+    setIsCopying(true);
+    try {
+      const result = await copyTraceToClipboard(chatActivities);
+      if (result.success) {
+        toast.success('Trace copied to clipboard', {
+          description: 'The OTEL trace has been copied successfully.',
+        });
+      } else {
+        toast.error('Failed to copy trace', {
+          description: result.error || 'An unknown error occurred',
+        });
+      }
+    } catch (err) {
+      toast.error('Failed to copy trace', {
+        description: err instanceof Error ? err.message : 'An unknown error occurred',
+      });
+    } finally {
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      setIsCopying(false);
+    }
+  };
+
   return (
     <div
       className={`bg-background z-10 flex flex-col border-l ${showTraces ? 'w-full' : 'w-1/3 min-w-96'}`}
@@ -103,6 +131,8 @@ export const Playground = ({
                 refreshOnce={refreshOnce}
                 showConversationTracesLink={true}
                 conversationId={conversationId}
+                onCopyTrace={handleCopyTrace}
+                isCopying={isCopying}
               />
             </>
           )}

package/src/components/agent/toolbar/toolbar.tsx

@@ -1,5 +1,5 @@
 import { Play, Settings } from 'lucide-react';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, type ComponentProps } from 'react';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useAgentStore } from '@/features/agent/state/use-agent-store';
@@ -20,14 +20,20 @@ export function Toolbar({
 }: ToolbarProps) {
   const dirty = useAgentStore((state) => state.dirty);
   const saveButtonRef = useRef<HTMLButtonElement>(null);
+
+  const commonProps: ComponentProps<typeof Button> = {
+    className: 'backdrop-blur-3xl',
+    type: 'button',
+    variant: 'outline',
+  };
+
   const PreviewButton = (
     <Button
+      {...commonProps}
       disabled={dirty || inPreviewDisabled}
-      variant="outline"
-      type="button"
       onClick={() => setShowPlayground(true)}
     >
-      <Play className="w-4 h-4 text-muted-foreground" />
+      <Play className="size-4 text-muted-foreground" />
       Try it
     </Button>
   );
@@ -48,10 +54,14 @@ export function Toolbar({
   }, []);
 
   return (
-    <div className="flex gap-2">
+    <div className="flex gap-2 flex-wrap justify-end content-start">
       {dirty || inPreviewDisabled ? (
         <Tooltip>
           <TooltipTrigger asChild>
+            {/**
+             * Wrap the disabled button in a <div> that can receive hover events since disabled <button> elements
+             * don’t trigger pointer events in the browser
+             **/}
             <div>{PreviewButton}</div>
           </TooltipTrigger>
           <TooltipContent>
@@ -64,6 +74,7 @@ export function Toolbar({
         PreviewButton
       )}
       <Button
+        {...commonProps}
         onClick={onSubmit}
         variant={dirty ? 'default' : 'outline'}
         disabled={!dirty && !inPreviewDisabled}
@@ -71,8 +82,8 @@ export function Toolbar({
       >
         {inPreviewDisabled ? 'Save' : 'Save changes'}
       </Button>
-      <Button type="button" variant="outline" onClick={toggleSidePane}>
-        <Settings className="w-4 h-4" />
+      <Button {...commonProps} onClick={toggleSidePane}>
+        <Settings className="size-4" />
         Agent Settings
       </Button>
     </div>

package/src/components/mcp-servers/form/mcp-server-form.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import { generateId } from '@/lib/utils/id-utils';
 import { detectAuthenticationRequired, MCPTransportType } from '@inkeep/agents-core/client-exports';
-import { nanoid } from 'nanoid';
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
@@ -82,7 +82,7 @@ export function MCPServerForm({
     try {
       // handle oauth login
       if (data.credentialReferenceId === 'oauth') {
-        const toolId = nanoid();
+        const toolId = generateId();
 
         const isAuthenticationRequired = await detectAuthenticationRequired({
           serverUrl: data.config.mcp.server.url,
@@ -146,7 +146,7 @@ export function MCPServerForm({
       } else {
         const newTool = await createMCPTool(tenantId, projectId, {
           ...transformedData,
-          id: nanoid(),
+          id: generateId(),
         });
         toast.success('MCP server created successfully');
         router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${newTool.id}`);

package/src/components/mcp-servers/selection/mcp-server-selection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { nanoid } from 'nanoid';
+import { generateId } from '@/lib/utils/id-utils';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -39,7 +39,7 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
     try {
       // Transform prebuilt server data to MCPToolFormData format
       const mcpToolData = {
-        id: nanoid(),
+        id: generateId(),
         name: server.name,
         config: {
           type: 'mcp' as const,
@@ -62,7 +62,7 @@ export function MCPServerSelection({ credentials, tenantId, projectId }: MCPServ
         toast.success(`${server.name} MCP server created successfully`);
         router.push(`/${tenantId}/projects/${projectId}/mcp-servers/${newTool.id}`);
       } else {
-        handleOAuthLogin({toolId: newTool.id, mcpServerUrl: server.url, toolName: server.name});
+        handleOAuthLogin({ toolId: newTool.id, mcpServerUrl: server.url, toolName: server.name });
       }
     } catch (error) {
       console.error('Failed to create prebuilt MCP server:', error);

package/src/components/traces/timeline/render-panel-content.tsx

@@ -1,4 +1,6 @@
 import dynamic from 'next/dynamic';
+import { useState } from 'react';
+import { Streamdown } from 'streamdown';
 import { formatDateTime } from '@/app/utils/format-date';
 import { SignozSpanLink } from '@/components/traces/signoz-link';
 import {
@@ -13,6 +15,7 @@ import { Bubble, CodeBubble } from '@/components/traces/timeline/bubble';
 import { SpanAttributes } from '@/components/traces/timeline/span-attributes';
 import type { ConversationDetail, SelectedPanel } from '@/components/traces/timeline/types';
 import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
 
 const JsonEditorWithCopy = dynamic(
   () =>
@@ -30,6 +33,33 @@ function formatJsonSafely(content: string): string {
   }
 }
 
+function AssistantMessageContent({ content }: { content: string }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  
+  return (
+    <LabeledBlock label="AI response content">
+      <div className="relative">
+        <Bubble className={`break-words ${isExpanded ? '' : 'max-h-48 overflow-hidden'}`}>
+          <Streamdown>
+            {content}
+          </Streamdown>
+        </Bubble>
+        {!isExpanded && (
+          <div className="absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-white dark:from-gray-900 to-transparent pointer-events-none" />
+        )}
+      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="mt-2 w-full text-xs"
+      >
+        {isExpanded ? 'Show less' : 'Show more'}
+      </Button>
+    </LabeledBlock>
+  );
+}
+
 export function renderPanelContent({
   selected,
   findSpanById,
@@ -131,6 +161,16 @@ export function renderPanelContent({
       return (
         <>
           <Section>
+            <Info
+              label="Sub agent"
+              value={
+                a.subAgentId ? (
+                  <Badge variant="code">{a.subAgentId}</Badge>
+                ) : (
+                  'Unknown'
+                )
+              }
+            />
             {a.hasError && a.otelStatusDescription && (
               <LabeledBlock label="Error">
                 <Bubble className="bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
@@ -171,12 +211,9 @@ export function renderPanelContent({
       return (
         <>
           <Section>
-            <LabeledBlock label="AI response content">
-              <Bubble className=" whitespace-pre-wrap break-words">
-                {a.aiResponseContent || 'Response content not available'}
-              </Bubble>
-            </LabeledBlock>
             <Info label="Sub agent" value={a.subAgentName || 'Unknown'} />
+            <AssistantMessageContent content={a.aiResponseContent || 'Response content not available'} />
+            
             <StatusBadge status={a.status} />
             <Info label="Activity timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
@@ -404,10 +441,13 @@ export function renderPanelContent({
         <>
           <Section>
             <Info label="Model" value={<ModelBadge model={a.aiStreamTextModel || 'Unknown'} />} />
-            <Info
-              label="Operation id"
-              value={<Badge variant="code">{a.aiStreamTextOperationId || 'Unknown'}</Badge>}
-            />
+
+            {a.aiTelemetryFunctionId && (
+              <Info
+                label="Sub agent"
+                value={<Badge variant="code">{a.aiTelemetryFunctionId}</Badge>}
+              />
+            )}
             <Info label="Input tokens" value={a.inputTokens?.toLocaleString() || '0'} />
             <Info label="Output tokens" value={a.outputTokens?.toLocaleString() || '0'} />
             <StatusBadge status={a.status} />
@@ -424,6 +464,12 @@ export function renderPanelContent({
         <>
           <Section>
             <Info label="Model" value={<ModelBadge model={a.aiStreamObjectModel || 'Unknown'} />} />
+            {a.aiTelemetryFunctionId && (
+              <Info
+                label="Sub agent"
+                value={<Badge variant="code">{a.aiTelemetryFunctionId}</Badge>}
+              />
+            )}
             <Info label="Input tokens" value={a.inputTokens?.toLocaleString() || '0'} />
             <Info label="Output tokens" value={a.outputTokens?.toLocaleString() || '0'} />
             {a.aiStreamObjectContent && (

package/src/components/traces/timeline/timeline-item.tsx

@@ -182,6 +182,13 @@ export function TimelineItem({
             </div>
           )}
 
+          {/* subagent badge for AI assistant message */}
+          {activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE && activity.subAgentName && (
+            <div className="mb-1">
+              <Badge variant="code">{activity.subAgentName}</Badge>
+            </div>
+          )}
+
           {/* streamed text bubble */}
           {activity.type === 'ai_model_streamed_text' && activity.aiStreamTextContent && (
             <div className="space-y-2">
@@ -210,6 +217,15 @@ export function TimelineItem({
             </div>
           )}
 
+          {/* ai.telemetry.functionId badge for streamed text */}
+          {activity.type === 'ai_model_streamed_text' && activity.aiTelemetryFunctionId && (
+            <div className="mb-1">
+              <Badge variant="code" className="text-xs">
+                {activity.aiTelemetryFunctionId}
+              </Badge>
+            </div>
+          )}
+
           {/* streamed object bubble */}
           {activity.type === 'ai_model_streamed_object' && activity.aiStreamObjectContent && (
             <div className="space-y-2">
@@ -244,6 +260,15 @@ export function TimelineItem({
             </div>
           )}
 
+          {/* ai.telemetry.functionId badge for streamed object */}
+          {activity.type === 'ai_model_streamed_object' && activity.aiTelemetryFunctionId && (
+            <div className="mb-1">
+              <Badge variant="code" className="text-xs">
+                {activity.aiTelemetryFunctionId}
+              </Badge>
+            </div>
+          )}
+
           {/* context fetch url */}
           {activity.type === 'context_fetch' && activity.toolResult && (
             <div className="mb-1">
@@ -335,6 +360,13 @@ export function TimelineItem({
             </div>
           )}
 
+          {/* agent ID for agent generation */}
+          {activity.type === ACTIVITY_TYPES.AGENT_GENERATION && activity.subAgentId && (
+            <div className="mb-1">
+              <Badge variant="code">{activity.subAgentId}</Badge>
+            </div>
+          )}
+
           {/* ai.telemetry.functionId badge for ai.toolCall spans that aren't delegate or transfers */}
           {activity.type === ACTIVITY_TYPES.TOOL_CALL &&
             activity.aiTelemetryFunctionId &&

package/src/features/agent/domain/deserialize.ts

@@ -1,6 +1,6 @@
+import { generateId } from '@/lib/utils/id-utils';
 import type { Edge, Node } from '@xyflow/react';
 import * as dagre from 'dagre';
-import { nanoid } from 'nanoid';
 import { EdgeType } from '@/components/agent/configuration/edge-types';
 import {
   agentNodeSourceHandleId,
@@ -205,7 +205,7 @@ export function deserializeAgentData(data: FullAgentDefinition): TransformResult
     if ('canUse' in agent && agent.canUse && agent.canUse.length > 0) {
       for (const canUseItem of agent.canUse) {
         const toolId = canUseItem.toolId;
-        const toolNodeId = nanoid();
+        const toolNodeId = generateId();
         const relationshipId = canUseItem.agentToolRelationId;
 
         const tool = data.tools?.[toolId] || data.functionTools?.[toolId];

package/src/features/agent/domain/serialize.ts

@@ -1,5 +1,5 @@
+import { generateId } from '@/lib/utils/id-utils';
 import type { Edge, Node } from '@xyflow/react';
-import { nanoid } from 'nanoid';
 import type { AgentToolConfigLookup } from '@/components/agent/agent';
 import type { AgentMetadata } from '@/components/agent/configuration/agent-types';
 import type { A2AEdgeData } from '@/components/agent/configuration/edge-types';
@@ -259,7 +259,7 @@ export function serializeAgentData(
         ...(stopWhen && { stopWhen }),
       };
 
-      if ((node.data as any).isDefault) {
+      if (node.data.isDefault) {
         defaultSubAgentId = subAgentId;
       }
 
@@ -280,7 +280,7 @@ export function serializeAgentData(
         credentialReferenceId: (node.data.credentialReferenceId as string) || null,
       };
 
-      if ((node.data as any).isDefault) {
+      if (node.data.isDefault) {
         defaultSubAgentId = subAgentId;
       }
 
@@ -378,7 +378,7 @@ export function serializeAgentData(
   }
 
   const result: FullAgentDefinition = {
-    id: metadata?.id || nanoid(),
+    id: metadata?.id || generateId(),
     name: metadata?.name || 'Untitled Agent',
     description: metadata?.description || undefined,
     defaultSubAgentId,
@@ -432,7 +432,7 @@ export function serializeAgentData(
 
   // Add contextConfig if there's meaningful data
   if (hasContextConfig && metadata?.contextConfig) {
-    const contextConfigId = metadata.contextConfig.id || nanoid();
+    const contextConfigId = metadata.contextConfig.id || generateId();
     (result as any).contextConfigId = contextConfigId;
     (result as any).contextConfig = {
       id: contextConfigId,

package/src/hooks/use-auto-prefill-id-zustand.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { generateId } from '@/lib/utils/generate-id';
+import { generateIdFromName } from '@/lib/utils/generate-id';
 
 interface UseAutoPrefillIdZustandOptions {
   nameValue: string | undefined;
@@ -56,7 +56,7 @@ export function useAutoPrefillIdZustand({
   // Auto-prefill ID based on name field
   useEffect(() => {
     if (!isEditing && nameValue && !hasManuallyEditedId.current) {
-      const generatedId = generateId(nameValue);
+      const generatedId = generateIdFromName(nameValue);
 
       // Only update if the generated ID is different from current ID
       if (generatedId !== currentIdValue.current) {

package/src/hooks/use-auto-prefill-id.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { type FieldValues, type UseFormReturn, useWatch } from 'react-hook-form';
-import { generateId } from '@/lib/utils/generate-id';
+import { generateId } from '@/lib/utils/id-utils';
 
 interface UseAutoPrefillIdOptions<T extends FieldValues> {
   form: UseFormReturn<T>;

package/src/lib/actions/data-components.ts

@@ -95,9 +95,10 @@ export async function updateDataComponentAction(
     };
   } catch (error) {
     if (error instanceof ApiError) {
+      const errorMessage = error.error.message ?? error.message;
       return {
         success: false,
-        error: error.message,
+        error: errorMessage,
         code: error.error.code,
       };
     }

package/src/lib/utils/generate-id.ts

@@ -3,7 +3,7 @@
  * @param name - The name to generate an ID from
  * @returns The generated ID
  */
-export const generateId = (name: string) => {
+export const generateIdFromName = (name: string) => {
   return name
     .toLowerCase()
     .trim()

package/src/lib/utils/id-utils.ts

@@ -0,0 +1,4 @@
+import { customAlphabet } from 'nanoid';
+
+// This ensures IDs are always lowercase and never start with a hyphen
+export const generateId = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 21);

package/.next/standalone/agents-manage-ui/.next/server/chunks/3884.js

@@ -1 +0,0 @@
-"use strict";exports.id=3884,exports.ids=[3884],exports.modules={29122:(a,b,c)=>{c.r(b),c.d(b,{conf:()=>d,language:()=>e});var d={comments:{lineComment:"REM"},brackets:[["{","}"],["[","]"],["(",")"]],autoClosingPairs:[{open:"{",close:"}"},{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'}],surroundingPairs:[{open:"[",close:"]"},{open:"(",close:")"},{open:'"',close:'"'}],folding:{markers:{start:RegExp("^\\s*(::\\s*|REM\\s+)#region"),end:RegExp("^\\s*(::\\s*|REM\\s+)#endregion")}}},e={defaultToken:"",ignoreCase:!0,tokenPostfix:".bat",brackets:[{token:"delimiter.bracket",open:"{",close:"}"},{token:"delimiter.parenthesis",open:"(",close:")"},{token:"delimiter.square",open:"[",close:"]"}],keywords:/call|defined|echo|errorlevel|exist|for|goto|if|pause|set|shift|start|title|not|pushd|popd/,symbols:/[=><!~?&|+\-*\/\^;\.,]+/,escapes:/\\(?:[abfnrtv\\"']|x[0-9A-Fa-f]{1,4}|u[0-9A-Fa-f]{4}|U[0-9A-Fa-f]{8})/,tokenizer:{root:[[/^(\s*)(rem(?:\s.*|))$/,["","comment"]],[/(\@?)(@keywords)(?!\w)/,[{token:"keyword"},{token:"keyword.$2"}]],[/[ \t\r\n]+/,""],[/setlocal(?!\w)/,"keyword.tag-setlocal"],[/endlocal(?!\w)/,"keyword.tag-setlocal"],[/[a-zA-Z_]\w*/,""],[/:\w*/,"metatag"],[/%[^%]+%/,"variable"],[/%%[\w]+(?!\w)/,"variable"],[/[{}()\[\]]/,"@brackets"],[/@symbols/,"delimiter"],[/\d*\.\d+([eE][\-+]?\d+)?/,"number.float"],[/0[xX][0-9a-fA-F_]*[0-9a-fA-F]/,"number.hex"],[/\d+/,"number"],[/[;,.]/,"delimiter"],[/"/,"string",'@string."'],[/'/,"string","@string.'"]],string:[[/[^\\"'%]+/,{cases:{"@eos":{token:"string",next:"@popall"},"@default":"string"}}],[/@escapes/,"string.escape"],[/\\./,"string.escape.invalid"],[/%[\w ]+%/,"variable"],[/%%[\w]+(?!\w)/,"variable"],[/["']/,{cases:{"$#==$S2":{token:"string",next:"@pop"},"@default":"string"}}],[/$/,"string","@popall"]]}}}};