@inkeep/agents-manage-ui 0.1.1 → 0.1.3

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

@@ -9,11 +9,12 @@ import { GenericTextarea } from '@/components/form/generic-textarea';
 import { Button } from '@/components/ui/button';
 import { Form } from '@/components/ui/form';
 import { Separator } from '@/components/ui/separator';
+import { useAutoPrefillId } from '@/hooks/use-auto-prefill-id';
 import { createProjectAction, updateProjectAction } from '@/lib/actions/projects';
 import { defaultValues } from './form-configuration';
-import { type ProjectFormData, projectSchema } from './validation';
 import { ProjectModelsSection } from './project-models-section';
 import { ProjectStopWhenSection } from './project-stopwhen-section';
+import { type ProjectFormData, projectSchema } from './validation';
 
 interface ProjectFormProps {
   tenantId: string;
@@ -38,6 +39,14 @@ export function ProjectForm({
   const { isSubmitting } = form.formState;
   const router = useRouter();
 
+  // Auto-prefill ID based on name field (only for new components)
+  useAutoPrefillId({
+    form,
+    nameField: 'name',
+    idField: 'id',
+    isEditing: !!projectId,
+  });
+
   const onSubmit = async (data: ProjectFormData) => {
     try {
       if (projectId) {
@@ -75,6 +84,14 @@ export function ProjectForm({
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <GenericInput
+          control={form.control}
+          name="name"
+          label="Project Name"
+          placeholder="My Project"
+          description="A friendly name for your project"
+          isRequired
+        />
         <GenericInput
           control={form.control}
           name="id"
@@ -82,13 +99,7 @@ export function ProjectForm({
           placeholder="my-project"
           description="Choose a unique identifier for this project. This cannot be changed later."
           disabled={!!projectId}
-        />
-        <GenericInput
-          control={form.control}
-          name="name"
-          label="Project Name"
-          placeholder="My Project"
-          description="A friendly name for your project"
+          isRequired
         />
         <GenericTextarea
           control={form.control}
@@ -96,6 +107,7 @@ export function ProjectForm({
           label="Description"
           placeholder="Describe what this project is for..."
           className="min-h-[100px]"
+          isRequired
         />
 
         <Separator />

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

@@ -1,13 +1,13 @@
 'use client';
 
-import { useState } from 'react';
 import { ChevronRight } from 'lucide-react';
-import { Control, useController, useWatch } from 'react-hook-form';
+import { useState } from 'react';
+import { type Control, useController, useWatch } from 'react-hook-form';
+import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
+import { ModelSelector } from '@/components/graph/sidepane/nodes/model-selector';
 import { Button } from '@/components/ui/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { ExpandableJsonEditor } from '@/components/form/expandable-json-editor';
 import { Label } from '@/components/ui/label';
-import { ModelSelector } from '@/components/graph/sidepane/nodes/model-selector';
 import type { ProjectFormData } from './validation';
 
 interface ProjectModelsSectionProps {
@@ -16,8 +16,11 @@ interface ProjectModelsSectionProps {
 
 function BaseModelSection({ control }: { control: Control<ProjectFormData> }) {
   const { field: modelField } = useController({ control, name: 'models.base.model' });
-  const { field: providerOptionsField } = useController({ control, name: 'models.base.providerOptions' });
-  
+  const { field: providerOptionsField } = useController({
+    control,
+    name: 'models.base.providerOptions',
+  });
+
   return (
     <div className="space-y-2">
       <ModelSelector
@@ -26,13 +29,13 @@ function BaseModelSection({ control }: { control: Control<ProjectFormData> }) {
         value={modelField.value || ''}
         onValueChange={modelField.onChange}
       />
-      <p className="text-xs text-muted-foreground">
-        Primary model for general agent responses
-      </p>
+      <p className="text-xs text-muted-foreground">Primary model for general agent responses</p>
       <ExpandableJsonEditor
         name="models.base.providerOptions"
         label="Provider Options"
-        value={providerOptionsField.value ? JSON.stringify(providerOptionsField.value, null, 2) : ''}
+        value={
+          providerOptionsField.value ? JSON.stringify(providerOptionsField.value, null, 2) : ''
+        }
         onChange={(value) => {
           let parsedOptions;
           try {
@@ -53,8 +56,11 @@ function BaseModelSection({ control }: { control: Control<ProjectFormData> }) {
 
 function StructuredOutputModelSection({ control }: { control: Control<ProjectFormData> }) {
   const { field: modelField } = useController({ control, name: 'models.structuredOutput.model' });
-  const { field: providerOptionsField } = useController({ control, name: 'models.structuredOutput.providerOptions' });
-  
+  const { field: providerOptionsField } = useController({
+    control,
+    name: 'models.structuredOutput.providerOptions',
+  });
+
   return (
     <div className="space-y-2">
       <ModelSelector
@@ -69,7 +75,9 @@ function StructuredOutputModelSection({ control }: { control: Control<ProjectFor
       <ExpandableJsonEditor
         name="models.structuredOutput.providerOptions"
         label="Provider Options"
-        value={providerOptionsField.value ? JSON.stringify(providerOptionsField.value, null, 2) : ''}
+        value={
+          providerOptionsField.value ? JSON.stringify(providerOptionsField.value, null, 2) : ''
+        }
         onChange={(value) => {
           let parsedOptions;
           try {
@@ -90,8 +98,11 @@ function StructuredOutputModelSection({ control }: { control: Control<ProjectFor
 
 function SummarizerModelSection({ control }: { control: Control<ProjectFormData> }) {
   const { field: modelField } = useController({ control, name: 'models.summarizer.model' });
-  const { field: providerOptionsField } = useController({ control, name: 'models.summarizer.providerOptions' });
-  
+  const { field: providerOptionsField } = useController({
+    control,
+    name: 'models.summarizer.providerOptions',
+  });
+
   return (
     <div className="space-y-2">
       <ModelSelector
@@ -106,7 +117,9 @@ function SummarizerModelSection({ control }: { control: Control<ProjectFormData>
       <ExpandableJsonEditor
         name="models.summarizer.providerOptions"
         label="Provider Options"
-        value={providerOptionsField.value ? JSON.stringify(providerOptionsField.value, null, 2) : ''}
+        value={
+          providerOptionsField.value ? JSON.stringify(providerOptionsField.value, null, 2) : ''
+        }
         onChange={(value) => {
           let parsedOptions;
           try {
@@ -145,7 +158,9 @@ export function ProjectModelsSection({ control }: ProjectModelsSectionProps) {
             size="sm"
             className="flex items-center justify-start gap-2 w-full"
           >
-            <ChevronRight className={`h-4 w-4 transition-transform duration-200 ${isOpen ? 'rotate-90' : ''}`} />
+            <ChevronRight
+              className={`h-4 w-4 transition-transform duration-200 ${isOpen ? 'rotate-90' : ''}`}
+            />
             Configure Default Models
           </Button>
         </CollapsibleTrigger>
@@ -160,16 +175,29 @@ export function ProjectModelsSection({ control }: ProjectModelsSectionProps) {
           <SummarizerModelSection control={control} />
 
           <div className="text-xs text-muted-foreground p-3 bg-blue-50 dark:bg-blue-950/20 rounded-md border border-blue-200 dark:border-blue-800">
-            <p className="font-medium text-blue-900 dark:text-blue-100 mb-2">How model inheritance works:</p>
+            <p className="font-medium text-blue-900 dark:text-blue-100 mb-2">
+              How model inheritance works:
+            </p>
             <ul className="space-y-1 text-blue-800 dark:text-blue-200">
-              <li>• <strong>Models</strong>: Project → Graph → Agent (partial inheritance - missing models only)</li>
-              <li>• <strong>Individual model types</strong> inherit independently (base, structuredOutput, summarizer)</li>
-              <li>• <strong>Explicit settings</strong> always take precedence over inherited values</li>
-              <li>• <strong>Provider options</strong> are inherited along with the model if not explicitly set</li>
+              <li>
+                • <strong>Models</strong>: Project → Graph → Agent (partial inheritance - missing
+                models only)
+              </li>
+              <li>
+                • <strong>Individual model types</strong> inherit independently (base,
+                structuredOutput, summarizer)
+              </li>
+              <li>
+                • <strong>Explicit settings</strong> always take precedence over inherited values
+              </li>
+              <li>
+                • <strong>Provider options</strong> are inherited along with the model if not
+                explicitly set
+              </li>
             </ul>
           </div>
         </CollapsibleContent>
       </Collapsible>
     </div>
   );
-}
+}

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

@@ -1,11 +1,11 @@
 'use client';
 
-import { useState } from 'react';
 import { ChevronRight } from 'lucide-react';
-import { Control } from 'react-hook-form';
+import { useState } from 'react';
+import type { Control } from 'react-hook-form';
+import { GenericInput } from '@/components/form/generic-input';
 import { Button } from '@/components/ui/button';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
-import { GenericInput } from '@/components/form/generic-input';
 import { Label } from '@/components/ui/label';
 import type { ProjectFormData } from './validation';
 
@@ -33,7 +33,9 @@ export function ProjectStopWhenSection({ control }: ProjectStopWhenSectionProps)
             size="sm"
             className="flex items-center justify-start gap-2 w-full"
           >
-            <ChevronRight className={`h-4 w-4 transition-transform duration-200 ${isOpen ? 'rotate-90' : ''}`} />
+            <ChevronRight
+              className={`h-4 w-4 transition-transform duration-200 ${isOpen ? 'rotate-90' : ''}`}
+            />
             Configure Execution Limits
           </Button>
         </CollapsibleTrigger>
@@ -73,17 +75,29 @@ export function ProjectStopWhenSection({ control }: ProjectStopWhenSectionProps)
           </div>
 
           <div className="text-xs text-muted-foreground p-3 bg-blue-50 dark:bg-blue-950/20 rounded-md border border-blue-200 dark:border-blue-800">
-            <p className="font-medium text-blue-900 dark:text-blue-100 mb-2">How inheritance works:</p>
+            <p className="font-medium text-blue-900 dark:text-blue-100 mb-2">
+              How inheritance works:
+            </p>
             <ul className="space-y-1 text-blue-800 dark:text-blue-200">
-              <li>• <strong>transferCountIs</strong>: Project → Graph only (graph-level limit)</li>
-              <li>• <strong>stepCountIs</strong>: Project → Agent only (agent-level limit)</li>
-              <li>• <strong>Explicit settings</strong> always take precedence over inherited values</li>
-              <li>• <strong>Default fallback</strong>: transferCountIs = 10 if no value is set</li>
-              <li>• <strong>Error limit</strong> is hardcoded to 3 errors across all levels</li>
+              <li>
+                • <strong>transferCountIs</strong>: Project → Graph only (graph-level limit)
+              </li>
+              <li>
+                • <strong>stepCountIs</strong>: Project → Agent only (agent-level limit)
+              </li>
+              <li>
+                • <strong>Explicit settings</strong> always take precedence over inherited values
+              </li>
+              <li>
+                • <strong>Default fallback</strong>: transferCountIs = 10 if no value is set
+              </li>
+              <li>
+                • <strong>Error limit</strong> is hardcoded to 3 errors across all levels
+              </li>
             </ul>
           </div>
         </CollapsibleContent>
       </Collapsible>
     </div>
   );
-}
+}

package/src/components/projects/form/validation.ts

@@ -1,20 +1,24 @@
-import { z } from 'zod';
+import { z } from 'zod/v4';
 
 const modelSettingsSchema = z.object({
   model: z.string().optional(), // Allow empty model - system will fall back to defaults
   providerOptions: z.record(z.string(), z.any()).optional(),
 });
 
-const projectModelsSchema = z.object({
-  base: modelSettingsSchema.optional(),
-  structuredOutput: modelSettingsSchema.optional(),
-  summarizer: modelSettingsSchema.optional(),
-}).optional();
+const projectModelsSchema = z
+  .object({
+    base: modelSettingsSchema.optional(),
+    structuredOutput: modelSettingsSchema.optional(),
+    summarizer: modelSettingsSchema.optional(),
+  })
+  .optional();
 
-const projectStopWhenSchema = z.object({
-  transferCountIs: z.number().min(1).max(100).optional(),
-  stepCountIs: z.number().min(1).max(1000).optional(),
-}).optional();
+const projectStopWhenSchema = z
+  .object({
+    transferCountIs: z.number().min(1).max(100).optional(),
+    stepCountIs: z.number().min(1).max(1000).optional(),
+  })
+  .optional();
 
 export const projectSchema = z.object({
   id: z

package/src/components/projects/new-project-dialog.tsx

@@ -52,7 +52,7 @@ export function NewProjectDialog({
           )}
         </DialogTrigger>
       )}
-      <DialogContent className="max-w-2xl">
+      <DialogContent className="!max-w-2xl">
         <DialogTitle>Create new project</DialogTitle>
         <DialogDescription>
           Create a new project to organize your agents, tools, and resources.

package/src/components/traces/ai-calls-breakdown.tsx

@@ -15,9 +15,9 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Skeleton } from '@/components/ui/skeleton';
+import { UNKNOWN_VALUE } from '@/constants/signoz';
 import { type TimeRange, useAICallsQueryState } from '@/hooks/use-ai-calls-query-state';
 import { getSigNozStatsClient } from '@/lib/api/signoz-stats';
-import { UNKNOWN_VALUE } from '@/constants/signoz';
 
 // Time range options
 const TIME_RANGES = {

package/src/components/traces/charts/area-chart-card.tsx

@@ -1,7 +1,7 @@
-import { Skeleton } from '@/components/ui/skeleton';
+import { AreaChart, type AreaChartProps } from '@/components/traces/charts/area-chart';
 import { ChartCard, type ChartCardProps } from '@/components/traces/charts/chart-card';
 import { ChartNoResults } from '@/components/traces/charts/chart-no-results';
-import { AreaChart, type AreaChartProps } from '@/components/traces/charts/area-chart';
+import { Skeleton } from '@/components/ui/skeleton';
 
 type AreaChartCardProps<TData> = AreaChartProps<TData> &
   Pick<

package/src/components/traces/charts/area-chart.tsx

@@ -1,10 +1,10 @@
+import { Area, CartesianGrid, AreaChart as RechartsAreaChart, XAxis, YAxis } from 'recharts';
 import {
+  type ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
-  type ChartConfig,
 } from '@/components/ui/chart';
-import { AreaChart as RechartsAreaChart, Area, XAxis, YAxis, CartesianGrid } from 'recharts';
 
 export interface AreaChartProps<TData> {
   data?: TData[];

package/src/components/traces/charts/chart-card.tsx

@@ -1,3 +1,7 @@
+import type { LucideIcon } from 'lucide-react';
+import { ArrowUpRight, Info } from 'lucide-react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
@@ -8,11 +12,7 @@ import {
 } from '@/components/ui/card';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
-import type { LucideIcon } from 'lucide-react';
-import { ArrowUpRight, Info } from 'lucide-react';
 import { ChartError } from './chart-error';
-import { Button } from '@/components/ui/button';
-import { ErrorBoundary } from 'react-error-boundary';
 
 export interface ChartCardProps {
   className?: string;

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

@@ -2,21 +2,20 @@
 
 import { Activity, ArrowLeft, MessageSquare, TriangleAlert } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Skeleton } from '@/components/ui/skeleton';
+import { formatDateTime, formatDuration } from '@/app/utils/format-date';
 import type {
   ActivityItem,
   ConversationDetail as ConversationDetailType,
 } from '@/components/traces/timeline/types';
-import { formatDateTime } from '@/app/utils/format-date';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { ResizablePanelGroup } from '@/components/ui/resizable';
+import { Skeleton } from '@/components/ui/skeleton';
 import { ConversationErrors } from './conversation-errors';
 import { SignozLink } from './signoz-link';
-import { formatDuration } from '@/app/utils/format-date';
 import { InfoRow } from './timeline/blocks';
 import { TimelineWrapper } from './timeline/timeline-wrapper';
-import { ResizablePanelGroup } from '@/components/ui/resizable';
 
 interface ConversationDetailProps {
   conversationId: string;
@@ -109,7 +108,10 @@ export function ConversationDetail({ conversationId, onBack }: ConversationDetai
             </Badge>
             {(conversation.graphId || conversation.graphName) && (
               <Badge variant="code" className="text-xs">
-                Graph: {conversation.graphName ? `${conversation.graphName} (${conversation.graphId})` : conversation.graphId}
+                Graph:{' '}
+                {conversation.graphName
+                  ? `${conversation.graphName} (${conversation.graphId})`
+                  : conversation.graphId}
               </Badge>
             )}
           </div>

package/src/components/traces/conversation-stats/conversation-list-item.tsx

@@ -1,8 +1,8 @@
-import type { ConversationStats } from '@/lib/api/signoz-stats';
-import { Badge } from '@/components/ui/badge';
 import Link from 'next/link';
-import { TooltipContent, Tooltip, TooltipTrigger } from '@/components/ui/tooltip';
 import { formatDateAgo, formatDateTime } from '@/app/utils/format-date';
+import { Badge } from '@/components/ui/badge';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import type { ConversationStats } from '@/lib/api/signoz-stats';
 
 interface ConversationListItemProps {
   conversation: ConversationStats;
@@ -10,8 +10,17 @@ interface ConversationListItemProps {
 }
 
 export function ConversationListItem({ conversation, projectId }: ConversationListItemProps) {
-  const { conversationId, firstUserMessage, tenantId, graphId, graphName, hasErrors, totalErrors, toolsUsed, startTime } =
-    conversation;
+  const {
+    conversationId,
+    firstUserMessage,
+    tenantId,
+    graphId,
+    graphName,
+    hasErrors,
+    totalErrors,
+    toolsUsed,
+    startTime,
+  } = conversation;
 
   return (
     <Link
@@ -26,38 +35,40 @@ export function ConversationListItem({ conversation, projectId }: ConversationLi
             </div>
 
             <div className="flex items-center gap-2 text-xs">
-              <code className="font-mono text-gray-500 dark:text-white/50">
-                {conversationId}
-              </code>
-              {startTime && (() => {
-                try {
-                  const date = new Date(startTime);
-                  // Check if the date is valid
-                  if (isNaN(date.getTime())) return null;
-                  
-                  const isoString = date.toISOString();
-                  return (
-                    <>
-                      <span className="text-gray-400 dark:text-white/40">•</span>
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <span className="text-gray-400 dark:text-white/40 cursor-help">
-                            {formatDateAgo(isoString)}
-                          </span>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          <p className="text-xs">
-                            Started: {formatDateTime(isoString)}
-                          </p>
-                        </TooltipContent>
-                      </Tooltip>
-                    </>
-                  );
-                } catch (error) {
-                  console.warn('Invalid startTime for conversation:', conversationId, startTime, error);
-                  return null;
-                }
-              })()}
+              <code className="font-mono text-gray-500 dark:text-white/50">{conversationId}</code>
+              {startTime &&
+                (() => {
+                  try {
+                    const date = new Date(startTime);
+                    // Check if the date is valid
+                    if (isNaN(date.getTime())) return null;
+
+                    const isoString = date.toISOString();
+                    return (
+                      <>
+                        <span className="text-gray-400 dark:text-white/40">•</span>
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <span className="text-gray-400 dark:text-white/40 cursor-help">
+                              {formatDateAgo(isoString)}
+                            </span>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p className="text-xs">Started: {formatDateTime(isoString)}</p>
+                          </TooltipContent>
+                        </Tooltip>
+                      </>
+                    );
+                  } catch (error) {
+                    console.warn(
+                      'Invalid startTime for conversation:',
+                      conversationId,
+                      startTime,
+                      error
+                    );
+                    return null;
+                  }
+                })()}
             </div>
           </div>
           <div className="flex items-center gap-2">

package/src/components/traces/conversation-stats/conversation-stats-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import React from 'react';
 import { ChevronLeft, ChevronRight, MessageSquare, Search, X } from 'lucide-react';
+import React from 'react';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';

package/src/components/traces/filters/date-picker.tsx

@@ -1,18 +1,18 @@
 'use client';
 
+import { format } from 'date-fns';
+import { Check } from 'lucide-react';
+import { useMemo, useRef, useState } from 'react';
+import type { DateRange } from 'react-day-picker';
 import type { SelectOption } from '@/components/form/generic-select';
-import { FilterTriggerComponent } from './filter-trigger';
 import { Button } from '@/components/ui/button';
 import { Calendar } from '@/components/ui/calendar';
 import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui/command';
 import { Popover, PopoverContent } from '@/components/ui/popover';
 import { useDisclosure } from '@/hooks/use-disclosure';
-import { cn } from '@/lib/utils';
-import { format } from 'date-fns';
-import { Check } from 'lucide-react';
-import { useMemo, useRef, useState } from 'react';
-import type { DateRange } from 'react-day-picker';
 import type { TimeRange } from '@/hooks/use-traces-query-state';
+import { cn } from '@/lib/utils';
+import { FilterTriggerComponent } from './filter-trigger';
 
 interface DatePickerWithPresetsProps {
   label: string;

package/src/components/traces/filters/filter-trigger.tsx

@@ -1,7 +1,7 @@
 import { ChevronDown, type LucideIcon, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
-import { PopoverTrigger } from '@/components/ui/popover';
 import type { OptionType } from '@/components/ui/combobox';
+import { PopoverTrigger } from '@/components/ui/popover';
 
 interface FilterTriggerComponentProps {
   Icon?: LucideIcon;

package/src/components/traces/filters/graph-filter.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { useState, useEffect } from 'react';
 import { useParams } from 'next/navigation';
-import { getAllGraphsAction } from '@/lib/actions/graph-full';
+import { useEffect, useState } from 'react';
+import type { OptionType } from '@/components/ui/combobox';
 import { Combobox } from '@/components/ui/combobox';
+import { getAllGraphsAction } from '@/lib/actions/graph-full';
 import { FilterTriggerComponent } from './filter-trigger';
-import type { OptionType } from '@/components/ui/combobox';
 
 interface GraphFilterProps {
   onSelect: (value: string | undefined) => void;

package/src/components/traces/timeline/activity-details-sidepane.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@/components/ui/button';
 import { X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
 
 export function ActivityDetailsSidePane({
   title,

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

@@ -1,5 +1,5 @@
-import type { ActivityItem } from '@/components/traces/timeline/types';
 import { TimelineItem } from '@/components/traces/timeline/timeline-item';
+import type { ActivityItem } from '@/components/traces/timeline/types';
 
 export function ActivityTimeline({
   activities,

package/src/components/traces/timeline/blocks.tsx

@@ -1,7 +1,7 @@
-import { Badge } from '@/components/ui/badge';
-import type { ActivityItem } from './types';
 import { AnthropicIcon } from '@/components/icons/anthropic';
 import { OpenAIIcon } from '@/components/icons/openai';
+import { Badge } from '@/components/ui/badge';
+import type { ActivityItem } from './types';
 
 export function LabeledBlock({ label, children }: { label: string; children: React.ReactNode }) {
   return (

package/src/components/traces/timeline/render-panel-content.tsx

@@ -1,17 +1,17 @@
-import { SelectedPanel } from '@/components/traces/timeline/types';
-import { Section } from '@/components/traces/timeline/blocks';
-import { Info } from '@/components/traces/timeline/blocks';
 import { Streamdown } from 'streamdown';
-import { LabeledBlock } from '@/components/traces/timeline/blocks';
-import { Bubble } from '@/components/traces/timeline/bubble';
-import { StatusBadge } from '@/components/traces/timeline/blocks';
 import { formatDateTime } from '@/app/utils/format-date';
-import { Divider } from '@/components/traces/timeline/blocks';
-import { Badge } from '@/components/ui/badge';
-import type { ConversationDetail } from '@/components/traces/timeline/types';
-import { ModelBadge } from '@/components/traces/timeline/blocks';
-import { CodeBubble } from '@/components/traces/timeline/bubble';
 import { SignozSpanLink } from '@/components/traces/signoz-link';
+import {
+  Divider,
+  Info,
+  LabeledBlock,
+  ModelBadge,
+  Section,
+  StatusBadge,
+} from '@/components/traces/timeline/blocks';
+import { Bubble, CodeBubble } from '@/components/traces/timeline/bubble';
+import type { ConversationDetail, SelectedPanel } from '@/components/traces/timeline/types';
+import { Badge } from '@/components/ui/badge';
 
 export function renderPanelContent({
   selected,