fix(chat): share activity disclosure and status lifecycle

Author: waleedlatif1

apps/sim/app/(landing)/components/hero/components/hero-chat-loop/hero-tool-call-item.tsx

@@ -8,6 +8,7 @@ import { getToolIcon } from '@/app/workspace/[workspaceId]/home/components/messa
 /** Demo fixtures have known brands, so the landing page never loads the block registry. */
 export function HeroToolCallItem({
   toolCallId,
+  renderStatus,
   toolName,
   displayTitle,
   status,
@@ -18,11 +19,12 @@ export function HeroToolCallItem({
       : toolCallId === 'hero-read-table'
         ? Table
         : getToolIcon(toolName)
-  return (
+  const activity = (
     <ActivityStatus
       label={getToolStatusDisplayTitle(displayTitle, status, toolName)}
       isActive={status === 'executing'}
       icon={Icon && <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />}
     />
   )
+  return renderStatus ? renderStatus(activity) : activity
 }

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-disclosure.tsx

@@ -0,0 +1,59 @@
+'use client'
+
+import { type ReactNode, useId } from 'react'
+import { ChevronDown, cn, Expandable, ExpandableContent } from '@sim/emcn'
+import { ActivityViewport } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport'
+
+interface ActivityDisclosureProps {
+  header: ReactNode
+  children: ReactNode
+  expanded: boolean
+  onToggle: () => void
+  isStreaming: boolean
+  unbounded?: boolean
+}
+
+/** Shared disclosure chrome; callers own expansion and blocking-interaction decisions. */
+export function ActivityDisclosure({
+  header,
+  children,
+  expanded,
+  onToggle,
+  isStreaming,
+  unbounded = false,
+}: ActivityDisclosureProps) {
+  const contentId = useId()
+  const headerId = useId()
+
+  return (
+    <div className='flex min-w-0 flex-col gap-1.5'>
+      <button
+        type='button'
+        aria-expanded={expanded}
+        aria-controls={contentId}
+        aria-labelledby={headerId}
+        onClick={onToggle}
+        className='group/agent flex w-full min-w-0 cursor-pointer items-center gap-2 text-left'
+      >
+        <span id={headerId} className='flex min-w-0'>
+          {header}
+        </span>
+        <ChevronDown
+          aria-hidden
+          className={cn(
+            'size-[14px] shrink-0 text-[var(--text-icon)] transition-[transform,opacity] duration-150',
+            !expanded &&
+              '-rotate-90 opacity-0 group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100'
+          )}
+        />
+      </button>
+      <Expandable expanded={expanded}>
+        <ExpandableContent id={contentId}>
+          <ActivityViewport isStreaming={isStreaming} unbounded={unbounded}>
+            {children}
+          </ActivityViewport>
+        </ExpandableContent>
+      </Expandable>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { cn } from '@sim/emcn'
+import { type ReactNode, useEffect, useLayoutEffect, useRef } from 'react'
+import { cn, scrollFadeAttributes, scrollFadeClass, useScrollEdges } from '@sim/emcn'
 
 interface ActivityViewportProps {
   children: ReactNode
@@ -21,7 +21,7 @@ export function ActivityViewport({
   const rafRef = useRef<number | null>(null)
   const stickToBottomRef = useRef(true)
   const prevScrollTopRef = useRef(0)
-  const [hasOverflow, setHasOverflow] = useState(false)
+  const edges = useScrollEdges(ref, { enabled: !unbounded })
 
   useEffect(() => {
     if (unbounded) {
@@ -30,8 +30,7 @@ export function ActivityViewport({
     }
     const el = ref.current
     if (!el) return
-    // Upward user input detaches auto-stick; a downward scroll reaching the
-    // bottom re-attaches it (a small upward flick can't re-stick itself).
+    /** Upward input detaches auto-stick; reaching the bottom while scrolling down resumes it. */
     const handleWheel = (e: WheelEvent) => {
       if (e.deltaY < 0) stickToBottomRef.current = false
     }
@@ -51,20 +50,11 @@ export function ActivityViewport({
   }, [unbounded])
 
   useLayoutEffect(() => {
-    const el = ref.current
     if (rafRef.current !== null) {
       window.cancelAnimationFrame(rafRef.current)
       rafRef.current = null
     }
-    if (unbounded) {
-      setHasOverflow(false)
-      return
-    }
-    if (el) {
-      const next = el.scrollHeight > el.clientHeight
-      setHasOverflow((prev) => (prev === next ? prev : next))
-    }
-    if (!isStreaming) return
+    if (unbounded || !isStreaming) return
     const tick = () => {
       const node = ref.current
       if (!node || !stickToBottomRef.current) {
@@ -90,23 +80,17 @@ export function ActivityViewport({
   })
 
   return (
-    <div className='relative'>
-      <div
-        ref={ref}
-        className={cn(
-          'pr-2',
-          !unbounded && 'scrollbar-hide max-h-[110px] overflow-y-auto',
-          hasOverflow && 'py-1'
-        )}
-      >
-        {children}
-      </div>
-      {!unbounded && hasOverflow && (
-        <>
-          <div className='pointer-events-none absolute top-0 right-2 left-0 h-3 bg-linear-to-b from-[var(--bg)] to-transparent' />
-          <div className='pointer-events-none absolute right-2 bottom-0 left-0 h-3 bg-linear-to-t from-[var(--bg)] to-transparent' />
-        </>
+    <div
+      ref={ref}
+      className={cn(
+        'pr-2',
+        !unbounded && 'scrollbar-hide max-h-[110px] overflow-y-auto',
+        scrollFadeClass,
+        (edges.top || edges.bottom) && 'py-1'
       )}
+      {...scrollFadeAttributes(edges)}
+    >
+      {children}
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import { type ComponentType, type ReactNode, useId, useMemo, useState } from 'react'
-import { ChevronDown, cn, Expandable, ExpandableContent } from '@sim/emcn'
+import { type ComponentType, type ReactNode, useMemo, useState } from 'react'
 import { ActivityStatus } from '@/components/ui/activity-status'
 import { isBrowserAgentAvailable } from '@/lib/browser-agent/transport'
 import { RETIRED_BROWSER_REQUEST_TAKEOVER_ID } from '@/lib/copilot/tools/retired-tools'
-import { ActivityViewport } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-viewport'
+import { ActivityDisclosure } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-disclosure'
 import { BrowserAgentIcon } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/browser-agent-icon'
 import { renderInlineMarkdown } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/inline-markdown'
 import { MainAgentActivity } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/main-agent-activity'
@@ -77,7 +76,6 @@ function collectGroupTools(items: AgentGroupItem[]): ToolCallData[] {
 function hasPendingInteraction(items: AgentGroupItem[]): boolean {
   return items.some((item) => {
     if (item.type === 'tool') return needsToolInput(item.data)
-    // Text rows carry no tool calls, so only nested groups need recursing into.
     return item.type === 'agent_group' ? hasPendingInteraction(item.group.items) : false
   })
 }
@@ -152,7 +150,6 @@ export function AgentGroupView({
   ToolCallComponent,
   renderBrowserTakeover,
 }: AgentGroupViewProps) {
-  const contentId = useId()
   const AgentIcon = getAgentIcon(agentName)
   const agentIcon =
     agentName === 'browser' ? (
@@ -194,9 +191,7 @@ export function AgentGroupView({
   const [manualExpanded, setManualExpanded] = useState(defaultExpanded)
   const [expandedTakeoverId, setExpandedTakeoverId] = useState<string | null>(null)
   const pendingInteraction = hasPendingInteraction(items)
-  // An outstanding permission prompt overrides a manual collapse: the turn
-  // cannot proceed until it is answered, so hiding it would deadlock the chat
-  // with nothing on screen to explain why.
+  /** Blocking interactions override manual collapse so the user can resume the turn. */
   const expanded =
     pendingInteraction ||
     nestedBrowserTakeover ||
@@ -238,6 +233,7 @@ export function AgentGroupView({
           isDelegating={item.group.isDelegating}
           isStreaming={isStreaming}
           isLaneOpen={item.group.isOpen}
+          autoScrollActivity={autoScrollActivity}
         />
       )
     }
@@ -271,42 +267,22 @@ export function AgentGroupView({
   )
 
   return (
-    <div className='flex flex-col gap-1.5'>
-      {isMainAgent ? null : hasItems ? (
-        <button
-          type='button'
-          aria-label={headerText}
-          aria-expanded={expanded}
-          aria-controls={contentId}
-          onClick={toggleExpanded}
-          className='group/agent flex w-full min-w-0 cursor-pointer items-center gap-2 text-left'
+    <div className='flex min-w-0 flex-col gap-1.5'>
+      {isMainAgent ? (
+        activity
+      ) : hasItems ? (
+        <ActivityDisclosure
+          header={header}
+          expanded={expanded}
+          onToggle={toggleExpanded}
+          isStreaming={isStreaming && autoScrollActivity}
+          unbounded={pendingInteraction || nestedBrowserTakeover}
         >
-          {header}
-          <ChevronDown
-            className={cn(
-              'size-[14px] shrink-0 text-[var(--text-icon)] transition-[transform,opacity] duration-150',
-              !expanded &&
-                '-rotate-90 opacity-0 group-hover/agent:opacity-100 group-focus-visible/agent:opacity-100'
-            )}
-          />
-        </button>
+          {activity}
+        </ActivityDisclosure>
       ) : (
         header
       )}
-      {isMainAgent ? (
-        activity
-      ) : hasItems ? (
-        <Expandable expanded={expanded}>
-          <ExpandableContent id={contentId}>
-            <ActivityViewport
-              isStreaming={isStreaming && autoScrollActivity}
-              unbounded={pendingInteraction || nestedBrowserTakeover}
-            >
-              {activity}
-            </ActivityViewport>
-          </ExpandableContent>
-        </Expandable>
-      ) : null}
       {activeBrowserTakeover && (
         <div key={activeBrowserTakeover.id} className='animate-stream-fade-in'>
           {renderBrowserTakeover?.(activeBrowserTakeover.reason)}

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.test.ts

@@ -111,10 +111,14 @@ describe('AgentGroup inline main activity', () => {
   beforeEach(() => {
     ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
     container = document.createElement('div')
+    document.body.appendChild(container)
     root = createRoot(container)
   })
 
-  afterEach(() => act(() => root.unmount()))
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+  })
 
   it('replaces the active status in place and expands the full completed history', () => {
     const first: AgentGroupItem = {
@@ -206,8 +210,10 @@ describe('AgentGroup inline main activity', () => {
     )
   })
 
-  it('starts a fresh countdown when the latest wait tool changes', () => {
+  it('shares one countdown and preserves the viewport across active tool changes', () => {
     vi.useFakeTimers()
+    const setIntervalSpy = vi.spyOn(globalThis, 'setInterval')
+    const clearIntervalSpy = vi.spyOn(globalThis, 'clearInterval')
     try {
       const wait: AgentGroupItem = {
         type: 'tool',
@@ -233,12 +239,36 @@ describe('AgentGroup inline main activity', () => {
       render([wait])
       act(() => vi.advanceTimersByTime(2000))
       expect(container.textContent).toBe('Waiting 1s')
+      const header = container.querySelector('button')
+      act(() => header?.click())
+      expect(header?.hasAttribute('aria-label')).toBe(false)
+      expect(header?.textContent).toBe('Waiting 1s')
+      expect(header).toHaveAccessibleName('Waiting 1s')
+      expect(container.querySelector('[data-state="open"]')?.textContent).toBe('Waiting 1s')
+      expect(setIntervalSpy).toHaveBeenCalledTimes(1)
+      act(() => header?.click())
+      act(() => header?.click())
+      expect(container.querySelector('[data-state="open"]')?.textContent).toBe('Waiting 1s')
+      const viewport = container.querySelector('.overflow-y-auto')
       render([
         { ...wait, data: { ...wait.data, status: 'success' } },
         { ...wait, data: { ...wait.data, id: 'wait-second' } },
       ])
-      expect(container.textContent).toBe('Waiting 3s')
+      expect(header?.textContent).toBe('Waiting 3s')
+      expect(header).toHaveAccessibleName('Waiting 3s')
+      expect(container.querySelector('.overflow-y-auto')).toBe(viewport)
+      expect(container.querySelector('[data-state="open"]')?.textContent).toBe('WaitedWaiting 3s')
+      expect(setIntervalSpy).toHaveBeenCalledTimes(2)
+      render([
+        { ...wait, data: { ...wait.data, status: 'success' } },
+        { ...wait, data: { ...wait.data, id: 'wait-second', status: 'success' } },
+      ])
+      expect(header?.textContent).toBe('Waited')
+      expect(container.querySelector('.overflow-y-auto')).toBe(viewport)
+      expect(clearIntervalSpy).toHaveBeenCalledTimes(2)
     } finally {
+      setIntervalSpy.mockRestore()
+      clearIntervalSpy.mockRestore()
       vi.clearAllTimers()
       vi.useRealTimers()
     }
@@ -256,9 +286,10 @@ describe('AgentGroup inline main activity', () => {
           type: 'tool',
           data: {
             id: 'run',
-            toolName: 'terminal_run',
+            toolName: 'terminal',
             displayTitle: 'Running checks',
             status: 'success',
+            params: { operation: 'run' },
           },
         },
       ]
@@ -274,7 +305,8 @@ describe('AgentGroup inline main activity', () => {
         )
       )
       const header = container.querySelector('button')
-      expect(header?.getAttribute('aria-label')).toBe('Agent — Read files, ran commands')
+      expect(header?.textContent).toBe('Agent — Read files, ran commands')
+      expect(header).toHaveAccessibleName('Agent — Read files, ran commands')
       expect(container.querySelectorAll('[data-tool-call-id]')).toHaveLength(0)
       act(() => header?.click())
       expect(
@@ -309,8 +341,10 @@ describe('AgentGroup inline main activity', () => {
               },
             ]),
           ],
-          ToolCallComponent: ({ toolCallId, displayTitle }: ToolCallItemProps) =>
-            createElement('div', { 'data-tool-call-id': toolCallId }, displayTitle),
+          ToolCallComponent: ({ toolCallId, displayTitle, renderStatus }: ToolCallItemProps) => {
+            const status = createElement('div', { 'data-tool-call-id': toolCallId }, displayTitle)
+            return renderStatus ? renderStatus(status) : status
+          },
         })
       )
     )
@@ -413,8 +447,10 @@ describe('AgentGroup inline main activity', () => {
           agentLabel: 'Sim',
           items,
           isStreaming: true,
-          ToolCallComponent: ({ toolCallId, displayTitle }: ToolCallItemProps) =>
-            createElement('div', { 'data-tool-call-id': toolCallId }, displayTitle),
+          ToolCallComponent: ({ toolCallId, displayTitle, renderStatus }: ToolCallItemProps) => {
+            const status = createElement('div', { 'data-tool-call-id': toolCallId }, displayTitle)
+            return renderStatus ? renderStatus(status) : status
+          },
         })
       )
     })