diff --git a/apps/mobile/DESIGN.md b/apps/mobile/DESIGN.md index e0a7358e6b..85d4470801 100644 --- a/apps/mobile/DESIGN.md +++ b/apps/mobile/DESIGN.md @@ -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. diff --git a/apps/mobile/src/ui/chat/activity-row.tsx b/apps/mobile/src/ui/chat/activity-row.tsx index c8886b6ae2..1ba1d07abb 100644 --- a/apps/mobile/src/ui/chat/activity-row.tsx +++ b/apps/mobile/src/ui/chat/activity-row.tsx @@ -118,7 +118,7 @@ export function ActivityRow({ diff --git a/apps/mobile/src/ui/chat/conversation-row.tsx b/apps/mobile/src/ui/chat/conversation-row.tsx index 764e74b45b..2e208cc7f0 100644 --- a/apps/mobile/src/ui/chat/conversation-row.tsx +++ b/apps/mobile/src/ui/chat/conversation-row.tsx @@ -178,12 +178,15 @@ export function ConversationRowFrame({ )} - + @@ -194,7 +197,12 @@ export function ConversationRowFrame({ )} - + {preview} diff --git a/apps/mobile/src/ui/chat/conversation-screen.tsx b/apps/mobile/src/ui/chat/conversation-screen.tsx index 6a1629be0a..2652786cc3 100644 --- a/apps/mobile/src/ui/chat/conversation-screen.tsx +++ b/apps/mobile/src/ui/chat/conversation-screen.tsx @@ -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'; @@ -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, diff --git a/apps/mobile/src/ui/chat/source-name.tsx b/apps/mobile/src/ui/chat/source-name.tsx index 76739ab7e3..baa02692e9 100644 --- a/apps/mobile/src/ui/chat/source-name.tsx +++ b/apps/mobile/src/ui/chat/source-name.tsx @@ -11,9 +11,15 @@ export function SourceName({ name, source }: { name: string; source: 'computer' - + {name} diff --git a/apps/mobile/src/ui/design/tokens.ts b/apps/mobile/src/ui/design/tokens.ts index e6d5ee6036..73b786925d 100644 --- a/apps/mobile/src/ui/design/tokens.ts +++ b/apps/mobile/src/ui/design/tokens.ts @@ -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; diff --git a/apps/mobile/src/ui/shell/activity-feed.tsx b/apps/mobile/src/ui/shell/activity-feed.tsx index 84563e6bbe..b491b4b18d 100644 --- a/apps/mobile/src/ui/shell/activity-feed.tsx +++ b/apps/mobile/src/ui/shell/activity-feed.tsx @@ -256,7 +256,10 @@ const Row = memo(function Row({ ) : ( )} - + )} {t.inboxSections[key]} diff --git a/apps/mobile/src/ui/shell/environment-pager.tsx b/apps/mobile/src/ui/shell/environment-pager.tsx index 6755dc9a32..faf923db79 100644 --- a/apps/mobile/src/ui/shell/environment-pager.tsx +++ b/apps/mobile/src/ui/shell/environment-pager.tsx @@ -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), @@ -43,6 +43,7 @@ export function EnvironmentPager({ : undefined; return (