design(mobile): unify Android Material layouts and native controls

[PixPMusic]

Android screens mixed pane framing, circular toolbar actions, translucent surfaces and settings forms that stretched across foldables and tablets. This PR makes Material layout consistent across the mobile app and uses the native Material controls supplied by the pinned Expo UI package.

Screen family	Result
Home and chat	Shared compact/expanded search toolbar, selected thread surfaces, primary New thread FAB, secondary filter FAB and list clearance.
Settings, Appearance, environments, projects, diagnostics and usage	Shared headers and rounded panes, grouped rows, 720dp form width, native switches, slider and segmented filters.
New task and thread settings	Bounded model catalog, Material radio rows, search/clear and labeled Save/Done; bounded project selection and native empty-state actions.
Files, Git and review	Matching pane headers and opaque surfaces, themed text selection and visible active Files state.
Terminal	Matching pane framing, native Attach output and Show keyboard controls above the gesture area.
Confirmations, rename and custom snooze	Native Material dialogs, outlined inputs, segmented snooze controls, calendar/clock pickers and themed actions. Rename retains select-all and button/IME guards.

Material layout defaults on for Android when no preference was saved. Saved opt-outs remain respected. Layout styling and wallpaper colors are separate choices. Android text selection, cursor and handles follow the selected theme across both Android layouts; iOS retains its existing selection behavior. Native UI imports use Android platform files and shared fallbacks.

Alex's original pane/contrast work and subsequent search, FAB, input and screen refinements are preserved. The branch includes current main.

The audit emulator's bundled Google Messages and Pixel Settings illustrate the compose-action and grouped-row patterns. As Alex noted, this AVD bundles an older Messages build and Settings does not default to two panes, so these captures are limited references. Google's Gmail/Chat large-screen update and adaptive Reply codelab provide the adaptive layout reference. Gmail's signed-in screens require an account and were not tested locally.

Android model picker: phone before/after, search, reasoning, light mode, unfolded New task and tablet views.

Custom snooze before/after, phone calendar/keyboard and native clock.

Native file preview theme correction: dark/light and phone-cover screenshots.

Wide Android pane controls: Fold comparison and all four Tablet visibility states. Left-sidebar controls are shared across wide workspace screens; applicable right-pane controls stay visible outside overflow.

Screen-by-screen gallery: nine before/after pairs covering Home, chat, Files, terminal, project selection, New task, rename and filters. Captured on the actual Fold cover and inner displays with matching theme, font and synthetic data.

Before: main b900fc94eb. After: this PR. Pixel Tablet, 2560×1600 at 320dpi, same synthetic projects, 16pt body text, dark Material You theme and enabled Material layout.

Before: main	After: Material layout and native controls

Built-in Google app references

Validation passed: 60 focused mobile tests across seven files, mobile TypeScript, scoped lint, Android native builds and two Android selection-color unit tests. Actual Pixel 9 Pro Fold inner/outer displays and Pixel Tablet were exercised. The current native Fold build now verifies the final Files open/close behavior, selected-thread retention and navigation on both displays. Its native client rebuilt and installed successfully, and the whole-checkout native compatibility check passed. The screenshot pass fixed a missing terminal keyboard icon. Terminal accessory dismissal now clears the native Android text field focus; two actual keyboard open/dismiss cycles passed and the footer returned. The final follow-up passed mobile typechecking, scoped lint and the native compatibility check. iOS visuals, physical TalkBack and frame profiling remain unverified. The broad Android default rollout requires human review; no merge performed.

Implemented collaboratively with Alex, using GPT-6 in the Codex harness.

Summary by CodeRabbit

• New Features

  • Added a unified settings experience with consistent headers, navigation, scrolling, and form sheets.
  • Introduced Material You layouts with rounded surfaces, adaptive spacing, responsive menus, updated controls, dialogs, sliders, and segmented controls.
  • Added improved file and thread navigation, search toolbars, floating new-thread actions, terminal controls, and Android text-selection styling.
  • Material You Layout is now enabled by default on Android and can be disabled in Appearance.

• Bug Fixes

  • Improved layout spacing, header borders, theme colors, content presentation, accessibility states, and selection colors.

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is a 128-file Android UI and native-control rollout that changes many existing production flows and makes Material behavior the default rather than an opt-in path. The scope includes new dialogs, menus, controls, pane layouts, navigation, and selection behavior, so the change warrants human review.

Not approved because:

• Per-review cost limit exceeded (workspace setting). Approvability relies on correctness review in order to determine eligibility

