@inkeep/agents-manage-ui 0.8.3 → 0.8.5

package/src/app/[tenantId]/projects/[projectId]/graphs/[graphId]/page.tsx

@@ -1,11 +1,11 @@
 import { Graph } from '@/components/graph/graph';
 import { BodyTemplate } from '@/components/layout/body-template';
 import { fetchArtifactComponentsAction } from '@/lib/actions/artifact-components';
+import { fetchCredentialsAction } from '@/lib/actions/credentials';
 import { fetchDataComponentsAction } from '@/lib/actions/data-components';
 import { getFullGraphAction } from '@/lib/actions/graph-full';
 import { fetchToolsAction } from '@/lib/actions/tools';
 import { createLookup } from '@/lib/utils';
-
 export const dynamic = 'force-dynamic';
 
 interface GraphPageProps {
@@ -15,19 +15,26 @@ interface GraphPageProps {
 async function GraphPage({ params }: GraphPageProps) {
   const { graphId, tenantId, projectId } = await params;
 
-  const [graph, dataComponents, artifactComponents, tools] = await Promise.all([
+  const [graph, dataComponents, artifactComponents, credentials, tools] = await Promise.all([
     getFullGraphAction(tenantId, projectId, graphId),
     fetchDataComponentsAction(tenantId, projectId),
     fetchArtifactComponentsAction(tenantId, projectId),
+    fetchCredentialsAction(tenantId, projectId),
     fetchToolsAction(tenantId, projectId),
   ]);
 
   if (!graph.success) throw new Error(graph.error);
-  if (!dataComponents.success || !artifactComponents.success || !tools.success) {
+  if (
+    !dataComponents.success ||
+    !artifactComponents.success ||
+    !credentials.success ||
+    !tools.success
+  ) {
     console.error(
       'Failed to fetch components:',
       dataComponents.error,
       artifactComponents.error,
+      credentials.error,
       tools.error
     );
   }
@@ -41,6 +48,7 @@ async function GraphPage({ params }: GraphPageProps) {
   );
 
   const toolLookup = createLookup(tools.success ? tools.data : undefined);
+  const credentialLookup = createLookup(credentials.success ? credentials.data : undefined);
 
   return (
     <BodyTemplate
@@ -54,6 +62,7 @@ async function GraphPage({ params }: GraphPageProps) {
         dataComponentLookup={dataComponentLookup}
         artifactComponentLookup={artifactComponentLookup}
         toolLookup={toolLookup}
+        credentialLookup={credentialLookup}
       />
     </BodyTemplate>
   );

package/src/app/[tenantId]/projects/[projectId]/graphs/new/page.tsx

@@ -1,6 +1,7 @@
 import { Graph } from '@/components/graph/graph';
 import { BodyTemplate } from '@/components/layout/body-template';
 import { fetchArtifactComponentsAction } from '@/lib/actions/artifact-components';
+import { fetchCredentialsAction } from '@/lib/actions/credentials';
 import { fetchDataComponentsAction } from '@/lib/actions/data-components';
 import { fetchToolsAction } from '@/lib/actions/tools';
 import { createLookup } from '@/lib/utils';
@@ -11,10 +12,11 @@ async function NewGraphPage({
   params: Promise<{ tenantId: string; projectId: string }>;
 }) {
   const { tenantId, projectId } = await params;
-  const [dataComponents, artifactComponents, tools] = await Promise.all([
+  const [dataComponents, artifactComponents, tools, credentials] = await Promise.all([
     fetchDataComponentsAction(tenantId, projectId),
     fetchArtifactComponentsAction(tenantId, projectId),
     fetchToolsAction(tenantId, projectId),
+    fetchCredentialsAction(tenantId, projectId),
   ]);
 
   if (!dataComponents.success || !artifactComponents.success || !tools.success) {
@@ -35,6 +37,8 @@ async function NewGraphPage({
   );
   const toolLookup = createLookup(tools.success ? tools.data : undefined);
 
+  const credentialLookup = createLookup(credentials.success ? credentials.data : undefined);
+
   return (
     <BodyTemplate
       breadcrumbs={[
@@ -46,6 +50,7 @@ async function NewGraphPage({
         dataComponentLookup={dataComponentLookup}
         artifactComponentLookup={artifactComponentLookup}
         toolLookup={toolLookup}
+        credentialLookup={credentialLookup}
       />
     </BodyTemplate>
   );

package/src/components/graph/configuration/node-types.tsx

@@ -38,6 +38,8 @@ export interface ExternalAgentNodeData extends Record<string, unknown> {
   name: string;
   description?: string;
   baseUrl: string;
+  headers: string;
+  credentialReferenceId?: string | null;
 }
 
 export enum NodeType {

package/src/components/graph/graph.tsx

@@ -31,6 +31,7 @@ import { useGraphShortcuts } from '@/features/graph/ui/use-graph-shortcuts';
 import { useGraphErrors } from '@/hooks/use-graph-errors';
 import { useSidePane } from '@/hooks/use-side-pane';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
+import type { Credential } from '@/lib/api/credentials';
 import type { DataComponent } from '@/lib/api/data-components';
 import { saveGraph } from '@/lib/services/save-graph';
 import type { MCPTool } from '@/lib/types/tools';
@@ -97,6 +98,7 @@ interface GraphProps {
   dataComponentLookup?: Record<string, DataComponent>;
   artifactComponentLookup?: Record<string, ArtifactComponent>;
   toolLookup?: Record<string, MCPTool>;
+  credentialLookup?: Record<string, Credential>;
 }
 
 function Flow({
@@ -104,6 +106,7 @@ function Flow({
   dataComponentLookup = {},
   artifactComponentLookup = {},
   toolLookup = {},
+  credentialLookup = {},
 }: GraphProps) {
   const [showPlayground, setShowPlayground] = useState(false);
   const router = useRouter();
@@ -625,6 +628,7 @@ function Flow({
         dataComponentLookup={dataComponentLookup}
         artifactComponentLookup={artifactComponentLookup}
         agentToolConfigLookup={agentToolConfigLookup}
+        credentialLookup={credentialLookup}
       />
       {showPlayground && graph?.id && (
         <Playground
@@ -643,6 +647,7 @@ export function Graph({
   dataComponentLookup,
   artifactComponentLookup,
   toolLookup,
+  credentialLookup,
 }: GraphProps) {
   return (
     <ReactFlowProvider>
@@ -651,6 +656,7 @@ export function Graph({
         dataComponentLookup={dataComponentLookup}
         artifactComponentLookup={artifactComponentLookup}
         toolLookup={toolLookup}
+        credentialLookup={credentialLookup}
       />
     </ReactFlowProvider>
   );

package/src/components/graph/sidepane/nodes/credential-selector.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { ChevronsUpDown } from 'lucide-react';
+import { useState } from 'react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { Credential } from '@/lib/api/credentials';
+
+// Header component - shows label and status
+interface CredentialHeaderProps {
+  label: string;
+}
+
+function CredentialHeader({ label }: CredentialHeaderProps) {
+  return (
+    <div className="flex gap-2">
+      <Label>{label}</Label>
+    </div>
+  );
+}
+
+// Dropdown for selecting credentials
+interface CredentialDropdownProps {
+  selectedCredentialId: string | null;
+  onSelect: (credentialId: string | null) => void;
+  availableCredentials: Credential[];
+  placeholder?: string;
+}
+
+function CredentialDropdown({
+  selectedCredentialId,
+  onSelect,
+  availableCredentials,
+  placeholder = 'Select credential...',
+}: CredentialDropdownProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex w-full">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full justify-between bg-transparent text-gray-700"
+          >
+            {selectedCredentialId === null ? (
+              <div className="text-muted-foreground">No Authentication</div>
+            ) : selectedCredentialId ? (
+              <div className="flex items-center gap-2">
+                <span className="font-medium">
+                  {availableCredentials.find((c) => c.id === selectedCredentialId)?.id ||
+                    selectedCredentialId}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  (
+                  {availableCredentials.find((c) => c.id === selectedCredentialId)?.type ||
+                    'Unknown'}
+                  )
+                </span>
+              </div>
+            ) : (
+              <div className="text-muted-foreground">{placeholder}</div>
+            )}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0">
+          <Command>
+            <CommandInput placeholder="Search credentials..." />
+            <CommandList>
+              <CommandEmpty>No credentials found.</CommandEmpty>
+              <CommandGroup>
+                {/* No Authentication option */}
+                <CommandItem
+                  value=""
+                  onSelect={() => {
+                    onSelect(null);
+                    setOpen(false);
+                  }}
+                  className="cursor-pointer"
+                >
+                  <div className="flex items-center justify-between w-full">
+                    <div>
+                      <div className="font-medium">No Authentication</div>
+                      <div className="text-xs text-muted-foreground">Unsecured connection</div>
+                    </div>
+                    {selectedCredentialId === null && (
+                      <Badge variant="success" className="text-[10px]">
+                        Selected
+                      </Badge>
+                    )}
+                  </div>
+                </CommandItem>
+
+                {/* Available credentials */}
+                {availableCredentials.map((credential) => (
+                  <CommandItem
+                    key={credential.id}
+                    value={credential.id}
+                    onSelect={() => {
+                      onSelect(credential.id);
+                      setOpen(false);
+                    }}
+                    className="cursor-pointer"
+                  >
+                    <div className="flex items-center justify-between w-full">
+                      <div>
+                        <div className="font-medium">{credential.id}</div>
+                        <div className="text-xs text-muted-foreground">{credential.type}</div>
+                      </div>
+                      {selectedCredentialId === credential.id && (
+                        <Badge variant="success" className="text-[10px]">
+                          Selected
+                        </Badge>
+                      )}
+                    </div>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+// Main selector component
+interface CredentialSelectorProps {
+  label?: string;
+  value?: string | null;
+  onValueChange?: (value: string | null) => void;
+  placeholder?: string;
+  credentialLookup: Record<string, Credential>;
+}
+
+export function CredentialSelector({
+  label = 'Credential',
+  value,
+  credentialLookup,
+  onValueChange,
+  placeholder = 'Select credential...',
+}: CredentialSelectorProps) {
+  const handleSelect = (credentialId: string | null) => {
+    onValueChange?.(credentialId);
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2">
+        <CredentialHeader label={label} />
+      </div>
+      <CredentialDropdown
+        selectedCredentialId={value || null}
+        onSelect={handleSelect}
+        availableCredentials={Object.values(credentialLookup)}
+        placeholder={placeholder}
+      />
+    </div>
+  );
+}

package/src/components/graph/sidepane/nodes/external-agent-node-editor.tsx

@@ -1,32 +1,35 @@
 import type { Node } from '@xyflow/react';
 import { useCallback } from 'react';
+import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
 import { useAutoPrefillIdZustand } from '@/hooks/use-auto-prefill-id-zustand';
 import type { ErrorHelpers } from '@/hooks/use-graph-errors';
 import { useNodeEditor } from '@/hooks/use-node-editor';
+import type { Credential } from '@/lib/api/credentials';
 import type { ExternalAgentNodeData } from '../../configuration/node-types';
+import { CredentialSelector } from './credential-selector';
 import { InputField, TextareaField } from './form-fields';
 
 interface ExternalAgentNodeEditorProps {
   selectedNode: Node<ExternalAgentNodeData>;
+  credentialLookup: Record<string, Credential>;
   errorHelpers?: ErrorHelpers;
 }
 
 export function ExternalAgentNodeEditor({
   selectedNode,
+  credentialLookup,
   errorHelpers,
 }: ExternalAgentNodeEditorProps) {
-  const { handleInputChange, getFieldError, setFieldRef } = useNodeEditor({
+  const { handleInputChange, getFieldError, setFieldRef, updateField } = useNodeEditor({
     selectedNodeId: selectedNode.id,
     errorHelpers,
   });
 
   const handleIdChange = useCallback(
     (generatedId: string) => {
-      handleInputChange({
-        target: { name: 'id', value: generatedId },
-      } as React.ChangeEvent<HTMLInputElement>);
+      updateField('id', generatedId);
     },
-    [handleInputChange]
+    [updateField]
   );
 
   // Auto-prefill ID based on name field (always enabled for agent nodes)
@@ -91,6 +94,25 @@ export function ExternalAgentNodeEditor({
         error={getFieldError('baseUrl')}
         tooltip="This URL is used to discover the agent's capabilities and communicate with it using the A2A protocol. For locally hosted graphs defined with the agent-framework this would be: http://localhost:3002/tenants/:tenantId/projects/:projectId/agents/:graphId"
       />
+      <ExpandableJsonEditor
+        name="headers"
+        label="Headers"
+        value={selectedNode.data.headers}
+        onChange={(value) => updateField('headers', value)}
+        placeholder="{}"
+        className=""
+      />
+      <CredentialSelector
+        label="Credential"
+        credentialLookup={credentialLookup}
+        value={
+          typeof selectedNode.data.credentialReferenceId === 'string'
+            ? selectedNode.data.credentialReferenceId
+            : null
+        }
+        onValueChange={(value) => updateField('credentialReferenceId', value || '')}
+        placeholder="Select a credential"
+      />
     </div>
   );
 }

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

@@ -4,6 +4,7 @@ import { type LucideIcon, Workflow } from 'lucide-react';
 import { useMemo } from 'react';
 import { useGraphErrors } from '@/hooks/use-graph-errors';
 import type { ArtifactComponent } from '@/lib/api/artifact-components';
+import type { Credential } from '@/lib/api/credentials';
 import type { DataComponent } from '@/lib/api/data-components';
 import { SidePane as SidePaneLayout } from '../../layout/sidepane';
 import { edgeTypeMap } from '../configuration/edge-types';
@@ -32,6 +33,7 @@ interface SidePaneProps {
   dataComponentLookup: Record<string, DataComponent>;
   artifactComponentLookup: Record<string, ArtifactComponent>;
   agentToolConfigLookup: AgentToolConfigLookup;
+  credentialLookup: Record<string, Credential>;
 }
 
 export function SidePane({
@@ -43,6 +45,7 @@ export function SidePane({
   dataComponentLookup,
   artifactComponentLookup,
   agentToolConfigLookup,
+  credentialLookup,
 }: SidePaneProps) {
   const selectedNode = useNodesData(selectedNodeId || '');
   const edges = useEdges();
@@ -100,6 +103,7 @@ export function SidePane({
           return (
             <ExternalAgentNodeEditor
               selectedNode={selectedNode as Node<ExternalAgentNodeData>}
+              credentialLookup={credentialLookup}
               errorHelpers={errorHelpers}
             />
           );

package/src/components/traces/conversation-errors.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ExternalLink } from '@/components/ui/external-link';
 import { Skeleton } from '@/components/ui/skeleton';
 
 interface ConversationErrorsProps {
@@ -98,6 +99,13 @@ export function ConversationErrors({ conversationId, onBack }: ConversationError
         </CardHeader>
         <CardContent>
           <p className="text-sm text-muted-foreground">{error || 'Conversation not found'}</p>
+          {error && (
+            <div className="mt-3">
+              <ExternalLink href="https://docs.inkeep.com/quick-start/observability">
+                View observability setup guide
+              </ExternalLink>
+            </div>
+          )}
           {onBack && (
             <Button onClick={onBack} variant="outline" className="mt-4">
               <ArrowLeft className="h-4 w-4 mr-2" />

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

@@ -89,7 +89,12 @@ function EmptyTimeline({
                 </ExternalLink>
               </div>
             ) : (
-              error
+              <div>
+                <p>{error}</p>
+                <ExternalLink href="https://docs.inkeep.com/quick-start/observability">
+                  View observability setup guide
+                </ExternalLink>
+              </div>
             )}
           </AlertDescription>
         </Alert>

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

@@ -14,7 +14,6 @@ import type {
   FullGraphDefinition,
   InternalAgentDefinition,
 } from '@/lib/types/graph-full';
-
 import { formatJsonField } from '@/lib/utils';
 
 interface TransformResult {
@@ -118,7 +117,9 @@ export function deserializeGraphData(data: FullGraphDefinition): TransformResult
           name: agent.name,
           description: agent.description,
           baseUrl: (agent as ExternalAgentDefinition).baseUrl,
+          headers: formatJsonField(agent.headers) || '{}',
           type: agent.type,
+          credentialReferenceId: agent.credentialReferenceId,
         }
       : (() => {
           const internalAgent = agent as InternalAgentDefinition;

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

@@ -20,7 +20,9 @@ type ExternalAgent = {
   name: string;
   description: string;
   baseUrl: string;
+  headers?: Record<string, string> | null;
   type: 'external';
+  credentialReferenceId?: string | null;
 };
 
 export type ExtendedAgent =
@@ -206,12 +208,18 @@ export function serializeGraphData(
       agents[agentId] = agent;
     } else if (node.type === NodeType.ExternalAgent) {
       const agentId = (node.data.id as string) || node.id;
+
+      // Parse headers from JSON string to object
+      const parsedHeaders = safeJsonParse(node.data.headers as string);
+
       const agent: ExternalAgent = {
         id: agentId,
         name: node.data.name as string,
         description: (node.data.description as string) || '',
         baseUrl: node.data.baseUrl as string,
+        headers: parsedHeaders || null,
         type: 'external',
+        credentialReferenceId: (node.data.credentialReferenceId as string) || null,
       };
 
       if ((node.data as any).isDefault) {

package/src/lib/actions/credentials.ts

@@ -5,7 +5,7 @@
 'use server';
 
 import { revalidatePath } from 'next/cache';
-import { deleteCredential } from '../api/credentials';
+import { type Credential, deleteCredential, fetchCredentials } from '../api/credentials';
 import { ApiError } from '../types/errors';
 import type { ActionResult } from './types';
 
@@ -40,3 +40,33 @@ export async function deleteCredentialAction(
     };
   }
 }
+
+/**
+ * Fetch all credentials
+ */
+export async function fetchCredentialsAction(
+  tenantId: string,
+  projectId: string
+): Promise<ActionResult<Credential[]>> {
+  try {
+    const result = await fetchCredentials(tenantId, projectId);
+    return {
+      success: true,
+      data: result,
+    };
+  } catch (error) {
+    if (error instanceof ApiError) {
+      return {
+        success: false,
+        error: error.message,
+        code: error.error.code,
+      };
+    }
+
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Unknown error occurred',
+      code: 'unknown_error',
+    };
+  }
+}

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

@@ -1 +0,0 @@
-"use strict";exports.id=3518,exports.ids=[3518],exports.modules={6461:(a,b,c)=>{let d,e;c.d(b,{Ak:()=>g});var f=c(77598);function g(a=21){var b;b=a|=0,!d||d.length<b?(d=Buffer.allocUnsafe(128*b),f.webcrypto.getRandomValues(d),e=0):e+b>d.length&&(f.webcrypto.getRandomValues(d),e=0),e+=b;let c="";for(let b=e-a;b<e;b++)c+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[63&d[b]];return c}},12463:(a,b,c)=>{c.d(b,{E:()=>i});var d=c(59111),e=c(98848),f=c(53433),g=c(42723);let h=(0,f.F)("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",secondary:"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",primary:"border border-primary/50 text-primary bg-primary/5 rounded-sm p-0.5 px-1.5 font-mono",destructive:"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",code:"text-xs text-muted-foreground border bg-muted/80 dark:bg-muted/50 rounded-sm p-0.5 px-1.5 font-mono",success:"text-xs text-muted-foreground border rounded-sm p-0.5 px-1.5 font-mono bg-emerald-50 border-emerald-200 text-emerald-800 dark:text-emerald-300 dark:bg-emerald-950/40 uppercase",error:"text-xs text-muted-foreground border rounded-sm p-0.5 px-1.5 font-mono bg-red-50 border-red-200 text-red-800 dark:border-red-700 dark:text-red-300 dark:bg-red-950/40 uppercase",warning:"text-xs text-muted-foreground border rounded-sm p-0.5 px-1.5 font-mono bg-amber-50 border-amber-200 text-amber-800 dark:border-amber-700 dark:text-amber-300 dark:bg-amber-950/40 uppercase",sky:"text-xs text-muted-foreground border rounded-sm p-0.5 px-1.5 font-mono bg-sky-50 border-sky-200 text-sky-800 dark:border-sky-700 dark:text-sky-300 dark:bg-sky-950/40",violet:"text-xs text-muted-foreground border rounded-sm p-0.5 px-1.5 font-mono bg-violet-50 border-violet-200 text-violet-800 dark:border-violet-700 dark:text-violet-300 dark:bg-violet-950/40",orange:"text-xs text-muted-foreground border rounded-sm p-0.5 px-1.5 font-mono bg-orange-50 border-orange-200 text-orange-800 dark:border-orange-700 dark:text-orange-300 dark:bg-orange-950/40"}},defaultVariants:{variant:"default"}});function i({className:a,variant:b,asChild:c=!1,...f}){let i=c?e.DX:"span";return(0,d.jsx)(i,{"data-slot":"badge",className:(0,g.cn)(h({variant:b}),a),...f})}},24703:(a,b,c)=>{c.d(b,{S:()=>h});var d=c(59111),e=c(51006),f=c(39108),g=c(42723);function h({className:a,...b}){return(0,d.jsx)(e.bL,{"data-slot":"checkbox",className:(0,g.cn)("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",a),...b,children:(0,d.jsx)(e.C1,{"data-slot":"checkbox-indicator",className:"flex items-center justify-center text-current transition-none",children:(0,d.jsx)(f.A,{className:"size-3.5"})})})}},49540:(a,b,c)=>{c.d(b,{bq:()=>l,eb:()=>n,gC:()=>m,l6:()=>j,yv:()=>k});var d=c(59111),e=c(41404),f=c(67048),g=c(39108),h=c(25773),i=c(42723);function j({...a}){return(0,d.jsx)(e.bL,{"data-slot":"select",...a})}function k({...a}){return(0,d.jsx)(e.WT,{"data-slot":"select-value",...a})}function l({className:a,size:b="default",children:c,...g}){return(0,d.jsxs)(e.l9,{"data-slot":"select-trigger","data-size":b,className:(0,i.cn)("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 font-normal normal-case",a),...g,children:[c,(0,d.jsx)(e.In,{asChild:!0,children:(0,d.jsx)(f.A,{className:"size-4 opacity-50"})})]})}function m({className:a,children:b,position:c="popper",...f}){return(0,d.jsx)(e.ZL,{children:(0,d.jsxs)(e.UC,{"data-slot":"select-content",className:(0,i.cn)("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/30 dark:scrollbar-thumb-muted-foreground/50 scrollbar-track-transparent rounded-md border shadow-md","popper"===c&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",a),position:c,...f,children:[(0,d.jsx)(o,{}),(0,d.jsx)(e.LM,{className:(0,i.cn)("p-1","popper"===c&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"),children:b}),(0,d.jsx)(p,{})]})})}function n({className:a,children:b,...c}){return(0,d.jsxs)(e.q7,{"data-slot":"select-item",className:(0,i.cn)("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",a),...c,children:[(0,d.jsx)("span",{className:"absolute right-2 flex size-3.5 items-center justify-center",children:(0,d.jsx)(e.VF,{children:(0,d.jsx)(g.A,{className:"size-4"})})}),(0,d.jsx)(e.p4,{children:b})]})}function o({className:a,...b}){return(0,d.jsx)(e.PP,{"data-slot":"select-scroll-up-button",className:(0,i.cn)("flex cursor-default items-center justify-center py-1",a),...b,children:(0,d.jsx)(h.A,{className:"size-4"})})}function p({className:a,...b}){return(0,d.jsx)(e.wn,{"data-slot":"select-scroll-down-button",className:(0,i.cn)("flex cursor-default items-center justify-center py-1",a),...b,children:(0,d.jsx)(f.A,{className:"size-4"})})}},51006:(a,b,c)=>{c.d(b,{C1:()=>x,bL:()=>v});var d=c(14450),e=c(90890),f=c(2102),g=c(13254),h=c(19975),i=c(82087),j=c(22871),k=c(66261),l=c(6118),m=c(59111),n="Checkbox",[o,p]=(0,f.A)(n),[q,r]=o(n);function s(a){let{__scopeCheckbox:b,checked:c,children:e,defaultChecked:f,disabled:g,form:i,name:j,onCheckedChange:k,required:l,value:o="on",internal_do_not_use_render:p}=a,[r,s]=(0,h.i)({prop:c,defaultProp:f??!1,onChange:k,caller:n}),[t,u]=d.useState(null),[v,w]=d.useState(null),x=d.useRef(!1),y=!t||!!i||!!t.closest("form"),z={checked:r,disabled:g,setChecked:s,control:t,setControl:u,name:j,form:i,value:o,hasConsumerStoppedPropagationRef:x,required:l,defaultChecked:!A(f)&&f,isFormControl:y,bubbleInput:v,setBubbleInput:w};return(0,m.jsx)(q,{scope:b,...z,children:"function"==typeof p?p(z):e})}var t="CheckboxTrigger",u=d.forwardRef(({__scopeCheckbox:a,onKeyDown:b,onClick:c,...f},h)=>{let{control:i,value:j,disabled:k,checked:n,required:o,setControl:p,setChecked:q,hasConsumerStoppedPropagationRef:s,isFormControl:u,bubbleInput:v}=r(t,a),w=(0,e.s)(h,p),x=d.useRef(n);return d.useEffect(()=>{let a=i?.form;if(a){let b=()=>q(x.current);return a.addEventListener("reset",b),()=>a.removeEventListener("reset",b)}},[i,q]),(0,m.jsx)(l.sG.button,{type:"button",role:"checkbox","aria-checked":A(n)?"mixed":n,"aria-required":o,"data-state":B(n),"data-disabled":k?"":void 0,disabled:k,value:j,...f,ref:w,onKeyDown:(0,g.mK)(b,a=>{"Enter"===a.key&&a.preventDefault()}),onClick:(0,g.mK)(c,a=>{q(a=>!!A(a)||!a),v&&u&&(s.current=a.isPropagationStopped(),s.current||a.stopPropagation())})})});u.displayName=t;var v=d.forwardRef((a,b)=>{let{__scopeCheckbox:c,name:d,checked:e,defaultChecked:f,required:g,disabled:h,value:i,onCheckedChange:j,form:k,...l}=a;return(0,m.jsx)(s,{__scopeCheckbox:c,checked:e,defaultChecked:f,disabled:h,required:g,onCheckedChange:j,name:d,form:k,value:i,internal_do_not_use_render:({isFormControl:a})=>(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(u,{...l,ref:b,__scopeCheckbox:c}),a&&(0,m.jsx)(z,{__scopeCheckbox:c})]})})});v.displayName=n;var w="CheckboxIndicator",x=d.forwardRef((a,b)=>{let{__scopeCheckbox:c,forceMount:d,...e}=a,f=r(w,c);return(0,m.jsx)(k.C,{present:d||A(f.checked)||!0===f.checked,children:(0,m.jsx)(l.sG.span,{"data-state":B(f.checked),"data-disabled":f.disabled?"":void 0,...e,ref:b,style:{pointerEvents:"none",...a.style}})})});x.displayName=w;var y="CheckboxBubbleInput",z=d.forwardRef(({__scopeCheckbox:a,...b},c)=>{let{control:f,hasConsumerStoppedPropagationRef:g,checked:h,defaultChecked:k,required:n,disabled:o,name:p,value:q,form:s,bubbleInput:t,setBubbleInput:u}=r(y,a),v=(0,e.s)(c,u),w=(0,i.Z)(h),x=(0,j.X)(f);d.useEffect(()=>{if(!t)return;let a=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"checked").set,b=!g.current;if(w!==h&&a){let c=new Event("click",{bubbles:b});t.indeterminate=A(h),a.call(t,!A(h)&&h),t.dispatchEvent(c)}},[t,w,h,g]);let z=d.useRef(!A(h)&&h);return(0,m.jsx)(l.sG.input,{type:"checkbox","aria-hidden":!0,defaultChecked:k??z.current,required:n,disabled:o,name:p,value:q,form:s,...b,tabIndex:-1,ref:v,style:{...b.style,...x,position:"absolute",pointerEvents:"none",opacity:0,margin:0,transform:"translateX(-100%)"}})});function A(a){return"indeterminate"===a}function B(a){return A(a)?"indeterminate":a?"checked":"unchecked"}z.displayName=y},55124:(a,b,c)=>{c.d(b,{U:()=>g});var d=c(59111),e=c(49540),f=c(71771);function g({control:a,name:b,label:c,placeholder:g,options:h,disabled:i=!1,selectTriggerClassName:j,isRequired:k=!1}){return(0,d.jsx)(f.u,{control:a,name:b,label:c,isRequired:k,children:a=>(0,d.jsxs)(e.l6,{onValueChange:a.onChange,defaultValue:a.value,disabled:i,children:[(0,d.jsx)(e.bq,{disabled:i,className:j,children:(0,d.jsx)(e.yv,{placeholder:g})}),(0,d.jsx)(e.gC,{children:h.map(a=>(0,d.jsx)(e.eb,{value:a.value,disabled:a.disabled,children:a.label},a.value))})]})})}},57230:(a,b,c)=>{c.d(b,{Y:()=>e});var d=c(90147);let e=(0,d.createServerReference)("78e662e64cdad6a4545d70b82089eb9478bdc9314b",d.callServer,void 0,d.findSourceMapURL,"updateMCPTool")},72969:(a,b,c)=>{c.d(b,{MCPServerForm:()=>d});let d=(0,c(60241).registerClientReference)(function(){throw Error("Attempted to call MCPServerForm() from the server but MCPServerForm is on the client. It's not possible to invoke a client function from the server, it can only be rendered as a Component or passed to props of a Client Component.")},"/home/runner/work/agents/agents/agents-manage-ui/src/components/mcp-servers/form/mcp-server-form.tsx","MCPServerForm")},81097:(a,b,c)=>{c.d(b,{$Y:()=>g,GO:()=>i,K3:()=>h,h9:()=>k,nZ:()=>j});var d=c(1274);c(2082);var e=c(53842),f=c(41979);async function g(a,b,c=1,d=50){(0,f.M2)(a),(0,f.nt)(b);let h=new URLSearchParams({page:c.toString(),limit:d.toString()});return(await (0,e.J)(`tenants/${a}/projects/${b}/credentials?${h}`)).data}async function h(a,b,c){return(0,f.M2)(a),(0,f.nt)(b),(await (0,e.J)(`tenants/${a}/projects/${b}/credentials/${c}`)).data}async function i(a,b,c){return(0,f.M2)(a),(0,f.nt)(b),(await (0,e.J)(`tenants/${a}/projects/${b}/credentials`,{method:"POST",body:JSON.stringify(c)})).data}async function j(a,b,c,d){return(0,f.M2)(a),(0,f.nt)(b),(await (0,e.J)(`tenants/${a}/projects/${b}/credentials/${c}`,{method:"PUT",body:JSON.stringify(d)})).data}async function k(a,b,c){(0,f.M2)(a),(0,f.nt)(b),await (0,e.J)(`tenants/${a}/projects/${b}/credentials/${c}`,{method:"DELETE"})}(0,c(95454).D)([g,h,i,j,k]),(0,d.A)(g,"78208c6b11a01052c252cd4f79ad30a3fe0666f4ac",null),(0,d.A)(h,"701f7a5a8af1b8f25519723729e1378f506c1d68a9",null),(0,d.A)(i,"70798d2c583e5d80f450a83af999943df80ddbb2a5",null),(0,d.A)(j,"782d4ba348df8297929ddd2a0c92b532a5ad9d5432",null),(0,d.A)(k,"7026e14203187193850e9810a24e4d24e15489e2e6",null)},88720:(a,b,c)=>{c.d(b,{MCPServerForm:()=>C});var d=c(59111),e=c(59099),f=c(35558),g=c(6461),h=c(485),i=c(94150),j=c(68156),k=c(17130),l=c(55124),m=c(2856),n=c(93622),o=c(57230),p=c(90147);let q=(0,p.createServerReference)("70d169bf889cc99844e9024eb9f6aad0ba287986bc",p.callServer,void 0,p.findSourceMapURL,"createMCPTool");var r=c(91740),s=c(39108),t=c(14450),u=c(12463),v=c(24703),w=c(37671);function x({control:a,name:b,label:c,availableTools:e=[],description:f,disabled:g=!1}){let{field:{value:h,onChange:j},fieldState:{error:k}}=(0,i.as)({name:b,control:a}),l=(0,t.useMemo)(()=>"object"==typeof h&&null!==h&&"type"in h?"all"===h.type?{type:"all"}:"selective"===h.type&&Array.isArray(h.tools)?{type:"selective",tools:h.tools}:{type:"selective",tools:[]}:{type:"selective",tools:[]},[h]),o=()=>{j({type:"all"})},p=()=>{j({type:"selective",tools:[]})},q=(a,b)=>{if("all"===l.type){let c=e.map(a=>a.name).filter(b=>b!==a);j({type:"selective",tools:b?[...c,a]:c})}else j({type:"selective",tools:b?[...l.tools.filter(b=>b!==a),a]:l.tools.filter(b=>b!==a)})},x=()=>{switch(l.type){case"all":return e.length;case"selective":return l.tools.filter(a=>e.some(b=>b.name===a)).length;default:return 0}},y=x()===e.length;return(0,d.jsx)(n.zB,{control:a,name:b,render:()=>(0,d.jsxs)(n.eI,{children:[(0,d.jsxs)(n.lR,{children:[c,(0,d.jsx)(u.E,{variant:"code",className:"border-none px-2 text-[10px] text-muted-foreground",children:x()})]}),f&&(0,d.jsx)("p",{className:"text-sm text-muted-foreground",children:f}),(0,d.jsxs)("div",{className:"mt-2",children:[0===e.length&&(0,d.jsx)("div",{className:"text-sm text-muted-foreground border rounded-md p-3 py-2 bg-gray-100/80 dark:bg-sidebar",children:"No tools available from this server"}),e.length>0&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsxs)("div",{className:"flex items-center gap-2 justify-between py-3 px-6 rounded-t-lg border border-b-0",children:[(0,d.jsxs)("div",{className:"text-sm",children:[x()," ",(0,d.jsxs)("span",{className:"text-gray-400 dark:text-white/40",children:["/ ",e.length," tool",1===e.length?"":"s"]})]}),y?(0,d.jsxs)(m.$,{type:"button",variant:"outline",size:"sm",onClick:p,disabled:g,children:[(0,d.jsx)(r.A,{className:"w-4 h-4 text-muted-foreground"}),"Deselect all"]}):(0,d.jsxs)(m.$,{type:"button",variant:"outline",size:"sm",onClick:o,disabled:g,children:[(0,d.jsx)(s.A,{className:"w-4 h-4 text-muted-foreground"}),"Select all"]})]}),(0,d.jsx)("div",{className:"max-h-96 overflow-y-auto border rounded-lg rounded-t-none scrollbar-thin scrollbar-thumb-muted-foreground/30 dark:scrollbar-thumb-muted-foreground/50 scrollbar-track-transparent",children:e.map(a=>{let b=(a=>{switch(l.type){case"all":return e.some(b=>b.name===a);case"selective":return l.tools.includes(a)&&e.some(b=>b.name===a);default:return!1}})(a.name);return(0,d.jsxs)("div",{className:"space-y-2 flex items-start gap-6 border-b last:border-b-0 py-4 px-6 relative",children:[(0,d.jsx)("div",{className:"flex items-center h-[22px]",children:(0,d.jsx)(v.S,{checked:b,disabled:g,className:"mb-0",onClick:()=>!g&&q(a.name,!b)})}),(0,d.jsxs)("div",{className:"flex flex-col gap-2",children:[(0,d.jsx)(u.E,{variant:b?"primary":"code",className:`font-mono font-medium text-xs cursor-pointer transition-colors ${g?"opacity-50 cursor-not-allowed":""}`,onClick:()=>!g&&q(a.name,!b),children:a.name}),(0,d.jsxs)(w.Tooltip,{delayDuration:800,children:[(0,d.jsx)(w.TooltipTrigger,{asChild:!0,children:(0,d.jsx)("p",{className:"text-sm text-muted-foreground line-clamp-1",children:a.description})}),(0,d.jsx)(w.TooltipContent,{side:"bottom",align:"start",children:a.description})]})]})]},a.name)})})]})]}),(0,d.jsx)(n.C5,{children:k?.message})]})})}var y=c(45809);let z=y.discriminatedUnion("type",[y.object({type:y.literal("all")}),y.object({type:y.literal("selective"),tools:y.array(y.string())})]),A=y.object({name:y.string().min(1,"Name is required."),config:y.object({type:y.literal("mcp"),mcp:y.object({server:y.object({url:y.string().url("Must be a valid URL.")}),transport:y.object({type:y.nativeEnum(f.o7)}),toolsConfig:z.default({type:"all"})})}),credentialReferenceId:y.string().nullish(),imageUrl:y.string().optional()}),B={name:"",config:{type:"mcp",mcp:{server:{url:""},transport:{type:f.o7.streamableHttp},toolsConfig:{type:"all"}}},imageUrl:"",credentialReferenceId:"none"};function C({initialData:a,mode:b="create",tool:c,credentials:p,tenantId:r,projectId:s}){let t=(0,h.useRouter)(),u=(0,i.mN)({resolver:(0,e.u)(A),defaultValues:{...B,...a}}),{isSubmitting:v}=u.formState,w=async a=>{try{let d={...a,credentialReferenceId:"none"===a.credentialReferenceId?null:a.credentialReferenceId,config:{...a.config,mcp:{...a.config.mcp,activeTools:(a=>{if("all"===a.type)return;let b=c?.availableTools?.map(a=>a.name)||[];return a.tools.filter(a=>b.includes(a))})(a.config.mcp.toolsConfig)}}};if("update"===b&&c)await (0,o.Y)(r,s,c.id,d),j.oR.success("MCP server updated successfully"),t.push(`/${r}/projects/${s}/mcp-servers/${c.id}`);else{let a=await q(r,s,{...d,id:(0,g.Ak)()});j.oR.success("MCP server created successfully"),t.push(`/${r}/projects/${s}/mcp-servers/${a.id}`)}}catch(a){console.error(`Failed to ${b} MCP tool:`,a),j.oR.error(`Failed to ${b} MCP server. Please try again.`)}};return(0,d.jsx)(n.lV,{...u,children:(0,d.jsxs)("form",{onSubmit:u.handleSubmit(w),className:"space-y-8",children:[(0,d.jsx)(k.a,{control:u.control,name:"name",label:"Name",placeholder:"MCP server",isRequired:!0}),(0,d.jsx)(k.a,{control:u.control,name:"config.mcp.server.url",label:"URL",placeholder:"https://api.example.com/mcp",isRequired:!0}),(0,d.jsx)(l.U,{control:u.control,selectTriggerClassName:"w-full",name:"config.mcp.transport.type",label:"Transport type",placeholder:"Select transport type",options:[{value:f.o7.streamableHttp,label:"Streamable HTTP"},{value:f.o7.sse,label:"Server-Sent Events (SSE)"}]}),(0,d.jsx)(k.a,{control:u.control,name:"imageUrl",label:"Image URL (optional)",placeholder:"https://example.com/icon.png or data:image/png;base64,..."}),(0,d.jsx)(l.U,{control:u.control,selectTriggerClassName:"w-full",name:"credentialReferenceId",label:"Credential",placeholder:"Select a credential",options:[{value:"none",label:"No Authentication"},...p.map(a=>({value:a.id,label:a.id}))]}),"update"===b&&(0,d.jsx)(x,{control:u.control,name:"config.mcp.toolsConfig",label:"Tools",availableTools:c?.availableTools||[],description:"Select which tools should be enabled for this MCP server"}),(0,d.jsx)(m.$,{type:"submit",disabled:v,children:"update"===b?"Save":"Create"})]})})}}};