improvement(chat): restore stable inline tool activity headers and action summaries

Mothership v1.0.0 reintroduced the "Searching -> Searched -> Searching"
flicker that staging had fixed: between two calls of an open main-agent
activity, the header dropped to the past tense, lost its shimmer, and the
turn-level Thinking row appeared until the next call started. It also removed
the header icon and summarized headers as "<latest title> + N".

Stable in-progress header
- An open main-agent activity group (the streaming turn's tail, with nothing
  after its last call) stays in the present tense through the gaps between
  its calls, so the header no longer flips tense. Succeeded calls arrive
  with past-tense titles, so the open header maps them back through the exact
  inverse of the completed-verb rewrite; one helper (getToolInProgressTitle)
  serves main lanes, subagent lanes, and the landing hero.

One live indicator per lane
- A new pure module (lane-activity) owns the rule and states it in TSDoc.
  Each active lane has one live call: the newest running call anywhere in
  the lane (across all its runs, including runs split by a search or an
  interaction card, and its nested lanes). With none running and the lane
  open, the latest call of its trailing run owns the gap, and only if it
  succeeded. A finished search shows static results, so the gap after it
  belongs to Thinking.
- Only the run holding that call shimmers: its group header, or its one
  search row. Tool rows never shimmer by themselves. A parent lane defers
  to a visible nested lane holding the live call only while that lane is
  still working; an ended nested lane hands its last call back to the
  parent's header.
- Tense follows liveness: a header reads in progress only while it is live
  or its call still runs, so a group whose latest call failed or stopped
  reads as finished instead of keeping a stale present tense.
- The turn computes this once; every lane view receives its share, and the
  Thinking row reads the same result. The main lane spans all main-agent
  segments. Thinking shows only when no lane is live and no lane waits on
  the user. A lane waiting on an approval, terminal handoff, or browser
  takeover shows no indicator, while other lanes doing real work keep theirs.
  When the stream finishes, nothing shimmers.
- Rendering and liveness share one run split, and failed subagent lanes no
  longer count as working. Only the tail group is open, so a later pending
  interaction no longer re-opens earlier finished groups.

Header icons
- Group headers and single inline rows render the icon of the call they
  describe again, including integration brand icons, and keep it through
  completion. Main and subagent headers share one title rule: "Working…"
  while a sim_cli or run_code call generates its arguments, a live wait
  countdown, and streaming file-edit titles.

Summaries without "+N"
- Running headers show only the active call. Main and subagent lanes share
  one completed-label rule: the model's completedTitle only when every call
  succeeded, and otherwise a fallback naming up to three distinct successful
  actions ("Navigated, read pages, clicked elements"), picked by first
  occurrence in transcript order. Failed calls are
  left out, and the " · N stopped/skipped" outcome suffix stays.
- A rebuilt action catalog covers the current tool surface: every visible
  catalog tool and operation, plus sim_cli commands. Each command's verb comes
  from its own display title, and the object comes from its resource path, so
  commands on one resource share a word ("Listed, read tables"). `mkdir`
  commands read as creating folders and `tables upsert` as writing table rows.
  Tools outside the catalog use their own completed title.

Separate finished activity groups
- groupByActivity still splits main-agent calls by activity id, but no longer
  merges finished groups into one header, so the completedGroupCount plumbing
  is removed, along with the unused getAgentIcon fallback parameter.

Flat expanded layout
- Indentation now only marks nested work. Expanded tool rows in main and
  subagent groups line up with their header: the icon in the shared 14px
  icon column, the text one gap-2 to its right. Nested subagent lanes,
  narration, lane errors, and the permission card's rows sit on that same
  text column through one shared primitive instead of pl-6 or pl-[22px].
- One spacing scale: gap-1.5 between rows inside a group (tool rows, search
  queries), gap-3 between blocks in the main lane (tool groups, search runs,
  lanes, interaction cards, prose).

Inline links in answers
- A link's favicon is centered on the text's own middle with align-middle,
  like inline citation chips, instead of a baseline pixel nudge.
- The link tooltip names the page instead of showing its URL. It uses the
  turn's retrieved source for that exact URL, then the link preview's title,
  then the site name, with the site name muted beneath. One helper dedupes a
  turn's sources by URL everywhere they are listed or looked up.
- Prose links show a thin muted underline on hover instead of a filled
  background, and keep the keyboard focus outline.

Verb rewrites
- The past-tense and present-tense verb tables are Maps, because titles
  include model-written text, and a description starting with "constructor"
  must never resolve to an inherited object property.

Author: waleedlatif1

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

@@ -1,14 +1,20 @@
 import { Table } from '@sim/emcn/icons'
 import { SlackIcon } from '@/components/icons'
 import { ActivityStatus } from '@/components/ui/activity-status'
-import { getToolStatusDisplayTitle } from '@/lib/mothership/tools/tool-display'
+import {
+  getToolInProgressTitle,
+  getToolStatusDisplayTitle,
+} from '@/lib/mothership/tools/tool-display'
 import type {
   ToolActivityPresentation,
   ToolCallItemProps,
 } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item'
 import { getToolIcon } from '@/app/workspace/[workspaceId]/home/components/message-content/utils'
 
