@inkeep/agents-manage-ui 0.1.0

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

@@ -0,0 +1,156 @@
+import type { Edge, Node } from '@xyflow/react';
+import { useEdges, useNodesData } from '@xyflow/react';
+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 { DataComponent } from '@/lib/api/data-components';
+import { SidePane as SidePaneLayout } from '../../layout/sidepane';
+import { edgeTypeMap } from '../configuration/edge-types';
+import {
+  type AgentNodeData,
+  type ExternalAgentNodeData,
+  type MCPNodeData,
+  NodeType,
+  nodeTypeMap,
+} from '../configuration/node-types';
+import EdgeEditor from './edges/edge-editor';
+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 { MCPServerNodeEditor } from './nodes/mcp-node-editor';
+import { MCPSelector } from './nodes/mcp-selector/mcp-selector';
+
+interface SidePaneProps {
+  selectedNodeId: string | null;
+  selectedEdgeId: string | null;
+  onClose: () => void;
+  backToGraph: () => void;
+  isOpen: boolean;
+  dataComponentLookup: Record<string, DataComponent>;
+  artifactComponentLookup: Record<string, ArtifactComponent>;
+}
+
+export function SidePane({
+  selectedNodeId,
+  selectedEdgeId,
+  onClose,
+  backToGraph,
+  isOpen,
+  dataComponentLookup,
+  artifactComponentLookup,
+}: SidePaneProps) {
+  const selectedNode = useNodesData(selectedNodeId || '');
+  const edges = useEdges();
+  const { hasFieldError, getFieldErrorMessage, getFirstErrorField } = useGraphErrors();
+
+  const selectedEdge = useMemo(
+    () => (selectedEdgeId ? edges.find((edge) => edge.id === selectedEdgeId) : null),
+    [selectedEdgeId, edges]
+  );
+
+  const { heading, HeadingIcon } = useMemo(() => {
+    let heading = '';
+    let HeadingIcon: LucideIcon | undefined;
+
+    if (selectedNode) {
+      const nodeType = selectedNode?.type as keyof typeof nodeTypeMap;
+      const nodeConfig = nodeTypeMap[nodeType];
+      heading = nodeConfig?.name || 'Node';
+      HeadingIcon = nodeConfig?.Icon;
+    } else if (selectedEdge) {
+      const edgeType = (selectedEdge?.type as keyof typeof edgeTypeMap) || 'default';
+      const edgeConfig = edgeTypeMap[edgeType];
+      heading = edgeConfig?.name || 'Connection';
+      HeadingIcon = edgeConfig?.Icon;
+    } else {
+      heading = 'Graph';
+      HeadingIcon = Workflow;
+    }
+
+    return { heading, HeadingIcon };
+  }, [selectedNode, selectedEdge]);
+
+  const editorContent = useMemo(() => {
+    if (selectedNode) {
+      const nodeType = selectedNode?.type as keyof typeof nodeTypeMap;
+      // Use the agent ID from node data if available, otherwise fall back to React Flow node ID
+      const agentId = (selectedNode.data as any)?.id || selectedNode.id;
+      const errorHelpers = {
+        hasFieldError: (fieldName: string) => hasFieldError(agentId, fieldName),
+        getFieldErrorMessage: (fieldName: string) => getFieldErrorMessage(agentId, fieldName),
+        getFirstErrorField: () => getFirstErrorField(agentId),
+      };
+
+      switch (nodeType) {
+        case NodeType.Agent:
+          return (
+            <AgentNodeEditor
+              selectedNode={selectedNode as Node<AgentNodeData>}
+              dataComponentLookup={dataComponentLookup}
+              artifactComponentLookup={artifactComponentLookup}
+              errorHelpers={errorHelpers}
+            />
+          );
+        case NodeType.ExternalAgent: {
+          return (
+            <ExternalAgentNodeEditor
+              selectedNode={selectedNode as Node<ExternalAgentNodeData>}
+              errorHelpers={errorHelpers}
+            />
+          );
+        }
+        case NodeType.MCPPlaceholder: {
+          return <MCPSelector selectedNode={selectedNode as Node} />;
+        }
+        case NodeType.MCP: {
+          return <MCPServerNodeEditor selectedNode={selectedNode as Node<MCPNodeData>} />;
+        }
+        default:
+          return null;
+      }
+    }
+    if (selectedEdge) {
+      return <EdgeEditor selectedEdge={selectedEdge as Edge} />;
+    }
+    return <MetadataEditor />;
+  }, [
+    selectedNode,
+    selectedEdge,
+    dataComponentLookup,
+    artifactComponentLookup,
+    hasFieldError,
+    getFieldErrorMessage,
+    getFirstErrorField,
+  ]);
+
+  const showBackButton = useMemo(() => {
+    return selectedNode || selectedEdge;
+  }, [selectedNode, selectedEdge]);
+
+  return (
+    <SidePaneLayout.Root isOpen={isOpen}>
+      {isOpen && (
+        <>
+          <SidePaneLayout.Header>
+            <div className="flex items-center relative">
+              {showBackButton && <SidePaneLayout.BackButton onClick={backToGraph} />}
+              <Heading
+                heading={heading}
+                Icon={HeadingIcon}
+                className={
+                  showBackButton
+                    ? 'transition-all duration-300 ease-in-out group-hover:translate-x-8'
+                    : ''
+                }
+              />
+            </div>
+            <SidePaneLayout.CloseButton onClick={onClose} />
+          </SidePaneLayout.Header>
+          <SidePaneLayout.Content>{editorContent}</SidePaneLayout.Content>
+        </>
+      )}
+    </SidePaneLayout.Root>
+  );
+}

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

