@inkeep/agents-manage-ui 0.10.1 → 0.11.0

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

@@ -835,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, '');

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/form/expandable-json-editor.tsx

@@ -70,7 +70,7 @@ function ExpandedJsonEditor({
         value={value || ''}
         onChange={onChange}
         placeholder={placeholder}
-        className="[&>.cm-editor]:max-h-full"
+        className="[&>.cm-editor]:h-full"
       />
       {error && <p className="text-sm text-destructive mt-2">{error}</p>}
     </div>

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/graph/sidepane/sidepane.tsx

@@ -136,6 +136,7 @@ export function SidePane({
     getFieldErrorMessage,
     getFirstErrorField,
     agentToolConfigLookup,
+    credentialLookup,
   ]);
 
   const showBackButton = useMemo(() => {

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>
   );
 }