Skip to content

Commit 71044e8

Browse files
waleedlatif1waleedlatif1
authored
improvement(mothership): calmer activity header: wait wording until a call's title streams, and pacing across a run's calls (#9286)
* improvement(mothership): keep the wait wording until a call's own title streams, and hold refined cli placeholders * improvement(mothership): pace the activity header across a run's liveness flips * test(mothership): cover header selection and pacing through their logic, not rendered text * refactor(mothership): one Thinking label, and note where the header holds the refined cli verb * improvement(mothership): a placeholder header gives way to the call's title at once * fix(mothership): pace only the header label, never its liveness * fix(mothership): a label that stops being a placeholder starts holding the header
1 parent b1168ac commit 71044e8

8 files changed

Lines changed: 212 additions & 39 deletions

File tree

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/**
2+
* @vitest-environment jsdom
3+
*/
4+
import { act } from 'react'
5+
import { createRoot, type Root } from 'react-dom/client'
6+
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
7+
import type { ActivityStatusProps } from '@/components/ui/activity-status'
8+
import { usePacedActivity } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/activity-stream'
9+
10+
describe('usePacedActivity', () => {
11+
let root: Root
12+
let shown: ActivityStatusProps | undefined
13+
14+
function Harness({
15+
label,
16+
isActive,
17+
callId,
18+
placeholder,
19+
}: {
20+
label: string
21+
isActive: boolean
22+
callId: string
23+
placeholder: boolean
24+
}) {
25+
shown = usePacedActivity({ label, isActive, icon: null }, callId, 'reset', false, placeholder)
26+
return null
27+
}
28+
29+
function show(label: string, isActive: boolean, callId: string, placeholder = false) {
30+
act(() =>
31+
root.render(
32+
<Harness label={label} isActive={isActive} callId={callId} placeholder={placeholder} />
33+
)
34+
)
35+
return shown?.label
36+
}
37+
38+
beforeEach(() => {
39+
vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true)
40+
vi.useFakeTimers()
41+
root = createRoot(document.createElement('div'))
42+
})
43+
44+
afterEach(() => {
45+
act(() => root.unmount())
46+
vi.useRealTimers()
47+
})
48+
49+
it("never shows a finished call's title between a run's calls", () => {
50+
expect(show('Listing workflows', true, 'call-1')).toBe('Listing workflows')
51+
act(() => vi.advanceTimersByTime(300))
52+
expect(show('Listed workflows', false, 'call-1')).toBe('Listing workflows')
53+
expect(shown?.isActive).toBe(false)
54+
act(() => vi.advanceTimersByTime(300))
55+
expect(show('Reading run logs', true, 'call-2')).toBe('Listing workflows')
56+
act(() => vi.advanceTimersByTime(400))
57+
expect(shown?.label).toBe('Reading run logs')
58+
})
59+
60+
it('settles on the finished title once the run stays idle', () => {
61+
show('Listing workflows', true, 'call-1')
62+
act(() => vi.advanceTimersByTime(300))
63+
show('Listed workflows', false, 'call-1')
64+
act(() => vi.advanceTimersByTime(700))
65+
expect(shown?.label).toBe('Listed workflows')
66+
})
67+
68+
it("replaces a placeholder with the call's title as soon as it streams", () => {
69+
expect(show('Thinking', true, 'call-1', true)).toBe('Thinking')
70+
act(() => vi.advanceTimersByTime(100))
71+
expect(show('Looking up the failed run', true, 'call-1')).toBe('Looking up the failed run')
72+
})
73+
74+
it('holds a title that matched its placeholder text once the call names itself', () => {
75+
show('Reading Gauge', true, 'call-1', true)
76+
act(() => vi.advanceTimersByTime(100))
77+
expect(show('Reading Gauge', true, 'call-1')).toBe('Reading Gauge')
78+
act(() => vi.advanceTimersByTime(300))
79+
expect(show('Read Gauge', false, 'call-1')).toBe('Reading Gauge')
80+
act(() => vi.advanceTimersByTime(700))
81+
expect(shown?.label).toBe('Read Gauge')
82+
})
83+
})

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

Lines changed: 57 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -15,55 +15,88 @@ interface ActivityStreamProps extends Omit<ActivityDisclosureProps, 'header'> {
1515
expandedLabel?: string
1616
attentionKey: string
1717
collapsible: boolean
18+
/** The label only stands in until the header's call names itself (see `usePacedActivity`). */
19+
placeholder?: boolean
1820
}
1921

