@inkeep/agents-manage-ui 0.15.0 → 0.16.0

package/src/components/mcp-servers/view-mcp-server-details.tsx

@@ -191,16 +191,16 @@ export function ViewMCPServerDetails({
         {/* Server URL */}
         <div className="space-y-2">
           <ItemLabel>Server URL</ItemLabel>
-          <CopyableSingleLineCode code={tool.config.mcp.server.url} />
+          {tool.config.type === 'mcp' && <CopyableSingleLineCode code={tool.config.mcp.server.url} />}
         </div>
 
         {/* Transport and Credential */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          {tool.config.mcp.transport && (
+          {(tool.config as any).mcp.transport && (
             <div className="space-y-2">
               <ItemLabel>Transport Type</ItemLabel>
               <ItemValue>
-                {<Badge variant="code">{tool.config.mcp.transport.type}</Badge>}
+                {<Badge variant="code">{(tool.config as any).mcp.transport.type}</Badge>}
               </ItemValue>
             </div>
           )}
@@ -235,13 +235,13 @@ export function ViewMCPServerDetails({
           <div className="flex gap-2 items-center">
             <ItemLabel>Active Tools</ItemLabel>
             <Badge variant="code" className="border-none px-2 text-[10px] text-muted-foreground">
-              {tool.config.mcp.activeTools === undefined
+              {(tool.config as any).mcp.activeTools === undefined
                 ? (tool.availableTools?.length ?? 0)
-                : (tool.config.mcp.activeTools?.length ?? 0)}
+                : ((tool.config as any).mcp.activeTools?.length ?? 0)}
             </Badge>
           </div>
           <ItemValue>
-            {tool.config.mcp.activeTools === undefined ? (
+            {(tool.config as any).mcp.activeTools === undefined ? (
               // All tools are active (undefined means all)
               tool.availableTools && tool.availableTools.length > 0 ? (
                 <div className="flex flex-wrap gap-2">
@@ -256,10 +256,11 @@ export function ViewMCPServerDetails({
               ) : (
                 <div className="text-sm text-muted-foreground">No tools available</div>
               )
-            ) : tool.config.mcp.activeTools && tool.config.mcp.activeTools.length > 0 ? (
+            ) : (tool.config as any).mcp.activeTools &&
+              (tool.config as any).mcp.activeTools.length > 0 ? (
               // Specific tools are active - check availability
               <div className="flex flex-wrap gap-2">
-                {tool.config.mcp.activeTools.map((toolName) => {
+                {(tool.config as any).mcp.activeTools.map((toolName: string) => {
                   const isAvailable =
                     tool.availableTools?.some((t) => t.name === toolName) ?? false;
                   return (
@@ -278,7 +279,7 @@ export function ViewMCPServerDetails({
         {tool.availableTools && tool.availableTools.length > 0 && (
           <AvailableToolsCard
             tools={tool.availableTools}
-            activeTools={tool.config.mcp.activeTools}
+            activeTools={(tool.config as any).mcp.activeTools}
           />
         )}
       </div>

package/src/components/projects/form/form-configuration.ts

@@ -24,4 +24,10 @@ export const defaultValues: ProjectFormData = {
     },
   },
   stopWhen: undefined,
+  sandboxConfig: {
+    provider: 'local',
+    runtime: 'node22',
+    timeout: 30000,
+    vcpus: 1,
+  },
 };

package/src/components/projects/form/project-form.tsx

@@ -1,9 +1,11 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
+import type { SandboxConfigSchema } from '@inkeep/agents-core/client-exports';
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
+import type { z } from 'zod';
 import { GenericInput } from '@/components/form/generic-input';
 import { GenericTextarea } from '@/components/form/generic-textarea';
 import { Button } from '@/components/ui/button';
@@ -13,6 +15,7 @@ import { useAutoPrefillId } from '@/hooks/use-auto-prefill-id';
 import { createProjectAction, updateProjectAction } from '@/lib/actions/projects';
 import { defaultValues } from './form-configuration';
 import { ProjectModelsSection } from './project-models-section';
+import { ProjectSandboxSection } from './project-sandbox-section';
 import { ProjectStopWhenSection } from './project-stopwhen-section';
 import { type ProjectFormData, projectSchema } from './validation';
 
@@ -55,6 +58,38 @@ const serializeData = (data: ProjectFormData) => {
 
     return cleaned;
   };
+  const cleanSandboxConfig = (
+    sandboxConfig: z.infer<typeof SandboxConfigSchema> | null | undefined
+  ): z.infer<typeof SandboxConfigSchema> | undefined => {
+    // If sandboxConfig is null, undefined, or empty object, return undefined
+    if (
+      !sandboxConfig ||
+      (typeof sandboxConfig === 'object' && Object.keys(sandboxConfig).length === 0)
+    ) {
+      return undefined;
+    }
+
+    const cleaned: Partial<NonNullable<z.infer<typeof SandboxConfigSchema>>> = {};
+    if (sandboxConfig.provider) {
+      cleaned.provider = sandboxConfig.provider;
+    }
+    if (sandboxConfig.runtime) {
+      cleaned.runtime = sandboxConfig.runtime;
+    }
+    if (sandboxConfig.timeout !== null && sandboxConfig.timeout !== undefined) {
+      cleaned.timeout = sandboxConfig.timeout;
+    }
+    if (sandboxConfig.vcpus !== null && sandboxConfig.vcpus !== undefined) {
+      cleaned.vcpus = sandboxConfig.vcpus;
+    }
+
+    // If no valid properties, return undefined
+    if (Object.keys(cleaned).length === 0) {
+      return undefined;
+    }
+
+    return cleaned as z.infer<typeof SandboxConfigSchema>;
+  };
 
   return {
     ...data,
@@ -78,6 +113,7 @@ const serializeData = (data: ProjectFormData) => {
         : undefined,
     },
     stopWhen: cleanStopWhen(data.stopWhen),
+    sandboxConfig: cleanSandboxConfig(data.sandboxConfig),
   };
 };
 
@@ -186,6 +222,10 @@ export function ProjectForm({
 
         <ProjectStopWhenSection control={form.control} />
 
+        <Separator />
+
+        <ProjectSandboxSection control={form.control} />
+
         <div className={`flex gap-3 ${onCancel ? 'justify-end' : 'justify-start'}`}>
           {onCancel && (
             <Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>

package/src/components/projects/form/project-sandbox-section.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { ChevronRight, Info } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { type Control, useFormState } from 'react-hook-form';
+import { GenericInput } from '@/components/form/generic-input';
+import { GenericSelect } from '@/components/form/generic-select';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { InfoCard } from '@/components/ui/info-card';
+import { Label } from '@/components/ui/label';
+import type { ProjectFormData } from './validation';
+
+interface ProjectSandboxSectionProps {
+  control: Control<ProjectFormData>;
+}
+
+const providerOptions = [
+  { value: 'local', label: 'Local' },
+  { value: 'vercel', label: 'Vercel' },
+  { value: 'daytona', label: 'Daytona' },
+];
+
+const runtimeOptions = [
+  { value: 'node22', label: 'Node.js 22' },
+  { value: 'typescript', label: 'TypeScript' },
+];
+
+export function ProjectSandboxSection({ control }: ProjectSandboxSectionProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { errors } = useFormState({ control });
+
+  const hasSandboxErrors = !!(
+    errors.sandboxConfig?.provider ||
+    errors.sandboxConfig?.runtime ||
+    errors.sandboxConfig?.timeout ||
+    errors.sandboxConfig?.vcpus
+  );
+
+  // Auto-open the collapsible when there are errors in the sandbox section
+  useEffect(() => {
+    if (hasSandboxErrors) {
+      setIsOpen(true);
+    }
+  }, [hasSandboxErrors]);
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label className="text-sm font-medium">Sandbox configuration</Label>
+        <p className="text-sm text-muted-foreground mt-1">
+          Configure the execution environment for functions in this project
+        </p>
+      </div>
+
+      <Collapsible
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        className="border rounded-md bg-background"
+      >
+        <CollapsibleTrigger asChild>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="flex items-center justify-start gap-2 w-full group p-0 h-auto hover:!bg-transparent transition-colors py-2 px-4"
+          >
+            <ChevronRight className="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-90" />
+            Configure sandbox settings
+          </Button>
+        </CollapsibleTrigger>
+        <CollapsibleContent className="space-y-6 mt-4 data-[state=closed]:animate-[collapsible-up_200ms_ease-out] data-[state=open]:animate-[collapsible-down_200ms_ease-out] overflow-hidden px-4 pb-6">
+          <div className="space-y-4">
+            <GenericSelect
+              control={control}
+              name="sandboxConfig.provider"
+              label="Provider"
+              description="Choose the sandbox provider for function execution."
+              options={providerOptions}
+              placeholder="Select a provider"
+              selectTriggerClassName="w-full"
+              isRequired
+            />
+
+            <GenericSelect
+              control={control}
+              name="sandboxConfig.runtime"
+              label="Runtime"
+              description="Select the runtime environment for your functions."
+              options={runtimeOptions}
+              placeholder="Select a runtime"
+              selectTriggerClassName="w-full"
+              isRequired
+            />
+
+            <GenericInput
+              control={control}
+              name="sandboxConfig.timeout"
+              label="Timeout (ms)"
+              placeholder="30000"
+              description="Maximum execution time for functions in milliseconds (1000-300000)."
+              type="number"
+              min="1000"
+              max="300000"
+            />
+
+            <GenericInput
+              control={control}
+              name="sandboxConfig.vcpus"
+              label="vCPUs"
+              placeholder="1"
+              description="Number of virtual CPUs allocated for function execution (1-8)."
+              type="number"
+              min="1"
+              max="8"
+            />
+          </div>
+
+          <InfoCard title="Sandbox configuration info:" Icon={Info}>
+            <div className="text-sm space-y-2">
+              <p>
+                <strong>Local:</strong> Functions run in your local environment with full access to
+                system resources.
+              </p>
+              <p>
+                <strong>Vercel:</strong> Functions run on Vercel's serverless platform with
+                automatic scaling.
+              </p>
+              <p>
+                <strong>Daytona:</strong> Functions run in isolated development environments with
+                persistent storage.
+              </p>
+            </div>
+          </InfoCard>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  );
+}

package/src/components/projects/form/validation.ts

@@ -1,3 +1,4 @@
+import { SandboxConfigSchema } from '@inkeep/agents-core/client-exports';
 import { z } from 'zod';
 
 const modelSettingsSchema = z.object({
@@ -24,6 +25,8 @@ const projectStopWhenSchema = z
   })
   .optional();
 
+const sandboxConfigSchema = SandboxConfigSchema.optional();
+
 export const projectSchema = z.object({
   id: z
     .string()
@@ -42,6 +45,7 @@ export const projectSchema = z.object({
     .max(500, 'Description must be less than 500 characters'),
   models: projectModelsSchema,
   stopWhen: projectStopWhenSchema,
+  sandboxConfig: sandboxConfigSchema,
 });
 
 export type ProjectFormData = z.infer<typeof projectSchema>;

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

@@ -10,9 +10,24 @@ import {
   StatusBadge,
 } from '@/components/traces/timeline/blocks';
 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 { SpanAttributes } from '@/components/traces/timeline/span-attributes';
+
+// Reusable component for tool arguments/results
+function ToolDataBlock({ label, data }: { label: string; data: string }) {
+  return (
+    <LabeledBlock label={label}>
+      <Streamdown>{`\`\`\`json\n${(() => {
+        try {
+          return JSON.stringify(JSON.parse(data), null, 2);
+        } catch {
+          return data;
+        }
+      })()}\n\`\`\``}</Streamdown>
+    </LabeledBlock>
+  );
+}
 
 export function renderPanelContent({
   selected,
@@ -273,32 +288,8 @@ export function renderPanelContent({
               }
             />
             <StatusBadge status={a.status} />
-            {a.toolCallArgs && (
-              <LabeledBlock label="Tool arguments">
-                <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${(() => {
-                    try {
-                      return JSON.stringify(JSON.parse(a.toolCallArgs), null, 2);
-                    } catch {
-                      return a.toolCallArgs;
-                    }
-                  })()}\n\`\`\``}</Streamdown>
-                </CodeBubble>
-              </LabeledBlock>
-            )}
-            {a.toolCallResult && (
-              <LabeledBlock label="Tool result">
-                <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${(() => {
-                    try {
-                      return JSON.stringify(JSON.parse(a.toolCallResult), null, 2);
-                    } catch {
-                      return a.toolCallResult;
-                    }
-                  })()}\n\`\`\``}</Streamdown>
-                </CodeBubble>
-              </LabeledBlock>
-            )}
+            {a.toolCallArgs && <ToolDataBlock label="Tool arguments" data={a.toolCallArgs} />}
+            {a.toolCallResult && <ToolDataBlock label="Tool result" data={a.toolCallResult} />}
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
           <Divider />
@@ -330,32 +321,8 @@ export function renderPanelContent({
               }
             />
             <StatusBadge status={a.status} />
-            {a.toolCallArgs && (
-              <LabeledBlock label="Tool arguments">
-                <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${(() => {
-                    try {
-                      return JSON.stringify(JSON.parse(a.toolCallArgs), null, 2);
-                    } catch {
-                      return a.toolCallArgs;
-                    }
-                  })()}\n\`\`\``}</Streamdown>
-                </CodeBubble>
-              </LabeledBlock>
-            )}
-            {a.toolCallResult && (
-              <LabeledBlock label="Tool result">
-                <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${(() => {
-                    try {
-                      return JSON.stringify(JSON.parse(a.toolCallResult), null, 2);
-                    } catch {
-                      return a.toolCallResult;
-                    }
-                  })()}\n\`\`\``}</Streamdown>
-                </CodeBubble>
-              </LabeledBlock>
-            )}
+            {a.toolCallArgs && <ToolDataBlock label="Tool arguments" data={a.toolCallArgs} />}
+            {a.toolCallResult && <ToolDataBlock label="Tool result" data={a.toolCallResult} />}
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
           <Divider />
@@ -388,32 +355,8 @@ export function renderPanelContent({
             </LabeledBlock>
             <Info label="Agent" value={a.agentName || 'Unknown agent'} />
             <StatusBadge status={a.status} />
-            {a.toolCallArgs && (
-              <LabeledBlock label="Tool arguments">
-                <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${(() => {
-                    try {
-                      return JSON.stringify(JSON.parse(a.toolCallArgs), null, 2);
-                    } catch {
-                      return a.toolCallArgs;
-                    }
-                  })()}\n\`\`\``}</Streamdown>
-                </CodeBubble>
-              </LabeledBlock>
-            )}
-            {a.toolCallResult && (
-              <LabeledBlock label="Tool result">
-                <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${(() => {
-                    try {
-                      return JSON.stringify(JSON.parse(a.toolCallResult), null, 2);
-                    } catch {
-                      return a.toolCallResult;
-                    }
-                  })()}\n\`\`\``}</Streamdown>
-                </CodeBubble>
-              </LabeledBlock>
-            )}
+            {a.toolCallArgs && <ToolDataBlock label="Tool arguments" data={a.toolCallArgs} />}
+            {a.toolCallResult && <ToolDataBlock label="Tool result" data={a.toolCallResult} />}
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
           <Divider />
@@ -442,32 +385,8 @@ export function renderPanelContent({
               </LabeledBlock>
             )}
             <StatusBadge status={a.status} />
-            {a.toolCallArgs && (
-              <LabeledBlock label="Tool arguments">
-                <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${(() => {
-                    try {
-                      return JSON.stringify(JSON.parse(a.toolCallArgs), null, 2);
-                    } catch {
-                      return a.toolCallArgs;
-                    }
-                  })()}\n\`\`\``}</Streamdown>
-                </CodeBubble>
-              </LabeledBlock>
-            )}
-            {a.toolCallResult && (
-              <LabeledBlock label="Tool result">
-                <CodeBubble className="max-h-60 overflow-y-auto">
-                  <Streamdown>{`\`\`\`json\n${(() => {
-                    try {
-                      return JSON.stringify(JSON.parse(a.toolCallResult), null, 2);
-                    } catch {
-                      return a.toolCallResult;
-                    }
-                  })()}\n\`\`\``}</Streamdown>
-                </CodeBubble>
-              </LabeledBlock>
-            )}
+            {a.toolCallArgs && <ToolDataBlock label="Tool arguments" data={a.toolCallArgs} />}
+            {a.toolCallResult && <ToolDataBlock label="Tool result" data={a.toolCallResult} />}
             <Info label="Timestamp" value={formatDateTime(a.timestamp)} />
           </Section>
           <Divider />

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

@@ -107,7 +107,7 @@ export function TimelineItem({
   const textColorClass =
     activity.status === 'error'
       ? 'text-red-500 hover:text-red-700'
-        : 'text-foreground hover:text-primary';
+      : 'text-foreground hover:text-primary';
 
   return (
     <div className={`flex flex-col text-muted-foreground relative text-xs`}>
@@ -392,8 +392,8 @@ export function TimelineItem({
 
           {/* ai.telemetry.functionId badge for ai.toolCall spans that aren't delegate or transfers */}
           {activity.type === ACTIVITY_TYPES.TOOL_CALL &&
-            activity.aiTelemetryFunctionId && 
-            activity.toolType !== 'delegation' && 
+            activity.aiTelemetryFunctionId &&
+            activity.toolType !== 'delegation' &&
             activity.toolType !== 'transfer' && (
               <div className="mb-1">
                 <Badge variant="code" className="text-xs">
@@ -403,29 +403,28 @@ export function TimelineItem({
             )}
 
           {/* Error display for failed AI/Agent generations */}
-          {(activity.hasError) &&
-            activity.otelStatusDescription && (
-              <div className="space-y-2">
-                <button
-                  type="button"
-                  onClick={() => onToggleAiMessageCollapse && onToggleAiMessageCollapse(activity.id)}
-                  className="flex items-center gap-1 text-xs text-red-500 hover:text-red-600 transition-colors"
-                  title={isAiMessageCollapsed ? 'Expand error message' : 'Collapse error message'}
-                >
-                  {isAiMessageCollapsed ? (
-                    <ChevronRight className="h-3 w-3" />
-                  ) : (
-                    <ChevronDown className="h-3 w-3" />
-                  )}
-                  Error Details
-                </button>
-                {!isAiMessageCollapsed && (
-                  <Bubble className="bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
-                    {activity.otelStatusDescription}
-                  </Bubble>
+          {activity.hasError && activity.otelStatusDescription && (
+            <div className="space-y-2">
+              <button
+                type="button"
+                onClick={() => onToggleAiMessageCollapse?.(activity.id)}
+                className="flex items-center gap-1 text-xs text-red-500 hover:text-red-600 transition-colors"
+                title={isAiMessageCollapsed ? 'Expand error message' : 'Collapse error message'}
+              >
+                {isAiMessageCollapsed ? (
+                  <ChevronRight className="h-3 w-3" />
+                ) : (
+                  <ChevronDown className="h-3 w-3" />
                 )}
-              </div>
-            )}
+                Error Details
+              </button>
+              {!isAiMessageCollapsed && (
+                <Bubble className="bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
+                  {activity.otelStatusDescription}
+                </Bubble>
+              )}
+            </div>
+          )}
 
           <time
             className="text-xs mb-2 inline-block text-gray-500 dark:text-white/50"

package/src/constants/signoz.ts

@@ -63,7 +63,7 @@ export const SPAN_KEYS = {
   CONTEXT_URL: 'context.url',
   CONTEXT_CONFIG_ID: 'context.context_config_id',
   CONTEXT_AGENT_GRAPH_ID: 'context.agent_graph_id',
-  CONTEXT_REQUEST_KEYS: 'context.request_context_keys',
+  CONTEXT_HEADERS_KEYS: 'context.headers_keys',
 
   // Message attributes
   MESSAGE_CONTENT: 'message.content',

package/src/features/graph/domain/__tests__/roundtrip.test.ts

@@ -54,10 +54,8 @@ describe('graph serialize/deserialize', () => {
       description: 'Graph with self-referencing agent',
       contextConfig: {
         id: '',
-        name: '',
-        description: '',
         contextVariables: '',
-        requestContextSchema: '',
+        headersSchema: '',
       },
     });
 
@@ -139,10 +137,8 @@ describe('graph serialize/deserialize', () => {
       name: 'G',
       description: 'D',
       contextConfig: {
-        name: 'Context',
-        description: 'Context description',
         contextVariables: '{}',
-        requestContextSchema: '{}',
+        headersSchema: '{}',
       },
     });
     expect(serialized.id).toBe('g1');

package/src/features/graph/domain/__tests__/serialize.test.ts

@@ -236,7 +236,7 @@ describe('serializeGraphData', () => {
       expect((result.agents.agent1 as any).canUse[0]).toEqual({
         toolId: 'mcp1',
         toolSelection: ['tool1', 'tool2'],
-        headers: {},
+        headers: null,
       });
     });
 
@@ -282,7 +282,7 @@ describe('serializeGraphData', () => {
       expect((result.agents.agent1 as any).canUse[0]).toEqual({
         toolId: 'mcp1',
         toolSelection: null,
-        headers: {},
+        headers: null,
       });
     });
 
@@ -326,7 +326,7 @@ describe('serializeGraphData', () => {
       expect((result.agents.agent1 as any).canUse[0]).toEqual({
         toolId: 'mcp1',
         toolSelection: [],
-        headers: {},
+        headers: null,
       });
     });
 
@@ -413,7 +413,7 @@ describe('serializeGraphData', () => {
       expect((result.agents.agent1 as any).canUse[0]).toEqual({
         toolId: 'mcp1',
         toolSelection: null, // null means all tools are selected
-        headers: {},
+        headers: null,
       });
     });
   });