improvement(mothership): address review — hook props interface, text-sm token, behavior-only tests

Author: waleedlatif1

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

@@ -61,7 +61,11 @@ export function useToolCallTitle(tool: ToolCallTitleInput | undefined): ToolCall
     [toolName, streamingArgs]
   )
   const isCountingDown = toolName === WaitTool.id && tool?.status === 'executing'
-  const elapsedMs = useElapsedMs(isCountingDown, tool?.startedAt, tool?.toolCallId)
+  const elapsedMs = useElapsedMs({
+    active: isCountingDown,
+    startedAt: tool?.startedAt,
+    resetKey: tool?.toolCallId,
+  })
   if (!tool) return undefined
   const liveTitle = isCountingDown
     ? getWaitCountdownTitle(tool.params, elapsedMs)

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/pending-tag-indicator.tsx

@@ -12,18 +12,23 @@ interface PendingTagIndicatorProps {
   waitingSince?: number
 }
 
+interface ElapsedCountProps {
+  since?: number
+}
+
 /**
  * The wait's elapsed time, ticking in its own component so the loader beside it
  * never re-renders on the clock. Hidden from assistive tech: the loader's status
  * already announces the wait, and a count changing every second would be noise.
  */
-function ElapsedCount({ since }: { since: number | undefined }) {
-  const elapsedMs = useElapsedMs(since !== undefined, since)
+function ElapsedCount({ since }: ElapsedCountProps) {
+  const elapsedMs = useElapsedMs({ active: since !== undefined, startedAt: since })
   if (elapsedMs < ELAPSED_VISIBLE_AFTER_MS) return null
   return (
     <span
       aria-hidden='true'
-      className='animate-stream-fade-in text-[14px] text-[var(--text-muted)] tabular-nums'
+      data-wait-elapsed
+      className='animate-stream-fade-in text-[var(--text-muted)] text-sm tabular-nums'
     >
       {formatDuration(elapsedMs)}
     </span>

apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.dom.test.tsx

@@ -50,17 +50,14 @@ function advance(ms: number) {
   })
 }
 
-/** The elapsed count is the only `aria-hidden` span whose text is a duration. */
-function elapsedText(): string | null {
-  const spans = container.querySelectorAll('span[aria-hidden="true"]')
-  for (const span of spans) {
-    if (/^\d+(m \d+)?s$/.test(span.textContent ?? '')) return span.textContent
-  }
-  return null
+function hasElapsedCount(): boolean {
+  return container.querySelector('[data-wait-elapsed]') !== null
 }
 
-function isThinkingShown(): boolean {
-  return container.querySelector('output')?.closest('[aria-hidden="false"]') !== null
+/** The loader's status sits in the tail slot, which is exposed only while the indicator shows. */
+function isIndicatorExposed(): boolean {
+  const status = container.querySelector('output')
+  return status !== null && status.closest('[aria-hidden="false"]') !== null
 }
 
 beforeEach(() => {
@@ -82,51 +79,47 @@ afterEach(() => {
 })
 
 describe('turn wait indicator', () => {
-  it('shows Thinking at send and adds the elapsed time once the wait runs long', () => {
+  it('shows from send and adds the elapsed count only once the wait runs long', () => {
     renderTurn([], true)
 
-    expect(isThinkingShown()).toBe(true)
-    expect(container.textContent).toContain('Thinking')
-    expect(elapsedText()).toBeNull()
+    expect(isIndicatorExposed()).toBe(true)
+    expect(hasElapsedCount()).toBe(false)
 
     advance(ELAPSED_VISIBLE_AFTER_MS - 1_000)
-    expect(elapsedText()).toBeNull()
+    expect(hasElapsedCount()).toBe(false)
 
     advance(1_000)
-    expect(elapsedText()).toBe('5s')
-
-    advance(7_000)
-    expect(elapsedText()).toBe('12s')
+    expect(hasElapsedCount()).toBe(true)
   })
 
   it('keeps counting through hidden reasoning, which is not visible output', () => {
     renderTurn([], true)
-    advance(6_000)
+    advance(ELAPSED_VISIBLE_AFTER_MS - 1_000)
 
     renderTurn([THINKING_BLOCK], true)
     advance(1_000)
 
-    expect(isThinkingShown()).toBe(true)
-    expect(elapsedText()).toBe('7s')
+    expect(isIndicatorExposed()).toBe(true)
+    expect(hasElapsedCount()).toBe(true)
   })
 
-  it('hides the indicator and its count when the first output arrives', () => {
+  it('hides the indicator and drops the count when the first output arrives', () => {
     renderTurn([], true)
     advance(8_000)
-    expect(elapsedText()).toBe('8s')
+    expect(hasElapsedCount()).toBe(true)
 
     renderTurn([THINKING_BLOCK, TEXT_BLOCK], true)
 
-    expect(isThinkingShown()).toBe(false)
-    expect(elapsedText()).toBeNull()
+    expect(isIndicatorExposed()).toBe(false)
+    expect(hasElapsedCount()).toBe(false)
   })
 
   it('does not count while a running tool row owns the wait', () => {
     renderTurn([RUNNING_TOOL_BLOCK], true)
     advance(10_000)
 
-    expect(isThinkingShown()).toBe(false)
-    expect(elapsedText()).toBeNull()
+    expect(isIndicatorExposed()).toBe(false)
+    expect(hasElapsedCount()).toBe(false)
     expect(vi.getTimerCount()).toBe(0)
   })
 
@@ -137,19 +130,19 @@ describe('turn wait indicator', () => {
     renderTurn([], false)
 
     expect(container.querySelector('output')).toBeNull()
-    expect(elapsedText()).toBeNull()
+    expect(hasElapsedCount()).toBe(false)
     expect(vi.getTimerCount()).toBe(0)
   })
 
   it('removes the indicator and stops ticking when the user stops the turn', () => {
     renderTurn([], true)
     advance(8_000)
 
-    renderTurn([STOPPED_BLOCK], true)
+    renderTurn([STOPPED_BLOCK], false)
 
     expect(container.querySelector('output')).toBeNull()
-    expect(container.textContent).toContain('Stopped by user')
-    expect(elapsedText()).toBeNull()
+    expect(hasElapsedCount()).toBe(false)
+    expect(vi.getTimerCount()).toBe(0)
   })
 
   it('clears its clock on unmount', () => {

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

@@ -1020,7 +1020,7 @@ function MessageContentInner({
    * wait. A ref, not state — every stream chunk moves it, and it is only read on
    * the renders that show the shimmer.
    */
-  const waitStartedAtRef = useRef(Date.now())
+  const waitStartedAtRef = useRef<number>(Date.now())
 
   const segments = useMemo<MessageSegment[]>(
     () =>

apps/sim/app/workspace/[workspaceId]/home/hooks/use-elapsed-ms.ts

@@ -15,11 +15,18 @@ const ELAPSED_TICK_MS = 250
  * no start to give. A sample taken under a different `resetKey` reads as 0, so
  * switching subjects never flashes the previous subject's count.
  */
-export function useElapsedMs(
-  active: boolean,
-  startedAt: number | undefined,
-  resetKey: string | number | undefined = startedAt
-): number {
+interface UseElapsedMsProps {
+  active: boolean
+  startedAt?: number
+  /** Identity of what is being timed; defaults to `startedAt`. */
+  resetKey?: string | number
+}
+
+export function useElapsedMs({
+  active,
+  startedAt,
+  resetKey = startedAt,
+}: UseElapsedMsProps): number {
   const [sample, setSample] = useState({ resetKey, elapsedMs: 0 })
 
   useEffect(() => {