Open group Channels as a native mobile chat with @mentions, like Bot DMs

[DoodleBears]

Requested by Vain · project thread

Why

In the mobile app only Bot DMs were native; tapping a group Channel (from Chats, search, a push or Activity) still opened the embedded full client.

Change outline

Before: a group Channel opened /full-client at that Channel (a web view; in the web render below it stays on its loader).

After: a group Channel opens /channel/[id], the same native chat as a DM. Each Bot's name sits above its group of bubbles, the header shows #, name and member count, and the composer says "Message #Weekly sync" without the per-Bot Model/Workspace chips.

Streaming: a member Bot's draft streams in with its name and "Replying…", and the status strip offers Stop for the working Bot.

@mentions: typing @ lists All Bots and the active member Bots above the composer; choosing one inserts @Name and sends it as a mention token, like the Web Client. Below, @小明 please send the screenshots… was stored with mentions: [{botSlug: 小明's ID, label: "小明", start: 0, end: 3}] and 小明 answered.

Screenshots are the React Native Web render (390 × 844) against an isolated Host with live DeepSeek V4.1 Flash replies, paired through the device gateway, taken before #1875's header was merged in. Native Simulator screenshots (with the #1875 header) are queued in the combined Batch 1 and will be added as a comment.

• One chat screen. app/dm/[slug].tsx's body moved to src/ui/chat/conversation-screen.tsx and takes a place: { kind: 'dm', slug } or { kind: 'channel', channelId }. app/dm/[slug].tsx and the new app/channel/[id].tsx are thin routes.
• Conversation model. ConversationMessage keeps bot (the author slug). createConversation no longer needs a botSlug when it has a channelId; its cache key is cacheKey (channel:<id> for groups). send(body, files, tags) passes mentions / allBotMention to channelSend. useChannelConversation sits next to useConversation.
• Mentions. src/ui/chat/mention-draft.ts reuses the Web Client's packages/client/src/client/mentions.ts (query detection, token insertion, rebasing on edit) and builds the trimmed-body offsets the Host checks. All Bots loads channelAllBotPreview the first time @ is typed. MentionSuggestions is a sheet-layer list above the composer pill.
• Group differences (also in DESIGN.md): Bot names above groups and drafts, a different Bot starts a new group, app accent instead of one Bot's colour, Stop acts on the first working member, no Model/Workspace footer, and a question card keeps its own Other field (a group message is not silently taken as an answer).
• Routing. pushHref / cardHref take an isGroup lookup, so a group reply, mention or card push (and Activity item) opens the Channel chat, focused on the card.

Includes #1875

At the simulator queue's request (Batch 2 folded into Batch 1), this branch merges #1875 (claude/mobile-chat-header-3bkg6h). Its header hunks from app/dm/[slug].tsx (transparent header, HeaderBackButton, HeaderEdgeFade, round full-client button, header-height list padding) are ported into conversation-screen.tsx, so DMs and groups both get them. The group title (channel-title.tsx) now uses the same raised chip as the Bot chip: round # mark, name, member count.

Checks

• pnpm --filter @botharness/mobile typecheck
• pnpm vitest run apps/mobile (new: group conversation follows/sends/streams two drafts, mentions passed to channelSend, mention candidates/insertion/offsets/All Bots, author split in groups, author label, group push routing)
• oxfmt --check, oxlint, source policy, pnpm changelog:check
• Live run above: isolated Host, two Bots in a group, real model replies, a sent mention stored as a token.

Special things to note

• Low risk, JS-only (no native rebuild). Blast radius: the mobile chat screen for DMs too, since it moved; DM behavior is unchanged and covered by the existing tests. Review focus: conversation-screen.tsx DM/group branches and mention-draft.ts offsets.

🤖 Generated with Claude Code

https://claude.ai/code/session_01YXLBzevwCYAWycH1iTuBwK

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 50 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 9232e689-9134-4b4d-b0d3-75cdf3a08bb8

📥 Commits

Reviewing files that changed from the base of the PR and between cfcf986 and 6131fa9.

⛔ Files ignored due to path filters: 12

• .github/pr-screenshots/mobile-chat-header/latest-dark.png is excluded by !**/*.png
• .github/pr-screenshots/mobile-chat-header/latest-light.png is excluded by !**/*.png
• .github/pr-screenshots/mobile-chat-header/scrolled-dark.png is excluded by !**/*.png
• .github/pr-screenshots/mobile-chat-header/scrolled-light.png is excluded by !**/*.png
• .github/pr-screenshots/mobile-group-channel/before-dark.png is excluded by !**/*.png
• .github/pr-screenshots/mobile-group-channel/before-light.png is excluded by !**/*.png
• .github/pr-screenshots/mobile-group-channel/channel-dark.png is excluded by !**/*.png
• .github/pr-screenshots/mobile-group-channel/channel-light.png is excluded by !**/*.png
• .github/pr-screenshots/mobile-group-channel/mention-dark.png is excluded by !**/*.png
• .github/pr-screenshots/mobile-group-channel/mention-light.png is excluded by !**/*.png
• .github/pr-screenshots/mobile-group-channel/sent-light.png is excluded by !**/*.png
• .github/pr-screenshots/mobile-group-channel/streaming-light.png is excluded by !**/*.png

📒 Files selected for processing: 37

• apps/mobile/DESIGN.md
• apps/mobile/README.md
• apps/mobile/app/(tabs)/(activity)/activity.tsx
• apps/mobile/app/_layout.tsx
• apps/mobile/app/channel/[id].tsx
• apps/mobile/app/dm/[slug].tsx
• apps/mobile/src/host/conversation.ts
• apps/mobile/src/host/host-session.ts
• apps/mobile/src/host/native-cache.ts
• apps/mobile/src/host/push-routing.ts
• apps/mobile/src/host/push.ts
• apps/mobile/src/host/wire.ts
• apps/mobile/src/ui/bot-avatar.tsx
• apps/mobile/src/ui/chat/bot-tone.ts
• apps/mobile/src/ui/chat/channel-title.tsx
• apps/mobile/src/ui/chat/chat-title.tsx
• apps/mobile/src/ui/chat/composer.tsx
• apps/mobile/src/ui/chat/conversation-screen.tsx
• apps/mobile/src/ui/chat/header-chrome.tsx
• apps/mobile/src/ui/chat/mention-draft.ts
• apps/mobile/src/ui/chat/mention-suggestions.tsx
• apps/mobile/src/ui/chat/message-bubble.tsx
• apps/mobile/src/ui/chat/message-groups.ts
• apps/mobile/src/ui/design/tokens.ts
• apps/mobile/src/ui/open-full-client.tsx
• apps/mobile/src/ui/shell/icons.tsx
• apps/mobile/src/ui/shell/open-conversation.ts
• apps/mobile/src/ui/strings.ts
• apps/mobile/test/conversation.test.ts
• apps/mobile/test/home-search.test.tsx
• apps/mobile/test/mention-draft.test.ts
• apps/mobile/test/message-bubble.test.tsx
• apps/mobile/test/message-groups.test.ts
• apps/mobile/test/push.test.ts
• apps/mobile/test/style-guard.test.ts
• changes/1875-mobile-chat-header.md
• changes/1879-mobile-group-channel-native.md

• 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]

This PR's changes already landed on main through #1880 (243320b squash-merged a branch stacked on this one: native group Channel chat, @mentions, channel-title, the change fragment and screenshots), and #1875 (d6b2b3b) brought the header. After merging origin/main (0bfbc6a) into this branch with main's side kept, head 309acd1 has no diff against main, so I'm closing this as merged via #1880.

---

Generated by Claude Code