@inkeep/agents-manage-ui 0.10.1 → 0.10.2

package/src/components/artifact-components/artifact-component-item.tsx

@@ -21,7 +21,7 @@ export function ArtifactComponentItem({
   tenantId,
   projectId,
 }: ArtifactComponent & { tenantId: string; projectId: string }) {
-  const linkPath = `/${tenantId}/projects/${projectId}/artifact-components/${id}`;
+  const linkPath = `/${tenantId}/projects/${projectId}/artifacts/${id}`;
 
   return (
     <ItemCardRoot>

package/src/components/artifact-components/delete-artifact-component-confirmation.tsx

@@ -29,7 +29,7 @@ export function DeleteArtifactComponentConfirmation({
       const result = await deleteArtifactComponentAction(tenantId, projectId, artifactComponentId);
       if (result.success) {
         setIsOpen(false);
-        toast.success('Artifact component deleted.');
+        toast.success('Artifact deleted.');
       } else {
         toast.error(result.error);
       }
@@ -40,7 +40,7 @@ export function DeleteArtifactComponentConfirmation({
 
   return (
     <DeleteConfirmation
-      itemName={artifactComponentName || 'this artifact component'}
+      itemName={artifactComponentName || 'this artifact'}
       isSubmitting={isSubmitting}
       onDelete={handleDelete}
     />

package/src/components/artifact-components/form/artifact-component-form.tsx

@@ -67,22 +67,22 @@ export function ArtifactComponentForm({
       if (id) {
         const res = await updateArtifactComponentAction(tenantId, projectId, payload);
         if (!res.success) {
-          toast.error(res.error || 'Failed to update artifact component');
+          toast.error(res.error || 'Failed to update artifact.');
           return;
         }
-        toast.success('Artifact component updated');
+        toast.success('Artifact updated.');
       } else {
         const res = await createArtifactComponentAction(tenantId, projectId, payload);
         if (!res.success) {
-          toast.error(res.error || 'Failed to create artifact component');
+          toast.error(res.error || 'Failed to create artifact');
           return;
         }
-        toast.success('Artifact component created');
-        router.push(`/${tenantId}/projects/${projectId}/artifact-components`);
+        toast.success('Artifact created.');
+        router.push(`/${tenantId}/projects/${projectId}/artifacts`);
       }
     } catch (error) {
-      console.error('Error submitting artifact component:', error);
-      const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
+      console.error('Error submitting artifact:', error);
+      const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred.';
       toast.error(errorMessage);
     }
   };
@@ -101,13 +101,13 @@ export function ArtifactComponentForm({
           control={form.control}
           name="id"
           label="Id"
-          placeholder="my-artifact-component"
+          placeholder="my-artifact"
           disabled={!!id}
           isRequired
           description={
             id
               ? ''
-              : 'Choose a unique identifier for this component. Using an existing id will replace that component.'
+              : 'Choose a unique identifier for this artifact. Using an existing id will replace that artifact.'
           }
         />
         <GenericTextarea

package/src/components/data-components/data-component-item.tsx

@@ -21,7 +21,7 @@ export function DataComponentItem({
   tenantId,
   projectId,
 }: DataComponent & { tenantId: string; projectId: string }) {
-  const linkPath = `/${tenantId}/projects/${projectId}/data-components/${id}`;
+  const linkPath = `/${tenantId}/projects/${projectId}/components/${id}`;
 
   return (
     <ItemCardRoot>

package/src/components/data-components/delete-data-component-confirmation.tsx

@@ -29,7 +29,7 @@ export function DeleteDataComponentConfirmation({
       const result = await deleteDataComponentAction(tenantId, projectId, dataComponentId);
       if (result.success) {
         setIsOpen(false);
-        toast.success('Data component deleted.');
+        toast.success('Component deleted.');
       } else {
         toast.error(result.error);
       }
@@ -40,7 +40,7 @@ export function DeleteDataComponentConfirmation({
 
   return (
     <DeleteConfirmation
-      itemName={dataComponentName || 'this data component'}
+      itemName={dataComponentName || 'this component'}
       isSubmitting={isSubmitting}
       onDelete={handleDelete}
     />

package/src/components/data-components/form/data-component-form.tsx

@@ -64,21 +64,21 @@ export function DataComponentForm({
       if (id) {
         const res = await updateDataComponentAction(tenantId, projectId, payload);
         if (!res.success) {
-          toast.error(res.error || 'Failed to update data component');
+          toast.error(res.error || 'Failed to update component');
           return;
         }
-        toast.success('Data component updated');
+        toast.success('Component updated');
       } else {
         const res = await createDataComponentAction(tenantId, projectId, payload);
         if (!res.success) {
-          toast.error(res.error || 'Failed to create data component');
+          toast.error(res.error || 'Failed to create component');
           return;
         }
-        toast.success('Data component created');
-        router.push(`/${tenantId}/projects/${projectId}/data-components`);
+        toast.success('Component created');
+        router.push(`/${tenantId}/projects/${projectId}/components`);
       }
     } catch (error) {
-      console.error('Error submitting data component:', error);
+      console.error('Error submitting component:', error);
       const errorMessage = error instanceof Error ? error.message : 'An unexpected error occurred';
       toast.error(errorMessage);
     }

package/src/components/graph/graph.tsx

@@ -670,7 +670,7 @@ function Flow({
             <Toolbar
               onSubmit={onSubmit}
               isPreviewDisabled={!graph?.id}
-              toggleSidePane={isOpen ? closeSidePane : openGraphPane}
+              toggleSidePane={isOpen ? backToGraph : openGraphPane}
               setShowPlayground={() => {
                 closeSidePane();
                 setShowPlayground(true);

package/src/components/graph/nodes/agent-node.tsx

@@ -108,14 +108,10 @@ export function AgentNode(props: NodeProps & { data: AgentNodeData }) {
             </Badge>
           ) : null}
           {dataComponentNames?.length > 0 && (
-            <ListSection title="Data components" items={dataComponentNames} Icon={Component} />
+            <ListSection title="Components" items={dataComponentNames} Icon={Component} />
           )}
           {artifactComponentNames?.length > 0 && (
-            <ListSection
-              title="Artifact components"
-              items={artifactComponentNames}
-              Icon={Library}
-            />
+            <ListSection title="Artifacts" items={artifactComponentNames} Icon={Library} />
           )}
         </BaseNodeContent>
         <Handle id={agentNodeTargetHandleId} type="source" position={Position.Top} isConnectable />

package/src/components/graph/sidepane/metadata/metadata-editor.tsx

@@ -147,7 +147,7 @@ function MetadataEditor() {
           title="Default models"
           description="Set default models that will be inherited by agents that don't have their own models configured."
         />
-        <div className="relative">
+        <div className="relative space-y-2">
           <ModelSelector
             value={models?.base?.model || ''}
             inheritedValue={project?.models?.base?.model}
@@ -176,8 +176,8 @@ function MetadataEditor() {
                 />
               </div>
             }
-            tooltip="Primary model for general agent responses"
           />
+          <p className="text-xs text-muted-foreground">Primary model for general agent responses</p>
         </div>
 
         <Collapsible
@@ -195,7 +195,7 @@ function MetadataEditor() {
             </Button>
           </CollapsibleTrigger>
           <CollapsibleContent className="space-y-8 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="relative">
+            <div className="relative space-y-2">
               <ModelSelector
                 value={models?.structuredOutput?.model || ''}
                 inheritedValue={
@@ -228,10 +228,12 @@ function MetadataEditor() {
                     />
                   </div>
                 }
-                tooltip="Model for structured outputs and data components (defaults to base model)"
               />
+              <p className="text-xs text-muted-foreground">
+                Model for structured outputs and components (defaults to base model)
+              </p>
             </div>
-            <div className="relative">
+            <div className="relative space-y-2">
               <ModelSelector
                 value={models?.summarizer?.model || ''}
                 inheritedValue={
@@ -264,8 +266,10 @@ function MetadataEditor() {
                     />
                   </div>
                 }
-                tooltip="Model for summarization tasks (defaults to base model)"
               />
+              <p className="text-xs text-muted-foreground">
+                Model for summarization tasks (defaults to base model)
+              </p>
             </div>
           </CollapsibleContent>
         </Collapsible>

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

@@ -198,29 +198,29 @@ export function AgentNodeEditor({
       </div>
       <Separator />
       <ComponentSelector
-        label="Data components"
+        label="Components"
         componentLookup={dataComponentLookup}
         selectedComponents={selectedDataComponents}
         onSelectionChange={(newSelection) => {
           updatePath('dataComponents', newSelection);
         }}
-        emptyStateMessage="No data components found."
-        emptyStateActionText="Create data component"
-        emptyStateActionHref={`/${tenantId}/projects/${projectId}/data-components/new`}
-        placeholder="Select data components..."
+        emptyStateMessage="No components found."
+        emptyStateActionText="Create component"
+        emptyStateActionHref={`/${tenantId}/projects/${projectId}/components/new`}
+        placeholder="Select components..."
       />
 
       <ComponentSelector
-        label="Artifact components"
+        label="Artifacts"
         componentLookup={artifactComponentLookup}
         selectedComponents={selectedArtifactComponents}
         onSelectionChange={(newSelection) => {
           updatePath('artifactComponents', newSelection);
         }}
-        emptyStateMessage="No artifact components found."
-        emptyStateActionText="Create artifact component"
-        emptyStateActionHref={`/${tenantId}/projects/${projectId}/artifact-components/new`}
-        placeholder="Select artifact components..."
+        emptyStateMessage="No artifacts found."
+        emptyStateActionText="Create artifact"
+        emptyStateActionHref={`/${tenantId}/projects/${projectId}/artifacts/new`}
+        placeholder="Select artifacts..."
       />
     </div>
   );

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

@@ -1,8 +1,8 @@
 'use client';
 
-import { ChevronsUpDown } from 'lucide-react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { useParams } from 'next/navigation';
 import { useState } from 'react';
-import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
   Command,
@@ -15,6 +15,7 @@ import {
 import { Label } from '@/components/ui/label';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import type { Credential } from '@/lib/api/credentials';
+import { EmptyState } from './empty-state';
 
 // Header component - shows label and status
 interface CredentialHeaderProps {
@@ -44,6 +45,10 @@ function CredentialDropdown({
   placeholder = 'Select credential...',
 }: CredentialDropdownProps) {
   const [open, setOpen] = useState(false);
+  const { tenantId, projectId } = useParams<{
+    tenantId: string;
+    projectId: string;
+  }>();
 
   return (
     <div className="flex w-full">
@@ -80,7 +85,14 @@ function CredentialDropdown({
           <Command>
             <CommandInput placeholder="Search credentials..." />
             <CommandList>
-              <CommandEmpty>No credentials found.</CommandEmpty>
+              <CommandEmpty>
+                {' '}
+                <EmptyState
+                  message={'No credentials found.'}
+                  actionText={'Create credential'}
+                  actionHref={`/${tenantId}/projects/${projectId}/credentials/new`}
+                />
+              </CommandEmpty>
               <CommandGroup>
                 {/* No Authentication option */}
                 <CommandItem
@@ -96,11 +108,7 @@ function CredentialDropdown({
                       <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>
-                    )}
+                    {selectedCredentialId === null && <Check className="ml-2 h-4 w-4" />}
                   </div>
                 </CommandItem>
 
@@ -120,11 +128,7 @@ function CredentialDropdown({
                         <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>
-                      )}
+                      {selectedCredentialId === credential.id && <Check className="ml-2 h-4 w-4" />}
                     </div>
                   </CommandItem>
                 ))}

package/src/components/graph/sidepane/nodes/model-section.tsx

@@ -29,7 +29,7 @@ export function ModelSection({
 
   return (
     <div className="space-y-8">
-      <div className="relative">
+      <div className="relative space-y-2">
         <ModelSelector
           value={models?.base?.model || ''}
           onValueChange={(modelValue) => {
@@ -50,8 +50,8 @@ export function ModelSection({
               />
             </div>
           }
-          tooltip="Primary model for general agent responses"
         />
+        <p className="text-xs text-muted-foreground">Primary model for general agent responses</p>
       </div>
 
       <Collapsible
@@ -69,7 +69,7 @@ export function ModelSection({
           </Button>
         </CollapsibleTrigger>
         <CollapsibleContent className="space-y-8 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="relative">
+          <div className="relative space-y-2">
             <ModelSelector
               value={models?.structuredOutput?.model || ''}
               onValueChange={(modelValue) => {
@@ -96,10 +96,12 @@ export function ModelSection({
                   />
                 </div>
               }
-              tooltip="The model used for structured output and data components (defaults to base model)"
             />
+            <p className="text-xs text-muted-foreground">
+              The model used for structured output and components (defaults to base model)
+            </p>
           </div>
-          <div className="relative">
+          <div className="relative space-y-2">
             <ModelSelector
               value={models?.summarizer?.model || ''}
               onValueChange={(modelValue) => {
@@ -126,8 +128,10 @@ export function ModelSection({
                   />
                 </div>
               }
-              tooltip="The model used for summarization tasks (defaults to base model)"
             />
+            <p className="text-xs text-muted-foreground">
+              The model used for summarization tasks (defaults to base model)
+            </p>
           </div>
         </CollapsibleContent>
       </Collapsible>

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

@@ -182,6 +182,7 @@ export function ModelSelector({
                       value="__openrouter__"
                       onSelect={() => {
                         setShowCustomInput('openrouter');
+                        setOpen(false);
                         setCustomModelInput('');
                       }}
                     >
@@ -192,6 +193,7 @@ export function ModelSelector({
                       value="__gateway__"
                       onSelect={() => {
                         setShowCustomInput('gateway');
+                        setOpen(false);
                         setCustomModelInput('');
                       }}
                     >
@@ -209,6 +211,8 @@ export function ModelSelector({
                           onSelect={(currentValue) => {
                             onValueChange?.(currentValue === value ? '' : currentValue);
                             setOpen(false);
+                            setCustomModelInput('');
+                            setShowCustomInput(null);
                           }}
                         >
                           {model.label}
@@ -239,7 +243,7 @@ export function ModelSelector({
                     ? 'Examples: anthropic/claude-3-5-sonnet, meta-llama/llama-3.1-405b-instruct'
                     : 'Examples: openai/gpt-4o, anthropic/claude-3-5-sonnet'}
                 </div>
-                <div className="flex gap-2">
+                <div className="flex gap-2 items-center">
                   <input
                     className="flex-1 px-3 py-2 text-sm border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                     placeholder={

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

@@ -83,7 +83,7 @@ function StructuredOutputModelSection({ control }: { control: Control<ProjectFor
         control={control}
         name="models.structuredOutput.model"
         label="Structured output model"
-        description="Model for structured outputs and data components (defaults to base model)"
+        description="Model for structured outputs and components (defaults to base model)"
       >
         {(field) => (
           <ModelSelector

package/src/components/sidebar-nav/sidebar-nav.tsx

@@ -60,7 +60,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             icon: Workflow,
           },
           {
-            title: 'Graph API Keys',
+            title: 'API Keys',
             url: `/${tenantId}/projects/${projectId}/api-keys`,
             icon: Key,
           },
@@ -69,16 +69,6 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             url: `/${tenantId}/projects/${projectId}/mcp-servers`,
             icon: MCPIcon as LucideIcon,
           },
-          {
-            title: 'Data Components',
-            url: `/${tenantId}/projects/${projectId}/data-components`,
-            icon: Component,
-          },
-          {
-            title: 'Artifact Components',
-            url: `/${tenantId}/projects/${projectId}/artifact-components`,
-            icon: Library,
-          },
           {
             title: 'Credentials',
             url: `/${tenantId}/projects/${projectId}/credentials`,
@@ -89,6 +79,16 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             url: `/${tenantId}/projects/${projectId}/traces`,
             icon: Activity,
           },
+          {
+            title: 'Components',
+            url: `/${tenantId}/projects/${projectId}/components`,
+            icon: Component,
+          },
+          {
+            title: 'Artifacts',
+            url: `/${tenantId}/projects/${projectId}/artifacts`,
+            icon: Library,
+          },
           {
             title: 'Settings',
             url: `/${tenantId}/projects/${projectId}/settings`,

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

@@ -102,19 +102,17 @@ export function TimelineItem({
   const isoDateTime = new Date(activity.timestamp).toISOString();
 
   return (
-    <div 
-      className={`flex flex-col text-muted-foreground relative text-xs transition-all duration-200 rounded-lg ${
-        isSelected 
-          ? 'bg-primary/5 dark:bg-primary/15 px-3 py-2 ring-2 ring-primary/20 dark:ring-primary/40' 
-          : 'py-2'
-      }`}
-    >
+    <div className={`flex flex-col text-muted-foreground relative text-xs`}>
       <div className="flex items-start">
-        <div className="mr-4 pt-[1px]">
+        <div className="mr-2 py-2">
           <Icon className={`w-4 h-4 ${className}`} />
         </div>
 
-        <div className="space-y-1.5">
+        <div
+          className={`space-y-1.5 px-3 py-2 w-full transition-all duration-200 rounded-lg ${
+            isSelected ? 'ring-1 ring-primary/50 bg-primary/5' : ''
+          }`}
+        >
           <div className="flex items-center gap-2">
             <button
               type="button"
@@ -380,9 +378,7 @@ export function TimelineItem({
           {/* agent name for AI generation */}
           {activity.type === ACTIVITY_TYPES.AI_GENERATION && activity.agentName && (
             <div className="mb-1">
-              <Badge variant="code">
-                {activity.agentName}
-              </Badge>
+              <Badge variant="code">{activity.agentName}</Badge>
             </div>
           )}
 
@@ -396,7 +392,7 @@ export function TimelineItem({
         </div>
       </div>
 
-      {!isLast && <div className="absolute top-6 left-[7px] border-l border-border h-full" />}
+      {!isLast && <div className="absolute top-8 left-[7px] border-l border-border h-full" />}
     </div>
   );
 }

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

@@ -17,6 +17,7 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { ExternalLink } from '@/components/ui/external-link';
 import { ResizableHandle, ResizablePanel } from '@/components/ui/resizable';
+import { DOCS_BASE_URL } from '@/constants/page-descriptions';
 
 function panelTitle(selected: SelectedPanel) {
   switch (selected.type) {
@@ -84,14 +85,22 @@ function EmptyTimeline({
                   The SIGNOZ_API_KEY environment variable is not configured. Please set this
                   environment variable to the enable activity timeline.
                 </p>
-                <ExternalLink href={`https://docs.inkeep.com/visual-builder/graphs`}>
+                <ExternalLink
+                  className="text-amber-700 dark:text-amber-300 dark:hover:text-amber-200 ml-0 mt-1"
+                  iconClassName="text-amber-700 dark:text-amber-300 dark:group-hover/link:text-amber-200"
+                  href={`${DOCS_BASE_URL}/visual-builder/graphs`}
+                >
                   Learn more
                 </ExternalLink>
               </div>
             ) : (
               <div>
                 <p>{error}</p>
-                <ExternalLink href="https://docs.inkeep.com/quick-start/observability">
+                <ExternalLink
+                  className="text-amber-700 dark:text-amber-300 dark:hover:text-amber-200 ml-0 mt-1"
+                  iconClassName="text-amber-700 dark:text-amber-300 dark:group-hover/link:text-amber-200"
+                  href={`${DOCS_BASE_URL}/quick-start/observability`}
+                >
                   View observability setup guide
                 </ExternalLink>
               </div>
@@ -136,7 +145,7 @@ export function TimelineWrapper({
   retryConnection,
   refreshOnce,
   showConversationTracesLink = false,
-  conversationId
+  conversationId,
 }: TimelineWrapperProps) {
   const [selected, setSelected] = useState<SelectedPanel | null>(null);
   const [panelVisible, setPanelVisible] = useState(false);
@@ -157,12 +166,12 @@ export function TimelineWrapper({
     }
   }, [selected]);
 
-    // Clear selected panel when conversation changes
-    useEffect(() => {
-      if (conversationId) {
-        setSelected(null);
-      }
-    }, [conversationId]);
+  // Clear selected panel when conversation changes
+  useEffect(() => {
+    if (conversationId) {
+      setSelected(null);
+    }
+  }, [conversationId]);
 
   // Memoize activities calculation to prevent expensive operations on every render
   const activities = useMemo(() => {
@@ -295,7 +304,7 @@ export function TimelineWrapper({
 
   return (
     <>
-      <ResizablePanel order={2}>
+      <ResizablePanel id="activity-timeline" order={2}>
         <div className="bg-background h-full flex flex-col py-4">
           <div className="flex-shrink-0">
             <div className="flex items-center justify-between px-6 pb-4">
@@ -409,7 +418,7 @@ export function TimelineWrapper({
       <ResizableHandle />
       {/* Side Panel */}
       {selected && (
-        <ResizablePanel order={3}>
+        <ResizablePanel id="activity-details-sidepane" order={3}>
           <ActivityDetailsSidePane
             key={selected.item.id}
             title={panelTitle(selected)}

package/src/components/ui/external-link.tsx

@@ -3,7 +3,13 @@ import Link from 'next/link';
 import type { ComponentProps } from 'react';
 import { cn } from '@/lib/utils';
 
-export function ExternalLink({ href, children, className, ...props }: ComponentProps<typeof Link>) {
+export function ExternalLink({
+  href,
+  children,
+  className,
+  iconClassName,
+  ...props
+}: ComponentProps<typeof Link> & { iconClassName?: string }) {
   return (
     <Link
       href={href}
@@ -16,7 +22,12 @@ export function ExternalLink({ href, children, className, ...props }: ComponentP
       {...props}
     >
       {children}
-      <ArrowUpRight className="size-3.5 text-muted-foreground/60 group-hover/link:text-primary" />
+      <ArrowUpRight
+        className={cn(
+          'size-3.5 text-muted-foreground/60 group-hover/link:text-primary',
+          iconClassName
+        )}
+      />
     </Link>
   );
 }

package/src/constants/page-descriptions.tsx

@@ -15,7 +15,7 @@ export const artifactDescription = (
 
 export const dataComponentDescription = (
   <>
-    Data components are structured components that agents can use to display rich data.
+    Components are structured components that agents can use to display rich data.
     {'\n'}
     <ExternalLink href={`${DOCS_BASE_URL}/visual-builder/data-components`}>Learn more</ExternalLink>
   </>

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

@@ -43,13 +43,13 @@ function calculateNodeHeight(node: Node): number {
       height += 30;
     }
 
-    // Add height for data components section
+    // Add height for components section
     if (data.dataComponents && data.dataComponents.length > 0) {
       // Title + items section
       height += 60 + Math.ceil(data.dataComponents.length / 3) * 30;
     }
 
-    // Add height for artifact components section
+    // Add height for artifacts section
     if (data.artifactComponents && data.artifactComponents.length > 0) {
       // Title + items section
       height += 60 + Math.ceil(data.artifactComponents.length / 3) * 30;