Fade the mobile DM above the composer and move Model and Workspace into the Bot profile by DoodleBears · Pull Request #1875 · BotHarness/DeepSeekBot

DoodleBears · 2026-10-15T08:08:01Z

Requested by Vain · project thread

Why the change

Before: the transparent DM header, the avatar/name/state chip, the round back and computer buttons and the top fade from this PR's first round already reached main through #1880. The bottom of the chat still ended in a hard edge above the composer, and a row of Model and Workspace chips sat under the composer.

After: messages also fade out softly just above the composer, matching the top. Nothing sits under the composer any more: the Bot's Model and Workspace settings moved into the Bot profile (tap the chip in the header), in a new Bot settings group under the profile actions. Each row opens the same Model and Workspace sheets as before.

Special things to note

Merge risk: mobile JavaScript only, no new development build needed. This branch merged main after Collapse a decided mobile request card into a Bot bubble #1880 and Open group Channels as a native mobile chat with @mentions, like Bot DMs #1879 (the shared conversation-screen.tsx), so its diff is only the follow-up below.
Bottom fade. EdgeFade (was HeaderEdgeFade) now takes an edge. The bottom one is a static SVG gradient from base to transparent, edgeFade.bottom (32) tall, at the bottom of the list above the composer, on every platform, with pointerEvents="none". It never re-renders while scrolling. The composer bar is base too, so the gradient blends into it. The inverted list keeps 32 below the newest message, so at rest nothing sits under the fade.
Settings moved. BotSettingsPanel owns the composer context (model and grants), the two rows and the two sheets; BotProfileSheet takes it as an optional settings slot under its actions. composer-footer.tsx is deleted. The Composer still accepts a footer prop.
Applies to group Channels too: they never had the footer, and now get the bottom fade.
Verification:
- pnpm --filter @botharness/mobile typecheck clean; mobile vitest run passes (34 files); pnpm lint and oxfmt --check clean.
- node scripts/e2e-mobile-follow-latest-web.mjs passes against an isolated Host through the web export, and a local copy of it went on to tap the chip, open the profile and open the Model sheet for the screenshots below.
- Native check: in the combined Simulator batch.
CI test plan: affected.

Change outline

src/ui/chat/conversation-screen.tsx: bottom EdgeFade, list bottom inset, footer and settings sheets removed.
src/ui/chat/bot-settings-panel.tsx: new; Bot settings group with Model and Workspace rows and their sheets.
src/ui/chat/bot-profile.tsx, app/bot/[slug]/index.tsx: render the panel under the profile actions.
src/ui/chat/header-chrome.tsx: EdgeFade with edge. src/ui/design/tokens.ts: edgeFade.bottom.
src/ui/chat/composer-footer.tsx: removed. DESIGN.md: composer, fade and profile rules.

	Light	Dark
Scrolled into history (top and bottom fade)
At the latest message, no chips under the composer
Bot profile: Bot settings
Model sheet from the profile

Human QA

iOS 26, light and dark: in a DM, scroll up; messages fade out above the composer as they do under the header; at rest the newest message sits clear of the fade.
No Model or Workspace chips under the composer.
Tap the header chip: the profile shows Bot settings with Model (current model) and Workspace (N folders). Tap Model: the Model sheet opens over the profile; pick a model and it closes, and the row updates. Tap Workspace: the Workspace sheet opens; add or remove a folder and the count updates.
A group Channel also shows the bottom fade.

🤖 Generated with Claude Code

https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

coderabbitai · 2026-10-15T08:08:10Z

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 8 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: e233d624-3701-4083-ac63-42c29208d34c

📥 Commits

Reviewing files that changed from the base of the PR and between e112781 and 1425581.

⛔ Files ignored due to path filters: 8

