@inkeep/agents-manage-ui 0.15.0 → 0.16.1

package/src/components/graph/sidepane/nodes/mcp-selector/mcp-server-item.tsx

@@ -10,12 +10,12 @@ interface MCPServerItemProps {
 }
 
 export function MCPServerItem({ mcp, onClick }: MCPServerItemProps) {
-  const server = mcp.config?.mcp?.server;
+  const server = mcp.config?.type === 'mcp' ? (mcp.config as any).mcp?.server : undefined;
   const { id, name, availableTools, imageUrl, config } = mcp;
 
   const activeTools = getActiveTools({
     availableTools,
-    activeTools: config?.mcp?.activeTools,
+    activeTools: config?.type === 'mcp' ? (config as any).mcp?.activeTools : undefined,
   });
 
   const toolCount = activeTools?.length ?? 0;

package/src/components/graph/sidepane/sidepane.tsx

@@ -11,6 +11,7 @@ import { edgeTypeMap } from '../configuration/edge-types';
 import {
   type AgentNodeData,
   type ExternalAgentNodeData,
+  type FunctionToolNodeData,
   type MCPNodeData,
   NodeType,
   nodeTypeMap,
@@ -21,6 +22,7 @@ import { Heading } from './heading';
 import MetadataEditor from './metadata/metadata-editor';
 import { AgentNodeEditor } from './nodes/agent-node-editor';
 import { ExternalAgentNodeEditor } from './nodes/external-agent-node-editor';
+import { FunctionToolNodeEditor } from './nodes/function-tool-node-editor';
 import { MCPServerNodeEditor } from './nodes/mcp-node-editor';
 import { MCPSelector } from './nodes/mcp-selector/mcp-selector';
 
@@ -119,6 +121,11 @@ export function SidePane({
             />
           );
         }
+        case NodeType.FunctionTool: {
+          return (
+            <FunctionToolNodeEditor selectedNode={selectedNode as Node<FunctionToolNodeData>} />
+          );
+        }
         default:
           return null;
       }

package/src/components/graph/toolbar/toolbar.tsx

@@ -7,22 +7,22 @@ import { isMacOs } from '@/lib/utils';
 
 interface ToolbarProps {
   onSubmit: () => void;
-  isPreviewDisabled?: boolean;
+  inPreviewDisabled?: boolean;
   toggleSidePane: () => void;
   setShowPlayground: (show: boolean) => void;
 }
 
 export function Toolbar({
   onSubmit,
-  isPreviewDisabled,
+  inPreviewDisabled,
   toggleSidePane,
   setShowPlayground,
 }: ToolbarProps) {
   const dirty = useGraphStore((state) => state.dirty);
-  const saveButtonRef = useRef<HTMLButtonElement>(null!);
+  const saveButtonRef = useRef<HTMLButtonElement>(null);
   const PreviewButton = (
     <Button
-      disabled={dirty || isPreviewDisabled}
+      disabled={dirty || inPreviewDisabled}
       variant="outline"
       type="button"
       onClick={() => setShowPlayground(true)}
@@ -38,7 +38,7 @@ export function Toolbar({
       if (!isShortcutPressed) return;
       event.preventDefault();
       // Using button ref instead onSubmit to respect button's disabled state
-      saveButtonRef.current.click();
+      saveButtonRef.current?.click();
     }
 
     window.addEventListener('keydown', handleSaveShortcut);
@@ -49,7 +49,7 @@ export function Toolbar({
 
   return (
     <div className="flex gap-2">
-      {dirty || isPreviewDisabled ? (
+      {dirty || inPreviewDisabled ? (
         <Tooltip>
           <TooltipTrigger asChild>
             <div>{PreviewButton}</div>
@@ -66,10 +66,10 @@ export function Toolbar({
       <Button
         onClick={onSubmit}
         variant={dirty ? 'default' : 'outline'}
-        disabled={!dirty && !isPreviewDisabled}
+        disabled={!dirty && !inPreviewDisabled}
         ref={saveButtonRef}
       >
-        {isPreviewDisabled ? 'Save' : 'Save changes'}
+        {inPreviewDisabled ? 'Save' : 'Save changes'}
       </Button>
       <Button type="button" variant="outline" onClick={toggleSidePane}>
         <Settings className="w-4 h-4" />

package/src/components/mcp-servers/available-tools-card.tsx

@@ -107,7 +107,7 @@ export function AvailableToolsCard({
   activeTools,
 }: {
   tools: MCPTool['availableTools'];
-  activeTools: MCPTool['config']['mcp']['activeTools'];
+  activeTools: string[] | undefined;
 }) {
   if (!tools) return null; // parent component already makes sure to handle this
 

package/src/components/mcp-servers/mcp-tool-item.tsx

@@ -129,7 +129,7 @@ export function MCPToolItem({
 
   const activeTools = getActiveTools({
     availableTools: tool.availableTools,
-    activeTools: tool.config?.mcp?.activeTools,
+    activeTools: tool.config.type === 'mcp' ? tool.config.mcp.activeTools : undefined,
   });
 
   return (
@@ -157,7 +157,7 @@ export function MCPToolItem({
       </ItemCardHeader>
       <ItemCardContent>
         <div className="space-y-3 min-w-0">
-          <URLDisplay url={tool.config.mcp.server.url} />
+          <URLDisplay url={tool.config.type === 'mcp' ? tool.config.mcp.server.url : ''} />
 
           {/* Key metrics in a structured layout */}
           <div className="flex items-center gap-2 flex-wrap">

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 />