@@ -0,0 +1,61 @@
+import { Settings, Play } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useGraphStore } from '@/features/graph/state/use-graph-store';
+
+interface ToolbarProps {
+  onSubmit: () => void;
+  isPreviewDisabled?: boolean;
+  toggleSidePane: () => void;
+  setShowPlayground: (show: boolean) => void;
+}
+
+export function Toolbar({
+  onSubmit,
+  isPreviewDisabled,
+  toggleSidePane,
+  setShowPlayground,
+}: ToolbarProps) {
+  const dirty = useGraphStore((state) => state.dirty);
+  const PreviewButton = (
+    <Button
+      disabled={dirty || isPreviewDisabled}
+      variant="outline"
+      type="button"
+      onClick={() => setShowPlayground(true)}
+    >
+      <Play className="w-4 h-4 text-muted-foreground" />
+      Try it
+    </Button>
+  );
+
+  return (
+    <div className="flex gap-2">
+      {dirty || isPreviewDisabled ? (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>{PreviewButton}</div>
+          </TooltipTrigger>
+          <TooltipContent>
+            {dirty
+              ? 'Please save your changes before trying the graph.'
+              : 'Please save the graph to try it.'}
+          </TooltipContent>
+        </Tooltip>
+      ) : (
+        PreviewButton
+      )}
+      <Button
+        onClick={onSubmit}
+        variant={dirty ? 'default' : 'outline'}
+        disabled={!dirty && !isPreviewDisabled}
+      >
+        {isPreviewDisabled ? 'Save' : 'Save changes'}
+      </Button>
+      <Button type="button" variant="ghost" onClick={toggleSidePane}>
+        <span className="sr-only">Toggle side pane</span>
+        <Settings className="w-4 h-4" />
+      </Button>
+    </div>
+  );
+}

package/src/components/graphs/delete-graph-confirmation.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { DeleteConfirmation } from '@/components/ui/delete-confirmation';
+import { deleteFullGraphAction } from '@/lib/actions/graph-full';
+
+interface DeleteGraphConfirmationProps {
+  graphId: string;
+  graphName?: string;
+  setIsOpen: (isOpen: boolean) => void;
+}
+
+export function DeleteGraphConfirmation({
+  graphId,
+  graphName,
+  setIsOpen,
+}: DeleteGraphConfirmationProps) {
+  const params = useParams();
+  const { tenantId, projectId } = params as { tenantId: string; projectId: string };
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleDelete = async () => {
+    setIsSubmitting(true);
+    try {
+      const result = await deleteFullGraphAction(tenantId, projectId, graphId);
+      if (result.success) {
+        toast.success('Graph deleted.');
+        setIsOpen(false);
+      } else {
+        toast.error(result.error);
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <DeleteConfirmation
+      itemName={graphName || 'this graph'}
+      isSubmitting={isSubmitting}
+      onDelete={handleDelete}
+    />
+  );
+}

package/src/components/graphs/graph-item-menu.tsx

@@ -0,0 +1,54 @@
+import { MoreVertical, Trash2 } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { DeleteGraphConfirmation } from './delete-graph-confirmation';
+
+interface GraphItemMenuProps {
+  graphId: string;
+  graphName?: string;
+}
+
+export function GraphItemMenu({ graphId, graphName }: GraphItemMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className=" p-0 hover:bg-accent hover:text-accent-foreground rounded-sm -mr-2"
+          >
+            <MoreVertical className="h-4 w-4 text-muted-foreground" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          align="end"
+          className="w-48 shadow-lg border border-border bg-popover/95 backdrop-blur-sm"
+        >
+          <DialogTrigger asChild>
+            <DropdownMenuItem className="text-destructive hover:!bg-destructive/10 dark:hover:!bg-destructive/20 hover:!text-destructive cursor-pointer">
+              <Trash2 className="size-4 text-destructive" />
+              Delete
+            </DropdownMenuItem>
+          </DialogTrigger>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {isOpen && (
+        <DeleteGraphConfirmation graphId={graphId} graphName={graphName} setIsOpen={setIsOpen} />
+      )}
+    </Dialog>
+  );
+}

package/src/components/graphs/graph-item.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { formatDate } from '@/app/utils/format-date';
+import {
+  ItemCardContent,
+  ItemCardDescription,
+  ItemCardFooter,
+  ItemCardHeader,
+  ItemCardLink,
+  ItemCardRoot,
+  ItemCardTitle,
+} from '@/components/ui/item-card';
+import type { Graph } from '@/lib/types/graph-full';
+import { GraphItemMenu } from './graph-item-menu';
+
+export interface GraphItemProps extends Graph {
+  tenantId: string;
+  projectId: string;
+}
+
+export function GraphItem({
+  id,
+  name,
+  description,
+  createdAt,
+  tenantId,
+  projectId,
+}: GraphItemProps) {
+  const linkPath = `/${tenantId}/projects/${projectId}/graphs/${id}`;
+
+  return (
+    <ItemCardRoot>
+      <ItemCardHeader>
+        <ItemCardLink href={linkPath}>
+          <ItemCardTitle className="text-sm">{name}</ItemCardTitle>
+        </ItemCardLink>
+        <GraphItemMenu graphId={id} graphName={name} />
+      </ItemCardHeader>
+      <ItemCardContent>
+        <ItemCardDescription hasContent={!!description}>
+          {description || 'No description'}
+        </ItemCardDescription>
+        <ItemCardFooter footerText={`Created ${formatDate(createdAt)}`} />
+      </ItemCardContent>
+    </ItemCardRoot>
+  );
+}

package/src/components/graphs/graph-list.tsx

@@ -0,0 +1,20 @@
+import type { Graph } from '@/lib/types/graph-full';
+import { GraphItem } from './graph-item';
+import { NewGraphItem } from './new-graph-item';
+
+interface GraphListProps {
+  tenantId: string;
+  projectId: string;
+  graphs: Graph[];
+}
+
+export async function GraphList({ tenantId, projectId, graphs }: GraphListProps) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 md:gap-4">
+      <NewGraphItem tenantId={tenantId} projectId={projectId} />
+      {graphs?.map((graph: Graph) => (
+        <GraphItem key={graph.id} {...graph} tenantId={tenantId} projectId={projectId} />
+      ))}
+    </div>
+  );
+}

