@inkeep/agents-manage-ui 0.1.2 → 0.1.3

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/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,

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

@@ -1,16 +1,26 @@
 import {
+  ArrowRight,
+  ArrowUpRight,
+  CheckCircle,
+  ChevronDown,
+  ChevronRight,
+  Database,
+  Hammer,
+  Settings,
+  Sparkles,
+  User,
+} from 'lucide-react';
+import { Streamdown } from 'streamdown';
+import { formatDateTime } from '@/app/utils/format-date';
+import { Bubble, CodeBubble } from '@/components/traces/timeline/bubble';
+import { Flow } from '@/components/traces/timeline/flow';
+import { TagRow } from '@/components/traces/timeline/tag-row';
+import {
+  ACTIVITY_TYPES,
   type ActivityItem,
   type ActivityKind,
-  ACTIVITY_TYPES,
+  TOOL_TYPES,
 } from '@/components/traces/timeline/types';
-import { User, Settings, Database, Hammer, Sparkles, ArrowRight, ArrowUpRight, ChevronDown, ChevronRight } from 'lucide-react';
-import { Bubble, CodeBubble } from '@/components/traces/timeline/bubble';
-import { TagRow } from '@/components/traces/timeline/tag-row';
-import { TOOL_TYPES } from '@/components/traces/timeline/types';
-import { CheckCircle } from 'lucide-react';
-import { Flow } from '@/components/traces/timeline/flow';
-import { Streamdown } from 'streamdown';
-import { formatDateTime } from '@/app/utils/format-date';
 
 function truncateWords(s: string, nWords: number) {
   const words = s.split(/\s+/);
@@ -21,8 +31,10 @@ function truncateChars(s: string, n: number) {
 }
 
 function isAiMessage(activity: ActivityItem): boolean {
-  return activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE || 
-         activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT;
+  return (
+    activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE ||
+    activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
+  );
 }
 
 function statusIcon(
@@ -64,12 +76,12 @@ interface TimelineItemProps {
   onToggleAiMessageCollapse?: (activityId: string) => void;
 }
 
-export function TimelineItem({ 
-  activity, 
-  isLast, 
-  onSelect, 
-  isAiMessageCollapsed = false, 
-  onToggleAiMessageCollapse 
+export function TimelineItem({
+  activity,
+  isLast,
+  onSelect,
+  isAiMessageCollapsed = false,
+  onToggleAiMessageCollapse,
 }: TimelineItemProps) {
   const typeForIcon =
     activity.type === ACTIVITY_TYPES.TOOL_CALL && activity.toolType === TOOL_TYPES.TRANSFER
@@ -128,7 +140,7 @@ export function TimelineItem({
                   type="button"
                   onClick={() => onToggleAiMessageCollapse(activity.id)}
                   className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
-                  title={isAiMessageCollapsed ? "Expand AI response" : "Collapse AI response"}
+                  title={isAiMessageCollapsed ? 'Expand AI response' : 'Collapse AI response'}
                 >
                   {isAiMessageCollapsed ? (
                     <ChevronRight className="h-3 w-3" />
@@ -154,7 +166,11 @@ export function TimelineItem({
                   type="button"
                   onClick={() => onToggleAiMessageCollapse(activity.id)}
                   className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
-                  title={isAiMessageCollapsed ? "Expand AI streaming response" : "Collapse AI streaming response"}
+                  title={
+                    isAiMessageCollapsed
+                      ? 'Expand AI streaming response'
+                      : 'Collapse AI streaming response'
+                  }
                 >
                   {isAiMessageCollapsed ? (
                     <ChevronRight className="h-3 w-3" />
@@ -165,9 +181,7 @@ export function TimelineItem({
                 </button>
               )}
               {!isAiMessageCollapsed && (
-                <Bubble>
-                  {truncateWords(activity.aiStreamTextContent, 100)}
-                </Bubble>
+                <Bubble>{truncateWords(activity.aiStreamTextContent, 100)}</Bubble>
               )}
             </div>
           )}