Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/mobile/DESIGN.md
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ The shell is set by [ADR-0211](../../docs/adr/0211-the-mobile-app-has-two-tabs-w
- Activity rows do not navigate on tap. Long-press (or the accessibility details action) opens the message sheet with the complete plain-text content in a scrollable, selectable block capped at `messageSheet.textHeightRatio` of the window height, then Copy/Share and an explicit Open conversation, Open memory or Open new Bot action when a destination exists; there are no reactions. Consecutive posts by the same Bot into the same Channel on the same day fold into a counted row whose menu opens the latest post. Memory opens the Bot's memory files, not a commit diff. Bot-to-Bot DMs remain read-only. Keep full actor/action/detail text in the accessibility label and menu even when the compact memory line uses only the icon and commit subject.
- A top-to-bottom list (not inverted), oldest first, on one code path for iOS and Android. It opens hidden and is shown once it has been scrolled to the end and its content has settled for a frame, so it never flashes the oldest messages first. Short conversations sit at the bottom, above the composer. Older history loads when the Human nears the top (`onStartReached`), and `maintainVisibleContentPosition` keeps the messages on screen where they were while it is prepended. Messages from the same author within 5 minutes form a group, and a time separator appears after a 30-minute gap.
- At the newest message the list follows a streaming reply: content growth pins it to the end with a non-animated scroll, at most once per frame. Once the Human begins a drag or scrolls up into history, nothing moves the list under them: the visual playback cursor holds while received text continues to queue and persist. Only finishing a return gesture near the bottom or choosing the jump button resumes playback; a layout-driven scroll callback can neither rearm nor release following. Only a drag, the status-bar scroll to top or a jump to a linked message leaves the newest message, so the inset adjustment, content-size reports and `maintainVisibleContentPosition` corrections while the list first fills cannot strand it at the oldest message. A round jump button with a ⌄ then floats at the trailing edge `space.x2` above the composer, aligned with its trailing edge, like Grok (a 36pt Liquid Glass circle like **+** on iOS 26 with Reduce Transparency off, otherwise `raised`), with an accent badge counting the Bot messages that arrived since they left (99+ at most), like the Web Client's "Return to latest messages". Tapping it, sending a message, or scrolling back down to the newest message follows again and hides the button.
- **Pull up to type (iOS).** At the newest message, pulling the list further up past its end (the rubber-band bounce) and letting go focuses the composer and raises the keyboard, like pull-to-refresh in reverse. A drag counts only when it begins at the newest message (within the follow slop), so reading history never triggers it. A capsule with a keyboard symbol fades in above the composer as the pull grows, reading "Pull up to type" and switching to "Release to type" with one light haptic once the pull passes `pullToCompose.threshold` (40pt of offset, about 95pt of finger travel against the rubber band); letting go follows the newest message again first, so the keyboard does not cover it; easing back below it before release cancels. It is off where there is no composer (a Bot-to-Bot DM) or the Host is not connected. Android's overscroll stretches without moving the offset, so there is nothing to measure while the finger pulls: on Android an upward flick at the newest message (finger speed at least `pullToCompose.flick`, 0.3 dp/ms, so a calm upward swipe counts as well as a quick flick, with the list still at the newest message on release) focuses the composer with the same haptic, and no hint is drawn.
- **Pull up to type (iOS).** At the newest message, pulling the list further up past its end (the rubber-band bounce) and letting go focuses the composer and raises the keyboard, like pull-to-refresh in reverse. A drag counts only when it begins at the newest message (within the follow slop), so reading history never triggers it. A capsule with a keyboard symbol fades in above the composer as the pull grows, reading "Pull up to type" and switching to "Release to type" with one light haptic once the pull passes `pullToCompose.threshold` (40pt of offset, about 95pt of finger travel against the rubber band); letting go follows the newest message again first, so the keyboard does not cover it; easing back below it before release cancels. It is off where there is no composer (a Bot-to-Bot DM) or the Host is not connected. Android's overscroll stretches without moving the offset, so there is nothing to measure while the finger pulls: on Android an upward flick at the newest message (finger speed at least `pullToCompose.flick`, 0.3 dp/ms, so a calm upward swipe counts as well as a quick flick, with the list still at the newest message on release) focuses the composer with the same haptic, and no hint is drawn. Android's list sends no drag at all when it cannot scroll, so on Android the list's content is kept one hairline taller than the viewport; a short DM whose messages do not fill the screen then takes the same flick.
- Settings → **Message display** offers **Streaming** and **Complete bubbles**, saved on this device. Streaming uses a local playback queue with a short prebuffer and reserve, releasing graphemes on a bounded clock. Rate changes follow queue depth gradually; clauses, sentences and paragraphs add progressively longer pauses. Android fades the active prose tail on the UI thread (180ms fade, up to 72ms stagger, at most 48 animated spans, with up to eight new spans per update); earlier text stays visible. Source commitment preserves the displayed cursor and row while the rest drains, then enables message actions. Historical messages open directly. Reduce Motion skips the fade. Code/table/native-only Markdown keep their established renderer; their content still follows the playback cursor. Complete bubbles keeps the working indicator and reveals each committed Channel Message independently. Switching modes changes presentation only; received drafts, committed messages and interruption semantics remain owned by Conversation and the Host. A draft-only append updates its row subscription while the timeline snapshot and historical message references stay stable. The bottom fade belongs to the keyboard-sticky composer.
- Android Markdown uses synchronous native text/layout for prose, headings, lists, quotes, code and tables. Completed source blocks retain their keys and avoid rerendering when only the tail changes. Images and native-only extensions retain the enriched renderer. Drafts and committed messages keep the same renderer to avoid a settlement-only layout switch; iOS keeps its existing enriched implementation.
- Append-only Android Markdown reparses the changing suffix with boundary lookback, retaining completed block identities. Blocks retain the lexer result with its exact source; rendering and window-support checks reuse it only while that source matches. A repaired streaming tail or a source-only block uses a fresh parse. Corrections and document-wide references rebuild the document. Prose reveal segmentation likewise retains a grapheme boundary and revisits the changing suffix, including a joined emoji or combining mark; it must not repeatedly segment the complete paragraph.
Expand Down
2 changes: 1 addition & 1 deletion apps/mobile/src/ui/chat/activity-row.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export function ActivityRow({
<Text
variant="meta"
tone="muted"
numberOfLines={1}
numberOfLines={theme.largeText ? 2 : 1}
ellipsizeMode="tail"
style={{ flex: 1 }}
>
Expand Down
18 changes: 13 additions & 5 deletions apps/mobile/src/ui/chat/conversation-row.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -178,12 +178,15 @@ export function ConversationRowFrame({
</View>
)}
</View>
<View style={{ flex: 1, minWidth: 0, gap: space.x1 }}>
<View
key={`${theme.scheme}:${theme.fontScale}:${title}`}
style={{ flex: 1, minWidth: 0, gap: space.x1 }}
>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
gap: space.x3,
flexDirection: theme.largeText ? 'column' : 'row',
alignItems: theme.largeText ? 'flex-start' : 'center',
gap: theme.largeText ? space.x1 : space.x3,
}}
>
<SourceName name={title} source={source} />
Expand All @@ -194,7 +197,12 @@ export function ConversationRowFrame({
)}
</View>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: space.x3 }}>
<Text variant="meta" tone={unread ? 'fg' : 'muted'} numberOfLines={1} style={{ flex: 1 }}>
<Text
variant="meta"
tone={unread ? 'fg' : 'muted'}
numberOfLines={theme.largeText ? 2 : 1}
style={{ flex: 1 }}
>
{preview}
</Text>
<RowStatusGlyph status={status} />
Expand Down
6 changes: 4 additions & 2 deletions apps/mobile/src/ui/chat/conversation-screen.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ import { QuestionCard } from './question-card';
import { WorkingStatus } from './working-status';
import { TimeSeparator } from './time-separator';
import { AccentProvider, useDesignTheme } from '../design/theme';
import { edgeFade, pullToCompose, radius, space } from '../design/tokens';
import { edge, edgeFade, pullToCompose, radius, space } from '../design/tokens';
import { OpenFullClientButton } from '../open-full-client';
import { fullClientParams, type FullClientTarget } from '../../host/full-client';
import { leaveScreen } from '../shell/leave-screen';
Expand Down Expand Up @@ -1031,7 +1031,9 @@ function ChatConversation({
contentContainerStyle={{
minHeight: Math.max(
0,
viewportHeight - (notice === undefined ? headerOverlap : 0),
viewportHeight -
(notice === undefined ? headerOverlap : 0) +
(Platform.OS === 'android' ? edge.hairline : 0),
),
justifyContent: 'flex-end',
paddingTop: space.x3 + listTop,
Expand Down
10 changes: 8 additions & 2 deletions apps/mobile/src/ui/chat/source-name.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,15 @@ export function SourceName({ name, source }: { name: string; source: 'computer'
<View
accessible
accessibilityLabel={`${name}, ${source === 'cloud' ? t.cloudChannels.cloudChannel : t.computerChannel}`}
style={{ flex: 1, minWidth: 0, flexDirection: 'row', alignItems: 'center', gap: space.x2 }}
style={{
...(theme.largeText ? { alignSelf: 'stretch' as const } : { flex: 1 }),
minWidth: 0,
flexDirection: 'row',
alignItems: 'center',
gap: space.x2,
}}
>
<Text strong numberOfLines={1} style={{ flexShrink: 1 }}>
<Text strong numberOfLines={theme.largeText ? 2 : 1} style={{ flexShrink: 1 }}>
{name}
</Text>
<View accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
Expand Down
3 changes: 2 additions & 1 deletion apps/mobile/src/ui/design/tokens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ export const navigationBar = {
} as const;
export const loadingIndicator = { size: 48 } as const;
export const swipeAction = { size: 56 } as const;
export const environmentTab = { maxWidth: 220 } as const;
export const environmentTab = { widthRatio: 0.6 } as const;
export const tabLabel = { minimumFontScale: 0.6 } as const;
export const modalRail = { maxWidth: 360 } as const;
export const messageSheet = { textHeightRatio: 0.4 } as const;
export const pairingScan = { maxSize: 200, widthRatio: 0.5 } as const;
Expand Down
7 changes: 6 additions & 1 deletion apps/mobile/src/ui/shell/activity-feed.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -256,7 +256,10 @@ const Row = memo(function Row({
) : (
<BotAvatar bot={bot} size={size} />
)}
<View style={{ flex: 1, gap: space.x1 }}>
<View
key={`${theme.scheme}:${theme.fontScale}:${name}`}
style={{ flex: 1, minWidth: 0, gap: space.x1 }}
>
<View
style={{
flexDirection: theme.largeText ? 'column' : 'row',
Expand Down Expand Up @@ -367,8 +370,10 @@ function Post({
<BotAvatar bot={bot} size={AVATAR} />
)}
<View
key={`${theme.scheme}:${theme.fontScale}:${name}`}
style={{
flex: 1,
minWidth: 0,
flexDirection: theme.largeText ? 'column' : 'row',
alignItems: theme.largeText ? 'flex-start' : 'center',
gap: space.x2,
Expand Down
5 changes: 4 additions & 1 deletion apps/mobile/src/ui/shell/activity-tabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { SceneRendererProps } from 'react-native-tab-view';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { runOnJS, useReducedMotion } from 'react-native-reanimated';
import { useDesignTheme } from '../design/theme';
import { edge, space, swipeRow, tabMotion } from '../design/tokens';
import { edge, space, swipeRow, tabLabel, tabMotion } from '../design/tokens';
import { Text } from '../primitives/text';
import { t } from '../strings';
import type { ActivitySection } from './activity-filters';
Expand Down Expand Up @@ -147,6 +147,9 @@ export function ActivityTabs({
<Text
tone={selected === key ? 'fg' : 'muted'}
strong={selected === key}
numberOfLines={1}
adjustsFontSizeToFit
minimumFontScale={tabLabel.minimumFontScale}
style={{ flexShrink: 1, textAlign: 'center' }}
>
{t.inboxSections[key]}
Expand Down
3 changes: 2 additions & 1 deletion apps/mobile/src/ui/shell/environment-pager.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function EnvironmentPager({
const theme = useDesignTheme();
const { width } = useWindowDimensions();
const reducedMotion = useReducedMotion();
const maxTabWidth = Math.min(environmentTab.maxWidth, width - space.x6 * 2);
const maxTabWidth = width * environmentTab.widthRatio;
const index = Math.max(
0,
routes.findIndex((route) => route.key === selected),
Expand All @@ -43,6 +43,7 @@ export function EnvironmentPager({
: undefined;
return (
<View
key={`${theme.scheme}:${theme.fontScale}:${route.title}`}
style={{
flexDirection: 'row',
alignItems: 'center',
Expand Down
11 changes: 11 additions & 0 deletions changes/2443-android-row-names.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
section: Fixed
---

## en

- Names in the chat list and in **Send to** no longer get cut short, as in "QA Loun…", after switching between light and dark on Android. With larger text, a chat-list name gets the full row width with the time on the line below it, chat-list and Activity names and previews wrap to a second line instead of ending in "…" early, and a long computer name in the tabs above the chat list can use up to about three-fifths of the screen before it is shortened The tabs at the top of Activity shrink their labels to fit on one line instead of breaking a word. On Android, an upward flick also opens the keyboard in a chat whose messages do not fill the screen ([#2443](https://github.com/BotHarness/DeepSeekBot/pull/2443)).

## zh

- Android 上切换浅色/深色主题后,会话列表和「发送到」里的名称不会再被截成 “QA Loun…” 这样。调大字体后,会话列表的名称占满整行,时间移到名称下一行;会话列表和动态里的名称与预览会换到第二行,不再过早显示 “…”;会话列表上方的设备标签在名称较长时,最多可占约五分之三的屏幕宽度,超过才省略。动态顶部的分段标签会缩小字号保持一行,不再从词中间断开。Android 上消息没铺满屏幕的对话,上滑也能拉起键盘([#2443](https://github.com/BotHarness/DeepSeekBot/pull/2443))。
Loading