@inkeep/agents-manage-ui 0.9.0 → 0.10.2

package/src/app/[tenantId]/projects/[projectId]/{data-components → components}/page.tsx

@@ -22,24 +22,24 @@ async function DataComponentsPage({ params }: DataComponentsPageProps) {
     const response = await fetchDataComponents(tenantId, projectId);
     dataComponents = response;
   } catch (_error) {
-    throw new Error('Failed to fetch data components');
+    throw new Error('Failed to fetch components');
   }
   return (
-    <BodyTemplate breadcrumbs={[{ label: 'Data components' }]}>
+    <BodyTemplate breadcrumbs={[{ label: 'Components' }]}>
       <MainContent className="min-h-full">
         {dataComponents.data.length > 0 ? (
           <>
             <PageHeader
-              title="Data components"
+              title="Components"
               description={dataComponentDescription}
               action={
                 <Button asChild>
                   <Link
-                    href={`/${tenantId}/projects/${projectId}/data-components/new`}
+                    href={`/${tenantId}/projects/${projectId}/components/new`}
                     className="flex items-center gap-2"
                   >
                     <Plus className="size-4" />
-                    New data component
+                    New component
                   </Link>
                 </Button>
               }
@@ -52,10 +52,10 @@ async function DataComponentsPage({ params }: DataComponentsPageProps) {
           </>
         ) : (
           <EmptyState
-            title="No data components yet."
+            title="No components yet."
             description={dataComponentDescription}
-            link={`/${tenantId}/projects/${projectId}/data-components/new`}
-            linkText="Create data component"
+            link={`/${tenantId}/projects/${projectId}/components/new`}
+            linkText="Create component"
           />
         )}
       </MainContent>

package/src/app/api/signoz/conversations/[conversationId]/route.ts

@@ -204,6 +204,10 @@ function buildConversationListPayload(
               key: SPAN_KEYS.AI_TOOL_CALL_RESULT,
               ...QUERY_FIELD_CONFIGS.STRING_TAG,
             },
+            {
+              key: SPAN_KEYS.AI_TOOL_CALL_ARGS,
+              ...QUERY_FIELD_CONFIGS.STRING_TAG,
+            },
             { key: SPAN_KEYS.AI_TOOL_TYPE, ...QUERY_FIELD_CONFIGS.STRING_TAG },
             { key: SPAN_KEYS.AI_AGENT_NAME, ...QUERY_FIELD_CONFIGS.STRING_TAG },
             {
@@ -579,6 +583,10 @@ function buildConversationListPayload(
               key: SPAN_KEYS.GEN_AI_USAGE_OUTPUT_TOKENS,
               ...QUERY_FIELD_CONFIGS.INT64_TAG,
             },
+            {
+              key: SPAN_KEYS.AI_RESPONSE_TEXT,
+              ...QUERY_FIELD_CONFIGS.STRING_TAG,
+            },
           ]
         ),
 
@@ -783,6 +791,7 @@ export async function GET(
       serviceTier?: string;
       aiResponseContent?: string;
       aiResponseTimestamp?: string;
+      aiResponseText?: string;
       // user
       messageContent?: string;
       // context resolution
@@ -795,6 +804,8 @@ export async function GET(
       // tool specifics
       toolType?: string;
       toolPurpose?: string;
+      toolCallArgs?: string;
+      toolCallResult?: string;
       // delegation/transfer
       delegationFromAgentId?: string;
       delegationToAgentId?: string;
@@ -824,6 +835,12 @@ export async function GET(
     // tool calls → activities
     for (const span of toolCallSpans) {
       const name = getString(span, SPAN_KEYS.AI_TOOL_CALL_NAME, 'Unknown Tool');
+      
+      // Skip thinking_complete tool calls from the timeline
+      if (name === 'thinking_complete') {
+        continue;
+      }
+      
       const hasError = getField(span, SPAN_KEYS.HAS_ERROR) === true;
       const durMs = getNumber(span, SPAN_KEYS.DURATION_NANO) / 1e6;
       const toolType = getString(span, SPAN_KEYS.AI_TOOL_TYPE, '');
@@ -833,11 +850,13 @@ export async function GET(
       const transferFromAgentId = getString(span, SPAN_KEYS.TRANSFER_FROM_AGENT_ID, '');
       const transferToAgentId = getString(span, SPAN_KEYS.TRANSFER_TO_AGENT_ID, '');
 
+      // Extract tool call args and result for ALL tool calls
+      const toolCallArgs = getString(span, SPAN_KEYS.AI_TOOL_CALL_ARGS, '');
+      const toolCallResult = getString(span, SPAN_KEYS.AI_TOOL_CALL_RESULT, '');
+
       // Parse save_tool_result JSON if present
       let saveFields: any = {};
       if (name === TOOL_NAMES.SAVE_TOOL_RESULT) {
-        const toolResult = getString(span, SPAN_KEYS.AI_TOOL_CALL_RESULT, '');
-        const toolArgs = getString(span, SPAN_KEYS.AI_TOOL_CALL_ARGS, '');
         const operationId = getString(span, SPAN_KEYS.AI_OPERATION_ID, '');
         const toolCallId = getString(span, SPAN_KEYS.AI_TOOL_CALL_ID, '');
         const functionId = getString(span, SPAN_KEYS.AI_TELEMETRY_FUNCTION_ID, '');
@@ -845,14 +864,14 @@ export async function GET(
         // Parse tool arguments
         let parsedArgs: any = {};
         try {
-          parsedArgs = JSON.parse(toolArgs);
+          parsedArgs = JSON.parse(toolCallArgs);
         } catch (_e) {
           // Keep empty if parsing fails
         }
 
         // Parse tool result
         try {
-          const parsed = JSON.parse(toolResult);
+          const parsed = JSON.parse(toolCallResult);
           // Extract first artifact info if available
           const firstArtifact = parsed.artifacts
             ? (Object.values(parsed.artifacts)[0] as any)
@@ -898,6 +917,8 @@ export async function GET(
         delegationToAgentId: delegationToAgentId || undefined,
         transferFromAgentId: transferFromAgentId || undefined,
         transferToAgentId: transferToAgentId || undefined,
+        toolCallArgs: toolCallArgs || undefined,
+        toolCallResult: toolCallResult || undefined,
         ...saveFields, // Include save_tool_result specific fields
       });
     }
@@ -1040,6 +1061,7 @@ export async function GET(
         aiModel: getString(span, SPAN_KEYS.AI_RESPONSE_MODEL, 'Unknown Model'),
         inputTokens: getNumber(span, SPAN_KEYS.GEN_AI_USAGE_INPUT_TOKENS, 0),
         outputTokens: getNumber(span, SPAN_KEYS.GEN_AI_USAGE_OUTPUT_TOKENS, 0),
+        aiResponseText: getString(span, SPAN_KEYS.AI_RESPONSE_TEXT, '') || undefined,
       });
     }
 

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

@@ -179,7 +179,7 @@ function Flow({
     return lookup;
   }, [graph?.agents]);
 
-  const { screenToFlowPosition, updateNodeData } = useReactFlow();
+  const { screenToFlowPosition, updateNodeData, fitView } = useReactFlow();
   const {
     nodes: storeNodes,
     edges,
@@ -259,6 +259,28 @@ function Flow({
     }
   }, []);
 
+  // Auto-center graph when sidepane opens/closes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to trigger on isOpen changes
+  useEffect(() => {
+    // Delay to allow CSS transition to complete (300ms transition + 50ms buffer)
+    const timer = setTimeout(() => {
+      fitView({ maxZoom: 1, duration: 200 });
+    }, 350);
+
+    return () => clearTimeout(timer);
+  }, [isOpen, fitView]);
+
+  // Auto-center graph when playground opens/closes
+  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to trigger on showPlayground changes
+  useEffect(() => {
+    // Delay to allow CSS transition to complete
+    const timer = setTimeout(() => {
+      fitView({ maxZoom: 1, duration: 200 });
+    }, 350);
+
+    return () => clearTimeout(timer);
+  }, [showPlayground, fitView]);
+
   // biome-ignore lint/correctness/useExhaustiveDependencies: we only want to add/connect edges once
   const onConnectWrapped = useCallback((params: Connection) => {
     markUnsaved();
@@ -648,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`,