^{Review your spending limits in Billing settings, or comment @macroscope-app review this PR to bypass the limit and review now. You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 4cd71f31-68f2-42d6-8017-42032aceddee

📥 Commits

Reviewing files that changed from the base of the PR and between bb1794f and b6b2f00.

📒 Files selected for processing (1)

• apps/mobile/src/features/terminal/ThreadTerminalRouteScreen.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review.

---

📝 Walkthrough

Walkthrough

Material You support now covers theme variables, shared screen framing, Android controls, settings routes, workspace layouts, file and review surfaces, Git sheets, and Android text-selection colors. Android enables the layout by default when no stored preference exists.

Changes

Material You mobile layout

Layer / File(s)	Summary
Theme runtime variables and shared controls apps/mobile/src/lib/*, apps/mobile/src/components/*, apps/mobile/src/features/settings/components/*, apps/mobile/src/features/settings/appearance/components/*	Runtime theme variables, shared screen framing, Android headers, menus, switches, sliders, scrolling, row styling, and section styling now support Material You.
Settings and route migration apps/mobile/src/features/settings/*, apps/mobile/src/features/connection/*, apps/mobile/src/features/diagnostics/*, apps/mobile/src/features/usage/*, apps/mobile/src/features/cloud/*, apps/mobile/src/features/projects/*, apps/mobile/src/features/archive/*	Routes now use SettingsScreen, SettingsScreenContent, and ScreenScrollView where applicable. Android-specific local header branches move into shared screen handling.
Workspace, thread, file, review, and Git surfaces apps/mobile/src/features/home/*, apps/mobile/src/features/layout/*, apps/mobile/src/features/threads/*, apps/mobile/src/features/files/*, apps/mobile/src/features/review/*	Material You branches update headers, panes, cards, sheets, lists, empty states, spacing, colors, borders, and safe-area layout.
Android text selection apps/mobile/modules/t3-markdown-text/*, apps/mobile/src/native/*, apps/mobile/src/components/AppText.tsx, apps/mobile/src/features/files/SourceFileSurface.tsx, apps/mobile/src/features/home/HomeHeader.tsx, apps/mobile/src/features/threads/ThreadFeed.tsx	Android selection and selection-handle colors now use theme colors. Native handle tinting and Robolectric coverage were added.

Priority: ➖ Normal

Estimated code review effort: 4 (Complex) | ~45 minutes

Change: Feature

Suggested reviewers: juliusmarminge

Merge Risk: 🔵 Low · up to b6b2f

Legacy Android composer selections, cursors, and handles receive the Material tint; this is a bounded visual regression that should be corrected before merge.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 20.22% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 89 functions across 72 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Title check	✅ Passed	The title clearly summarizes the main change: unified Android Material layouts and native controls across mobile screens.
Description check	✅ Passed	The description provides detailed change scope, rationale, UI evidence, validation results, and known limitations. It does not use the template headings or checklist format, but it contains the requir…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[juliusmarminge]

this looks very odd:

---

also, is there any reason we should not always use the material you layout? does android app usually let the user choose? to me it just looks better on so would be happy to always use it on android devices?

[PixPMusic]

Ah yeah the highlight doesn't quite look right. I'll try to iterate on that @juliusmarminge

As for the option--I also prefer it, but I originally kept it as a toggle for a couple reasons:

• I didn't want to override the design you guys have going
• Not everyone is on a Pixel. This is very "Google-y" design language. Some people may not prefer it.

I'm totally for switching over or at least setting it as default for new users? Gather bug reports?

[juliusmarminge]

I'm totally for switching over or at least setting it as default for new users? Gather bug reports?

Yea sounds like a good first step

[juliusmarminge]

and shouldn't these surfaces have the same color in this mode or?

i'm just throwing stuff out there since i've not used android for the past 15 years i have no idea how these things are meant to look xd

[PixPMusic]

I'm actually looking closer at some of the apps I used for comparison and it turns out I was entirely wrong on the sidebar and detail using the same header surface color across a handful of system and Google apps

However, no, those are all different colors in most apps. I'll have my agent reply with some examples of other apps.

[PixPMusic]

@juliusmarminge Following up with current Android 17 references. The apps don't use one uniform surface or selection rule:

• Messages: the selected conversation is an inset, fully rounded pill, even for the first row. It doesn't flood the parent list's top corners.
• Phone: selected calls follow the grouped cell shape instead. This gives us a real comparison for the flooded/grouped-cell alternative.
• Settings: list and detail panes have different surfaces; the search bar is an outlined pill.

So distinct pane colors aren't inherently wrong, but these references don't justify accidental seams or inconsistent spacing. The selected-thread shape is a separate choice from the pane surfaces.

These are original, unedited emulator captures at 2076 × 2152, 390 dpi, with updated Google apps. Both palettes were applied through Settings → Wallpaper & style → Home screen → Colors: blue wallpaper colors, then pink from Other colors. Each app was captured with Android's light and dark modes.

The fixture set contains 8 fictional local contacts, 17 SMS messages, and 6 call-history entries. Nothing was sent or dialed. These are SMS, not RCS; they don't establish an RCS color-token mapping.

Messages — populated SMS; first row selected — blue and pink, light and dark

Messages uses an inset, fully rounded selection, including the first conversation. The list and conversation canvas use different surfaces.

Blue / system light	Blue / system dark

Pink / system light	Pink / system dark

Phone — selected call history — blue and pink, light and dark

Phone uses a navigation rail, call list, and detail pane with distinct surfaces. Its selected first call follows the grouped cell shape: rounded top corners, much squarer bottom corners.

Blue / system light	Blue / system dark

Pink / system light	Pink / system dark

Settings — two-pane network page — blue and pink, light and dark

Settings uses different pane surfaces, an outlined pill-shaped search field, and grouped list cells.

Blue / system light	Blue / system dark

Pink / system light	Pink / system dark

Messages — before population — blue and pink, light and dark

The empty state was captured before adding the fictional SMS conversations.

Blue / system light	Blue / system dark

Pink / system light	Pink / system dark

Contacts — populated list — blue and pink, light and dark

Contacts uses a navigation rail and a full-width grouped list here. Opening a contact replaces the list rather than keeping a persistent list/detail split.

Blue / system light	Blue / system dark

Pink / system light	Pink / system dark

Clock — world cities — blue and pink, light and dark

Clock uses a wide two-column card layout, not master-detail. It stays dark in both system modes in this build.

Blue / system light	Blue / system dark

Pink / system light	Pink / system dark

Extra checks — second Messages row selected; Contacts detail

The second Messages row gets the same fully rounded inset selection as the first. Contacts detail opens full-width at this configuration.

Messages — second row selected	Contacts — detail

Versions and emulator caveats

• Android 17 Google APIs 16 KB ARM64 image, SDK 37.1, revision 9; emulator 37.1.11. This is not Pixel firmware.
• Settings' built-in large-screen layout was enabled with persist.settings.large_screen_opt.enabled=true.
• Messages: messages.android_20260824_01_RC04.phone_dynamic (321730063).
• Phone: 237.0.973536915. Contacts: 4.87.27.974164896. Clock: 9.1 (965977594).
• Google apps were updated using Aurora Store's anonymous Google Play downloads; no personal Google account was connected.
• Messages needed a cold relaunch after some theme changes to restore its native two-pane layout.
• Clock did not expose a light-theme setting; its light/dark labels above refer to system mode, not a light Clock rendering. No alarms were enabled.

Reference capture and verification by the Codex agent in T3 Code. No application-code changes in this reference pass.

[juliusmarminge]

Of course why would android be consistent 🙃🙃🙃

For real trusting your judgement here more than mine on how we should have our layout...

I'll need to think about the iPhone Duo layout as well in the coming weeks so if i don't have to think about android design systems thats just a bonus :)

[PixPMusic]

Thinking about hiding the search bar into a secondary FAB or moving the filter to the secondary FAB so the search can be part of the main toolbar row especially on foldable.

I think I need a variant comparison skill :)

Having the search bar hidden on the two column layout would help clean up the layout and align the baselines of each pane. I think the offset of the search bar width will make more sense if it's replacing the toolbar rather than making it larger

[juliusmarminge]

Leaving this in case the iPad layout is of interest: https://github.com/user-attachments/assets/40fa18b6-03c3-4a33-9b24-f8e791ab9b63

[PixPMusic]

I actually use the iPad app a decent amount and have a couple PRs open addressing some multi window bugs

The idea I'm having would diverge slightly from the IOS layout

[PixPMusic]

E is selected and integrated. Current screenshots and verification. The original A–E Android 17 comparison grids are preserved below.

Variant	Header	Floating buttons
A	Filter, Settings	Search + Compose
B	Search field, Settings	Filter + Compose
C	Search, ⋮ with Filter and Settings	Compose
D	Search, Settings	Filter + Compose
E	Search, Settings	Filter + New thread

All FABs are rounded squares. A–D use an 80dp Compose button and 56dp secondary buttons where present. E uses 56dp for both buttons, with an extended New thread label. Stacked buttons share a right edge and an 8dp gap.

T3 Code · light and dark

Light

A	B	C	D	E

Dark

A	B	C	D	E

Grove · light and dark

Light

A	B	C	D	E

Dark

A	B	C	D	E

System wallpaper colors · light and dark

Light

A	B	C	D	E

Dark

A	B	C	D	E

Folded · wallpaper dark

A	B	C	D	E

Search active

A	B	C	D	E

Filter and overflow menus

A	B	C	D	E
Header filter

Other states

C: another selected row	E: New thread

Material You Layout is on throughout. Typecheck and changed-file lint passed in all five worktrees. Implementation and captures: Codex in T3 Code.

[juliusmarminge]

I don't really use search that much, the reason i have it always available on iOS is cause the toolbar is something a lot of Apple apps use, so I'm fine collapsing it to a button on android

[juliusmarminge]

First Material You refactoring batch is pushed in 673d3fe7d6. This builds on Alex's pane framing work.

Shared Android top bars now use native Compose icon buttons, give titles more room, and move extra actions into an overflow menu on narrow panes. Switches and font-size sliders use @expo/ui's Material components. Settings use grouped cards, stacked labels/values, and a 720dp content limit; that limit covers settings, environment/project setup, usage, diagnostics, and Connect screens.

Verified on Android API 36 phone and tablet emulators: switching Material layout off/on, changing and restoring text size, navigating with the native back button, and opening the terminal from overflow. Mobile typechecking and 25 focused tests passed. The existing iOS and non-Material paths remain available.

Phone Appearance, matching Material colors / dark mode / 16pt text. Before is the author's previous head, 8af949faf1.

Before	After

Next pass: home/FAB, chat controls, and tool panes at foldable/tablet widths. Reference direction: Google's Reply adaptive app codelab and canonical layouts.

Follow-up implementation: GPT-6 / Codex.

[macroscopeapp]

Macroscope skipped reviewing this pull request. Per-review cost limit exceeded (workspace setting).

This review would cost an estimated $22.94, which exceeds your per-review limit of $15.00.

The top 3 files driving up this estimate:

File	Diff Size	Estimate
apps/mobile/src/features/review/ReviewSheet.tsx	22.83KB	$1.14
apps/mobile/src/features/threads/git/GitCommitSheet.tsx	19.75KB	$0.99
apps/mobile/src/features/terminal/ThreadTerminalRouteScreen.tsx	17.75KB	$0.89

Tip

To get this pull request reviewed, you can:

1. Comment @macroscope-app on this PR to request a manual review (monthly spend limits still apply).
2. Exclude the file(s) above from review by adding a pattern to your .macroscope/ignore.md — note that creating this file replaces Macroscope's built-in default ignores rather than extending them.
3. Raise your cost limit in your workspace billing settings.

^{Turn off this reminder going forward}

[PixPMusic]

Following up with relevant tests, preserving the newer Material-controls and snooze commits. Pushed through c2c09f1a4a.

Merge timing: this PR merged at 6696c5b958 while the final animation recording was being captured. The animation fix in c2c09f1a4a was pushed afterward and is not in main; it needs a follow-up PR. The cover-display evidence below shows that follow-up fix.

• Large text no longer leaves the list toolbar shorter than the chat/Files toolbar.
• New thread shrinks to a rounded square scrolling down and expands scrolling up. Its width and icon now animate together inside Compose, fixing the sideways jitter. Filter stays visible.
• Files search keeps the pane at the same height. Android new-thread Cancel dismisses the creation flow.

49 focused tests, mobile typecheck, formatting, and Android debug build/install passed. Verified on Android 17 unfolded, including 150% system text and both scroll directions. Scoped lint has existing warnings only.

Large text — before / after, light / dark

Reported misalignment before

150% system text · light	150% system text · dark

Files search — 150% system text

Both states start at y=321px.

Closed	Open

Cover display — scroll FAB

Rechecked the animation fix on Android 17 folded, at 100% and 150% text size. The right edge stays fixed; the button works in both sizes, and rows beside it remain tappable. Four scroll tests, mobile typecheck, and scoped lint pass. The earlier new-thread cancellation check still returns directly to the list.

Scrolling down	Scrolling up

Before — jitter · After — native animation

Model: GPT-5 (Codex). Harness: Codex in T3 Code.

[PixPMusic]

Damn--I noticed a small animation jutter and the fix didn't land before merge

I'll open a follow-up with the fix