Show working Bots as a light row of stacked avatars at the end of the message list (Web + mobile)

[DoodleBears]

Requested by Vain · project thread

Why the change

The working status at the bottom of the message list should be as light as possible: just who is working and what they are doing, with no card, no name and no Stop.

Change outline

Before: Web showed one "Name · step…" line per working Bot (up to 2, then "另有 N 个"). Mobile showed one row per Bot with "Name · step…", tap-to-expand steps and a Stop button.

After: one row with no background. Left: the avatars of the working Bots, stacked, at most 3. Right: the current step in muted text with "…" (one Bot shows its own step; several Bots show "Working…"). No names, no Stop, nothing to expand. The Web composer's own Stop button is unchanged; the mobile app no longer has a Stop.

Web, Bot DM (light, dark):

Mobile, Bot DM and a group Channel with two working Bots stacked (light, dark):

How: Web TimelineWorkingRowsView renders one .bh-timeline-working-row with PersonaBotFacepile (max 3, size 28) and the summary; the cap goes from 2 to 3. Mobile WorkingRow becomes WorkingStatus (stacked BotAvatars ringed in base, muted step text); the mobile stop plumbing (host/stop.ts, the stop notices and strings) and the step list are removed, and DESIGN.md is updated. Also fixes Human DMs opened from the channel list on Web, which showed no working status because the DM Bot was not resolved for the composer activity (regression test added). scripts/e2e-mobile-stop-web.mjs becomes e2e-mobile-working-web.mjs: it checks the status shows the avatar and step with no name and no Stop, then stops the Bot from the Host and checks the status leaves.

Special things to note

• Removing Stop from the mobile chat is intentional (requested). Stopping a Bot is still available on Web and through the Host API.
• Verification: pnpm typecheck, pnpm lint, pnpm vitest run apps/mobile packages/client (only the pre-existing client-observer sqlite bundling failure, same on main); node scripts/e2e-mobile-working-web.mjs passes against an isolated Host with live DeepSeek V4.1 Flash runs. Mobile screenshots are the React Native Web render (390 × 844); the native Simulator check is in the Batch 1 Human QA list.

🤖 Generated with Claude Code

https://claude.ai/code/session_01UwdrAXbW2EURZFtgVjeUF2

Summary by CodeRabbit

• New Features
  • Chat timelines now show working Bots in a shared status row with up to three stacked avatars. A single Bot’s current step is displayed; when multiple Bots are working, the row shows a shared “Working…” label.
  • The status is available in both the mobile app and web client, with accessible labels for assistive technology.
• Changes
  • The mobile working-status display no longer includes a Stop button or expandable session details.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: ed07ff14-1b87-4209-ad09-2ce7fdf9a280

📥 Commits

Reviewing files that changed from the base of the PR and between e693f84 and d4b23d8.

⛔ Files ignored due to path filters: 6

• .github/pr-screenshots/1881-working-status/mobile-dm-dark.png is excluded by !**/*.png
• .github/pr-screenshots/1881-working-status/mobile-dm-light.png is excluded by !**/*.png
• .github/pr-screenshots/1881-working-status/mobile-group-dark.png is excluded by !**/*.png
• .github/pr-screenshots/1881-working-status/mobile-group-light.png is excluded by !**/*.png
• .github/pr-screenshots/1881-working-status/web-dm-dark.png is excluded by !**/*.png
• .github/pr-screenshots/1881-working-status/web-dm-light.png is excluded by !**/*.png

📒 Files selected for processing: 17

• apps/mobile/DESIGN.md
• apps/mobile/src/host/stop.ts
• apps/mobile/src/ui/chat/bot-steps.ts
• apps/mobile/src/ui/chat/conversation-screen.tsx
• apps/mobile/src/ui/chat/working-row.tsx
• apps/mobile/src/ui/chat/working-status.tsx
• apps/mobile/src/ui/shell/icons.tsx
• apps/mobile/src/ui/strings.ts
• apps/mobile/test/working-row.test.tsx
• apps/mobile/test/working-status.test.tsx
• changes/1881-working-status.md
• packages/client/src/client/bot-main.tsx
• packages/client/src/client/styles.ts
• packages/client/src/client/timeline-working-rows.tsx
• packages/client/test/timeline-working-rows-main.test.ts
• packages/client/test/timeline-working-rows.test.ts
• scripts/e2e-mobile-working-web.mjs

