fix(ui/ux): console and notifications

Author: emir-karabeg

sim/app/w/[id]/components/control-bar/components/notification-dropdown-item/notification-dropdown-item.tsx

@@ -5,7 +5,7 @@ import { ErrorIcon } from '@/components/icons'
 import { DropdownMenuItem } from '@/components/ui/dropdown-menu'
 import { cn } from '@/lib/utils'
 import { useNotificationStore } from '@/stores/notifications/store'
-import { NotificationOptions, NotificationType } from '@/stores/notifications/types'
+import { Notification, NotificationOptions, NotificationType } from '@/stores/notifications/types'
 
 interface NotificationDropdownItemProps {
   id: string
@@ -40,7 +40,8 @@ export function NotificationDropdownItem({
   options,
   setDropdownOpen,
 }: NotificationDropdownItemProps) {
-  const { showNotification } = useNotificationStore()
+  const { notifications, showNotification, hideNotification, removeNotification, addNotification } =
+    useNotificationStore()
   const Icon = NotificationIcon[type]
   const [, forceUpdate] = useState({})
 
@@ -50,11 +51,59 @@ export function NotificationDropdownItem({
     return () => clearInterval(interval)
   }, [])
 
+  // Find the full notification object from the store
+  const getFullNotification = (): Notification | undefined => {
+    return notifications.find((n) => n.id === id)
+  }
+
   // Handle click to show the notification
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault()
     e.stopPropagation()
-    showNotification(id)
+
+    const notification = getFullNotification()
+
+    if (notification) {
+      // For persistent notifications like API info, just re-show them
+      if (notification.options?.isPersistent) {
+        showNotification(id)
+      } else {
+        // For non-persistent notifications, we have different strategies:
+
+        if (notification.isVisible) {
+          if (notification.isFading) {
+            // If it's currently fading, remove and re-add it to restart animation sequence
+            removeNotification(id)
+
+            // Re-add with same properties but new ID
+            addNotification(
+              notification.type,
+              notification.message,
+              notification.workflowId,
+              notification.options
+            )
+          } else {
+            // If visible but not fading, just make sure it's at the top of the stack
+            showNotification(id)
+          }
+        } else {
+          // If not visible, we re-add it instead of just showing it
+          // This ensures a fresh animation sequence
+
+          // Create a new notification with same properties
+          addNotification(
+            notification.type,
+            notification.message,
+            notification.workflowId,
+            notification.options
+          )
+        }
+      }
+    } else {
+      // Fallback for any case where the notification doesn't exist anymore
+      addNotification(type, message, null, options)
+    }
+
     // Close the dropdown after clicking
     if (setDropdownOpen) {
       setDropdownOpen(false)

sim/app/w/[id]/components/notifications/notifications.tsx

@@ -16,15 +16,18 @@ import { Button } from '@/components/ui/button'
 import { CopyButton } from '@/components/ui/copy-button'
 import { createLogger } from '@/lib/logs/console-logger'
 import { cn } from '@/lib/utils'
-import { useNotificationStore } from '@/stores/notifications/store'
+import {
+  MAX_VISIBLE_NOTIFICATIONS,
+  NOTIFICATION_TIMEOUT,
+  useNotificationStore,
+} from '@/stores/notifications/store'
 import { Notification } from '@/stores/notifications/types'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 
 const logger = createLogger('Notifications')
 
 // Constants
-const NOTIFICATION_TIMEOUT = 4000 // Show notification for 4 seconds
 const FADE_DURATION = 500 // Fade out over 500ms
 
 // Define keyframes for the animations in a style tag
@@ -52,13 +55,33 @@ const AnimationStyles = () => (
       }
     }
 
+    @keyframes notification-slide-up {
+      0% {
+        transform: translateY(0);
+      }
+      100% {
+        transform: translateY(-100%);
+      }
+    }
+
     .animate-notification-slide {
       animation: notification-slide 300ms ease forwards;
     }
 
     .animate-notification-fade-out {
       animation: notification-fade-out ${FADE_DURATION}ms ease forwards;
     }
+
+    .animate-notification-slide-up {
+      animation: notification-slide-up 300ms ease forwards;
+    }
+
+    .notification-container {
+      transition:
+        height 300ms ease,
+        opacity 300ms ease,
+        transform 300ms ease;
+    }
   `}</style>
 )
 
@@ -129,12 +152,19 @@ function DeleteApiConfirmation({
  */
 export function NotificationList() {
   // Store access
-  const { notifications, hideNotification, markAsRead, removeNotification } = useNotificationStore()
+  const {
+    notifications,
+    hideNotification,
+    markAsRead,
+    removeNotification,
+    setNotificationFading,
+    getVisibleNotificationCount,
+  } = useNotificationStore()
   const { activeWorkflowId } = useWorkflowRegistry()
 
   // Local state
-  const [fadingNotifications, setFadingNotifications] = useState<Set<string>>(new Set())
   const [removedIds, setRemovedIds] = useState<Set<string>>(new Set())
+  const [animatingIds, setAnimatingIds] = useState<Set<string>>(new Set())
 
   // Filter to only show:
   // 1. Visible notifications for the current workflow
@@ -148,6 +178,10 @@ export function NotificationList() {
       !removedIds.has(n.id)
   )
 
+  // Check if we're over the limit of visible notifications
+  const visibleCount = activeWorkflowId ? getVisibleNotificationCount(activeWorkflowId) : 0
+  const isOverLimit = visibleCount > MAX_VISIBLE_NOTIFICATIONS
+
   // Reset removedIds whenever a notification's visibility changes from false to true
   useEffect(() => {
     const newlyVisibleNotifications = notifications.filter(
@@ -160,51 +194,46 @@ export function NotificationList() {
         newlyVisibleNotifications.forEach((n) => next.delete(n.id))
         return next
       })
-
-      // Also reset fading state for these notifications
-      setFadingNotifications((prev) => {
-        const next = new Set(prev)
-        newlyVisibleNotifications.forEach((n) => next.delete(n.id))
-        return next
-      })
     }
   }, [notifications, removedIds])
 
-  // Handle auto-dismissal of non-persistent notifications
+  // Handle fading notifications created by the store
   useEffect(() => {
-    // Setup timers for each notification
-    const timers: ReturnType<typeof setTimeout>[] = []
+    // This effect watches for notifications that are fading
+    // and handles the DOM removal after animation completes
+
+    const timers: Record<string, ReturnType<typeof setTimeout>> = {}
 
     visibleNotifications.forEach((notification) => {
-      // Skip if already hidden or marked as persistent
-      if (!notification.isVisible || notification.options?.isPersistent) return
-
-      // Start fade out animation
-      const fadeTimer = setTimeout(() => {
-        setFadingNotifications((prev) => new Set([...prev, notification.id]))
-      }, NOTIFICATION_TIMEOUT)
-
-      // Hide notification after fade completes and mark for removal from DOM
-      const hideTimer = setTimeout(() => {
-        hideNotification(notification.id)
-        markAsRead(notification.id)
-
-        // Mark this notification ID as removed to exclude it from rendering
-        setRemovedIds((prev) => new Set([...prev, notification.id]))
-
-        setFadingNotifications((prev) => {
-          const next = new Set(prev)
-          next.delete(notification.id)
-          return next
-        })
-      }, NOTIFICATION_TIMEOUT + FADE_DURATION)
-
-      timers.push(fadeTimer, hideTimer)
+      // For notifications that have started fading, set up cleanup timers
+      if (notification.isFading && !animatingIds.has(notification.id)) {
+        // Start slide up animation after fade animation
+        const slideTimer = setTimeout(() => {
+          setAnimatingIds((prev) => new Set([...prev, notification.id]))
+
+          // After slide animation, remove from DOM
+          setTimeout(() => {
+            hideNotification(notification.id)
+            markAsRead(notification.id)
+            setRemovedIds((prev) => new Set([...prev, notification.id]))
+
+            // Remove from animating set
+            setAnimatingIds((prev) => {
+              const next = new Set(prev)
+              next.delete(notification.id)
+              return next
+            })
+          }, 300)
+        }, FADE_DURATION)
+
+        timers[notification.id] = slideTimer
+      }
     })
 
-    // Cleanup timers on unmount or when notifications change
-    return () => timers.forEach(clearTimeout)
-  }, [visibleNotifications, hideNotification, markAsRead])
+    return () => {
+      Object.values(timers).forEach(clearTimeout)
+    }
+  }, [visibleNotifications, animatingIds, hideNotification, markAsRead])
 
   // Early return if no notifications to show
   if (visibleNotifications.length === 0) return null
@@ -220,26 +249,48 @@ export function NotificationList() {
         }}
       >
         {visibleNotifications.map((notification) => (
-          <NotificationAlert
+          <div
             key={notification.id}
-            notification={notification}
-            isFading={fadingNotifications.has(notification.id)}
-            onHide={(id) => {
-              hideNotification(id)
-              markAsRead(id)
-              // Start the fade out animation
-              setFadingNotifications((prev) => new Set([...prev, id]))
-              // Remove from DOM after animation completes
-              setTimeout(() => {
-                setRemovedIds((prev) => new Set([...prev, id]))
-                setFadingNotifications((prev) => {
-                  const next = new Set(prev)
-                  next.delete(id)
-                  return next
-                })
-              }, FADE_DURATION)
-            }}
-          />
+            className={cn(
+              'notification-container',
+              animatingIds.has(notification.id) && 'animate-notification-slide-up'
+            )}
+          >
+            <NotificationAlert
+              notification={notification}
+              isFading={notification.isFading ?? false}
+              onHide={(id) => {
+                // For persistent notifications like API, just hide immediately without animations
+                if (notification.options?.isPersistent) {
+                  hideNotification(id)
+                  markAsRead(id)
+                  setRemovedIds((prev) => new Set([...prev, id]))
+                  return
+                }
+
+                // For regular notifications, use the animation sequence
+                // Start the fade out animation when manually closing
+                setNotificationFading(id)
+
+                // Start slide up animation after fade completes
+                setTimeout(() => {
+                  setAnimatingIds((prev) => new Set([...prev, id]))
+                }, FADE_DURATION)
+
+                // Remove from DOM after all animations complete
+                setTimeout(() => {
+                  hideNotification(id)
+                  markAsRead(id)
+                  setRemovedIds((prev) => new Set([...prev, id]))
+                  setAnimatingIds((prev) => {
+                    const next = new Set(prev)
+                    next.delete(id)
+                    return next
+                  })
+                }, FADE_DURATION + 300) // Fade + slide durations
+              }}
+            />
+          </div>
         ))}
       </div>
     </>

sim/app/w/[id]/components/panel/components/console/components/console-entry/console-entry.tsx

@@ -10,6 +10,41 @@ interface ConsoleEntryProps {
   consoleWidth: number
 }
 
+// Maximum character length for a word before it's broken up
+const MAX_WORD_LENGTH = 25
+
+const WordWrap = ({ text }: { text: string }) => {
+  if (!text) return null
+
+  // Split text into words, keeping spaces and punctuation
+  const parts = text.split(/(\s+)/g)
+
+  return (
+    <>
+      {parts.map((part, index) => {
+        // If the part is whitespace or shorter than the max length, render it as is
+        if (part.match(/\s+/) || part.length <= MAX_WORD_LENGTH) {
+          return <span key={index}>{part}</span>
+        }
+
+        // For long words, break them up into chunks
+        const chunks = []
+        for (let i = 0; i < part.length; i += MAX_WORD_LENGTH) {
+          chunks.push(part.substring(i, i + MAX_WORD_LENGTH))
+        }
+
+        return (
+          <span key={index} className="break-all">
+            {chunks.map((chunk, chunkIndex) => (
+              <span key={chunkIndex}>{chunk}</span>
+            ))}
+          </span>
+        )
+      })}
+    </>
+  )
+}
+
 export function ConsoleEntry({ entry, consoleWidth }: ConsoleEntryProps) {
   const [isExpanded, setIsExpanded] = useState(false)
 
@@ -79,20 +114,24 @@ export function ConsoleEntry({ entry, consoleWidth }: ConsoleEntryProps) {
 
           {entry.error && (
             <div className="flex items-start gap-2 border rounded-md p-3 border-red-500 bg-red-50 text-destructive dark:border-border dark:text-foreground dark:bg-background">
-              <AlertCircle className="h-4 w-4 text-red-500 mt-1" />
-              <div className="flex-1 break-normal whitespace-normal overflow-wrap-anywhere">
+              <AlertCircle className="h-4 w-4 text-red-500 mt-1 flex-shrink-0" />
+              <div className="flex-1 min-w-0">
                 <div className="font-medium">Error</div>
-                <pre className="text-sm whitespace-pre-wrap">{entry.error}</pre>
+                <div className="text-sm whitespace-pre-wrap overflow-hidden w-full">
+                  <WordWrap text={entry.error} />
+                </div>
               </div>
             </div>
           )}
 
           {entry.warning && (
             <div className="flex items-start gap-2 border rounded-md p-3 border-yellow-500 bg-yellow-50 text-yellow-700 dark:border-border dark:text-yellow-500 dark:bg-background">
-              <AlertTriangle className="h-4 w-4 text-yellow-500 mt-1" />
-              <div className="flex-1 break-normal whitespace-normal overflow-wrap-anywhere">
+              <AlertTriangle className="h-4 w-4 text-yellow-500 mt-1 flex-shrink-0" />
+              <div className="flex-1 min-w-0">
                 <div className="font-medium">Warning</div>
-                <pre className="text-sm whitespace-pre-wrap">{entry.warning}</pre>
+                <div className="text-sm whitespace-pre-wrap overflow-hidden w-full">
+                  <WordWrap text={entry.warning} />
+                </div>
               </div>
             </div>
           )}