20-
/** Pace only the header; history and interactive tool state continue updating immediately. */
21-
export function ActivityStream({
22-
activity,
23-
activityKey,
24-
expandedLabel,
25-
attentionKey,
26-
expanded,
27-
collapsible,
28-
children,
29-
onToggle,
30-
isStreaming,
31-
unbounded,
32-
}: ActivityStreamProps) {
33-
const isExpanded = collapsible && expanded
22+
/**
23+
* The header activity to show: a new label waits until the current one has shown for the pacing
24+
* interval, and a burst of changes inside it settles on the latest. The label is paced across
25+
* liveness too: between a run's calls the lane briefly loses its live indicator, and an unpaced
26+
* label would flash the finished call's title before the next call's. Liveness itself is never
27+
* held. A change of `resetKey` (attention, disclosure) and an expanded group show at once, and a
28+
* placeholder (a call still awaiting its own title) never holds the header, so the title replaces
29+
* it as soon as it streams.
30+
*/
31+
export function usePacedActivity(
32+
activity: ActivityStatusProps,
33+
activityKey: string | undefined,
34+
resetKey: string,
35+
immediate: boolean,
36+
placeholder = false
37+
): ActivityStatusProps {
3438
const key = `${activityKey}:${activity.label}`
35-
const resetKey = `${activity.isActive}:${isExpanded}:${Boolean(activityKey)}:${attentionKey}`
3639
const [visible, setVisible] = useState(() => ({
3740
activity,
3841
key,
3942
resetKey,
43+
placeholder,
4044
shownAt: Date.now(),
4145
}))
4246

43-
/** Completion, attention, and disclosure changes bypass the cosmetic delay. */
4447
if (visible.resetKey !== resetKey) {
45-
setVisible({ activity, key, resetKey, shownAt: Date.now() })
48+
setVisible({ activity, key, resetKey, placeholder, shownAt: Date.now() })
49+
} else if (key === visible.key && placeholder !== visible.placeholder) {
50+
// The same text now names the call itself (an activity title its description matches), so
51+
// it holds the header from here.
52+
setVisible({ ...visible, activity, placeholder, shownAt: Date.now() })
4653
}
4754

4855
useEffect(() => {
49-
if (!activity.isActive || isExpanded || key === visible.key) return
50-
const remaining = Math.max(0, ACTIVITY_UPDATE_INTERVAL_MS - (Date.now() - visible.shownAt))
51-
const flush = () => setVisible({ activity, key, resetKey, shownAt: Date.now() })
56+
if (immediate || key === visible.key) return
57+
const remaining = visible.placeholder
58+
? 0
59+
: Math.max(0, ACTIVITY_UPDATE_INTERVAL_MS - (Date.now() - visible.shownAt))
60+
const flush = () => setVisible({ activity, key, resetKey, placeholder, shownAt: Date.now() })
5261
if (remaining === 0) {
5362
flush()
5463
return
5564
}
5665
const timer = setTimeout(flush, remaining)
5766
return () => clearTimeout(timer)
58-
}, [activity, key, resetKey, isExpanded, visible.key, visible.shownAt])
67+
}, [activity, key, resetKey, immediate, placeholder, visible])
68+
69+
return immediate || key === visible.key || visible.placeholder
70+
? activity
71+
: { ...visible.activity, isActive: activity.isActive }
72+
}
5973