.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/model-sheet-dark.png is excluded by !**/*.png
.github/pr-screenshots/mobile-chat-header/model-sheet-light.png is excluded by !**/*.png
.github/pr-screenshots/mobile-chat-header/profile-dark.png is excluded by !**/*.png
.github/pr-screenshots/mobile-chat-header/profile-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

📒 Files selected for processing: 9

apps/mobile/DESIGN.md
apps/mobile/app/bot/[slug]/index.tsx
apps/mobile/src/ui/chat/bot-profile.tsx
apps/mobile/src/ui/chat/bot-settings-panel.tsx
apps/mobile/src/ui/chat/composer-footer.tsx
apps/mobile/src/ui/chat/conversation-screen.tsx
apps/mobile/src/ui/chat/header-chrome.tsx
apps/mobile/src/ui/design/tokens.ts
changes/1875-mobile-chat-header.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

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

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

…ader-3bkg6h

… fade Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

…ader-3bkg6h

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YXLBzevwCYAWycH1iTuBwK

…ader-3bkg6h # Conflicts: # apps/mobile/app/dm/[slug].tsx

…e to the Bot profile Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

… edge effects On the inverted list the iOS 26 soft edge effect never reached the top, so messages ran under the status bar at full contrast. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

With headerTransparent, iOS 26 adds an AdditionalDimmingOverlay inside the inverted message list's UIScrollView, and scrollEdgeEffects 'hidden' on the screen does not reach it. The header now has a base fill (the pre-#1875 configuration the Simulator bisect found clean), the list starts below it, and the top fade sits at the top of the list like the bottom one. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

… iOS 26 dimming (#1889) * fix(mobile): drop the transparent DM header that dims the list on iOS 26 With headerTransparent, iOS 26 adds an AdditionalDimmingOverlay inside the inverted message list's UIScrollView, and scrollEdgeEffects 'hidden' on the screen does not reach it. The header now has a base fill (the pre-#1875 configuration the Simulator bisect found clean), the list starts below it, and the top fade sits at the top of the list like the bottom one. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc * feat(mobile): float the composer over the chat and fade the screen bottom The message list now runs to the bottom of the screen and the composer floats over it with no bar, like Telegram. A static base gradient covers the composer and edgeFade.bottom above it, and the list keeps that much space below the newest message. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc * docs(changes): describe the floating composer in the #1875 fragment Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc * feat(mobile): float a frosted header and composer over the chat The native stack header is hidden and the chat draws its own floating header, so messages run under the chip without the iOS 26 dimming that a transparent native header causes. The chip, round buttons and composer pill are frosted (raised or surface at glass.tint opacity), and both edge fades are lighter, so messages show faintly through them. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc * fix(mobile): keep the composer pill opaque Messages pass around and under the floating composer, but the pill keeps its opaque surface fill so nothing shows through where the Human types. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc --------- Co-authored-by: Claude <noreply@anthropic.com>

DoodleBears · 2026-10-15T15:00:06Z

Batch QA — #1875 as merged on main

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
Top fade under the header; Model/Workspace chips gone from under the composer	✅ pass
Bot profile has a "Bot settings" group with Model and Workspace	✅ pass
Full-DM dim	❌ on main before #1889: a native `AdditionalDimmingOverlay` dimmed every DM and group list. Bisected to `eb8cf06` (transparent DM header); the overlay is a UIScrollView subview (iOS 26 scroll-edge effect), not a nav bar or modal. Fixed by #1889 (verified there).
Bottom fade above the composer	superseded by #1889's "list runs under the opaque composer" design

claude added 2 commits October 15, 2026 08:07

feat(mobile): transparent DM header with an avatar, name and state chip

eb8cf06

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

docs(mobile): DM header screenshots for the PR

933b55a

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

docs: change fragment for the mobile DM header

e7e8260

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

DoodleBears self-assigned this Oct 15, 2026

claude added 2 commits October 15, 2026 08:17

Merge remote-tracking branch 'origin/main' into claude/mobile-chat-he…

4eca4b3

…ader-3bkg6h

feat(mobile): concentric chip padding, round header buttons and a top…

8dd87ba

… fade Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

DoodleBears marked this pull request as ready for review October 15, 2026 08:20

DoodleBears mentioned this pull request Oct 15, 2026

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

Closed

Merge remote-tracking branch 'origin/main' into claude/mobile-chat-he…

204fe8b

…ader-3bkg6h

DoodleBears pushed a commit that referenced this pull request Oct 15, 2026

Merge #1875's chat header and port it to the shared chat screen

6131fa9

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YXLBzevwCYAWycH1iTuBwK

DoodleBears mentioned this pull request Oct 15, 2026

Collapse a decided mobile request card into a Bot bubble #1880

Merged

claude added 2 commits October 15, 2026 09:24

Merge remote-tracking branch 'origin/main' into claude/mobile-chat-he…

e112781

…ader-3bkg6h # Conflicts: # apps/mobile/app/dm/[slug].tsx

feat(mobile): bottom fade above the composer; Model and Workspace mov…

fd38742

…e to the Bot profile Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

DoodleBears changed the title ~~Give the mobile DM a transparent header with an avatar, name and state chip~~ Fade the mobile DM above the composer and move Model and Workspace into the Bot profile Oct 15, 2026

DoodleBears merged commit d6b2b3b into main Oct 15, 2026
11 checks passed

DoodleBears mentioned this pull request Oct 15, 2026

Float a frosted header and composer over the mobile chat, without the iOS 26 dimming #1889

Merged

7 tasks

DoodleBears pushed a commit that referenced this pull request Oct 15, 2026

docs(changes): describe the floating composer in the #1875 fragment

78b2c43

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LzUNRQhy85WgjWULziwrxc

DoodleBears mentioned this pull request Oct 15, 2026

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

Merged

DoodleBears mentioned this pull request Oct 15, 2026

fix(mobile): full-client icon in the chat header uses the foreground colour #1918

Open

Navigation Menu

Repository navigation

Fade the mobile DM above the composer and move Model and Workspace into the Bot profile - #1875

Fade the mobile DM above the composer and move Model and Workspace into the Bot profile#1875
DoodleBears merged 9 commits into
mainfrom
claude/mobile-chat-header-3bkg6h

DoodleBears commented Oct 15, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 15, 2026 •

edited

Loading

Review limit reached

Uh oh!

Uh oh!

DoodleBears commented Oct 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

DoodleBears commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why the change

Special things to note

Change outline

Human QA

Uh oh!

coderabbitai Bot commented Oct 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review limit reached

Uh oh!

Uh oh!

DoodleBears commented Oct 15, 2026

Batch QA — #1875 as merged on main

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

DoodleBears commented Oct 15, 2026 •

edited

Loading

coderabbitai Bot commented Oct 15, 2026 •

edited

Loading