-/** Demo fixtures have known brands, so the landing page never loads the block registry. */
+/**
+ * Demo fixtures have known brands, so the landing page never loads the block registry.
+ * Rows are history and never shimmer; the lane decides which header is live.
+ */
 export function HeroToolCallItem({
   toolCallId,
   renderStatus,
@@ -25,13 +31,8 @@ export function HeroToolCallItem({
         : getToolIcon(toolName)
   const activity: ToolActivityPresentation = {
     label: getToolStatusDisplayTitle(displayTitle, status, toolName, activityDescription),
-    activeLabel: getToolStatusDisplayTitle(
-      displayTitle,
-      status === 'success' ? 'executing' : status,
-      toolName,
-      activityDescription
-    ),
-    isActive: status === 'executing',
+    activeLabel: getToolInProgressTitle(displayTitle, status, toolName, activityDescription),
+    isActive: false,
     icon: <Icon className='size-full' />,
   }
   return renderStatus ? renderStatus(activity) : <ActivityStatus {...activity} />

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

@@ -0,0 +1,146 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { AgentGroup } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group'
+import type { AgentGroupItem } from '@/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group-view'
+import type { ToolCallStatus } from '@/app/workspace/[workspaceId]/home/types'
+
+vi.mock('@/lib/browser-agent/transport', () => ({ isBrowserAgentAvailable: () => true }))
+
+const ICON_SLOT = 'size-[14px]'
+
+function tool(
+  id: string,
+  toolName = 'search_docs',
+  status: ToolCallStatus = 'success'
+): AgentGroupItem {
+  return { type: 'tool', data: { id, toolName, displayTitle: `Searching ${id}`, status } }
+}
+
+function lane(id: string, items: AgentGroupItem[]): AgentGroupItem {
+  return {
+    type: 'agent_group',
+    group: {
+      id,
+      agentName: 'deploy',
+      agentLabel: 'Deploy',
+      items,
+      isDelegating: false,
+      isOpen: false,
+    },
+  }
+}
+
+/** Indentation classes a row or its containers must not carry. */
+const hasIndent = (element: Element) =>
+  [...element.classList].some((name) => /^(pl|ml|ps|ms)-/.test(name))
+
+describe('flat expanded activity layout', () => {
+  let root: Root
+  let container: HTMLDivElement
+
+  beforeEach(() => {
+    vi.stubGlobal('matchMedia', vi.fn().mockReturnValue({ matches: false }))
+    ;(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())
+    container.remove()
+    vi.unstubAllGlobals()
+  })
+
+  const render = (agentName: string, items: AgentGroupItem[], error?: string) =>
+    act(() =>
+      root.render(
+        <AgentGroup agentName={agentName} agentLabel='Agent' items={items} error={error} />
+      )
+    )
+  const expand = () => act(() => container.querySelector<HTMLElement>('[role="button"]')!.click())
+  const statuses = () => [...container.querySelectorAll<HTMLElement>('[role="status"]')]
+  const iconSlot = (status: Element) => status.querySelector(':scope > [aria-hidden="true"]')!
+  /** The reserved icon slot of a text-column wrapper. */
+  const reservedSlot = (column: Element) => column.querySelector(':scope > [aria-hidden="true"]')
+
+  it.each(['mothership', 'workflow'])(
+    'lines %s rows up with the header icon and text columns',
+    (agentName) => {
+      render(agentName, [tool('a'), tool('b', 'web_search')])
+      expand()
+      const [header, ...rows] = statuses()
+      expect(rows.length).toBeGreaterThan(0)
+      for (const row of [header, ...rows]) {
+        expect(row.classList).toContain('gap-2')
+        expect(iconSlot(row).classList).toContain(ICON_SLOT)
+      }
+      const list = rows[0].closest('.flex-col')!
+      expect(list.classList).toContain('gap-1.5')
+      let node: Element | null = rows[0]
+      while (node && node !== container) {
+        expect(hasIndent(node), node.className).toBe(false)
+        node = node.parentElement
+      }
+    }
+  )
+
+  it('keeps a nested lane indented into its parent text column', () => {
+    render('workflow', [tool('a'), lane('deploy', [tool('child')])])
+    expand()
+    const nestedHeader = statuses().find((status) => status.textContent === 'Searched child')!
+    const column = nestedHeader.closest('.items-start')!
+    expect(column.classList).toContain('gap-2')
+    expect(reservedSlot(column)?.classList).toContain(ICON_SLOT)
+    expect(reservedSlot(column)?.childElementCount).toBe(0)
+  })
+
+  it('puts a lane error on the shared text column instead of a hand-tuned inset', () => {
+    render('workflow', [tool('a')], 'Subagent failed.')
+    const error = [...container.querySelectorAll('p')].find(
+      (node) => node.textContent === 'Subagent failed.'
+    )!
+    expect(hasIndent(error)).toBe(false)
+    const column = error.closest('.items-start')!
+    expect(column.classList).toContain('gap-2')
+    expect(reservedSlot(column)?.classList).toContain(ICON_SLOT)
+  })
+
+  it('stacks main-lane blocks one gap-3 apart and search queries one gap-1.5 apart', () => {
+    render('mothership', [
+      tool('a'),
+      {
+        type: 'tool',
+        data: {
+          id: 's1',
+          toolName: 'search_workspace',
+          displayTitle: 'Searching',
+          status: 'success',
+          params: { query: 'first' },
+        },
+      },
+      {
+        type: 'tool',
+        data: {
+          id: 's2',
+          toolName: 'search_workspace',
+          displayTitle: 'Searching',
+          status: 'success',
+          params: { query: 'second' },
+        },
+      },
+    ])
+    const blocks = container.querySelector('.flex-col.gap-3')!
+    expect(blocks.contains(statuses()[0])).toBe(true)
+    expect(blocks.classList).toContain('gap-3')
+    expect(blocks.classList).not.toContain('gap-1.5')
+    const queries = statuses().filter((status) => status.textContent === 'first')
+    const searchList = queries[0].closest('.flex-col.gap-1\\.5')!
+    expect(searchList).not.toBeNull()
+    expect(searchList.parentElement?.closest('.flex-col.gap-3')).toBe(blocks)
+  })
+})