package/src/components/graphs/new-graph-item.tsx

@@ -0,0 +1,23 @@
+import { Plus } from 'lucide-react';
+import Link from 'next/link';
+import { Card, CardContent } from '../ui/card';
+
+interface NewGraphItemProps {
+  tenantId: string;
+  projectId: string;
+}
+
+export function NewGraphItem({ tenantId, projectId }: NewGraphItemProps) {
+  return (
+    <Link href={`/${tenantId}/projects/${projectId}/graphs/new`} className="group">
+      <Card className="h-full bg-transparent border-1 shadow-none hover:bg-background hover:ring-2 hover:ring-accent/50 dark:hover:ring-accent/30 transition-all duration-300 cursor-pointer group border-dashed">
+        <CardContent className="flex flex-row items-center justify-center text-center gap-2 flex-1">
+          <Plus className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
+          <h3 className="font-medium text-sm text-muted-foreground group-hover:text-foreground transition-colors">
+            Create graph
+          </h3>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}

package/src/components/icons/anthropic.tsx

@@ -0,0 +1,21 @@
+import { forwardRef } from 'react';
+import { type IconComponentProps, SvgIcon } from '@/components/ui/svg-icon';
+
+export const AnthropicIcon = forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => (
+  <SvgIcon ref={ref} {...props} strokeWidth={0}>
+    <title>Anthropic icon</title>
+    <g clipPath="url(#clip0_22_178)">
+      <path
+        d="M17.3102 3.5H13.6399L20.3297 20.4197H24L17.3102 3.5ZM6.68981 3.5L0 20.4197H3.74837L5.12798 16.8796H12.1302L13.4837 20.4197H17.2321L10.5423 3.5H6.68981ZM6.32538 13.7299L8.61605 7.79501L10.9067 13.7299H6.32538Z"
+        fill="#181818"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_22_178">
+        <rect width="24" height="16.9197" fill="white" transform="translate(0 3.5)" />
+      </clipPath>
+    </defs>
+  </SvgIcon>
+));
+
+AnthropicIcon.displayName = 'AnthropicIcon';

package/src/components/icons/dashed-spline.tsx

@@ -0,0 +1,31 @@
+import { forwardRef } from 'react';
+import { type IconComponentProps, SvgIcon } from '@/components/ui/svg-icon';
+
+export const DashedSplineIcon = forwardRef<SVGSVGElement, IconComponentProps>((props, ref) => (
+  <SvgIcon ref={ref} {...props}>
+    <path
+      d="M19 7C20.1046 7 21 6.10457 21 5C21 3.89543 20.1046 3 19 3C17.8954 3 17 3.89543 17 5C17 6.10457 17.8954 7 19 7Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5 21C6.10457 21 7 20.1046 7 19C7 17.8954 6.10457 17 5 17C3.89543 17 3 17.8954 3 19C3 20.1046 3.89543 21 5 21Z"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5 17C5 13.8174 6.26428 10.7652 8.51472 8.51472C10.7652 6.26428 13.8174 5 17 5"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeDasharray="4 4"
+    />
+  </SvgIcon>
+));
+
+DashedSplineIcon.displayName = 'DashedSplineIcon';