@inkeep/agents-manage-ui 0.1.0

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

@@ -0,0 +1,394 @@
+import {
+  type ActivityItem,
+  type ActivityKind,
+  ACTIVITY_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+/);
+  return words.length > nWords ? `${words.slice(0, nWords).join(' ')}...` : s;
+}
+function truncateChars(s: string, n: number) {
+  return s.length > n ? `${s.slice(0, n)}...` : s;
+}
+
+function isAiMessage(activity: ActivityItem): boolean {
+  return activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE || 
+         activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT;
+}
+
+function statusIcon(
+  type: ActivityKind | 'delegation' | 'transfer' | 'generic_tool' | 'tool_purpose',
+  status: ActivityItem['status']
+) {
+  const base: Record<string, { Icon: any; cls: string }> = {
+    user_message: { Icon: User, cls: 'text-primary' },
+    ai_generation: { Icon: Sparkles, cls: 'text-primary' },
+    ai_assistant_message: { Icon: Sparkles, cls: 'text-primary' },
+    ai_model_streamed_text: { Icon: Sparkles, cls: 'text-primary' },
+    context_fetch: { Icon: Settings, cls: 'text-indigo-400' },
+    context_resolution: { Icon: Database, cls: 'text-indigo-400' },
+    tool_call: { Icon: Hammer, cls: 'text-muted-foreground' },
+    delegation: { Icon: ArrowRight, cls: 'text-indigo-500' },
+    transfer: { Icon: ArrowRight, cls: 'text-indigo-500' },
+    generic_tool: { Icon: Hammer, cls: 'text-muted-foreground' },
+    tool_purpose: { Icon: Hammer, cls: 'text-muted-foreground' },
+  };
+
+  const map = base[type] || base['tool_call'];
+  const cls =
+    status === 'success'
+      ? map.cls
+      : status === 'error'
+        ? 'text-red-500'
+        : status === 'pending'
+          ? 'text-yellow-500'
+          : map.cls;
+
+  return { Icon: map.Icon, className: cls };
+}
+
+interface TimelineItemProps {
+  activity: ActivityItem;
+  isLast: boolean;
+  onSelect: () => void;
+  isAiMessageCollapsed?: boolean;
+  onToggleAiMessageCollapse?: (activityId: string) => void;
+}
+
+export function TimelineItem({ 
+  activity, 
+  isLast, 
+  onSelect, 
+  isAiMessageCollapsed = false, 
+  onToggleAiMessageCollapse 
+}: TimelineItemProps) {
+  const typeForIcon =
+    activity.type === ACTIVITY_TYPES.TOOL_CALL && activity.toolType === TOOL_TYPES.TRANSFER
+      ? 'transfer'
+      : activity.type === ACTIVITY_TYPES.TOOL_CALL && activity.toolName?.includes('delegate')
+        ? 'delegation'
+        : activity.type === ACTIVITY_TYPES.TOOL_CALL && activity.toolPurpose
+          ? 'tool_purpose'
+          : activity.type === ACTIVITY_TYPES.TOOL_CALL
+            ? 'generic_tool'
+            : activity.type;
+
+  const { Icon, className } = statusIcon(typeForIcon as any, activity.status);
+  const formattedDateTime = formatDateTime(activity.timestamp);
+  const isoDateTime = new Date(activity.timestamp).toISOString();
+
+  return (
+    <div className="flex flex-col text-muted-foreground relative text-xs">
+      <div className="flex items-start">
+        <div className="mr-4 pt-[1px]">
+          <Icon className={`w-4 h-4 ${className}`} />
+        </div>
+
+        <div className="space-y-1.5">
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={onSelect}
+              className="flex items-center gap-1 group cursor-pointer hover:text-primary transition-colors text-foreground duration-200"
+              title="Click to view details"
+            >
+              <span className="font-medium">
+                <Streamdown>{activity.description}</Streamdown>
+              </span>
+              <ArrowUpRight
+                className="h-4 w-4 text-muted-foreground group-hover:text-primary"
+                aria-hidden="true"
+              />
+            </button>
+          </div>
+
+          {/* user message bubble */}
+          {activity.type === ACTIVITY_TYPES.USER_MESSAGE && activity.messageContent && (
+            <Bubble>
+              <div className="line-clamp-2"> {activity.messageContent}</div>
+              {/* {truncateWords(activity.messageContent, 100)} */}
+              {/* {activity.messageContent} */}
+            </Bubble>
+          )}
+
+          {/* assistant message bubble */}
+          {activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE && activity.aiResponseContent && (
+            <div className="space-y-2">
+              {onToggleAiMessageCollapse && (
+                <button
+                  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"}
+                >
+                  {isAiMessageCollapsed ? (
+                    <ChevronRight className="h-3 w-3" />
+                  ) : (
+                    <ChevronDown className="h-3 w-3" />
+                  )}
+                  AI Assistant Response
+                </button>
+              )}
+              {!isAiMessageCollapsed && (
+                <Bubble>
+                  <Streamdown>{activity.aiResponseContent}</Streamdown>
+                </Bubble>
+              )}
+            </div>
+          )}
+
+          {/* streamed text bubble */}
+          {activity.type === 'ai_model_streamed_text' && activity.aiStreamTextContent && (
+            <div className="space-y-2">
+              {onToggleAiMessageCollapse && (
+                <button
+                  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"}
+                >
+                  {isAiMessageCollapsed ? (
+                    <ChevronRight className="h-3 w-3" />
+                  ) : (
+                    <ChevronDown className="h-3 w-3" />
+                  )}
+                  AI Streaming Response
+                </button>
+              )}
+              {!isAiMessageCollapsed && (
+                <Bubble>
+                  {truncateWords(activity.aiStreamTextContent, 100)}
+                </Bubble>
+              )}
+            </div>
+          )}
+
+          {/* context fetch url */}
+          {activity.type === 'context_fetch' && activity.toolResult && (
+            <Bubble className="break-all">{truncateChars(activity.toolResult, 50)}</Bubble>
+          )}
+
+          {/* context resolution summary */}
+          {activity.type === 'context_resolution' && activity.status !== 'error' && (
+            <div className="mt-2 p-3 rounded-lg max-w-4xl">
+              <div className="space-y-2 text-sm">
+                {activity.contextConfigId && TagRow('Config', activity.contextConfigId)}
+                {activity.contextAgentGraphId && TagRow('Graph', activity.contextAgentGraphId)}
+                {activity.contextStatusDescription && (
+                  <div className="flex items-center gap-2">
+                    <span className="font-medium">Status:</span>
+                    <span
+                      className={`px-2 py-1 rounded text-xs ${
+                        activity.status === 'success'
+                          ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400'
+                          : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400'
+                      }`}
+                    >
+                      {activity.contextStatusDescription}
+                    </span>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* context resolution URL */}
+          {activity.type === 'context_resolution' && activity.contextUrl && (
+            <CodeBubble className=" break-all">{truncateChars(activity.contextUrl, 50)}</CodeBubble>
+          )}
+
+          {/* delegation flow */}
+          {activity.type === ACTIVITY_TYPES.TOOL_CALL &&
+            activity.toolName?.includes('delegate') && (
+              <Flow
+                from={activity.delegationFromAgentId || activity.agentName || 'Unknown Agent'}
+                to={
+                  activity.delegationToAgentId ||
+                  activity.toolName?.replace('delegate_to_', '') ||
+                  'Target'
+                }
+              />
+            )}
+
+          {/* transfer flow */}
+          {activity.type === ACTIVITY_TYPES.TOOL_CALL &&
+            (activity.toolType === TOOL_TYPES.TRANSFER ||
+              activity.toolName?.includes('transfer')) && (
+              <Flow
+                from={activity.transferFromAgentId || activity.agentName || 'Unknown Agent'}
+                to={
+                  activity.transferToAgentId ||
+                  activity.toolName?.replace('transfer_to_', '') ||
+                  'Target'
+                }
+              />
+            )}
+
+          {/* tool purpose bubble */}
+          {activity.type === ACTIVITY_TYPES.TOOL_CALL &&
+            (activity.toolType === TOOL_TYPES.MCP || activity.toolType === TOOL_TYPES.TOOL) &&
+            activity.toolPurpose && (
+              <Bubble className="line-clamp-2">{activity.toolPurpose}</Bubble>
+            )}
+
+          {/* save_tool_result summary */}
+          {activity.type === ACTIVITY_TYPES.TOOL_CALL &&
+            activity.toolName === 'save_tool_result' &&
+            activity.saveResultSaved && (
+              <div className="mt-2 p-3 bg-emerald-50 border border-emerald-200 dark:bg-emerald-900/20 dark:border-emerald-800 rounded-lg max-w-4xl">
+                <div className="flex flex-col gap-2 text-sm text-emerald-900 dark:text-emerald-300">
+                  <div className="flex items-center gap-2 mb-2">
+                    <CheckCircle className="h-4 w-4 text-emerald-600" />
+                    <span className="font-semibold text-emerald-800 dark:text-emerald-400">
+                      Artifact Saved Successfully
+                    </span>
+                  </div>
+
+                  {/* Basic artifact info */}
+                  <div className="space-y-1">
+                    {activity.saveArtifactType &&
+                      TagRow('Type', activity.saveArtifactType, 'emerald')}
+                    {activity.saveArtifactName && (
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium">Name:</span>
+                        <span className="text-emerald-900 dark:text-emerald-300">
+                          {activity.saveArtifactName}
+                        </span>
+                      </div>
+                    )}
+                    {activity.saveArtifactDescription && (
+                      <div className="flex items-start gap-2">
+                        <span className="font-medium">Description:</span>
+                        <span className="text-emerald-900 dark:text-emerald-300">
+                          {activity.saveArtifactDescription}
+                        </span>
+                      </div>
+                    )}
+                    {activity.saveTotalArtifacts && (
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium">Total Artifacts:</span>
+                        <span className="text-emerald-900 dark:text-emerald-300">
+                          {activity.saveTotalArtifacts}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Technical details */}
+                  {(activity.saveOperationId ||
+                    activity.saveToolCallId ||
+                    activity.saveFunctionId) && (
+                    <div className="mt-2 p-2 bg-white/50 border border-emerald-200 rounded text-xs dark:bg-emerald-950/30 dark:border-emerald-800">
+                      <div className="font-medium text-emerald-800 mb-1 dark:text-emerald-400">
+                        Technical Details:
+                      </div>
+                      <div className="space-y-0.5 text-emerald-700 dark:text-emerald-300">
+                        {activity.saveOperationId && (
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium">Operation ID:</span>
+                            <code className="bg-emerald-100 px-1 rounded dark:bg-emerald-900/50 dark:text-emerald-200">
+                              {activity.saveOperationId}
+                            </code>
+                          </div>
+                        )}
+                        {activity.saveToolCallId && (
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium">Tool Call ID:</span>
+                            <code className="bg-emerald-100 px-1 rounded dark:bg-emerald-900/50 dark:text-emerald-200">
+                              {activity.saveToolCallId}
+                            </code>
+                          </div>
+                        )}
+                        {activity.saveFunctionId && (
+                          <div className="flex items-center gap-2">
+                            <span className="font-medium">Function ID:</span>
+                            <code className="bg-emerald-100 px-1 rounded dark:bg-emerald-900/50 dark:text-emerald-200">
+                              {activity.saveFunctionId}
+                            </code>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Summary data */}
+                  {activity.saveSummaryData && (
+                    <div className="mt-2 p-2 bg-white/70 border border-emerald-200 rounded text-xs dark:bg-emerald-950/30 dark:border-emerald-800">
+                      <div className="font-medium text-emerald-800 mb-1 dark:text-emerald-400">
+                        Summary Data:
+                      </div>
+                      <div className="space-y-0.5 text-emerald-900 dark:text-emerald-300">
+                        {Object.entries(activity.saveSummaryData).map(([k, v]) => (
+                          <div key={k} className="flex items-start gap-2">
+                            <span className="font-medium capitalize">{k}:</span>
+                            <span className="break-all">{String(v)}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Tool arguments */}
+                  {activity.saveToolArgs && Object.keys(activity.saveToolArgs).length > 0 && (
+                    <div className="mt-2 p-2 bg-white/70 border border-emerald-200 rounded text-xs">
+                      <div className="font-medium text-emerald-800 mb-1">Tool Arguments:</div>
+                      <div className="space-y-0.5 text-emerald-900">
+                        {Object.entries(activity.saveToolArgs).map(([k, v]) => (
+                          <div key={k} className="flex items-start gap-2">
+                            <span className="font-medium">{k}:</span>
+                            <span className="break-all">
+                              {typeof v === 'object' ? JSON.stringify(v, null, 1) : String(v)}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Facts if available */}
+                  {activity.saveFacts && (
+                    <div className="mt-2 p-2 bg-white/70 border border-emerald-200 rounded text-xs dark:bg-emerald-950/30 dark:border-emerald-800">
+                      <div className="font-medium text-emerald-800 mb-1 dark:text-emerald-400">
+                        Facts:
+                      </div>
+                      <div className="text-emerald-900 break-all dark:text-emerald-300">
+                        {activity.saveFacts}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+          {/* save_tool_result not saved */}
+          {activity.type === ACTIVITY_TYPES.TOOL_CALL &&
+            activity.toolName === 'save_tool_result' &&
+            activity.saveResultSaved === false && (
+              <CodeBubble className="bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-300">
+                Artifact not saved
+              </CodeBubble>
+            )}
+
+          <time
+            className="text-xs mb-2 inline-block text-gray-500 dark:text-white/50"
+            dateTime={isoDateTime}
+            title={formattedDateTime}
+          >
+            {formattedDateTime}
+          </time>
+        </div>
+      </div>
+
+      {!isLast && <div className="absolute top-6 left-[7px] border-l border-border h-full" />}
+    </div>
+  );
+}

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

@@ -0,0 +1,293 @@
+import { useEffect, useMemo, useState } from 'react';
+import { ActivityTimeline } from '@/components/traces/timeline/activity-timeline';
+import type {
+  ActivityItem,
+  SelectedPanel,
+  PanelType,
+  ConversationDetail,
+} from '@/components/traces/timeline/types';
+import { ActivityDetailsSidePane } from '@/components/traces/timeline/activity-details-sidepane';
+import { ACTIVITY_TYPES } from '@/components/traces/timeline/types';
+import { TOOL_TYPES } from '@/components/traces/timeline/types';
+import { renderPanelContent } from '@/components/traces/timeline/render-panel-content';
+import { StickToBottom } from 'use-stick-to-bottom';
+import { ResizableHandle, ResizablePanel } from '@/components/ui/resizable';
+import { Loader2, ChevronDown, ChevronUp } from 'lucide-react';
+import { ConversationTracesLink } from '@/components/traces/signoz-link';
+import { Button } from '@/components/ui/button';
+
+function panelTitle(selected: SelectedPanel) {
+  switch (selected.type) {
+    case 'ai_generation':
+      return 'AI Generation Details';
+    case 'user_message':
+      return 'User Message Details';
+    case 'ai_assistant_message':
+      return 'AI Assistant Message Details';
+    case 'context_fetch':
+      return 'Context Fetch Details';
+    case 'context_resolution':
+      return 'Context Resolution Details';
+    case 'delegation':
+      return 'Delegation Details';
+    case 'transfer':
+      return 'Transfer Details';
+    case 'tool_purpose':
+      return 'Tool Purpose Details';
+    case 'generic_tool':
+      return 'Tool Call Details';
+    case 'ai_model_streamed_text':
+      return 'AI Streaming Text Details';
+    case 'mcp_tool_error':
+      return 'MCP Tool Error Details';
+    default:
+      return 'Details';
+  }
+}
+
+interface TimelineWrapperProps {
+  conversation?: ConversationDetail | null;
+  enableAutoScroll?: boolean;
+  isPolling?: boolean;
+}
+
+function EmptyTimeline({ isPolling }: { isPolling: boolean }) {
+  return (
+    <div className="flex flex-col gap-2 h-full justify-center items-center">
+      {isPolling ? (
+        <div className="flex flex-row gap-2 items-center text-gray-400 dark:text-white/50">
+          <Loader2 className="w-4 h-4 animate-spin" />
+          <p className="text-sm ">Waiting for activity...</p>
+        </div>
+      ) : (
+        <p className="text-sm text-gray-400 dark:text-white/50">
+          Start a conversation to see the activity timeline.
+        </p>
+      )}
+    </div>
+  );
+}
+
+export function TimelineWrapper({
+  conversation,
+  enableAutoScroll = false,
+  isPolling = false,
+}: TimelineWrapperProps) {
+  const [selected, setSelected] = useState<SelectedPanel | null>(null);
+  const [panelVisible, setPanelVisible] = useState(false);
+  
+  // State for collapsible AI messages
+  const [collapsedAiMessages, setCollapsedAiMessages] = useState<Set<string>>(new Set());
+  const [aiMessagesGloballyCollapsed, setAiMessagesGloballyCollapsed] = useState<boolean>(enableAutoScroll);
+
+  useEffect(() => {
+    if (selected) {
+      setPanelVisible(false);
+      const t = setTimeout(() => setPanelVisible(true), 10);
+      return () => clearTimeout(t);
+    } else {
+      setPanelVisible(false);
+    }
+  }, [selected]);
+
+  // Calculate activities and sorted activities first
+  const activities =
+    (conversation?.activities && conversation.activities.length > 0
+      ? conversation.activities
+      : conversation?.toolCalls?.map((tc: ActivityItem) => ({
+          ...tc, // keep saveResultSaved, saveSummaryData, etc.
+          id: tc.id ?? `tool-call-${Date.now()}`,
+          type: 'tool_call' as const,
+          description: `Called ${tc.toolName} tool${tc.toolDescription ? ` - ${tc.toolDescription}` : ''}`,
+          timestamp: new Date(tc.timestamp).toISOString(),
+          agentName: tc.agentName || 'AI Agent',
+          toolResult: tc.result ?? tc.toolResult ?? 'Tool call completed',
+        }))) || [];
+
+  const sortedActivities = useMemo(() => {
+    const list = [...activities];
+    list.sort((a, b) => {
+      const ta = new Date(a.timestamp).getTime();
+      const tb = new Date(b.timestamp).getTime();
+      return ta !== tb ? ta - tb : String(a.id).localeCompare(String(b.id));
+    });
+    return list;
+  }, [activities]);
+
+  // Initialize AI messages based on view type when activities change
+  useEffect(() => {
+    const aiMessageIds = sortedActivities
+      .filter(activity => 
+        activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE || 
+        activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
+      )
+      .map(activity => activity.id);
+    
+    if (enableAutoScroll) {
+      // Live trace view: default collapsed
+      setCollapsedAiMessages(new Set(aiMessageIds));
+      setAiMessagesGloballyCollapsed(true);
+    } else {
+      // Conversation details view: default expanded
+      setCollapsedAiMessages(new Set());
+      setAiMessagesGloballyCollapsed(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sortedActivities.length, enableAutoScroll]); // Run when activities count or view type changes
+
+  // Functions to handle expand/collapse all
+  const expandAllAiMessages = () => {
+    setCollapsedAiMessages(new Set());
+    setAiMessagesGloballyCollapsed(false);
+  };
+
+  const collapseAllAiMessages = () => {
+    const aiMessageIds = sortedActivities
+      .filter(activity => 
+        activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE || 
+        activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
+      )
+      .map(activity => activity.id);
+    setCollapsedAiMessages(new Set(aiMessageIds));
+    setAiMessagesGloballyCollapsed(true);
+  };
+
+  const toggleAiMessageCollapse = (activityId: string) => {
+    const newCollapsed = new Set(collapsedAiMessages);
+    if (newCollapsed.has(activityId)) {
+      newCollapsed.delete(activityId);
+    } else {
+      newCollapsed.add(activityId);
+    }
+    setCollapsedAiMessages(newCollapsed);
+    
+    // Update global state based on current state
+    const aiMessageIds = sortedActivities
+      .filter(activity => 
+        activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE || 
+        activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
+      )
+      .map(activity => activity.id);
+    const allCollapsed = aiMessageIds.every(id => newCollapsed.has(id));
+    setAiMessagesGloballyCollapsed(allCollapsed);
+  };
+
+  const closePanel = () => {
+    setPanelVisible(false);
+    setTimeout(() => setSelected(null), 300);
+  };
+
+  const findSpanById = (id?: string) =>
+    conversation?.allSpanAttributes?.find(
+      (s: NonNullable<ConversationDetail['allSpanAttributes']>[number]) => s.spanId === id
+    );
+
+  const determinePanelType = (a: ActivityItem): Exclude<PanelType, 'mcp_tool_error'> => {
+    if (a.type === ACTIVITY_TYPES.TOOL_CALL && a.toolType === TOOL_TYPES.TRANSFER) return 'transfer';
+    if (a.type === ACTIVITY_TYPES.TOOL_CALL && a.toolName?.includes('delegate'))
+      return 'delegation';
+    if (
+      a.type === ACTIVITY_TYPES.TOOL_CALL &&
+      a.toolPurpose &&
+      (a.toolType === TOOL_TYPES.MCP || a.toolType === TOOL_TYPES.TOOL)
+    )
+      return 'tool_purpose';
+    if (a.type === ACTIVITY_TYPES.TOOL_CALL) return 'generic_tool';
+    return a.type;
+  };
+
+  return (
+    <>
+      <ResizablePanel order={2}>
+        <div className="bg-background h-full flex flex-col py-4">
+          <div className="flex-shrink-0">
+            <div className="flex items-center justify-between px-6 pb-4">
+              <div className="text-foreground text-md font-medium">Activity Timeline</div>
+              <div className="flex items-center gap-2">
+                {/* Expand/Collapse AI Messages Buttons */}
+                {sortedActivities.some(activity => 
+                  activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE || 
+                  activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
+                ) && (
+                  <div className="flex items-center gap-1">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={aiMessagesGloballyCollapsed ? expandAllAiMessages : collapseAllAiMessages}
+                      className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+                      title={aiMessagesGloballyCollapsed ? "Expand all AI messages" : "Collapse all AI messages"}
+                    >
+                      {aiMessagesGloballyCollapsed ? (
+                        <>
+                          <ChevronDown className="h-3 w-3 mr-1" />
+                          Expand All
+                        </>
+                      ) : (
+                        <>
+                          <ChevronUp className="h-3 w-3 mr-1" />
+                          Collapse All
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                )}
+                {conversation?.conversationId && (
+                  <ConversationTracesLink conversationId={conversation.conversationId} />
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="p-0 flex-1 min-h-0">
+            {sortedActivities.length === 0 ? (
+              <EmptyTimeline isPolling={isPolling} />
+            ) : enableAutoScroll ? (
+              <StickToBottom
+                className="h-full [&>div]:overflow-y-auto [&>div]:scrollbar-thin [&>div]:scrollbar-thumb-muted-foreground/30 [&>div]:scrollbar-track-transparent dark:[&>div]:scrollbar-thumb-muted-foreground/50"
+                resize="smooth"
+                initial="smooth"
+              >
+                <StickToBottom.Content>
+                  <ActivityTimeline
+                    activities={sortedActivities}
+                    onSelect={(activity) =>
+                      setSelected({ type: determinePanelType(activity), item: activity })
+                    }
+                    collapsedAiMessages={collapsedAiMessages}
+                    onToggleAiMessageCollapse={toggleAiMessageCollapse}
+                  />
+                </StickToBottom.Content>
+              </StickToBottom>
+            ) : (
+              <div className="h-full overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/30 scrollbar-track-transparent dark:scrollbar-thumb-muted-foreground/50">
+                <ActivityTimeline
+                  activities={sortedActivities}
+                  onSelect={(activity) =>
+                    setSelected({ type: determinePanelType(activity), item: activity })
+                  }
+                  collapsedAiMessages={collapsedAiMessages}
+                  onToggleAiMessageCollapse={toggleAiMessageCollapse}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      {/* Side Panel */}
+      {selected && (
+        <ResizablePanel order={3}>
+          <ActivityDetailsSidePane
+            title={panelTitle(selected)}
+            open={panelVisible}
+            onClose={closePanel}
+          >
+            {renderPanelContent({
+              selected,
+              findSpanById,
+            })}
+          </ActivityDetailsSidePane>
+        </ResizablePanel>
+      )}
+    </>
+  );
+}