60-
const displayed =
61-
!activity.isActive || isExpanded || key === visible.key ? activity : visible.activity
74+
/** Pace only the header; history and interactive tool state continue updating immediately. */
75+
export function ActivityStream({
76+
activity,
77+
activityKey,
78+
expandedLabel,
79+
attentionKey,
80+
expanded,
81+
collapsible,
82+
children,
83+
onToggle,
84+
isStreaming,
85+
unbounded,
86+
placeholder,
87+
}: ActivityStreamProps) {
88+
const isExpanded = collapsible && expanded
89+
const displayed = usePacedActivity(
90+
activity,
91+
activityKey,
92+
`${isExpanded}:${Boolean(activityKey)}:${attentionKey}`,
93+
isExpanded,
94+
placeholder
95+
)
6296
const header = (
6397
<ActivityStatus
6498
{...displayed}
6599
label={isExpanded ? (expandedLabel ?? displayed.label) : displayed.label}
66-
isActive={activity.isActive}
67100
/>
68101
)
69102
return (

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ import {
2828
getActivityStatusTool,
2929
getCompletedActivityLabel,
3030
getInProgressActivityLabel,
31+
isAwaitingTitle,
32+
THINKING_LABEL,
3133
} from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group'
3234
import type { ToolCallItemProps } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item'
3335
import { useToolCallTitle } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-title'
@@ -294,7 +296,7 @@ export function AgentGroupView({
294296
tools,
295297
activityDescriptor?.title
296298
)
297-
: 'Thinking'
299+
: THINKING_LABEL
298300
: tools.length > 0
299301
? getCompletedActivityLabel(tools, activityDescriptor)
300302
: agentLabel
@@ -317,6 +319,7 @@ export function AgentGroupView({
317319
<ActivityStream
318320
activity={{ label: headerText, isActive: headerActive, icon: agentIcon }}
319321
activityKey={headerTool?.id}
322+
placeholder={inProgress && !error && (!headerTool || isAwaitingTitle(headerTool))}
320323
expandedLabel={pendingInteraction ? undefined : activityDescriptor?.title}
321324
attentionKey={`${getActivityAttentionKey(tools)}:${activeBrowserTakeover?.id ?? ''}`}
322325
collapsible={collapsible}

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

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@ import { act } from 'react'
55
import { createRoot, type Root } from 'react-dom/client'
66
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
77
import { ActivityStatus } from '@/components/ui/activity-status'
8-
import { ToolActivityGroup } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group'
8+
import {
9+
getActivityHeaderTool,
10+
getInProgressActivityLabel,
11+
ToolActivityGroup,
12+
} from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group'
913
import type { ToolCallItemProps } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item'
1014
import type { ToolCallData } from '@/app/workspace/[workspaceId]/home/types'
1115

@@ -126,3 +130,44 @@ describe('ToolActivityGroup search disclosure', () => {
126130
expect(container.textContent).not.toContain('No results')
127131
})
128132
})
133+
134+
describe('in-progress activity header', () => {
135+
const streamingCli: ToolCallData = {
136+
id: 'cli-1',
137+
toolName: 'sim_cli',
138+
displayTitle: 'Running CLI command',
139+
status: 'executing',
140+
}
141+
142+
function headerLabel(tools: ToolCallData[]) {
143+
const statusTool = tools[tools.length - 1]
144+
const headerTool = getActivityHeaderTool(tools, statusTool)
145+
return getInProgressActivityLabel(headerTool.displayTitle ?? '', headerTool, tools, undefined)
146+
}
147+
148+
it('keeps the wait wording while a first CLI call has no title yet', () => {
149+
expect(headerLabel([streamingCli])).toBe('Thinking')
150+
})
151+
152+
it('uses the streamed description as soon as it arrives', () => {
153+
const described = {
154+
...streamingCli,
155+
activityDescription: 'Looking up the failed run',
156+
displayTitle: 'Looking up the failed run',
157+
}
158+
expect(headerLabel([described])).toBe('Looking up the failed run')
159+
})
160+
161+
it('holds the earlier call while a refined CLI call waits for its description', () => {
162+
const earlier: ToolCallData = {
163+
id: 'cli-0',
164+
toolName: 'cli_workflows_list',
165+
displayTitle: 'Listing workflows',
166+
status: 'success',
167+
activityDescription: 'Listing workflows',
168+
params: { args: ['workflows', 'list'] },
169+
}
170+
const refined = { ...streamingCli, toolName: 'cli_logs_get', displayTitle: 'Reading run logs' }
171+
expect(getActivityHeaderTool([earlier, refined], refined)).toBe(earlier)
172+
})
173+
})

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -95,14 +95,14 @@ function getToolActivityInterruptions(tools: ToolCallData[]): string[] {
9595
/**
9696
* An executing call whose streamed arguments do not name its action yet, so its
9797
* title is only its tool's placeholder: a search before its arguments arrive,
98-
* a `sim_cli` call before its command parses ("Running CLI command"),
99-
* a `run_code` call before its arguments
98+
* a CLI call before its final frame (the verb parsed mid-stream would only flash
99+
* ahead of the model's description), a `run_code` call before its arguments
100100
* resolve, while their parameters hold at most the activity, and an
101101
* integration gateway call before its description streams ("Calling integration").
102102
* A call awaiting approval is never untitled, so its permission card keeps the
103103
* header, and neither is one the model already described.
104104
*/
105-
function isAwaitingTitle(tool: ToolCallData): boolean {
105+
export function isAwaitingTitle(tool: ToolCallData): boolean {
106106
if (tool.status !== ToolCallStatus.executing || tool.activityDescription) return false
107107
if (tool.toolName === CallIntegrationTool.id) {
108108
const description =
@@ -111,6 +111,7 @@ function isAwaitingTitle(tool: ToolCallData): boolean {
111111
}
112112
return (
113113
(tool.toolName === 'sim_cli' ||
114+
tool.toolName.startsWith('cli_') ||
114115
tool.toolName === RunCode.id ||
115116
tool.toolName === 'search_workspace') &&
116117
Object.keys(tool.params ?? {}).every((key) => key === 'activity')
@@ -144,19 +145,23 @@ export function getActivityHeaderTool(
144145
)
145146
}
146147

148+
/** The wait wording: the turn between steps, and a first call whose own title is still streaming. */
149+
export const THINKING_LABEL = 'Thinking'
150+
147151
/**
148152
* The title of an activity in progress for its header call, with earlier
149153
* stops and skips kept visible. A header call still awaiting its title has no
150154
* earlier call to hold, so it reads as the activity's intent when the model
151-
* gave one, else as its own in-progress title.
155+
* gave one, else as the wait it continues: a tool's placeholder ("Running CLI
156+
* command") would flash between the turn's "Thinking" and the model's description.
152157
*/
153158
export function getInProgressActivityLabel(
154159
activeLabel: string,
155160
headerTool: ToolCallData,
156161
tools: ToolCallData[],
157162
activityTitle: string | undefined
158163
): string {
159-
const label = (isAwaitingTitle(headerTool) && activityTitle) || activeLabel
164+
const label = isAwaitingTitle(headerTool) ? activityTitle || THINKING_LABEL : activeLabel
160165
return getActiveToolActivityTitle(label, headerTool, tools)
161166
}
162167

@@ -254,6 +259,7 @@ export function ToolActivityGroup({
254259
icon: status.icon,
255260
}}
256261
activityKey={headerTool.id}
262+
placeholder={working && isAwaitingTitle(headerTool)}
257263
attentionKey={attentionKey}
258264
expandedLabel={tools.length > 1 ? groupedActivity?.title : undefined}
259265
collapsible={tools.length > 1 || hasSearchDetails}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import {
3737
ownsTurnWait,
3838
type TurnLiveIndicators,
3939
} from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/lane-activity'
40+
import { THINKING_LABEL } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-activity-group'
4041
import type { CredentialSubmissionPayload } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
4142
import { WatchActivity } from '@/app/workspace/[workspaceId]/home/components/message-content/components/watch-activity/watch-activity'
4243
import { collectMessageSources } from '@/app/workspace/[workspaceId]/home/components/message-content/message-sources'
@@ -935,9 +936,9 @@ export function deriveThinkingLabel(blocks: ContentBlock[]): string {
935936
case 'tool_call':
936937
return last.toolCall && DISPATCH_TOOL_NAMES.has(last.toolCall.name)
937938
? 'Dispatching'
938-
: 'Thinking'
939+
: THINKING_LABEL
939940
default:
940-
return 'Thinking'
941+
return THINKING_LABEL
941942
}
942943
}
943944

‎apps/sim/app/workspace/[workspaceId]/home/hooks/stream/turn-model.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -561,9 +561,10 @@ export function reduceEvent(model: TurnModel, envelope: PersistedStreamEventEnve
561561
)
562562
const delta = asString(payload.argumentsDelta)
563563
if (delta) node.streamingArgs = (node.streamingArgs ?? '') + delta
564-
// Progressive CLI title: upgrade the placeholder to the specific verb as
565-
// soon as enough argv tokens have streamed to name the command — the
566-
// browser mirror of the server handler's refinement.
564+
// Progressive CLI title: upgrade the row's placeholder to the specific verb
565+
// as soon as enough argv tokens have streamed to name the command — the
566+
// browser mirror of the server handler's refinement. The activity header
567+
// holds it back until the model's description arrives.
567568
if (delta && (node.name === 'sim_cli' || node.name.startsWith('cli_'))) {
568569
const refined = refineStreamingCliToolName(node.streamingArgs ?? '')
569570
if (refined && refined !== node.name) node.name = refined

‎apps/sim/lib/mothership/request/handlers/tool.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -159,9 +159,10 @@ function handleToolArgsDelta(
159159
if (!toolCall) return
160160
toolCall.streamingArgs = `${toolCall.streamingArgs ?? ''}${data.argumentsDelta}`
161161

162-
// Progressive CLI title: the row upgrades from "Running CLI command" to the
163-
// specific verb as soon as enough argv tokens have streamed to name it —
164-
// no wait for the full (possibly huge) argument payload.
162+
// Progressive CLI title: the row upgrades from its placeholder to the specific
163+
// verb as soon as enough argv tokens have streamed to name it — no wait for the
164+
// full (possibly huge) argument payload. The activity header holds it back until
165+
// the model's description arrives (see `isAwaitingTitle`).
165166
if (toolCall.name === 'sim_cli' || toolCall.name.startsWith('cli_')) {
166167
const refined = refineStreamingCliToolName(toolCall.streamingArgs)
167168
if (refined && refined !== toolCall.name) {

0 commit comments

Comments
 (0)