@inkeep/agents-manage-ui 0.1.0 → 0.1.2

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

@@ -12,9 +12,11 @@ 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 { Loader2, ChevronDown, ChevronUp, RefreshCw, AlertTriangle } from 'lucide-react';
 import { ConversationTracesLink } from '@/components/traces/signoz-link';
 import { Button } from '@/components/ui/button';
+import { Alert, AlertTitle } from '@/components/ui/alert';
+import { toast } from 'sonner';
 
 function panelTitle(selected: SelectedPanel) {
   switch (selected.type) {
@@ -49,9 +51,42 @@ interface TimelineWrapperProps {
   conversation?: ConversationDetail | null;
   enableAutoScroll?: boolean;
   isPolling?: boolean;
+  error?: string | null;
+  retryConnection?: () => void;
+  refreshOnce?: () => Promise<{ hasNewActivity: boolean }>;
+  showConversationTracesLink?: boolean;
 }
 
-function EmptyTimeline({ isPolling }: { isPolling: boolean }) {
+function EmptyTimeline({
+  isPolling,
+  error,
+  retryConnection,
+}: {
+  isPolling: boolean;
+  error?: string | null;
+  retryConnection?: () => void;
+}) {
+  if (error) {
+    return (
+      <div className="flex flex-col gap-4 h-full justify-center items-center px-6">
+        <Alert variant="destructive" className="max-w-md">
+          <AlertTriangle className="h-4 w-4" />
+          <AlertTitle>{error}</AlertTitle>
+        </Alert>
+        {retryConnection && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={retryConnection}
+            className="flex items-center gap-2"
+          >
+            <RefreshCw className="h-4 w-4" />
+            Retry Connection
+          </Button>
+        )}
+      </div>
+    );
+  }
   return (
     <div className="flex flex-col gap-2 h-full justify-center items-center">
       {isPolling ? (
@@ -72,13 +107,19 @@ export function TimelineWrapper({
   conversation,
   enableAutoScroll = false,
   isPolling = false,
+  error,
+  retryConnection,
+  refreshOnce,
+  showConversationTracesLink = false,
 }: TimelineWrapperProps) {
   const [selected, setSelected] = useState<SelectedPanel | null>(null);
   const [panelVisible, setPanelVisible] = useState(false);
-  
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
   // State for collapsible AI messages
   const [collapsedAiMessages, setCollapsedAiMessages] = useState<Set<string>>(new Set());
-  const [aiMessagesGloballyCollapsed, setAiMessagesGloballyCollapsed] = useState<boolean>(enableAutoScroll);
+  const [aiMessagesGloballyCollapsed, setAiMessagesGloballyCollapsed] =
+    useState<boolean>(enableAutoScroll);
 
   useEffect(() => {
     if (selected) {
@@ -117,12 +158,13 @@ export function TimelineWrapper({
   // 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
+      .filter(
+        (activity) =>
+          activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE ||
+          activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
       )
-      .map(activity => activity.id);
-    
+      .map((activity) => activity.id);
+
     if (enableAutoScroll) {
       // Live trace view: default collapsed
       setCollapsedAiMessages(new Set(aiMessageIds));
@@ -133,7 +175,7 @@ export function TimelineWrapper({
       setAiMessagesGloballyCollapsed(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sortedActivities.length, enableAutoScroll]); // Run when activities count or view type changes
+  }, [sortedActivities.length, enableAutoScroll]); //  Run when activities count or view type changes
 
   // Functions to handle expand/collapse all
   const expandAllAiMessages = () => {
@@ -143,11 +185,12 @@ export function TimelineWrapper({
 
   const collapseAllAiMessages = () => {
     const aiMessageIds = sortedActivities
-      .filter(activity => 
-        activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE || 
-        activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
+      .filter(
+        (activity) =>
+          activity.type === ACTIVITY_TYPES.AI_ASSISTANT_MESSAGE ||
+          activity.type === ACTIVITY_TYPES.AI_MODEL_STREAMED_TEXT
       )
-      .map(activity => activity.id);
+      .map((activity) => activity.id);
     setCollapsedAiMessages(new Set(aiMessageIds));
     setAiMessagesGloballyCollapsed(true);
   };
@@ -160,15 +203,16 @@ export function TimelineWrapper({
       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
+      .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));
+      .map((activity) => activity.id);
+    const allCollapsed = aiMessageIds.every((id) => newCollapsed.has(id));
     setAiMessagesGloballyCollapsed(allCollapsed);
   };
 
@@ -183,7 +227,8 @@ export function TimelineWrapper({
     );
 
   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.toolType === TOOL_TYPES.TRANSFER)
+      return 'transfer';
     if (a.type === ACTIVITY_TYPES.TOOL_CALL && a.toolName?.includes('delegate'))
       return 'delegation';
     if (
@@ -196,6 +241,21 @@ export function TimelineWrapper({
     return a.type;
   };
 
+  const handleRefresh = async () => {
+    if (!refreshOnce || isRefreshing) return;
+    setIsRefreshing(true);
+    try {
+      const result = await refreshOnce();
+      if (!result.hasNewActivity) {
+        toast.info('No new activity found');
+      }
+      setIsRefreshing(false);
+    } catch {
+      toast.error('Failed to refresh activities');
+      setIsRefreshing(false);
+    }
+  };
+
   return (
     <>
       <ResizablePanel order={2}>
@@ -205,17 +265,24 @@ export function TimelineWrapper({
               <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
+                {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}
+                      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"}
+                      title={
+                        aiMessagesGloballyCollapsed
+                          ? 'Expand all AI messages'
+                          : 'Collapse all AI messages'
+                      }
                     >
                       {aiMessagesGloballyCollapsed ? (
                         <>
@@ -231,7 +298,7 @@ export function TimelineWrapper({
                     </Button>
                   </div>
                 )}
-                {conversation?.conversationId && (
+                {showConversationTracesLink && conversation?.conversationId && (
                   <ConversationTracesLink conversationId={conversation.conversationId} />
                 )}
               </div>
@@ -239,7 +306,11 @@ export function TimelineWrapper({
           </div>
           <div className="p-0 flex-1 min-h-0">
             {sortedActivities.length === 0 ? (
-              <EmptyTimeline isPolling={isPolling} />
+              <EmptyTimeline
+                isPolling={isPolling}
+                error={error}
+                retryConnection={retryConnection}
+              />
             ) : 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"
@@ -255,6 +326,24 @@ export function TimelineWrapper({
                     collapsedAiMessages={collapsedAiMessages}
                     onToggleAiMessageCollapse={toggleAiMessageCollapse}
                   />
+                  {!isPolling && sortedActivities.length > 0 && !error && refreshOnce && (
+                    <div className="flex justify-center items-center z-10">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={handleRefresh}
+                        disabled={isRefreshing}
+                        className=" text-xs bg-background/80 backdrop-blur-sm  hover:bg-background/90 transition-all duration-200 opacity-70 hover:opacity-100"
+                      >
+                        {isRefreshing ? (
+                          <Loader2 className="h-3 w-3 mr-1.5 animate-spin" />
+                        ) : (
+                          <RefreshCw className="h-3 w-3 mr-1.5" />
+                        )}
+                        {isRefreshing ? 'Refreshing...' : 'Refresh'}
+                      </Button>
+                    </div>
+                  )}
                 </StickToBottom.Content>
               </StickToBottom>
             ) : (

package/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/src/components/ui/form.tsx

@@ -78,17 +78,24 @@ function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
   );
 }
 
-function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+function FormLabel({
+  className,
+  isRequired,
+  children,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root> & { isRequired?: boolean }) {
   const { error, formItemId } = useFormField();
-
   return (
     <Label
       data-slot="form-label"
       data-error={!!error}
-      className={cn('data-[error=true]:text-destructive', className)}
+      className={cn('data-[error=true]:text-destructive gap-1', className)}
       htmlFor={formItemId}
       {...props}
-    />
+    >
+      {children}
+      {isRequired && <span className="text-red-500">*</span>}
+    </Label>
   );
 }
 

package/src/hooks/use-chat-activities-polling.ts

@@ -12,6 +12,8 @@ interface UseChatActivitiesPollingReturn {
   error: string | null;
   startPolling: () => void;
   stopPolling: () => void;
+  retryConnection: () => void;
+  refreshOnce: () => Promise<{ hasNewActivity: boolean }>;
 }
 
 export const useChatActivitiesPolling = ({
@@ -27,15 +29,10 @@ export const useChatActivitiesPolling = ({
   const isComponentMountedRef = useRef(true);
   const abortControllerRef = useRef<AbortController | null>(null);
 
-  const fetchChatActivities = useCallback(async () => {
+  const fetchChatActivities = useCallback(async (): Promise<ConversationDetail | null> => {
     try {
       setError(null);
 
-      // Cancel any previous request
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
-
       // Create new abort controller for this request
       abortControllerRef.current = new AbortController();
       const currentConversationId = conversationId; // Capture current ID
@@ -46,7 +43,9 @@ export const useChatActivitiesPolling = ({
 
       if (!response.ok) {
         // If conversation doesn't exist yet, that's fine - just return
-        if (response.status === 404) return;
+        if (response.status === 404) {
+          return null;
+        }
         throw new Error('Failed to fetch chat activities');
       }
 
@@ -61,16 +60,29 @@ export const useChatActivitiesPolling = ({
           setLastActivityCount(newCount);
         }
       }
+
+      return data;
     } catch (err) {
       // Don't log abort errors as they are expected when cancelling requests
       if (err instanceof Error && err.name === 'AbortError') {
-        return;
+        return null;
       }
 
       if (isComponentMountedRef.current) {
-        console.warn('Error fetching chat activities:', err);
         setError(err instanceof Error ? err.message : 'An error occurred');
+        // Stop polling on error to prevent repeated failed requests
+        setIsPolling(false);
+        if (pollingIntervalRef.current) {
+          clearInterval(pollingIntervalRef.current);
+          pollingIntervalRef.current = null;
+        }
+        // Cancel any pending requests
+        if (abortControllerRef.current) {
+          abortControllerRef.current.abort();
+          abortControllerRef.current = null;
+        }
       }
+      throw err;
     }
   }, [conversationId, lastActivityCount]);
 
@@ -81,11 +93,15 @@ export const useChatActivitiesPolling = ({
     setIsPolling(true);
 
     // Initial fetch
-    fetchChatActivities();
+    fetchChatActivities().catch(() => {
+      // Error handling is already done in fetchChatActivities
+    });
 
     // Set up polling interval
     pollingIntervalRef.current = setInterval(() => {
-      fetchChatActivities();
+      fetchChatActivities().catch(() => {
+        // Error handling is already done in fetchChatActivities
+      });
     }, pollingInterval);
   }, [fetchChatActivities, pollingInterval]);
 
@@ -103,6 +119,21 @@ export const useChatActivitiesPolling = ({
     }
   }, []);
 
+  // Retry connection - clears error and restarts polling
+  const retryConnection = useCallback(() => {
+    setError(null);
+    stopPolling();
+    startPolling();
+  }, [startPolling, stopPolling]);
+
+  // Refresh once - makes a single request without starting polling
+  const refreshOnce = useCallback(async (): Promise<{ hasNewActivity: boolean }> => {
+    const currentCount = chatActivities?.activities?.length || 0;
+    const data = await fetchChatActivities();
+    const newCount = data?.activities?.length || 0;
+    return { hasNewActivity: newCount > currentCount };
+  }, [fetchChatActivities, chatActivities?.activities?.length]);
+
   // Cleanup on unmount
   useEffect(() => {
     isComponentMountedRef.current = true;
@@ -141,5 +172,7 @@ export const useChatActivitiesPolling = ({
     error,
     startPolling,
     stopPolling,
+    retryConnection,
+    refreshOnce,
   };
 };