💤 Files with no reviewable changes: 6

• apps/mobile/src/ui/shell/icons.tsx
• apps/mobile/src/ui/chat/working-row.tsx
• apps/mobile/test/working-row.test.tsx
• apps/mobile/src/host/stop.ts
• apps/mobile/src/ui/strings.ts
• apps/mobile/src/ui/chat/bot-steps.ts

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

📝 Walkthrough

The web client and mobile app now display working Bots with stacked avatars and shared status text. The mobile app removes its in-chat Stop control. In DMs, the web composer facepile uses the selected Bot or falls back to the channel’s DM Bot.

Changes: Web working status

Layer / File(s)	Summary
Activity selection and shared timeline status packages/client/src/client/bot-main.tsx, packages/client/src/client/timeline-working-rows.tsx, packages/client/src/client/styles.ts, packages/client/test/timeline-working-rows*.ts	The composer facepile uses activity from the selected DM Bot or the channel’s DM Bot when no Bot is selected. The timeline renders working Bots in one facepile with up to three avatars, a shared status, and any overflow count. Tests cover status text, overflow, and channel selection.

Mobile working status

Layer / File(s)	Summary
Shared status and removal of the in-chat stop flow apps/mobile/DESIGN.md, apps/mobile/src/host/stop.ts, apps/mobile/src/ui/chat/*, apps/mobile/src/ui/shell/icons.tsx, apps/mobile/src/ui/strings.ts, apps/mobile/test/working-*.test.tsx, scripts/e2e-mobile-working-web.mjs, changes/1881-working-status.md	The chat screen replaces per-Bot working rows with a status that shows up to three avatars and a step label for one Bot, or a shared label for multiple Bots. The screen no longer provides the stop action or its related messages and translations. Tests and the E2E script check the status and the absence of a Stop button. The design notes and changelog describe the updated display.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to d4b23

No confirmed issue blocks merging after normal checks. Native accessibility behavior remains a QA check, not an established failure.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 9 functions across 9 files. (2 skipped: 2 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Title check		The title clearly describes the main change: working Bots now appear in a light row with stacked avatars on Web and mobile.
Description check		The description explains the user problem, provides a before/after outline, links the project discussion, documents verification results and limitations, and includes UI screenshots. It does not state…

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 9 functions across 9 files. (2 skipped: 2 unsupported.)

• Fix all pre-merge checks with AI

✨ Finishing Touches: 💡 1

📝 Generate docstrings: 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[DoodleBears]

Batch QA — #1881 as merged on main (dbfbe05), section 5

iOS Simulator "PR1800 glass" (iOS 26.0, iPhone 17 Pro), dev client rebuilt from the batch, QA Host on DeepSeek. Screenshots are redacted (computer name, tailnet host and local paths blacked out). Chinese text renders as □ because the iOS 26.0 Simulator runtime ships without PingFang; that is an environment limit, not the app. Android: untested.

Step	Result
DM: one row under the newest message — avatar + what it's doing, no background, no name, no Stop; composer doesn't move	✅ pass
Group with @ALL Bots: working Bots' avatars stack in one row, then "Working…"	✅ pass (2 Bots)
Scrolling while a Bot works stays stable; row stays at the bottom	✅ list pixel-stable over 6 s while working; caveat: the test DM was short, so "scroll up while working" barely moved

Side note (not this PR's scope): picking "All Bots" from the @ list showed "@ALL Bots …" in the composer but the sent bubble reads "@ada @ …".

[DoodleBears]

Correction to the side note above

The "@ " in the sent bubble is not a bug: the stored message body is @Ada @小明 Each of you: … with two mentions (Ada and 小明). The iOS 26.0 Simulator just cannot render the CJK name. "All Bots" correctly expands to one mention per member Bot.