diff --git a/go/bind/keybase.go b/go/bind/keybase.go
index 7de4138929fd..6eab84c175e5 100644
--- a/go/bind/keybase.go
+++ b/go/bind/keybase.go
@@ -619,6 +619,18 @@ func ReadArr() (data []byte, err error) {
 
 	n, err := currentConn.Read(buffer)
 	if n > 0 {
+		// Coalesce already-pending writes into this delivery. Every ReadArr
+		// return costs a full native->JS bridge hop, and the JSI side
+		// batches however many frames arrive in one call.
+		if lb, ok := currentConn.(*libkb.LoopbackConn); ok {
+			for n < len(buffer) {
+				m, terr := lb.TryRead(buffer[n:])
+				if m <= 0 || terr != nil {
+					break
+				}
+				n += m
+			}
+		}
 		// Deliver data even if err != nil (allowed by the net.Conn
 		// contract); the error will surface on the next call. Returning a
 		// view of the shared buffer is safe because gomobile copies the
diff --git a/go/libkb/loopback.go b/go/libkb/loopback.go
index 081f1fbabe6f..274d03af5caa 100644
--- a/go/libkb/loopback.go
+++ b/go/libkb/loopback.go
@@ -137,6 +137,31 @@ func (lc *LoopbackConn) Read(b []byte) (n int, err error) {
 	return n, nil
 }
 
+// TryRead is a non-blocking Read: it returns immediately with n == 0 when no
+// data is pending. Used by the mobile bridge to coalesce already-pending
+// writes into one delivery, amortizing the per-call native->JS bridge hop.
+func (lc *LoopbackConn) TryRead(b []byte) (n int, err error) {
+	lc.rMutex.Lock()
+	defer lc.rMutex.Unlock()
+
+	if lc.buf.Len() > 0 {
+		return lc.buf.Read(b)
+	}
+	select {
+	case msg, ok := <-lc.partnerCh:
+		if !ok {
+			return 0, io.EOF
+		}
+		n = copy(b, msg)
+		if n < len(msg) {
+			lc.buf.Write(msg[n:])
+		}
+		return n, nil
+	default:
+		return 0, nil
+	}
+}
+
 // Write writes data to the connection.
 func (lc *LoopbackConn) Write(b []byte) (n int, err error) {
 	lc.wMutex.Lock()
diff --git a/plans/flow-test.md b/plans/flow-test.md
index 7671ae6797c3..8b73923507ff 100644
--- a/plans/flow-test.md
+++ b/plans/flow-test.md
@@ -4,11 +4,17 @@
 
 Each bucket is a logical group for one or more PRs. Items are ordered easiest-first within each bucket. Validate after each bucket before moving on.
 
-**Pairing rule:** Do Electron and iOS for each bucket together before moving to the next bucket.
+**Pairing rule:** Buckets 1–15: do Electron and iOS together. Buckets 16+ (visual-coverage expansion): Electron first; iOS gets a follow-up pass once the desktop suite is stable.
 
 **Branch scripts:** `yarn test:e2e:desktop:branch` and `yarn test:e2e:ios:branch` run only the new flows being developed. When a flow is verified working on both platforms, remove it from the branch scripts. When adding a new bucket's test files, add them to both scripts.
 
-Out of scope = screens that create, delete, add, invite, or remove something. Everything else is in scope even if it requires app state to reach.
+**Goal:** 100% visual coverage of the app. Every test's final screenshot is a visual-regression baseline (playwright `screenshot: 'on'` + `yarn test:e2e:desktop:save-baseline`), and the dark-mode project doubles every shot for free. So coverage = one test per distinct visual state: routes, modals, popups, scroll positions, filled inputs.
+
+**Mutations are now IN SCOPE** when the flow is reproducible:
+- **Create → cleanup in the same test.** A test that creates something must delete it before it ends (git repo, channel, email address, paper key). Use fixed `e2e-vis-*` names and delete any leftover at test start so a crashed run self-heals.
+- **Open → cancel is always fine.** Any modal/wizard can be opened and screenshotted as long as the test cancels before the final submit when the mutation isn't cleanly reversible.
+- **Never touch:** account deletion/reset, revoking a real device (paper keys created by the test are OK), logging out, changing the password, verifying a phone number, creating/revoking real proofs, leaving or deleting real teams, blocking real users. See the Forbidden list at the bottom.
+- Avoid visual nondeterminism: created objects use fixed names, message sends go to a dedicated e2e conversation (accept that its history grows — screenshot the input/modal states, not the message list).
 
 **testID rule:** Never wrap existing component content in a new `Kb.Box2` (or any container) just to attach a `testID`. Instead, add the `testID` prop directly to an element that already exists in the component — an input, a scroll view, a pre-existing wrapper, etc.
 
@@ -50,17 +56,17 @@ Open an existing conversation. No sending.
 
 From an open conversation, open each of these. Dismiss/cancel without submitting.
 
-- [ ] Info panel (the ⓘ / conversation info button)
-- [ ] Message popup / context menu (long-press or right-click a message)
-- [ ] Emoji picker (tap emoji button in input area)
-- [ ] Search bots modal (tap bot icon)
-- [ ] Bot info / install preview — open a bot, view, don't install (`chatInstallBot`)
+- [x] Info panel (the ⓘ / conversation info button) (Electron ✓ chat-modals.test.ts, iOS ✓ visual-states.test.ts via native More→Info menu)
+- [x] Message popup / context menu (long-press or right-click a message) (Electron ✓)
+- [x] Emoji picker (tap emoji button in input area) (Electron ✓)
+- [x] Search bots modal (info panel → Bots → Add a bot) (Electron ✓)
+- [x] Bot info / install preview — open a bot, view, don't install (`chatInstallBot`) (Electron ✓)
 - [ ] Bot team picker (`chatInstallBotPick`) — view destinations, cancel
-- [ ] Forward message pick (`chatForwardMsgPick`) — view destinations, cancel
-- [ ] Attachment fullscreen (`chatAttachmentFullscreen`) — requires a message with an image
-- [ ] PDF viewer (`chatPDF`) — requires a message with a PDF
+- [x] Forward message pick (`chatForwardMsgPick`) — view destinations, cancel (Electron ✓)
+- [x] Attachment fullscreen (`chatAttachmentFullscreen`) — requires a message with an image (Electron ✓, iOS ✓)
+- [ ] PDF viewer (`chatPDF`) — requires a seeded PDF message
 - [ ] Location map popup (`chatUnfurlMapPopup`) — requires a message with a location unfurl
-- [ ] External link warning (`chatConfirmNavigateExternal`) — click an http link in a message
+- [ ] External link warning (`chatConfirmNavigateExternal`) — click an http link in a message (seed via send)
 
 ---
 
@@ -73,7 +79,7 @@ Navigate from the Settings nav. Confirm renders, go back.
 - [x] Display (Electron ✓, iOS written)
 - [x] Notifications (Electron ✓, iOS written)
 - [x] Feedback (Electron ✓, iOS written)
-- [ ] Password (modal: `settingsTabs.password`) — needs Account settings navigation; no testID yet
+- [x] Password (modal: `settingsTabs.password`) (Electron ✓ misc-modals.test.ts, iOS ✓ visual-states.test.ts)
 
 ---
 
@@ -85,7 +91,7 @@ Same pattern. Devices and Git reuse their main tab screen components.
 - [x] Files (Electron ✓, iOS written via settings-subpages.yaml)
 - [x] Git — reuses git root component (Electron ✓, iOS ✓ via git.yaml)
 - [x] Devices — reuses devices root component (Electron ✓, iOS ✓ via devices-view.yaml)
-- [ ] Wallet
+- [x] Wallet (Electron ✓ misc-modals.test.ts, iOS ✓ visual-states.test.ts)
 - [x] Archive / Backup (Electron ✓, iOS written via settings-subpages.yaml)
 - [ ] Contacts (mobile only, `settingsTabs.contactsTab`)
 - [x] Screen Protector (mobile only, `settingsTabs.screenprotector`) (Electron ✓, iOS: Android only)
@@ -96,7 +102,7 @@ Same pattern. Devices and Git reuse their main tab screen components.
 
 Settings-adjacent modals that are viewable without mutating.
 
-- [ ] Archive modal (`archiveModal`) — view the backup flow, cancel
+- [x] Archive modal (`archiveModal`) — view the backup flow, cancel (Electron ✓ misc-modals.test.ts, iOS ✓ visual-states.test.ts)
 - [ ] Contacts joined (`settingsContactsJoined`) — notification screen (hard to trigger naturally; may need investigation)
 - [ ] Push prompt (`settingsPushPrompt`) — mobile only, view and skip
 - [ ] Proxy settings (`proxySettingsModal`) — from the login screen or settings; view and cancel
@@ -127,12 +133,12 @@ Open a team, navigate each internal tab.
 From within a team.
 
 - [x] Team member page (Electron ✓, iOS written) — taps smoke user's username in member list
-- [ ] Edit channel modal — open, cancel (`teamEditChannel`)
-- [ ] Team description edit modal — open, cancel (`teamEditTeamDescription`)
-- [ ] Team info edit modal — open, cancel (`teamEditTeamInfo`)
+- [x] Edit channel modal — open, cancel (`teamEditChannel`) (Electron ✓ teams-modals.test.ts)
+- [x] Team description edit modal — open, cancel (`teamEditTeamDescription`) (Electron ✓ teams-modals.test.ts)
+- [x] Team info edit modal — open, cancel (`teamEditTeamInfo`) (Electron ✓ teams-modals.test.ts)
 - [ ] Invite link join page (`teamInviteLinkJoin`) — view the page, don't join
 - [ ] Open team warning modal (`openTeamWarning`) — view and dismiss
-- [ ] Retention warning modal (`retentionWarning`) — view and dismiss
+- [x] Retention warning modal (`retentionWarning`) — view and dismiss (Electron ✓ teams-modals.test.ts)
 - [ ] External team page (`teamExternalTeam`) — view a public/open team without membership
 
 ---
@@ -140,7 +146,7 @@ From within a team.
 ## Bucket 11 — Profile page and modals
 
 - [x] Profile page renders (Electron ✓ via People tab header; iOS written — conditional on username in feed)
-- [ ] Proofs list modal (`profileProofsList`) — open from a profile, view, close
+- [x] Proofs list modal (`profileProofsList`) — open from a profile, view, close (Electron ✓ profile-modals.test.ts)
 - [ ] Showcase team offer (`profileShowcaseTeamOffer`) — open from own profile, view, cancel
 
 ---
@@ -168,96 +174,144 @@ From the Files root, tap each TLF type then back.
 
 ## Bucket 14 — People and account switcher
 
-- [ ] Account switcher modal (People tab → avatar in header)
+- [x] Account switcher (desktop: "Hi user!" menu in tab bar; mobile: People tab → avatar) (Electron ✓ misc-modals.test.ts)
 
 ---
 
 ## Bucket 15 — Wallets
 
-- [ ] Wallet root screen renders (`walletsRoot`, accessible via Settings → Wallet)
-- [ ] Remove account modal (`removeAccount`) — open, cancel (view-only intent, cancel before submitting)
+- [x] Wallet root screen renders (`walletsRoot`, accessible via Settings → Wallet) (Electron ✓ misc-modals.test.ts)
+- ~~Remove account modal (`removeAccount`)~~ — moved to Forbidden per user; don't automate stellar account removal at all
+
+---
+
+## Bucket 16 — Scroll depth and list states (desktop)
+
+Same screen, more of it. Scroll to a deterministic position (bottom, or a fixed element) before the final screenshot.
+
+- [x] Chat inbox scrolled to bottom of conversation list (Electron ✓ scroll-states.test.ts)
+- [x] Chat conversation scrolled up into older messages (Electron ✓, iOS ✓ visual-states.test.ts)
+- [x] Settings → Advanced scrolled to bottom (dev/proxy section) (Electron ✓, iOS ✓)
+- [x] Settings → Notifications scrolled to bottom (Electron ✓ scroll-states.test.ts)
+- [x] Team members tab scrolled to bottom of member list (Electron ✓)
+- [x] Files TLF list scrolled to bottom (Electron ✓)
+- [x] Profile page scrolled to proofs/folders section (Electron ✓)
+- [x] People feed scrolled to bottom (Electron ✓)
+
+---
+
+## Bucket 17 — Chat compose states
+
+Distinct visual states of the input area in the dedicated e2e conversation. No sends needed except where noted.
+
+- [x] `@`-mention suggestion popup (type `@` + partial name) (Electron ✓ chat-compose.test.ts, iOS ✓ visual-states.test.ts)
+- [x] Channel-mention popup (type `#` in a team conversation) (Electron ✓ chat-interactions.test.ts)
+- [x] Emoji picker open from input bar (Electron ✓ chat-modals.test.ts)
+- [x] `/`-command suggestion popup (type `/`) (Electron ✓ chat-compose.test.ts)
+- [x] Giphy preview row (type `/giphy something`) (Electron ✓ chat-interactions.test.ts)
+- [x] Multiline input grown (type several lines) (Electron ✓ chat-compose.test.ts)
+- [x] Edit-message mode (up-arrow on own last message; escape to cancel) (Electron ✓ chat-interactions.test.ts)
+- [x] Reply-quote state (reply to a message, input shows quote; escape to cancel) (Electron ✓ chat-interactions.test.ts)
+
+---
+
+## Bucket 18 — Chat message interactions
+
+From the dedicated e2e conversation.
+
+- [x] Message context menu (right-click a text message) (Electron ✓ chat-modals.test.ts)
+- [x] Reaction picker (hover toolbar → react) (Electron ✓ chat-interactions.test.ts)
+- [ ] Reacji tooltip (hover an existing reaction)
+- [x] Info panel members tab / attachments tab / settings tab (Electron ✓ chat-modals + chat-interactions)
+- [ ] Attachment fullscreen (`chatAttachmentFullscreen`) — needs a seeded image message
+- [ ] PDF viewer (`chatPDF`) — needs a seeded PDF message
+- [ ] External link warning (`chatConfirmNavigateExternal`) — click an http link in a seeded message
+
+---
+
+## Bucket 19 — Chat mutations (reproducible)
+
+- [x] `chatNewChat` — open new-conversation team builder, screenshot, cancel (Electron ✓ chat-mutations.test.ts, iOS ✓ visual-states.test.ts)
+- [ ] Send message to dedicated e2e conversation (self-conversation or e2e team channel); history grows — screenshot the send state, not the list
+- [x] `chatCreateChannel` — create `e2e-vis-chan` → screenshot → delete channel (`teamDeleteChannel` covered as cleanup) (Electron ✓ team-wizard-channel.test.ts)
+- [x] `chatDeleteHistoryWarning` — open, screenshot, cancel (Electron ✓ chat-mutations.test.ts)
+- [x] `chatBlockingModal` — open block dialog, screenshot, cancel (never submit) (Electron ✓ chat-mutations.test.ts)
+- [ ] `chatAttachmentGetTitles` — attach a file, screenshot the titles modal, cancel
+- [ ] `chatShowNewTeamDialog` — open, screenshot, cancel
+
+---
+
+## Bucket 20 — Git mutations (reproducible)
+
+- [x] `gitNewRepo` — new-repo modal screenshot → create `e2e-vis-repo` → repo row renders → `gitDeleteRepo` delete-confirm screenshot → confirm delete (full cycle, self-cleaning) (Electron ✓ git-mutations.test.ts; iOS ✓ menu-open state only — FloatingMenu bottom-sheet items are a11y-invisible, can't tap through)
+- [ ] `gitSelectChannel` — open from a team repo, screenshot, cancel
+
+---
+
+## Bucket 21 — Team modals and wizards (open → cancel)
+
+All in the dedicated e2e team unless noted.
+
+- [x] `teamNewTeamDialog` wizard purpose + name screens, cancel before create (Electron ✓ team-wizard-channel.test.ts); deeper wizard steps (size/channels/subteams) still todo
+- [ ] `teamsTeamBuilder` — add-members builder, screenshot, cancel
+- [x] `teamAddToTeamFromWhere` wizard first screens + email screen, cancel (Electron ✓ teams-modals.test.ts, iOS ✓ visual-states.test.ts)
+- [ ] `teamInviteByEmail` — screenshot, cancel
+- [x] `teamEditChannel` — open, screenshot, cancel (Electron ✓ teams-modals.test.ts)
+- [x] `teamEditTeamDescription` / `teamEditTeamInfo` — open, screenshot, cancel (Electron ✓ teams-modals.test.ts)
+- [x] `teamAddEmoji` — open, screenshot, cancel (Electron ✓ teams-modals.test.ts); `teamAddEmojiAlias` still todo
+- [x] `retentionWarning` — change retention dropdown to trigger, screenshot, cancel (Electron ✓ teams-modals.test.ts)
+- [ ] `openTeamWarning` — toggle open-team setting to trigger, screenshot, cancel
+
+---
+
+## Bucket 22 — Settings mutations (reproducible)
+
+- [x] `settingsAddEmail` — add/delete full cycle (Electron ✓ settings-mutations.test.ts; iOS skipped per user)
+- [x] `settingsAddPhone` — open, screenshot, cancel (never verify) (Electron ✓ settings-mutations.test.ts)
+- [ ] Password modal (`settingsTabs.password`) — open, screenshot, cancel (never save)
+- [x] `settingsLogOutTab` — view the screen only, close modal (never log out) (Electron ✓ settings-mutations.test.ts)
+- [ ] `archiveModal` — open, screenshot, cancel
+
+---
+
+## Bucket 23 — Devices mutations (careful)
+
+- [x] `deviceAdd` — add-device chooser, screenshot, cancel (Electron ✓ device-wallet-modals.test.ts, iOS ✓ visual-states.test.ts); provisioning instruction sub-screens still todo
+- ~~`devicePaperKey` / `deviceRevoke` paper-key cycle~~ — skipped per user; don't automate paper key creation/revocation
+
+---
+
+## Bucket 24 — Profile and people mutations (open → cancel)
+
+- [x] `profileEdit` — open own-profile edit, screenshot, cancel (Electron ✓ profile-modals.test.ts)
+- [ ] `profileEditAvatar` — open, screenshot, cancel
+- [ ] `peopleTeamBuilder` — open from People, screenshot, cancel
+- [ ] `profileAddToTeam` — open on another user's profile, screenshot, cancel
+- [x] `cryptoTeamBuilder` — encrypt recipients picker, screenshot, cancel (Electron ✓ device-wallet-modals.test.ts)
+- [ ] Proof flows (`profilePgp`, `profileProveWebsiteChoice`) — first screen only, screenshot, cancel (never post a proof)
+
+---
+
+## Bucket 25 — Route audit for 100%
+
+- [ ] Enumerate every route in `shared/router-v2` route maps and cross-check against this file; add missing screens as new checklist items
+- [ ] Verify the dark project produces a shot for every light shot in the report
 
 ---
 
-## Out of scope — mutations
-
-These create, delete, add, invite, or remove something. All explicitly listed so nothing is accidentally omitted from evaluation.
-
-**Chat:**
-- `chatNewChat` — create new chat / new conversation
-- `chatCreateChannel` — create a channel
-- `chatAddToChannel` — add members to a channel
-- `chatBlockingModal` — block / report / filter a user
-- `chatConfirmRemoveBot` — remove a bot from a conversation
-- `chatDeleteHistoryWarning` — delete conversation history
-- `chatShowNewTeamDialog` — create a new team from a conversation
-- `chatSendToChat` — send a file to a chat (FS share flow)
-- `chatAttachmentGetTitles` — set titles before sending attachments
-- `chatLocationPreview` — send your location (input side, not unfurl view)
-
-**Crypto:**
-- `cryptoTeamBuilder` — pick recipients for encrypt (team builder modal)
-
-**Devices:**
-- `deviceRevoke` — revoke a device
-- `deviceAdd` — add a new device
-- `devicePaperKey` — paper key display (only shown during provisioning)
-- All provision sub-routes — device provisioning flow
-
-**Files:**
-- `confirmDelete` — delete a file/folder
-
-**Git:**
-- `gitNewRepo` — create a new git repo
-- `gitDeleteRepo` — delete a git repo
-
-**Login/signup/recover:**
-- All `login`, `signup*`, `recoverPassword*`, `reset*` routes — not relevant while logged in
-- `recoverPasswordSetPassword` — set a new password
-- `proxySettingsModal` moved to Bucket 7 (view + cancel is fine)
-
-**People:**
-- `peopleTeamBuilder` — the team builder launched from People (adds people to something)
-
-**Profile:**
-- `profileEdit` — edit your own profile bio/location
-- `profileEditAvatar` — change avatar
-- `profileImport` — import a PGP key
-- `profilePgp` — start a PGP proof flow
-- `profileProveWebsiteChoice` — start a website proof
-- `profileRevoke` — revoke a proof
-- `profileAddToTeam` — add the viewed user to one of your teams
-
-**Settings:**
-- `settingsAddEmail` — add an email address
-- `settingsAddPhone` — add a phone number
-- `settingsDeleteAddress` — delete an email or phone
-- `settingsVerifyPhone` — verify a phone number
-- `settingsLogOutTab` — log out
-- `checkPassphraseBeforeDeleteAccount` — step in account deletion
-- `deleteConfirm` — delete account
-
-**Teams:**
-- `teamNewTeamDialog` — create a team
-- `teamsTeamBuilder` — add members to a team
-- `teamAddEmoji` — add a custom emoji
-- `teamAddEmojiAlias` — add an emoji alias
-- `teamAddToChannels` — add a user to channels
-- `teamAddToTeamFromWhere` / `teamAddToTeamConfirm` / `teamAddToTeamContacts` / `teamAddToTeamEmail` / `teamAddToTeamPhone` — add members wizard
-- `teamCreateChannels` — create channels
-- `teamDeleteChannel` — delete a channel
-- `teamDeleteTeam` — delete a team
-- `teamInviteByContact` — invite via contacts
-- `teamInviteByEmail` — invite via email
-- `teamJoinTeamDialog` — join a team (adds self)
-- `teamReallyLeaveTeam` — leave a team
-- `teamReallyRemoveChannelMember` — remove someone from a channel
-- `teamReallyRemoveMember` — kick a member
-- `teamRename` — rename a subteam
-- `teamWizard1TeamPurpose` / `teamWizard2TeamInfo` / `teamWizard4TeamSize` / `teamWizard5Channels` / `teamWizard6Subteams` / `teamWizardSubteamMembers` — new team creation wizard
-
-**Wallets:**
-- `reallyRemoveAccount` — confirm removal of a wallet account
-
-**Incoming share:**
-- `incomingShareNew` — triggered by the OS share sheet; not reachable from within the app
+## Forbidden — never automate
+
+Not reproducible or account-damaging. Do not add tests for these.
+
+- Account deletion/reset: `deleteConfirm`, `checkPassphraseBeforeDeleteAccount`, `reset*`
+- Logging out (`settingsLogOutTab` submit), changing the password (`recoverPasswordSetPassword`, password modal save)
+- Revoking any device the test didn't create (paper keys created in Bucket 23 are the only exception)
+- Actually creating a team (names are permanent), leaving/deleting real teams, renaming subteams (`teamRename`), kicking members (`teamReallyRemoveMember`, `teamReallyRemoveChannelMember`)
+- Blocking/reporting real users (submit side of `chatBlockingModal`), removing bots (`chatConfirmRemoveBot`)
+- Verifying a phone number (`settingsVerifyPhone`), posting/revoking real proofs (`profileRevoke`, proof-flow submits), importing PGP keys (`profileImport`)
+- Joining teams (`teamJoinTeamDialog`)
+- Wallet/stellar account removal — the ENTIRE flow (`removeAccount`, `reallyRemoveAccount`), including open-and-cancel; per user, don't automate anything that deletes stellar accounts
+- Files `confirmDelete` on real user data (test-created files OK)
+- Login/signup/provision routes — unreachable while logged in
+- `incomingShareNew` — OS share sheet only, unreachable
+- `chatSendToChat`, `chatLocationPreview` — FS-share / location send paths, mobile/OS-dependent
diff --git a/rnmodules/react-native-kb/android/src/main/java/com/reactnativekb/KbModule.kt b/rnmodules/react-native-kb/android/src/main/java/com/reactnativekb/KbModule.kt
index 7dd238c6406f..a4a41db637c4 100644
--- a/rnmodules/react-native-kb/android/src/main/java/com/reactnativekb/KbModule.kt
+++ b/rnmodules/react-native-kb/android/src/main/java/com/reactnativekb/KbModule.kt
@@ -56,13 +56,9 @@ class KbModule(reactContext: ReactApplicationContext?) : KbSpec(reactContext), T
         return NAME
     }
 
-    @ReactMethod
-    override fun addListener(eventName: String) {
-    }
-
-    @ReactMethod
-    override fun removeListeners(count: Double) {
-    }
+    // mEventEmitterCallback is only set once JS creates the TurboModule;
+    // the generated emit helpers would NPE before then.
+    private fun canEmit(): Boolean = mEventEmitterCallback != null
 
     @ReactMethod
     override fun clearLocalLogs(promise: Promise) {
@@ -100,10 +96,23 @@ class KbModule(reactContext: ReactApplicationContext?) : KbSpec(reactContext), T
         return GuiConfig.getInstance(reactContext.filesDir)?.asString()
     }
 
-    @ReactMethod(isBlockingSynchronousMethod = true)
-    override fun getTypedConstants(): WritableMap {
-        val versionCode: String = getBuildConfigValue("VERSION_CODE").toString()
-        val versionName: String = getBuildConfigValue("VERSION_NAME").toString()
+    private data class KbConstants(
+        val isDeviceSecure: Boolean,
+        val versionCode: String,
+        val versionName: String,
+        val cacheDir: String,
+        val downloadDir: String,
+        val guiConfig: String?,
+        val serverConfig: String,
+        val uses24HourClock: Boolean,
+        val version: String,
+    )
+
+    // getTypedConstants is a blocking synchronous JS call that does file I/O
+    // and reflection; built once, prewarmed off the JS thread in init.
+    private val cachedConstants: KbConstants by lazy { buildConstants() }
+
+    private fun buildConstants(): KbConstants {
         var isDeviceSecure = false
         try {
             val keyguardManager: KeyguardManager = reactContext.getSystemService(Context.KEYGUARD_SERVICE) as KeyguardManager
@@ -117,33 +126,34 @@ class KbModule(reactContext: ReactApplicationContext?) : KbSpec(reactContext), T
         } catch (e: Exception) {
             NativeLogger.warn(": Error reading server config", e)
         }
-        var cacheDir = ""
-        run {
-            val dir: File? = reactContext.cacheDir
-            if (dir != null) {
-                cacheDir = dir.absolutePath
-            }
-        }
-        var downloadDir = ""
-        run {
-            val dir: File? = reactContext.getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS)
-            if (dir != null) {
-                downloadDir = dir.absolutePath
-            }
-        }
+        return KbConstants(
+            isDeviceSecure = isDeviceSecure,
+            versionCode = getBuildConfigValue("VERSION_CODE").toString(),
+            versionName = getBuildConfigValue("VERSION_NAME").toString(),
+            cacheDir = reactContext.cacheDir?.absolutePath ?: "",
+            downloadDir = reactContext.getExternalFilesDir(Environment.DIRECTORY_DOWNLOADS)?.absolutePath ?: "",
+            guiConfig = readGuiConfig(),
+            serverConfig = serverConfig,
+            uses24HourClock = DateFormat.is24HourFormat(reactContext),
+            version = version(),
+        )
+    }
 
+    @ReactMethod(isBlockingSynchronousMethod = true)
+    override fun getTypedConstants(): WritableMap {
+        val c = cachedConstants
         val constants: WritableMap = Arguments.createMap()
-        constants.putBoolean("androidIsDeviceSecure", isDeviceSecure)
+        constants.putBoolean("androidIsDeviceSecure", c.isDeviceSecure)
         constants.putBoolean("androidIsTestDevice", misTestDevice)
-        constants.putString("appVersionCode", versionCode)
-        constants.putString("appVersionName", versionName)
+        constants.putString("appVersionCode", c.versionCode)
+        constants.putString("appVersionName", c.versionName)
         constants.putBoolean("darkModeSupported", false)
-        constants.putString("fsCacheDir", cacheDir)
-        constants.putString("fsDownloadDir", downloadDir)
-        constants.putString("guiConfig", readGuiConfig())
-        constants.putString("serverConfig", serverConfig)
-        constants.putBoolean("uses24HourClock", DateFormat.is24HourFormat(reactContext))
-        constants.putString("version", version())
+        constants.putString("fsCacheDir", c.cacheDir)
+        constants.putString("fsDownloadDir", c.downloadDir)
+        constants.putString("guiConfig", c.guiConfig)
+        constants.putString("serverConfig", c.serverConfig)
+        constants.putBoolean("uses24HourClock", c.uses24HourClock)
+        constants.putString("version", c.version)
         return constants
     }
 
@@ -290,6 +300,7 @@ class KbModule(reactContext: ReactApplicationContext?) : KbSpec(reactContext), T
         this.reactContext = reactContext!!
         instance = this
         misTestDevice = isTestDevice(reactContext)
+        Thread { cachedConstants }.start()
     }
 
     private fun normalizePath(path: String): String {
@@ -379,10 +390,10 @@ class KbModule(reactContext: ReactApplicationContext?) : KbSpec(reactContext), T
     }
 
     private fun emitPushNotificationInternal(notification: Bundle) {
-        if (reactContext.hasActiveReactInstance()) {
+        if (reactContext.hasActiveReactInstance() && canEmit()) {
             try {
                 val payload = Arguments.fromBundle(notification)
-                reactContext.emitDeviceEvent("onPushNotification", payload)
+                emitOnPushNotification(payload)
             } catch (e: Exception) {
                 NativeLogger.error("emitPushNotificationInternal failed to emit: " + e.message)
             }
@@ -391,6 +402,18 @@ class KbModule(reactContext: ReactApplicationContext?) : KbSpec(reactContext), T
         }
     }
 
+    internal fun emitShareDataInternal(data: WritableMap) {
+        if (reactContext.hasActiveReactInstance() && canEmit()) {
+            try {
+                emitOnShareData(data)
+            } catch (e: Exception) {
+                NativeLogger.error("emitShareDataInternal failed to emit: " + e.message)
+            }
+        } else {
+            NativeLogger.warn("emitShareDataInternal no active react instance")
+        }
+    }
+
     @ReactMethod
     override fun removeAllPendingNotificationRequests() {
     }
@@ -426,11 +449,19 @@ class KbModule(reactContext: ReactApplicationContext?) : KbSpec(reactContext), T
         promise.resolve(null)
     }
 
+    private fun relayReset() {
+        if (!reactContext.hasActiveReactInstance() || !canEmit()) {
+            NativeLogger.info("$NAME: JS Bridge is dead, Can't send EOF message")
+        } else {
+            emitOnMetaEvent(RPC_META_EVENT_ENGINE_RESET)
+        }
+    }
+
     @ReactMethod
     override fun engineReset() {
         try {
             Keybase.reset()
-            relayReset(reactContext)
+            relayReset()
         } catch (e: Exception) {
             NativeLogger.error("Exception in engineReset", e)
         }
@@ -503,7 +534,7 @@ class KbModule(reactContext: ReactApplicationContext?) : KbSpec(reactContext), T
     fun destroy() {
         try {
             Keybase.reset()
-            relayReset(reactContext)
+            relayReset()
         } catch (e: Exception) {
             NativeLogger.error("Exception in KeybaseEngine.destroy", e)
         }
@@ -538,9 +569,9 @@ class KbModule(reactContext: ReactApplicationContext?) : KbSpec(reactContext), T
     }
 
     private fun sendHardwareKeyEvent(keyName: String) {
-        val params = Arguments.createMap()
-        params.putString("pressedKey", keyName)
-        reactContext.emitDeviceEvent(HW_KEY_EVENT, params)
+        if (canEmit()) {
+            emitOnHardwareKeyPressed(keyName)
+        }
     }
 
     companion object {
@@ -549,11 +580,9 @@ class KbModule(reactContext: ReactApplicationContext?) : KbSpec(reactContext), T
         }
 
         const val NAME: String = "Kb"
-        private const val RPC_META_EVENT_NAME: String = "kb-meta-engine-event"
         private const val RPC_META_EVENT_ENGINE_RESET: String = "kb-engine-reset"
         private const val MAX_TEXT_FILE_SIZE = 100 * 1024 // 100 kiB
         private val LINE_SEPARATOR: String? = System.getProperty("line.separator")
-        private const val HW_KEY_EVENT: String = "hardwareKeyPressed"
 
         var instance: KbModule? = null
         @JvmStatic
@@ -585,6 +614,16 @@ class KbModule(reactContext: ReactApplicationContext?) : KbSpec(reactContext), T
             module.emitPushNotificationInternal(notification)
         }
 
+        @JvmStatic
+        fun emitShareData(data: WritableMap) {
+            val module = instance
+            if (module == null) {
+                android.util.Log.w("KbModule", "emitShareData called but instance is null (app may not be running)")
+                return
+            }
+            module.emitShareDataInternal(data)
+        }
+
         // Is this a robot controlled test device? (i.e. pre-launch report?)
         private fun isTestDevice(context: ReactApplicationContext): Boolean {
             val testLabSetting: String? = Settings.System.getString(context.contentResolver, "firebase.test.lab")
@@ -592,14 +631,5 @@ class KbModule(reactContext: ReactApplicationContext?) : KbSpec(reactContext), T
         }
 
         private const val FILE_PREFIX_BUNDLE_ASSET: String = "bundle-assets://"
-
-        // engine
-        private fun relayReset(reactContext: ReactApplicationContext) {
-            if (!reactContext.hasActiveReactInstance()) {
-                NativeLogger.info("$NAME: JS Bridge is dead, Can't send EOF message")
-            } else {
-                reactContext.emitDeviceEvent(RPC_META_EVENT_NAME, RPC_META_EVENT_ENGINE_RESET)
-            }
-        }
     }
 }
diff --git a/rnmodules/react-native-kb/ios/Kb.h b/rnmodules/react-native-kb/ios/Kb.h
index 09bbbfb1ce94..929434082d22 100644
--- a/rnmodules/react-native-kb/ios/Kb.h
+++ b/rnmodules/react-native-kb/ios/Kb.h
@@ -2,14 +2,14 @@
 #import "react-native-kb.h"
 #endif
 
-#import <React/RCTEventEmitter.h>
+#import <React/RCTInvalidating.h>
 #import <foundation/Foundation.h>
 
 #ifdef RCT_NEW_ARCH_ENABLED
 #import <RNKbSpec/RNKbSpec.h>
 #import <React/RCTCallInvokerModule.h>
 #import <ReactCommon/RCTTurboModuleWithJSIBindings.h>
-@interface Kb : RCTEventEmitter <NativeKbSpec,RCTCallInvokerModule,RCTTurboModuleWithJSIBindings>
+@interface Kb : NativeKbSpecBase <NativeKbSpec,RCTCallInvokerModule,RCTTurboModuleWithJSIBindings,RCTInvalidating>
 @end
 #else
 #endif // RCT_NEW_ARCH_ENABLED
diff --git a/rnmodules/react-native-kb/ios/Kb.mm b/rnmodules/react-native-kb/ios/Kb.mm
index 2b12f73490bb..6db15cbe7a7c 100644
--- a/rnmodules/react-native-kb/ios/Kb.mm
+++ b/rnmodules/react-native-kb/ios/Kb.mm
@@ -33,7 +33,6 @@ + (id)sharedFsPathsHolder {
 
 @end
 
-static NSString *const metaEventName = @"kb-meta-engine-event";
 static NSString *const metaEventEngineReset = @"kb-engine-reset";
 
 static __weak Kb *kbSharedInstance = nil;
@@ -41,6 +40,86 @@ + (id)sharedFsPathsHolder {
 static NSString *kbStoredDeviceToken = nil;
 static NSDictionary *kbInitialNotification = nil;
 
+// from react-native-localize
+static bool kbUses24HourClockForLocale(NSLocale *_Nonnull locale) {
+  NSDateFormatter *formatter = [NSDateFormatter new];
+
+  [formatter setLocale:locale];
+  [formatter setTimeZone:[NSTimeZone timeZoneForSecondsFromGMT:0]];
+  [formatter setDateStyle:NSDateFormatterNoStyle];
+  [formatter setTimeStyle:NSDateFormatterShortStyle];
+
+  NSDate *date = [NSDate dateWithTimeIntervalSince1970:72000];
+  return [[formatter stringFromDate:date] containsString:@"20"];
+}
+
+static NSString *kbSetupServerConfig(void) {
+  NSArray *paths = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES);
+  NSString *cachePath = [paths objectAtIndex:0];
+  NSString *filePath = [cachePath stringByAppendingPathComponent:@"/Keybase/keybase.app.serverConfig"];
+  NSError *err;
+  NSString *val = [NSString stringWithContentsOfFile:filePath
+                                            encoding:NSUTF8StringEncoding
+                                               error:&err];
+  if (err != nil || val == nil) {
+    return @"";
+  }
+  return val;
+}
+
+static NSString *kbSetupGuiConfig(void) {
+  NSString *filePath = [[[FsPathsHolder sharedFsPathsHolder] fsPaths][@"sharedHome"]
+          stringByAppendingPathComponent: @"/Library/Application Support/Keybase/gui_config.json"];
+  NSError *err;
+  NSString *val = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:&err];
+  if (err != nil || val == nil) {
+    return @"";
+  }
+  return val;
+}
+
+// Built once; safe because fsPaths and KeybaseInit are set up in the app
+// delegate before React Native creates this module.
+static NSDictionary *kbConstants(void) {
+  static NSDictionary *constants = nil;
+  static dispatch_once_t onceToken;
+  dispatch_once(&onceToken, ^{
+    NSString *serverConfig = kbSetupServerConfig();
+    NSString *guiConfig = kbSetupGuiConfig();
+
+    NSString *appVersionString = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleShortVersionString"];
+    if (appVersionString == nil) {
+      appVersionString = @"";
+    }
+    NSString *appBuildString = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleVersion"];
+    if (appBuildString == nil) {
+      appBuildString = @"";
+    }
+    NSLocale *currentLocale = [NSLocale currentLocale];
+    NSString *cacheDir = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) firstObject];
+    NSString *downloadDir = [NSSearchPathForDirectoriesInDomains(NSDownloadsDirectory, NSUserDomainMask, YES) firstObject];
+
+    NSString *kbVersion = KeybaseVersion();
+    if (kbVersion == nil) {
+      kbVersion = @"";
+    }
+    constants = @{
+      @"androidIsDeviceSecure" : @NO,
+      @"androidIsTestDevice" : @NO,
+      @"appVersionCode" : appBuildString,
+      @"appVersionName" : appVersionString,
+      @"darkModeSupported" : @YES,
+      @"fsCacheDir" : cacheDir,
+      @"fsDownloadDir" : downloadDir,
+      @"guiConfig" : guiConfig,
+      @"serverConfig" : serverConfig,
+      @"uses24HourClock" : @(kbUses24HourClockForLocale(currentLocale)),
+      @"version" : kbVersion
+    };
+  });
+  return constants;
+}
+
 @interface Kb ()
 @property dispatch_queue_t readQueue;
 @end
@@ -56,6 +135,12 @@ + (BOOL)requiresMainQueueSetup {
   return YES;
 }
 
+// _eventEmitterCallback is only set once JS creates the TurboModule; emitting
+// through the generated helpers before then would call a null std::function.
+- (BOOL)canEmit {
+  return _eventEmitterCallback != nullptr;
+}
+
 - (instancetype)init {
   self = [super init];
   kbSharedInstance = self;
@@ -65,6 +150,11 @@ - (instancetype)init {
                                                name:@"hardwareKeyPressed"
                                              object:nil];
   [Kb swizzleUITextViewPaste];
+  // getTypedConstants is a blocking synchronous JS call that does file I/O;
+  // warm the cache off the main/JS threads so startup doesn't stall on disk.
+  dispatch_async(dispatch_get_global_queue(QOS_CLASS_USER_INITIATED, 0), ^{
+    (void)kbConstants();
+  });
   return self;
 }
 
@@ -91,7 +181,7 @@ + (void)handlePastedImages:(NSArray<UIImage *> *)images {
   if (!kbSharedInstance || images.count == 0) return;
 
   // Encoding and writing pasted images can be slow for large images; keep it
-  // off the main thread. sendEventWithName is safe to call from any thread.
+  // off the main thread. The emit helpers are safe to call from any thread.
   dispatch_async(dispatch_get_global_queue(QOS_CLASS_USER_INITIATED, 0), ^{
     NSMutableArray *uris = [NSMutableArray array];
     for (UIImage *rawImage in images) {
@@ -118,7 +208,10 @@ + (void)handlePastedImages:(NSArray<UIImage *> *)images {
     }
 
     if (uris.count > 0) {
-      [kbSharedInstance sendEventWithName:@"onPasteImage" body:@{@"uris": uris}];
+      Kb *instance = kbSharedInstance;
+      if (instance && [instance canEmit]) {
+        [instance emitOnPasteImage:uris];
+      }
     }
   });
 }
@@ -131,16 +224,11 @@ - (void)invalidate {
     kbBridge_->teardown();
     kbBridge_.reset();
   }
-  [super invalidate];
   self.readQueue = nil;
   NSError *error = nil;
   KeybaseReset(&error);
 }
 
-- (NSArray<NSString *> *)supportedEvents {
-return @[ metaEventName, @"hardwareKeyPressed", @"onPasteImage", @"onPushNotification", @"onPushToken" ];
-}
-
 RCT_EXPORT_METHOD(setEnablePasteImage:(BOOL)enabled) {
   kbPasteImageEnabled = enabled;
 }
@@ -176,81 +264,8 @@ - (void)installJSIBindingsWithRuntime:(jsi::Runtime &)runtime
                          [[NSDate date] timeIntervalSince1970] * 1000]);
 }
 
-// from react-native-localize
-- (bool)uses24HourClockForLocale:(NSLocale *_Nonnull)locale {
-  NSDateFormatter *formatter = [NSDateFormatter new];
-
-  [formatter setLocale:locale];
-  [formatter setTimeZone:[NSTimeZone timeZoneForSecondsFromGMT:0]];
-  [formatter setDateStyle:NSDateFormatterNoStyle];
-  [formatter setTimeStyle:NSDateFormatterShortStyle];
-
-  NSDate *date = [NSDate dateWithTimeIntervalSince1970:72000];
-  return [[formatter stringFromDate:date] containsString:@"20"];
-}
-
-- (NSString *)setupServerConfig {
-  NSArray *paths = NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES);
-  NSString *cachePath = [paths objectAtIndex:0];
-  NSString *filePath = [cachePath stringByAppendingPathComponent:@"/Keybase/keybase.app.serverConfig"];
-  NSError *err;
-  NSString *val = [NSString stringWithContentsOfFile:filePath
-                                            encoding:NSUTF8StringEncoding
-                                               error:&err];
-  if (err != nil || val == nil) {
-    return @"";
-  }
-  return val;
-}
-
-- (NSString *)setupGuiConfig {
-  NSString *filePath = [[[FsPathsHolder sharedFsPathsHolder] fsPaths][@"sharedHome"]
-          stringByAppendingPathComponent: @"/Library/Application Support/Keybase/gui_config.json"];
-  NSError *err;
-  NSString *val = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:&err];
-  if (err != nil || val == nil) {
-    return @"";
-  }
-  return val;
-}
-
- - (NSDictionary *)getConstants {
-     return @{};
- }
-
 RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(getTypedConstants) {
-  NSString *serverConfig = [self setupServerConfig];
-  NSString *guiConfig = [self setupGuiConfig];
-
-  NSString *appVersionString = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleShortVersionString"];
-  if (appVersionString == nil) {
-    appVersionString = @"";
-  }
-  NSString *appBuildString = [[NSBundle mainBundle] objectForInfoDictionaryKey:@"CFBundleVersion"];
-  if (appBuildString == nil) {
-    appBuildString = @"";
-  }
-  NSLocale *currentLocale = [NSLocale currentLocale];
-  NSString *cacheDir = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) firstObject];
-  NSString *downloadDir = [NSSearchPathForDirectoriesInDomains(NSDownloadsDirectory, NSUserDomainMask, YES) firstObject];
-
-  NSString *kbVersion = KeybaseVersion();
-  if (kbVersion == nil) {
-    kbVersion = @"";
-  }
-  return @{
-    @"androidIsDeviceSecure" : @NO,
-    @"androidIsTestDevice" : @NO,
-    @"appVersionCode" : appBuildString,
-    @"appVersionName" : appVersionString,
-    @"darkModeSupported" : @YES,
-    @"fsCacheDir" : cacheDir,
-    @"fsDownloadDir" : downloadDir,
-    @"guiConfig" : guiConfig,
-    @"serverConfig" : serverConfig,
-    @"uses24HourClock" : @([self uses24HourClockForLocale:currentLocale]),
-    @"version" : kbVersion
-  };
+  return kbConstants();
 }
 
 RCT_EXPORT_METHOD(shareListenersRegistered) {
@@ -259,7 +274,9 @@ - (NSDictionary *)getConstants {
 RCT_EXPORT_METHOD(engineReset) {
   NSError *error = nil;
   KeybaseReset(&error);
-  [self sendEventWithName:metaEventName body:metaEventEngineReset];
+  if ([self canEmit]) {
+    [self emitOnMetaEvent:metaEventEngineReset];
+  }
   if (error) {
     NSLog(@"Error in reset: %@", error);
   }
@@ -465,8 +482,9 @@ - (NSDictionary *)getConstants {
 + (void)setDeviceToken:(NSString *)token {
   kbStoredDeviceToken = token;
   dispatch_async(dispatch_get_main_queue(), ^{
-    if (kbSharedInstance && token) {
-      [kbSharedInstance sendEventWithName:@"onPushToken" body:@{@"token": token}];
+    Kb *instance = kbSharedInstance;
+    if (instance && token && [instance canEmit]) {
+      [instance emitOnPushToken:token];
     }
   });
 }
@@ -476,38 +494,25 @@ + (void)setInitialNotification:(NSDictionary *)notification {
 }
 
 + (void)emitPushNotification:(NSDictionary *)notification {
-  if (kbSharedInstance) {
-    [kbSharedInstance sendEventWithName:@"onPushNotification" body:notification];
+  Kb *instance = kbSharedInstance;
+  if (instance && [instance canEmit]) {
+    [instance emitOnPushNotification:notification];
     NSLog(@"Kb.emitPushNotification: sent event 'onPushNotification' to JS");
   } else {
-    NSLog(@"Kb.emitPushNotification: WARNING - kbSharedInstance is nil, event not sent");
+    NSLog(@"Kb.emitPushNotification: WARNING - module not ready, event not sent");
   }
 }
 
 - (void)handleHardwareKeyPressed:(NSNotification *)notification {
   NSString *keyName = notification.userInfo[@"pressedKey"];
-  if (keyName) {
-    NSDictionary *event = @{@"pressedKey": keyName};
-    [self sendEventWithName:@"hardwareKeyPressed" body:event];
+  if (keyName && [self canEmit]) {
+    [self emitOnHardwareKeyPressed:keyName];
   }
 }
 
-RCT_EXPORT_METHOD(keyPressed:(NSString *)keyName) {
-  NSDictionary *event = @{@"pressedKey": keyName};
-  [self sendEventWithName:@"hardwareKeyPressed" body:event];
-}
-
-- (NSNumber *)androidCheckPushPermissions {return @-1;}
-- (NSNumber *)androidRequestPushPermissions {return @-1;}
-- (NSNumber *)androidShare:(NSString *)text mimeType:(NSString *)mimeType {return @-1;}
-- (NSNumber *)androidShareText:(NSString *)text mimeType:(NSString *)mimeType {return @-1;}
-- (NSString *)androidGetRegistrationToken {return @"";}
+// Android-only spec methods; stubs satisfy the NativeKbSpec protocol
 - (void)androidAddCompleteDownload:(JS::NativeKb::SpecAndroidAddCompleteDownloadO &)o resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {}
 - (void)androidAppColorSchemeChanged:(NSString *)mode {}
-- (void)androidCheckPushPermissions:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {}
-- (void)androidGetRegistrationToken:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {}
-- (void)androidRequestPushPermissions:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject{}
-- (void)androidSetApplicationIconBadgeNumber:(double)n {}
 - (void)androidShare:(NSString *)text mimeType:(NSString *)mimeType resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {}
 - (void)androidShareText:(NSString *)text mimeType:(NSString *)mimeType resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject {}
 @end
diff --git a/rnmodules/react-native-kb/src/NativeKb.ts b/rnmodules/react-native-kb/src/NativeKb.ts
index c560898004b9..47dd98ad02c5 100644
--- a/rnmodules/react-native-kb/src/NativeKb.ts
+++ b/rnmodules/react-native-kb/src/NativeKb.ts
@@ -1,8 +1,13 @@
 import {TurboModuleRegistry, type TurboModule} from 'react-native'
+import type {EventEmitter, UnsafeObject} from 'react-native/Libraries/Types/CodegenTypes'
 
 export interface Spec extends TurboModule {
-  addListener: (eventType: string) => void
-  removeListeners: (count: number) => void
+  readonly onMetaEvent: EventEmitter<string>
+  readonly onHardwareKeyPressed: EventEmitter<string>
+  readonly onPasteImage: EventEmitter<Array<string>>
+  readonly onPushNotification: EventEmitter<UnsafeObject>
+  readonly onPushToken: EventEmitter<string>
+  readonly onShareData: EventEmitter<{text?: string; localPaths?: Array<string>}>
   getTypedConstants(): {
     androidIsDeviceSecure: boolean
     androidIsTestDevice: boolean
diff --git a/rnmodules/react-native-kb/src/index.tsx b/rnmodules/react-native-kb/src/index.tsx
index d460a717a7f0..93dd558cd7ba 100644
--- a/rnmodules/react-native-kb/src/index.tsx
+++ b/rnmodules/react-native-kb/src/index.tsx
@@ -1,4 +1,5 @@
-import {Platform, NativeEventEmitter, type EmitterSubscription} from 'react-native'
+import {Platform} from 'react-native'
+import type {EventSubscription} from 'react-native'
 import KbNative from './NativeKb'
 
 const Kb = KbNative
@@ -83,11 +84,10 @@ export const addNotificationRequest = (config: {body: string; id: string}): Prom
 }
 
 // Hardware keyboard events
-const hwKeyPressedListeners: Array<EmitterSubscription> = []
+const hwKeyPressedListeners: Array<EventSubscription> = []
 
 export const onHWKeyPressed = (callback: (event: {pressedKey: string}) => void): void => {
-  const emitter = getNativeEmitter()
-  const listener = emitter.addListener('hardwareKeyPressed', callback)
+  const listener = Kb.onHardwareKeyPressed(pressedKey => callback({pressedKey}))
   hwKeyPressedListeners.push(listener)
 }
 
@@ -101,10 +101,7 @@ let pasteImageListenerCount = 0
 
 export const registerPasteImage = (callback: (uris: Array<string>) => void): (() => void) => {
   if (Platform.OS !== 'ios') return () => {}
-  const emitter = getNativeEmitter()
-  const listener = emitter.addListener('onPasteImage', (event: {uris: Array<string>}) => {
-    callback(event.uris)
-  })
+  const listener = Kb.onPasteImage(uris => callback(uris))
   pasteImageListenerCount++
   Kb.setEnablePasteImage(true)
   return () => {
@@ -114,6 +111,27 @@ export const registerPasteImage = (callback: (uris: Array<string>) => void): (()
   }
 }
 
+// Engine meta events (e.g. 'kb-engine-reset')
+export const onMetaEvent = (callback: (payload: string) => void): EventSubscription => {
+  return Kb.onMetaEvent(callback)
+}
+
+// Push events
+export const onPushNotification = (callback: (notification: object) => void): EventSubscription => {
+  return Kb.onPushNotification(n => callback(n))
+}
+
+export const onPushToken = (callback: (token: string) => void): EventSubscription => {
+  return Kb.onPushToken(callback)
+}
+
+// Android share-into-app intents
+export const onShareData = (
+  callback: (evt: {text?: string; localPaths?: Array<string>}) => void
+): EventSubscription => {
+  return Kb.onShareData(callback)
+}
+
 export const engineReset = (): void => {
   return Kb.engineReset()
 }
@@ -128,12 +146,6 @@ export const clearLocalLogs = (): Promise<void> => {
   return Kb.clearLocalLogs()
 }
 
-let nativeEmitter: NativeEventEmitter | undefined
-export const getNativeEmitter = () => {
-  nativeEmitter ??= new NativeEventEmitter(Kb as any)
-  return nativeEmitter
-}
-
 const KBC = Kb.getTypedConstants()
 export const androidIsDeviceSecure: boolean = KBC.androidIsDeviceSecure
 export const androidIsTestDevice: boolean = KBC.androidIsTestDevice
diff --git a/shared/android/app/src/main/java/io/keybase/ossifrage/MainActivity.kt b/shared/android/app/src/main/java/io/keybase/ossifrage/MainActivity.kt
index 840bbe3a74d5..93f0c0045992 100644
--- a/shared/android/app/src/main/java/io/keybase/ossifrage/MainActivity.kt
+++ b/shared/android/app/src/main/java/io/keybase/ossifrage/MainActivity.kt
@@ -288,9 +288,7 @@ class MainActivity : ReactActivity() {
                 handledIntentHash = intentHash
                 NativeLogger.info("MainActivity.handleIntent processing notification: $intentHash")
 
-                // If there are any other bundle sources we care about, emit them here
-                rc.emitDeviceEvent("initialIntentFromNotification", Arguments.fromBundle(bundleFromNotification))
-                rc.emitDeviceEvent("onPushNotification", Arguments.fromBundle(bundleFromNotification))
+                KbModule.emitPushNotification(bundleFromNotification)
             }
 
             intent.removeExtra("notification")
@@ -314,10 +312,10 @@ class MainActivity : ReactActivity() {
 
             if (isTextMime && textPayload.isNotEmpty()) {
                 // Text-type intent (e.g. URL from Chrome): prefer text over any preview images
-                emitShareText(rc, text ?: textPayload)
+                emitShareText(text ?: textPayload)
             } else if (uris.isEmpty()) {
                 if (textPayload.isNotEmpty()) {
-                    emitShareText(rc, textPayload)
+                    emitShareText(textPayload)
                 }
             } else {
                 // Copying out of the content providers can be slow for big files; don't
@@ -331,12 +329,12 @@ class MainActivity : ReactActivity() {
                         }
                     }
                     if (filePaths.isNotEmpty()) {
-                        emitShareFiles(rc, filePaths)
+                        emitShareFiles(filePaths)
                     } else if (textPayload.isNotEmpty()) {
                         // Fallback: non-text MIME but no files resolved, send text
-                        emitShareText(rc, textPayload)
+                        emitShareText(textPayload)
                     } else {
-                        emitShareFiles(rc, emptyList())
+                        emitShareFiles(emptyList())
                     }
                 }.start()
             }
@@ -346,20 +344,20 @@ class MainActivity : ReactActivity() {
         return true
     }
 
-    private fun emitShareText(rc: ReactContext, text: String) {
+    private fun emitShareText(text: String) {
         val args = Arguments.createMap()
         args.putString("text", text)
-        rc.emitDeviceEvent("onShareData", args)
+        KbModule.emitShareData(args)
     }
 
-    private fun emitShareFiles(rc: ReactContext, paths: List<String>) {
+    private fun emitShareFiles(paths: List<String>) {
         val args = Arguments.createMap()
         val lPaths = Arguments.createArray()
         for (path in paths) {
             lPaths.pushString(path)
         }
         args.putArray("localPaths", lPaths)
-        rc.emitDeviceEvent("onShareData", args)
+        KbModule.emitShareData(args)
     }
 
     override fun getMainComponentName(): String = "Keybase"
diff --git a/shared/app/index.native.tsx b/shared/app/index.native.tsx
index ae59e4e0d555..71bf95c6b461 100644
--- a/shared/app/index.native.tsx
+++ b/shared/app/index.native.tsx
@@ -6,14 +6,13 @@ import * as React from 'react'
 import Main from './main'
 import {KeyboardProvider} from 'react-native-keyboard-controller'
 import Animated, {ReducedMotionConfig, ReduceMotion} from 'react-native-reanimated'
-import {AppRegistry, AppState, Appearance, Keyboard, Platform} from 'react-native'
+import {AppRegistry, AppState, Appearance, Platform} from 'react-native'
 import {PortalProvider} from '@/common-adapters/portal.native'
 import {SafeAreaProvider, initialWindowMetrics} from 'react-native-safe-area-context'
 import {makeEngine} from '../engine'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
 import {enableFreeze} from 'react-native-screens'
 import {Image as ExpoImage} from 'expo-image'
-import {setKeyboardUp} from '@/styles/keyboard-state'
 import {setServiceDecoration} from '@/common-adapters/markdown/react'
 import ServiceDecoration from '@/common-adapters/markdown/service-decoration'
 import {useUnmountAll} from '@/util/debug-react'
@@ -88,33 +87,9 @@ const useDarkHookup = () => {
   }, [setSystemDarkMode, setMobileAppState])
 }
 
-const useKeyboardHookup = () => {
-  React.useEffect(() => {
-    const kbSubWS = Keyboard.addListener('keyboardWillShow', () => {
-      setKeyboardUp(true)
-    })
-    const kbSubDS = Keyboard.addListener('keyboardDidShow', () => {
-      setKeyboardUp(true)
-    })
-    const kbSubWH = Keyboard.addListener('keyboardWillHide', () => {
-      setKeyboardUp(false)
-    })
-    const kbSubDH = Keyboard.addListener('keyboardDidHide', () => {
-      setKeyboardUp(false)
-    })
-    return () => {
-      kbSubWS.remove()
-      kbSubDS.remove()
-      kbSubWH.remove()
-      kbSubDH.remove()
-    }
-  }, [])
-}
-
 const StoreHelper = (p: {children: React.ReactNode}): React.ReactNode => {
   const {children} = p
   useDarkHookup()
-  useKeyboardHookup()
 
   return children
 }
diff --git a/shared/chat/blocking/block-buttons-state.tsx b/shared/chat/blocking/block-buttons-state.tsx
index a8487a41a59c..fab3b76bd0e6 100644
--- a/shared/chat/blocking/block-buttons-state.tsx
+++ b/shared/chat/blocking/block-buttons-state.tsx
@@ -28,11 +28,13 @@ const gregorItemsToBlockButtons = (
 
 type Store = T.Immutable<{
   blockButtonsMap: ReadonlyMap<T.RPCGen.TeamID, T.Chat.BlockButtonsInfo>
+  loadGeneration: number
   loaded: boolean
 }>
 
 const makeInitialStore = (): Store => ({
   blockButtonsMap: new Map(),
+  loadGeneration: 0,
   loaded: false,
 })
 
@@ -46,8 +48,11 @@ type State = Store & {
   }
 }
 
-let loadPromise: Promise<void> | undefined
-let loadGeneration = 0
+// Promises can't live in immer-managed state, so this stays module-level. It's
+// paired with the store's loadGeneration: resetState clears this AND bumps the
+// generation so a load in flight at reset time can't win the race and write
+// into the fresh state after it resolves.
+let activeLoadPromise: Promise<void> | undefined
 
 export const useBlockButtonsState = Z.createZustand<State>('block-buttons', (set, get) => {
   const setFromGregorItems: State['dispatch']['updateFromGregorItems'] = items => {
@@ -59,39 +64,41 @@ export const useBlockButtonsState = Z.createZustand<State>('block-buttons', (set
 
   const dispatch: State['dispatch'] = {
     load: () => {
-      if (get().loaded || loadPromise) {
+      if (get().loaded || activeLoadPromise) {
         return
       }
-      const generation = loadGeneration
+      const generation = get().loadGeneration
       const request = (async () => {
         try {
           const state = await T.RPCGen.gregorGetStateRpcPromise()
-          if (generation === loadGeneration) {
+          if (generation === get().loadGeneration) {
             setFromGregorItems(state.items)
           }
         } catch (error) {
           logger.warn('Failed to load block button state', error)
         }
       })()
-      loadPromise = request
+      activeLoadPromise = request
       ignorePromise(
         request.finally(() => {
-          if (loadPromise === request) {
-            loadPromise = undefined
+          if (activeLoadPromise === request) {
+            activeLoadPromise = undefined
           }
         })
       )
     },
     resetState: () => {
-      loadGeneration++
-      loadPromise = undefined
+      activeLoadPromise = undefined
       set(s => ({
         ...makeInitialStore(),
         dispatch: s.dispatch,
+        loadGeneration: s.loadGeneration + 1,
       }))
     },
     updateFromGregorItems: items => {
-      loadGeneration++
+      set(s => {
+        s.loadGeneration++
+      })
       setFromGregorItems(items)
     },
   }
diff --git a/shared/chat/blocking/invitation-to-block.tsx b/shared/chat/blocking/invitation-to-block.tsx
index 92ba6df5a805..d7c228238557 100644
--- a/shared/chat/blocking/invitation-to-block.tsx
+++ b/shared/chat/blocking/invitation-to-block.tsx
@@ -11,7 +11,9 @@ import {useBlockButtonsInfo} from './block-buttons-state'
 import {
   useConversationThreadID,
   useConversationThreadSelector,
+  useThreadMeta,
 } from '../conversation/thread-context'
+import {useConversationParticipants} from '../conversation/data-hooks'
 
 const dismissBlockButtons = (teamID: T.RPCGen.TeamID) => {
   const f = async () => {
@@ -29,17 +31,16 @@ const dismissBlockButtons = (teamID: T.RPCGen.TeamID) => {
 const BlockButtons = () => {
   const navigateAppend = C.Router2.navigateAppend
   const conversationIDKey = useConversationThreadID()
-  const {messageMap, messageOrdinals, participantInfo, team, teamID, tlfname} =
-    useConversationThreadSelector(
-      C.useShallow(s => ({
-        messageMap: s.messageMap,
-        messageOrdinals: s.messageOrdinals,
-        participantInfo: s.participants,
-        team: s.meta.teamname,
-        teamID: s.meta.teamID,
-        tlfname: s.meta.tlfname,
-      }))
-    )
+  const {messageMap, messageOrdinals} = useConversationThreadSelector(
+    C.useShallow(s => ({
+      messageMap: s.messageMap,
+      messageOrdinals: s.messageOrdinals,
+    }))
+  )
+  const {team, teamID, tlfname} = useThreadMeta(
+    C.useShallow(m => ({team: m.teamname, teamID: m.teamID, tlfname: m.tlfname}))
+  )
+  const participantInfo = useConversationParticipants(conversationIDKey)
   const blockButtonInfo = useBlockButtonsInfo(teamID)
   const currentUser = useCurrentUserState(s => s.username)
   const hasOwnMessage =
diff --git a/shared/chat/conversation/attachment-fullscreen/index.tsx b/shared/chat/conversation/attachment-fullscreen/index.tsx
index 6b233ff19d18..4fe36fa1d25c 100644
--- a/shared/chat/conversation/attachment-fullscreen/index.tsx
+++ b/shared/chat/conversation/attachment-fullscreen/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import {useMessagePopup} from '../messages/message-popup'
 import logger from '@/logger'
 
@@ -100,7 +101,15 @@ const DesktopFullscreen = (p: Props) => {
   } as StyleOverride
 
   return (
-    <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
+    // collapsable={false}: Fabric view-flattening would drop this Box2 (and its
+    // testID) from the native tree, breaking e2e lookup on iOS
+    <Kb.Box2
+      direction="vertical"
+      fullWidth={true}
+      fullHeight={true}
+      testID={TestIDs.CHAT_ATTACHMENT_FULLSCREEN}
+      collapsable={false}
+    >
       <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.headerFooter}>
         <Kb.Markdown lineClamp={2} style={Kb.Styles.globalStyles.flexOne} styleOverride={titleOverride}>
           {title}
@@ -354,12 +363,16 @@ const NativeFullscreen = (p: Props) => {
   }
 
   return (
+    // collapsable={false}: Fabric view-flattening would drop this Box2 (and its
+    // testID) from the native tree, breaking e2e lookup on iOS
     <Kb.Box2
       direction="vertical"
       relative={true}
       style={{backgroundColor: Kb.Styles.globalColors.blackOrBlack}}
       fullWidth={true}
       fullHeight={true}
+      testID={TestIDs.CHAT_ATTACHMENT_FULLSCREEN}
+      collapsable={false}
     >
       {spinner}
       <ShowToastAfterSaving transferState={message.transferState} />
diff --git a/shared/chat/conversation/bot/install.tsx b/shared/chat/conversation/bot/install.tsx
index c1ebc0a9eb96..3c8136f05c56 100644
--- a/shared/chat/conversation/bot/install.tsx
+++ b/shared/chat/conversation/bot/install.tsx
@@ -11,10 +11,11 @@ import {openURL} from '@/util/misc'
 import * as T from '@/constants/types'
 import {useAllChannelMetas} from '@/teams/common/channel-hooks'
 import {useFeaturedBot} from '@/util/featured-bots'
+import {useRPCLoad} from '@/util/use-rpc-load'
 import {RPCError} from '@/util/errors'
 import logger from '@/logger'
 import {useBotSettings} from './settings'
-import {getInboxConversationMeta, metasReceived, participantInfoReceived} from '@/chat/inbox/metadata'
+import {metasReceived, participantInfoReceived} from '@/chat/inbox/metadata'
 import {useConversationMeta} from '../data-hooks'
 
 const RestrictedItem = '---RESTRICTED---'
@@ -42,8 +43,7 @@ export const useRefreshBotMembershipOnSuccess = (
           preview => {
             participantInfoReceived(
               conversationIDKey,
-              ChatCommon.uiParticipantsToParticipantInfo(preview.conv.participants ?? []),
-              getInboxConversationMeta(conversationIDKey)
+              ChatCommon.uiParticipantsToParticipantInfo(preview.conv.participants ?? [])
             )
             onSuccess()
           },
@@ -66,103 +66,48 @@ export const useRefreshBotMembershipOnSuccess = (
 
 export const useBotConversationIDKey = (inConvIDKey?: T.Chat.ConversationIDKey, teamID?: T.Teams.TeamID) => {
   const cleanInConvIDKey = T.Chat.isValidConversationIDKey(inConvIDKey ?? '') ? inConvIDKey : undefined
-  const [generalConversation, setGeneralConversation] = React.useState<
-    | {
-        conversationIDKey: T.Chat.ConversationIDKey
-        teamID: T.Teams.TeamID
-      }
-    | undefined
-  >()
-  const findGeneralConvIDFromTeamID = C.useRPC(T.RPCChat.localFindGeneralConvFromTeamIDRpcPromise)
-  const requestIDRef = React.useRef(0)
-  const conversationIDKey =
-    cleanInConvIDKey ??
-    (generalConversation && generalConversation.teamID === teamID
-      ? generalConversation.conversationIDKey
-      : undefined)
-
-  React.useEffect(() => {
-    requestIDRef.current += 1
-    if (cleanInConvIDKey || !teamID) {
-      return
-    }
-    const requestID = requestIDRef.current
-    findGeneralConvIDFromTeamID(
-      [{teamID}],
-      conv => {
-        if (requestIDRef.current !== requestID) {
-          return
-        }
+  const {data: generalConvIDKey} = useRPCLoad(
+    T.RPCChat.localFindGeneralConvFromTeamIDRpcPromise,
+    [{teamID: teamID ?? T.Teams.noTeamID}],
+    {
+      enabled: !cleanInConvIDKey && !!teamID,
+      key: teamID ?? T.Teams.noTeamID,
+      map: conv => {
         const meta = Meta.inboxUIItemToConversationMeta(conv)
         if (!meta) {
-          return
+          return undefined
         }
         metasReceived([meta])
-        setGeneralConversation({conversationIDKey: meta.conversationIDKey, teamID})
+        return meta.conversationIDKey
       },
-      () => {}
-    )
-    return () => {
-      if (requestIDRef.current === requestID) {
-        requestIDRef.current += 1
-      }
     }
-  }, [cleanInConvIDKey, findGeneralConvIDFromTeamID, teamID])
-  return conversationIDKey
+  )
+  return cleanInConvIDKey ?? generalConvIDKey
 }
 
 export const useBotTeamRole = (
   conversationIDKey: T.Chat.ConversationIDKey | undefined,
   botUsername: string
 ) => {
-  const [loaded, setLoaded] = React.useState<
-    | {
-        botUsername: string
-        conversationIDKey: T.Chat.ConversationIDKey
-        teamRole?: T.Teams.TeamRoleType
-      }
-    | undefined
-  >()
-  const loadBotTeamRole = C.useRPC(T.RPCChat.localGetTeamRoleInConversationRpcPromise)
-  const requestIDRef = React.useRef(0)
-
-  React.useEffect(() => {
-    requestIDRef.current += 1
-    if (!conversationIDKey) {
-      return undefined
-    }
-    const requestID = requestIDRef.current
-    loadBotTeamRole(
-      [{convID: T.Chat.keyToConversationID(conversationIDKey), username: botUsername}],
-      role => {
-        if (requestIDRef.current !== requestID) {
-          return
-        }
+  const {data: teamRole} = useRPCLoad(
+    T.RPCChat.localGetTeamRoleInConversationRpcPromise,
+    [
+      {
+        convID: conversationIDKey ? T.Chat.keyToConversationID(conversationIDKey) : new Uint8Array(),
+        username: botUsername,
+      },
+    ],
+    {
+      enabled: !!conversationIDKey,
+      key: `${conversationIDKey ?? ''}:${botUsername}`,
+      map: role => {
         const teamRole = Teams.teamRoleByEnum[role]
-        setLoaded({
-          botUsername,
-          conversationIDKey,
-          teamRole: teamRole === 'none' ? undefined : teamRole,
-        })
+        return teamRole === 'none' ? undefined : teamRole
       },
-      error => {
-        if (requestIDRef.current !== requestID) {
-          return
-        }
-        logger.info(`useBotTeamRole: failed to refresh bot team role: ${error.message}`)
-        setLoaded({botUsername, conversationIDKey})
-      }
-    )
-    return () => {
-      if (requestIDRef.current === requestID) {
-        requestIDRef.current += 1
-      }
+      onError: error => logger.info(`useBotTeamRole: failed to refresh bot team role: ${error.message}`),
     }
-  }, [botUsername, conversationIDKey, loadBotTeamRole])
-
-  return loaded && loaded.conversationIDKey === conversationIDKey && loaded.botUsername === botUsername
-    ? loaded.teamRole
-    : undefined
+  )
+  return conversationIDKey ? teamRole : undefined
 }
 
 type LoaderProps = {
@@ -673,9 +618,7 @@ const InstallBotPopup = (props: Props) => {
     ) : enabled ? (
       content
     ) : (
-      <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} centerChildren={true}>
-        <Kb.ProgressIndicator type="Large" />
-      </Kb.Box2>
+      <Kb.LoadingScreen type="Large" />
     )
   return (
     <>
diff --git a/shared/chat/conversation/bottom-banner.tsx b/shared/chat/conversation/bottom-banner.tsx
index 09685440215d..1d8e16b66786 100644
--- a/shared/chat/conversation/bottom-banner.tsx
+++ b/shared/chat/conversation/bottom-banner.tsx
@@ -8,10 +8,8 @@ import {assertionToDisplay} from '@/common-adapters/usernames'
 import {useUsersState} from '@/stores/users'
 import {useFollowerState} from '@/stores/followers'
 import {showShareActionSheet} from '@/util/platform-specific'
-import {
-  useConversationThreadID,
-  useConversationThreadSelector,
-} from './thread-context'
+import {useConversationThreadID, useThreadMeta} from './thread-context'
+import {useConversationParticipants} from './data-hooks'
 
 type Store = T.Immutable<{
   inviteBannerDismissed: Set<T.Chat.ConversationIDKey>
@@ -48,7 +46,8 @@ const installMessage = `I sent you encrypted messages on Keybase. You can instal
 
 const Invite = (props: {onDismiss: () => void}) => {
   const linkUrlProps = Kb.useClickURL('https://keybase.io/app')
-  const participantInfo = useConversationThreadSelector(s => s.participants)
+  const conversationIDKey = useConversationThreadID()
+  const participantInfo = useConversationParticipants(conversationIDKey)
   const participantInfoAll = participantInfo.all
   const users = participantInfoAll.filter(p => p.includes('@'))
 
@@ -145,9 +144,8 @@ const BannerContainerInner = function BannerContainerInner(props: {
       dismissed: s.inviteBannerDismissed.has(conversationIDKey),
     }))
   )
-  const {meta, participantInfo} = useConversationThreadSelector(
-    C.useShallow(s => ({meta: s.meta, participantInfo: s.participants}))
-  )
+  const meta = useThreadMeta(C.useShallow(m => ({isEmpty: m.isEmpty, teamType: m.teamType})))
+  const participantInfo = useConversationParticipants(conversationIDKey)
   if (meta.teamType !== 'adhoc') {
     return null
   }
diff --git a/shared/chat/conversation/center-context.tsx b/shared/chat/conversation/center-context.tsx
index aed1cb4c0d29..dace4565f4bc 100644
--- a/shared/chat/conversation/center-context.tsx
+++ b/shared/chat/conversation/center-context.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as T from '@/constants/types'
 import {clearThreadHighlightMessageID} from '@/constants/router'
+import {produce} from 'immer'
 import {useChatThreadRouteParams} from './thread-search-route'
 import {useThreadLoadStatusOptionsGetter} from './thread-load-status-context'
 import {
@@ -21,10 +22,7 @@ type CenterStateContextType = {
 }
 
 type CenterActionsContextType = {
-  centerOnMessage: (
-    messageID: T.Chat.MessageID,
-    highlightMode: T.Chat.CenterOrdinalHighlightMode
-  ) => void
+  centerOnMessage: (messageID: T.Chat.MessageID, highlightMode: T.Chat.CenterOrdinalHighlightMode) => void
   clearCenter: () => void
   jumpToRecent: () => void
 }
@@ -53,19 +51,18 @@ CenterActionsContext.displayName = 'ConversationCenterActionsContext'
 export const useConversationCenter = () => React.useContext(CenterStateContext)
 export const useConversationCenterActions = () => React.useContext(CenterActionsContext)
 
-const stateForThreadSearchVisible = (state: CenterState, threadSearchVisible: boolean): CenterState => {
-  if (state.threadSearchVisible === threadSearchVisible) {
-    return state
-  }
-  return {
-    center: threadSearchVisible
-      ? state.center
-        ? {...state.center, highlightMode: 'none'}
-        : undefined
-      : undefined,
-    threadSearchVisible,
-  }
-}
+const stateForThreadSearchVisible = (state: CenterState, threadSearchVisible: boolean): CenterState =>
+  produce(state, draft => {
+    if (draft.threadSearchVisible === threadSearchVisible) {
+      return
+    }
+    draft.threadSearchVisible = threadSearchVisible
+    if (threadSearchVisible && draft.center) {
+      draft.center.highlightMode = 'none'
+    } else {
+      draft.center = undefined
+    }
+  })
 
 export const ConversationCenterProvider = function ConversationCenterProvider(p: {
   children: React.ReactNode
@@ -91,23 +88,22 @@ export const ConversationCenterProvider = function ConversationCenterProvider(p:
     highlightMode: T.Chat.CenterOrdinalHighlightMode
   ) => {
     const ordinal = T.Chat.numberToOrdinal(T.Chat.messageIDToNumber(messageID))
-    setCenterState(state => ({
-      ...stateForThreadSearchVisible(state, threadSearchVisible),
-      center: {highlightMode, ordinal},
-    }))
+    setCenterState(state =>
+      produce(stateForThreadSearchVisible(state, threadSearchVisible), draft => {
+        draft.center = {highlightMode, ordinal}
+      })
+    )
   }
 
   const clearCenter = () => {
-    setCenterState(state => {
-      const current = stateForThreadSearchVisible(state, threadSearchVisible)
-      return current.center ? {...current, center: undefined} : current
-    })
+    setCenterState(state =>
+      produce(stateForThreadSearchVisible(state, threadSearchVisible), draft => {
+        draft.center = undefined
+      })
+    )
   }
 
-  const centerOnMessage = (
-    messageID: T.Chat.MessageID,
-    highlightMode: T.Chat.CenterOrdinalHighlightMode
-  ) => {
+  const centerOnMessage = (messageID: T.Chat.MessageID, highlightMode: T.Chat.CenterOrdinalHighlightMode) => {
     setCenterForMessage(messageID, highlightMode)
     loadMessagesCentered(messageID, highlightMode, {
       ...getThreadLoadStatusOptions(),
diff --git a/shared/chat/conversation/container.tsx b/shared/chat/conversation/container.tsx
index 6fa4e3d949ce..72525b379156 100644
--- a/shared/chat/conversation/container.tsx
+++ b/shared/chat/conversation/container.tsx
@@ -8,7 +8,7 @@ import Rekey from './rekey/container'
 import type {ThreadSearchRouteProps} from './thread-search-route'
 import type * as T from '@/constants/types'
 import {BadgeHeaderUpdater} from './header-area'
-import {LiveConversationThreadProvider, useConversationThreadID, useConversationThreadSelector} from './thread-context'
+import {LiveConversationThreadProvider, useConversationThreadID, useThreadMeta} from './thread-context'
 
 type Props = ThreadSearchRouteProps & {
   conversationIDKey?: T.Chat.ConversationIDKey
@@ -26,7 +26,13 @@ const Conversation = function Conversation(props: Props) {
 
 const ConversationInner = function ConversationInner() {
   const conversationIDKey = useConversationThreadID()
-  const meta = useConversationThreadSelector(s => s.meta)
+  const meta = useThreadMeta(
+    C.useShallow(m => ({
+      membershipType: m.membershipType,
+      rekeyers: m.rekeyers,
+      trustedState: m.trustedState,
+    }))
+  )
   const type = (() => {
     switch (conversationIDKey) {
       case Chat.noConversationIDKey:
diff --git a/shared/chat/conversation/data-hooks.tsx b/shared/chat/conversation/data-hooks.tsx
index 1de090cc4848..6f99f34061cc 100644
--- a/shared/chat/conversation/data-hooks.tsx
+++ b/shared/chat/conversation/data-hooks.tsx
@@ -1,5 +1,4 @@
 import * as C from '@/constants'
-import * as Common from '@/constants/chat/common'
 import * as Message from '@/constants/chat/message'
 import * as Meta from '@/constants/chat/meta'
 import * as React from 'react'
@@ -9,13 +8,13 @@ import {useEngineActionListener} from '@/engine/action-listener'
 import {ignorePromise} from '@/constants/utils'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useConfigState} from '@/stores/config'
-import {uint8ArrayToString} from '@/util/uint8array'
 import logger from '@/logger'
 import {loadThreadNonblock, markConversationRead} from './thread-rpc'
 import {setConversationOrangeLine} from './orange-line-context'
+import {getExplodingModeFromGregorItems} from './thread-load'
 
 const emptyConversationMeta = Meta.makeConversationMeta()
-const emptyParticipantInfo: T.Chat.ParticipantInfo = {
+export const emptyParticipantInfo: T.Chat.ParticipantInfo = {
   all: [],
   contactName: new Map(),
   name: [],
@@ -129,28 +128,6 @@ export const useConversationMeta = (conversationIDKey: T.Chat.ConversationIDKey)
 export const useConversationParticipants = (conversationIDKey: T.Chat.ConversationIDKey) =>
   useConversationMetadata(conversationIDKey).participants
 
-const getExplodingModeFromGregorItems = (
-  conversationIDKey: T.Chat.ConversationIDKey,
-  items: ReadonlyArray<{item: T.RPCGen.Gregor1.Item}>
-) => {
-  const explodingItems = items.filter(i => i.item.category.startsWith(Common.explodingModeGregorKeyPrefix))
-  if (!explodingItems.length) {
-    return 0
-  }
-  const category = `${Common.explodingModeGregorKeyPrefix}${conversationIDKey}`
-  const item = explodingItems.find(i => i.item.category === category)
-  if (!item) {
-    return undefined
-  }
-  const secondsString = uint8ArrayToString(item.item.body)
-  const seconds = parseInt(secondsString, 10)
-  if (isNaN(seconds)) {
-    logger.warn(`Got dirty exploding mode ${secondsString} for category ${category}`)
-    return undefined
-  }
-  return seconds
-}
-
 export const useConversationExplodingMode = (conversationIDKey: T.Chat.ConversationIDKey) =>
   useConfigState(state => getExplodingModeFromGregorItems(conversationIDKey, state.gregorPushState) ?? 0)
 
@@ -161,31 +138,22 @@ const parseThreadMessages = (conversationIDKey: T.Chat.ConversationIDKey, thread
   if (!thread) {
     return emptyMessages
   }
-  try {
-    const {username, deviceName} = useCurrentUserState.getState()
-    let lastOrdinal = T.Chat.numberToOrdinal(0)
-    const getLastOrdinal = () => lastOrdinal
-    const uiMessages = JSON.parse(thread) as T.RPCChat.UIMessages
-    return (uiMessages.messages ?? []).reduce<Array<T.Chat.Message>>((arr, uiMessage) => {
-      const message = Message.uiMessageToMessage(
-        conversationIDKey,
-        uiMessage,
-        username,
-        getLastOrdinal,
-        deviceName
-      )
-      if (message) {
-        arr.push(message)
-        if (T.Chat.ordinalToNumber(message.ordinal) > T.Chat.ordinalToNumber(lastOrdinal)) {
-          lastOrdinal = message.ordinal
-        }
+  const {username, deviceName} = useCurrentUserState.getState()
+  let lastOrdinal = T.Chat.numberToOrdinal(0)
+  const getLastOrdinal = () => lastOrdinal
+  const {messages} = Message.parseUIMessagesJSON(
+    conversationIDKey,
+    thread,
+    username,
+    deviceName,
+    getLastOrdinal,
+    message => {
+      if (T.Chat.ordinalToNumber(message.ordinal) > T.Chat.ordinalToNumber(lastOrdinal)) {
+        lastOrdinal = message.ordinal
       }
-      return arr
-    }, [])
-  } catch (error) {
-    logger.warn(`parseThreadMessages: failed for ${conversationIDKey}: ${String(error)}`)
-    return emptyMessages
-  }
+    }
+  )
+  return messages
 }
 
 const loadConversationMessagesAroundMessageID = async (
diff --git a/shared/chat/conversation/error.tsx b/shared/chat/conversation/error.tsx
index 867be46841ff..d6e66d409e55 100644
--- a/shared/chat/conversation/error.tsx
+++ b/shared/chat/conversation/error.tsx
@@ -1,8 +1,8 @@
 import * as Kb from '@/common-adapters'
-import {useConversationThreadSelector} from './thread-context'
+import {useThreadMeta} from './thread-context'
 
 const ConversationError = () => {
-  const text = useConversationThreadSelector(s => s.meta.snippet) ?? ''
+  const text = useThreadMeta(m => m.snippet) ?? ''
   return (
     <Kb.Box2 direction="vertical" fullWidth={true} padding="medium" gap="small">
       <Kb.Text type="Header">There was an error loading this conversation.</Kb.Text>
diff --git a/shared/chat/conversation/giphy/index.tsx b/shared/chat/conversation/giphy/index.tsx
index 6762cd2305c0..1a470ba60d17 100644
--- a/shared/chat/conversation/giphy/index.tsx
+++ b/shared/chat/conversation/giphy/index.tsx
@@ -123,9 +123,7 @@ const NativeGiphySearch = () => {
           mediaPlaybackRequiresUserAction={false}
         />
       ) : (
-        <Kb.Box2 direction="vertical" centerChildren={true} fullWidth={true} fullHeight={true}>
-          <Kb.ProgressIndicator />
-        </Kb.Box2>
+        <Kb.LoadingScreen />
       )}
     </Kb.Box2>
   )
diff --git a/shared/chat/conversation/header-area/index.tsx b/shared/chat/conversation/header-area/index.tsx
index cc89274be533..f8aa45319248 100644
--- a/shared/chat/conversation/header-area/index.tsx
+++ b/shared/chat/conversation/header-area/index.tsx
@@ -15,6 +15,7 @@ import {useUsersState} from '@/stores/users'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useConfigState} from '@/stores/config'
 import {navToProfile} from '@/constants/router'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import {showConversationInfoPanel, toggleConversationThreadSearch} from '../thread-context'
 import {useConversationMetadata} from '../data-hooks'
 import {muteConversation} from '../status-actions'
@@ -48,7 +49,7 @@ const HeaderAreaRight = (props: HeaderConversationProps) => {
       style={Kb.Styles.collapseStyles([styles.headerRight, {opacity: pendingWaiting ? 0 : 1}])}
     >
       <Kb.Icon type="iconfont-search" onClick={onToggleThreadSearch} />
-      <Kb.Icon type="iconfont-info" onClick={onShowInfoPanel} />
+      <Kb.Icon type="iconfont-info" onClick={onShowInfoPanel} testID={TestIDs.CHAT_HEADER_INFO_BUTTON} />
     </Kb.Box2>
   )
 }
diff --git a/shared/chat/conversation/info-panel/add-to-channel.tsx b/shared/chat/conversation/info-panel/add-to-channel.tsx
index 018a1b12265a..fe8f3e50a8bb 100644
--- a/shared/chat/conversation/info-panel/add-to-channel.tsx
+++ b/shared/chat/conversation/info-panel/add-to-channel.tsx
@@ -150,16 +150,14 @@ const AddToChannelInner = (props: Props & {conversationIDKey: T.Chat.Conversatio
       </Kb.Box2>
       {isMobile ? null : (
         <Kb.ModalFooter>
-          <Kb.Box2 direction="horizontal" gap="tiny" fullWidth={true}>
-            <Kb.Button type="Dim" label="Cancel" onClick={onClose} style={Kb.Styles.globalStyles.flexOne} />
-            <Kb.Button
-              label={toAdd.size ? `Add ${toAdd.size} ${pluralize('member', toAdd.size)}` : 'Add...'}
-              onClick={onAdd}
-              disabled={!toAdd.size}
-              style={Kb.Styles.globalStyles.flexOne}
-              waiting={waiting}
-            />
-          </Kb.Box2>
+          <Kb.ConfirmButtons
+            split={true}
+            waiting={waiting}
+            onCancel={onClose}
+            onConfirm={onAdd}
+            confirmLabel={toAdd.size ? `Add ${toAdd.size} ${pluralize('member', toAdd.size)}` : 'Add...'}
+            confirmDisabled={!toAdd.size}
+          />
         </Kb.ModalFooter>
       )}
     </>
diff --git a/shared/chat/conversation/info-panel/bot.tsx b/shared/chat/conversation/info-panel/bot.tsx
index 856d5215f800..bb282ab11d9c 100644
--- a/shared/chat/conversation/info-panel/bot.tsx
+++ b/shared/chat/conversation/info-panel/bot.tsx
@@ -4,12 +4,13 @@ import * as Teams from '@/constants/teams'
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import * as T from '@/constants/types'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import {getFeaturedSorted, useFeaturedBotPage} from '@/util/featured-bots'
 import {useUsersState} from '@/stores/users'
 import {useChatTeam, useChatTeamMembers} from '../team-hooks'
 import logger from '@/logger'
 import {useBotSettings} from '../bot/settings'
-import {getInboxConversationMeta, participantInfoReceived} from '@/chat/inbox/metadata'
+import {participantInfoReceived} from '@/chat/inbox/metadata'
 import {useConversationMetadata} from '../data-hooks'
 
 type AddToChannelProps = {
@@ -74,8 +75,7 @@ const AddToChannel = (props: AddToChannelProps) => {
                 preview => {
                   participantInfoReceived(
                     conversationIDKey,
-                    ChatCommon.uiParticipantsToParticipantInfo(preview.conv.participants ?? []),
-                    getInboxConversationMeta(conversationIDKey)
+                    ChatCommon.uiParticipantsToParticipantInfo(preview.conv.participants ?? [])
                   )
                 },
                 () => {}
@@ -157,6 +157,7 @@ export const Bot = (props: BotProps) => {
       containerStyleOverride={styles.listItemContainer}
       onClick={() => onClick(botUsername)}
       type="Large"
+      testID={TestIDs.CHAT_BOT_ROW}
       firstItem={!!firstItem}
       icon={<Kb.Avatar size={isMobile ? 48 : 32} username={botUsername} />}
       hideHover={!!props.hideHover}
@@ -237,8 +238,7 @@ const BotTab = (props: Props) => {
       preview => {
         participantInfoReceived(
           conversationIDKey,
-          ChatCommon.uiParticipantsToParticipantInfo(preview.conv.participants ?? []),
-          getInboxConversationMeta(conversationIDKey)
+          ChatCommon.uiParticipantsToParticipantInfo(preview.conv.participants ?? [])
         )
       },
       () => {}
@@ -262,8 +262,7 @@ const BotTab = (props: Props) => {
       preview => {
         participantInfoReceived(
           conversationIDKey,
-          ChatCommon.uiParticipantsToParticipantInfo(preview.conv.participants ?? []),
-          getInboxConversationMeta(conversationIDKey)
+          ChatCommon.uiParticipantsToParticipantInfo(preview.conv.participants ?? [])
         )
       },
       () => {}
diff --git a/shared/chat/conversation/info-panel/index.tsx b/shared/chat/conversation/info-panel/index.tsx
index 0c61e0f8fc36..bda05022c2b2 100644
--- a/shared/chat/conversation/info-panel/index.tsx
+++ b/shared/chat/conversation/info-panel/index.tsx
@@ -1,5 +1,6 @@
 import * as Chat from '@/constants/chat'
 import * as Kb from '@/common-adapters'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import * as Teams from '@/constants/teams'
 import * as React from 'react'
 import type * as T from '@/constants/types'
@@ -63,7 +64,8 @@ const InfoPanelConnector = ({conversationIDKey: _conversationIDKey, tab}: Props)
       {title: 'members' as const},
       {title: 'attachments' as const},
       {title: 'bots' as const},
-      ...(showSettings ? [{title: 'settings' as const}] : []),
+      // e2e: text taps on the tab label no-op on iOS, so the tab needs a testID
+      ...(showSettings ? [{testID: TestIDs.CHAT_INFO_PANEL_SETTINGS_TAB, title: 'settings' as const}] : []),
     ]
   }
 
@@ -157,7 +159,13 @@ const InfoPanelConnector = ({conversationIDKey: _conversationIDKey, tab}: Props)
     )
   } else {
     return (
-      <Kb.Box2 direction="vertical" style={containerStyle} fullWidth={true} fullHeight={true}>
+      <Kb.Box2
+        direction="vertical"
+        style={containerStyle}
+        fullWidth={true}
+        fullHeight={true}
+        testID={TestIDs.CHAT_INFO_PANEL}
+      >
         {sectionList}
       </Kb.Box2>
     )
diff --git a/shared/chat/conversation/input-area/container.tsx b/shared/chat/conversation/input-area/container.tsx
index d6323fc991e4..5770f0af733f 100644
--- a/shared/chat/conversation/input-area/container.tsx
+++ b/shared/chat/conversation/input-area/container.tsx
@@ -5,16 +5,16 @@ import Normal from './normal'
 import Preview from './preview'
 import ThreadSearch from '../search'
 import {useThreadSearchRoute} from '../thread-search-route'
-import {useConversationThreadID, useConversationThreadSelector} from '../thread-context'
+import {useConversationThreadID, useThreadMeta} from '../thread-context'
 
 const InputAreaContainer = () => {
   const conversationIDKey = useConversationThreadID()
   const showThreadSearch = !!useThreadSearchRoute()
-  const {membershipType, resetParticipants, wasFinalizedBy} = useConversationThreadSelector(
-    C.useShallow(s => ({
-      membershipType: s.meta.membershipType,
-      resetParticipants: s.meta.resetParticipants,
-      wasFinalizedBy: s.meta.wasFinalizedBy,
+  const {membershipType, resetParticipants, wasFinalizedBy} = useThreadMeta(
+    C.useShallow(m => ({
+      membershipType: m.membershipType,
+      resetParticipants: m.resetParticipants,
+      wasFinalizedBy: m.wasFinalizedBy,
     }))
   )
 
diff --git a/shared/chat/conversation/input-area/input-state.test.tsx b/shared/chat/conversation/input-area/input-state.test.tsx
index 80f6e4792f42..ba6abdef4184 100644
--- a/shared/chat/conversation/input-area/input-state.test.tsx
+++ b/shared/chat/conversation/input-area/input-state.test.tsx
@@ -17,20 +17,6 @@ jest.mock('@react-navigation/native', () => ({
   useRoute: () => ({name: 'chatConversation', params: mockRouteParams}),
 }))
 
-jest.mock('@/chat/inbox/rows-state', () => ({
-  flushInboxRowUpdates: jest.fn(),
-  getInboxRowTrustedState: jest.fn(() => undefined),
-  queueInboxRowUpdate: jest.fn(),
-  setInboxRowTrustedState: jest.fn(),
-  syncInboxRowBadgeState: jest.fn(),
-  syncInboxRowsFromLayout: jest.fn(),
-  syncInboxRowsFromMetaAndParticipants: jest.fn(),
-  syncInboxRowsFromMetas: jest.fn(),
-  syncInboxRowsFromParticipantMap: jest.fn(),
-  syncInboxRowsFromParticipants: jest.fn(),
-  updateInboxRowTyping: jest.fn(),
-}))
-
 const convID = T.Chat.conversationIDToKey(new Uint8Array([1, 2, 3, 4]))
 const otherConvID = T.Chat.conversationIDToKey(new Uint8Array([5, 6, 7, 8]))
 
diff --git a/shared/chat/conversation/input-area/normal/index.tsx b/shared/chat/conversation/input-area/normal/index.tsx
index 3f4a6ee80e10..1345f95228d1 100644
--- a/shared/chat/conversation/input-area/normal/index.tsx
+++ b/shared/chat/conversation/input-area/normal/index.tsx
@@ -12,7 +12,7 @@ import * as T from '@/constants/types'
 import {indefiniteArticle} from '@/util/string'
 import {infoPanelWidthTablet} from '../../info-panel/common'
 import {assertionToDisplay} from '@/common-adapters/usernames'
-import {FocusContext, ScrollContext} from '@/chat/conversation/normal/context'
+import {ThreadRefsContext} from '@/chat/conversation/normal/context'
 import type {RefType as InputRef} from './input.shared'
 import {useConversationCenter, useConversationCenterActions} from '../../center-context'
 import {
@@ -21,7 +21,9 @@ import {
   useConversationThreadSelector,
   useConversationThreadSetExplodingMode,
   useConversationThreadToggleSearch,
+  useThreadMeta,
 } from '../../thread-context'
+import {useConversationParticipants} from '../../data-hooks'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useRoute} from '@react-navigation/native'
 import {metasReceived, unboxRows} from '@/chat/inbox/metadata'
@@ -34,14 +36,15 @@ const useHintText = (p: {
 }) => {
   const {minWriterRole, isExploding, isEditing, cannotWrite} = p
   const username = useCurrentUserState(s => s.username)
-  const {channelname, participantInfoName, teamType, teamname} = useConversationThreadSelector(
-    C.useShallow(s => ({
-      channelname: s.meta.channelname,
-      participantInfoName: s.participants.name,
-      teamType: s.meta.teamType,
-      teamname: s.meta.teamname,
+  const conversationIDKey = useConversationThreadID()
+  const {channelname, teamType, teamname} = useThreadMeta(
+    C.useShallow(m => ({
+      channelname: m.channelname,
+      teamType: m.teamType,
+      teamname: m.teamname,
     }))
   )
+  const participantInfoName = useConversationParticipants(conversationIDKey).name
   if (isMobile && isExploding) {
     return C.isLargeScreen ? `Write an exploding message` : 'Exploding message'
   }
@@ -139,9 +142,8 @@ const ConnectedPlatformInput = function ConnectedPlatformInput() {
   )
   const replyToMessage = useConversationThreadMessage(uiData.replyTo)
   const conversationIDKey = useConversationThreadID()
-  const {explodingMode, meta} = useConversationThreadSelector(
-    C.useShallow(s => ({explodingMode: s.explodingMode, meta: s.meta}))
-  )
+  const explodingMode = useConversationThreadSelector(s => s.explodingMode)
+  const meta = useThreadMeta(m => m)
   const setExplodingModeRaw = useConversationThreadSetExplodingMode()
   const {cannotWrite, minWriterRole, tlfname} = meta
   const convoID = T.Chat.isValidConversationIDKey(conversationIDKey)
@@ -181,7 +183,7 @@ const ConnectedPlatformInput = function ConnectedPlatformInput() {
     doInjectText(inputRef, text, focus)
   }
 
-  const {scrollToBottom} = React.useContext(ScrollContext)
+  const {scrollToBottom} = React.useContext(ThreadRefsContext)
   const onSubmit = (text: string) => {
     if (!text) return
     injectText('', true)
@@ -205,7 +207,8 @@ const ConnectedPlatformInput = function ConnectedPlatformInput() {
   const updateDraftRaw = (text: string) => {
     // Immediately update local meta.draft so switching back to this thread
     // before the async unbox completes won't re-inject the old stale draft.
-    metasReceived([{...meta, draft: text}])
+    // Merges from the current meta (same inbox version), so force past gating.
+    metasReceived([{...meta, draft: text}], undefined, {force: true})
     const f = async () => {
       await T.RPCChat.localUpdateUnsentTextRpcPromise({
         conversationID: convoID,
@@ -274,7 +277,7 @@ const ConnectedPlatformInput = function ConnectedPlatformInput() {
     }
   }, [focusInputCounter, updateUnsentText, unsentText])
 
-  const {setInputRef} = React.useContext(FocusContext)
+  const {setInputRef} = React.useContext(ThreadRefsContext)
   React.useEffect(() => {
     setInputRef(inputRef.current)
   }, [setInputRef])
diff --git a/shared/chat/conversation/input-area/normal/input.tsx b/shared/chat/conversation/input-area/normal/input.tsx
index 66e4b724d2dc..bc468715d706 100644
--- a/shared/chat/conversation/input-area/normal/input.tsx
+++ b/shared/chat/conversation/input-area/normal/input.tsx
@@ -12,7 +12,7 @@ import type {PlatformInputProps as Props} from './input.shared'
 export type {Selection, RefType, TextInfo, PlatformInputProps} from './input.shared'
 import {formatDurationShort} from '@/util/timestamp'
 import {useSuggestors} from '../suggestors'
-import {ScrollContext} from '@/chat/conversation/normal/context'
+import {ThreadRefsContext} from '@/chat/conversation/normal/context'
 import {getTextStyle} from '@/common-adapters/text.styles'
 import {useColorScheme} from 'react-native'
 import {useConversationThreadID} from '../../thread-context'
@@ -646,7 +646,7 @@ const useKeyboard = (p: UseKeyboardProps) => {
   const {onChangeText, onEditLastMessage, showReplyPreview} = p
   const lastText = React.useRef('')
   const setReplyTo = InputState.useConversationInputDispatch(s => s.setReplyTo)
-  const {scrollDown, scrollUp} = React.useContext(ScrollContext)
+  const {scrollDown, scrollUp} = React.useContext(ThreadRefsContext)
   const onCancelReply = () => {
     setReplyTo(ChatTypes.numberToOrdinal(0))
   }
@@ -1016,7 +1016,7 @@ const NativeButtons = function NativeButtons(p: NativeButtonsProps) {
         />
       )}
       {explodingIcon}
-      <Kb.Icon padding="tiny" onClick={openEmojiPicker} type="iconfont-emoji" />
+      <Kb.Icon padding="tiny" onClick={openEmojiPicker} type="iconfont-emoji" testID={TestIDs.CHAT_EMOJI_BUTTON} />
       <Kb.Icon padding="tiny" onClick={insertMentionMarker} type="iconfont-mention" />
       <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexGrow} />
       {!hasText && (
diff --git a/shared/chat/conversation/input-area/normal/set-explode-popup/hooks.tsx b/shared/chat/conversation/input-area/normal/set-explode-popup/hooks.tsx
index c8ea1b1e788a..745b82c93035 100644
--- a/shared/chat/conversation/input-area/normal/set-explode-popup/hooks.tsx
+++ b/shared/chat/conversation/input-area/normal/set-explode-popup/hooks.tsx
@@ -1,7 +1,7 @@
 import * as Chat from '@/constants/chat'
 import type * as T from '@/constants/types'
 import type {Props} from './index.shared'
-import {useConversationThreadSelector} from '../../../thread-context'
+import {useConversationThreadSelector, useThreadMeta} from '../../../thread-context'
 
 export type MessageExplodeDescription = {
   text: string
@@ -32,7 +32,7 @@ const makeItems = (meta: T.Chat.ConversationMeta) => {
 
 export default (p: Props) => {
   const {setExplodingMode, onHidden, visible, attachTo, onAfterSelect} = p
-  const _meta = useConversationThreadSelector(s => s.meta)
+  const _meta = useThreadMeta(m => m)
   const selected = useConversationThreadSelector(s => s.explodingMode)
   const onSelect = (seconds: number) => {
     setTimeout(() => {
diff --git a/shared/chat/conversation/input-area/preview.tsx b/shared/chat/conversation/input-area/preview.tsx
index 1a98428c0341..95839f8fb7ee 100644
--- a/shared/chat/conversation/input-area/preview.tsx
+++ b/shared/chat/conversation/input-area/preview.tsx
@@ -2,11 +2,11 @@ import * as C from '@/constants'
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import {joinConversation} from '../status-actions'
-import {useConversationThreadID, useConversationThreadSelector} from '../thread-context'
+import {useConversationThreadID, useThreadMeta} from '../thread-context'
 
 const Preview = () => {
   const conversationIDKey = useConversationThreadID()
-  const channelname = useConversationThreadSelector(s => s.meta.channelname)
+  const channelname = useThreadMeta(m => m.channelname)
   const [clicked, setClicked] = React.useState<undefined | 'join' | 'leave'>(undefined)
 
   const _onClick = (join: boolean) => {
diff --git a/shared/chat/conversation/input-area/suggestors/channels.test.tsx b/shared/chat/conversation/input-area/suggestors/channels.test.tsx
index 0f0348e6bb5d..6e4b2247e3a9 100644
--- a/shared/chat/conversation/input-area/suggestors/channels.test.tsx
+++ b/shared/chat/conversation/input-area/suggestors/channels.test.tsx
@@ -21,20 +21,6 @@ jest.mock('./common', () => ({
   },
 }))
 
-jest.mock('@/chat/inbox/rows-state', () => ({
-  flushInboxRowUpdates: jest.fn(),
-  getInboxRowTrustedState: jest.fn(() => undefined),
-  queueInboxRowUpdate: jest.fn(),
-  setInboxRowTrustedState: jest.fn(),
-  syncInboxRowBadgeState: jest.fn(),
-  syncInboxRowsFromLayout: jest.fn(),
-  syncInboxRowsFromMetaAndParticipants: jest.fn(),
-  syncInboxRowsFromMetas: jest.fn(),
-  syncInboxRowsFromParticipantMap: jest.fn(),
-  syncInboxRowsFromParticipants: jest.fn(),
-  updateInboxRowTyping: jest.fn(),
-}))
-
 const convID = T.Chat.conversationIDToKey(new Uint8Array([1, 2, 3, 4]))
 
 const flushPromises = async () => {
@@ -83,15 +69,11 @@ beforeEach(() => {
     teamType: 'adhoc',
   }
   metasReceived([meta])
-  participantInfoReceived(
-    convID,
-    {
-      all: ['alice', 'bob', 'carol'],
-      contactName: new Map(),
-      name: ['alice', 'bob', 'carol'],
-    },
-    meta
-  )
+  participantInfoReceived(convID, {
+    all: ['alice', 'bob', 'carol'],
+    contactName: new Map(),
+    name: ['alice', 'bob', 'carol'],
+  })
   useInboxLayoutState.getState().dispatch.updateLayout(
     JSON.stringify({
       bigTeams: [
diff --git a/shared/chat/conversation/input-area/suggestors/suggestion-list.tsx b/shared/chat/conversation/input-area/suggestors/suggestion-list.tsx
index b1f0dafb6cbf..35da9c0cca43 100644
--- a/shared/chat/conversation/input-area/suggestors/suggestion-list.tsx
+++ b/shared/chat/conversation/input-area/suggestors/suggestion-list.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import noop from 'lodash/noop'
 import {BotCommandUpdateStatus} from './shared'
 
@@ -50,6 +51,7 @@ const SuggestionList = <I,>(props: Props<I>) => {
         direction="vertical"
         fullWidth={true}
         style={Kb.Styles.collapseStyles([desktopStyles.listContainer, {height: listHeight}, props.style])}
+        testID={TestIDs.CHAT_SUGGESTION_LIST}
       >
         <Kb.List
           ref={listRef}
@@ -79,6 +81,7 @@ const SuggestionList = <I,>(props: Props<I>) => {
       direction="vertical"
       fullWidth={true}
       style={Kb.Styles.collapseStyles([nativeStyles.listContainer, props.style])}
+      testID={TestIDs.CHAT_SUGGESTION_LIST}
     >
       <FlatList
         alwaysBounceVertical={false}
diff --git a/shared/chat/conversation/list-area/index.tsx b/shared/chat/conversation/list-area/index.tsx
index c4dd3696e8aa..6144a0f067bb 100644
--- a/shared/chat/conversation/list-area/index.tsx
+++ b/shared/chat/conversation/list-area/index.tsx
@@ -8,7 +8,7 @@ import SpecialBottomMessage from '../messages/special-bottom-message'
 import SpecialTopMessage from '../messages/special-top-message'
 import {MessageRow} from '../messages/wrapper'
 import {PerfProfiler} from '@/perf/react-profiler'
-import {ScrollContext} from '../normal/context'
+import {ThreadRefsContext} from '../normal/context'
 import {useConversationCenter} from '../center-context'
 import {
   useConversationThreadID,
@@ -24,7 +24,6 @@ import {getMessageRowType} from '../messages/row-metadata'
 import * as InputState from '../input-area/input-state'
 import sortedIndexOf from 'lodash/sortedIndexOf'
 import {copyToClipboard} from '@/util/storeless-actions'
-import {FocusContext} from '../normal/context'
 import noop from 'lodash/noop'
 import {LegendList} from '@legendapp/list/react'
 import type {LegendListRef} from '@/common-adapters'
@@ -196,7 +195,7 @@ const DesktopThreadWrapper = function DesktopThreadWrapper() {
 
   const getItemType = useGetItemType()
 
-  // Imperative scroll for ScrollContext
+  // Imperative scroll for ThreadRefsContext
   const scrollToBottom = React.useCallback(() => {
     void listRef.current?.scrollToEnd({animated: false})
   }, [])
@@ -219,7 +218,7 @@ const DesktopThreadWrapper = function DesktopThreadWrapper() {
     })
   }, [])
 
-  const {setScrollRef} = React.useContext(ScrollContext)
+  const {setScrollRef} = React.useContext(ThreadRefsContext)
   React.useEffect(() => {
     setScrollRef({scrollDown, scrollToBottom, scrollUp})
   }, [scrollDown, scrollToBottom, scrollUp, setScrollRef])
@@ -343,7 +342,7 @@ const DesktopThreadWrapper = function DesktopThreadWrapper() {
 
   const jumpToRecent = useJumpToRecent(scrollToBottom, messageOrdinals.length)
 
-  const {focusInput} = React.useContext(FocusContext)
+  const {focusInput} = React.useContext(ThreadRefsContext)
   const handleListClick = (ev: React.MouseEvent) => {
     const target = ev.target as {
       closest?: (s: string) => unknown
@@ -510,7 +509,7 @@ const useNativeScrolling = (p: {
     listRef.current?.scrollToOffset({animated: false, offset})
   }, [insetsBottom, keyboardAnimHeight, listRef])
 
-  const {setScrollRef} = React.useContext(ScrollContext)
+  const {setScrollRef} = React.useContext(ThreadRefsContext)
   React.useEffect(() => {
     setScrollRef({scrollDown: noop, scrollToBottom, scrollUp: noop})
   }, [setScrollRef, scrollToBottom])
diff --git a/shared/chat/conversation/messages/attachment/image/index.tsx b/shared/chat/conversation/messages/attachment/image/index.tsx
index c4b8ddb0529b..fcadb0b053d5 100644
--- a/shared/chat/conversation/messages/attachment/image/index.tsx
+++ b/shared/chat/conversation/messages/attachment/image/index.tsx
@@ -1,6 +1,7 @@
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import * as T from '@/constants/types'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import {showAttachmentPreview} from '../../../attachment-actions'
 import {useConversationThreadID} from '../../../thread-context'
 import ImageImpl from './imageimpl'
@@ -70,6 +71,7 @@ function Image(p: Props) {
             onClick={openFullscreen}
             onLongPress={hasMessageID ? showPopup : undefined}
             ref={toastTargetRef}
+            testID={TestIDs.CHAT_ATTACHMENT_IMAGE}
           >
             <ImageImpl message={message} />
           </Kb.ClickableBox>
diff --git a/shared/chat/conversation/messages/cards/team-journey/container.tsx b/shared/chat/conversation/messages/cards/team-journey/container.tsx
index 6ecc363b58a9..61ba822efc81 100644
--- a/shared/chat/conversation/messages/cards/team-journey/container.tsx
+++ b/shared/chat/conversation/messages/cards/team-journey/container.tsx
@@ -13,7 +13,7 @@ import {
   useConversationThreadDismissJourneycard,
   useConversationThreadID,
   useConversationThreadMessage,
-  useConversationThreadSelector,
+  useThreadMeta,
 } from '../../../thread-context'
 
 type Action = {label: string; onClick: () => void} | 'wave'
@@ -25,7 +25,15 @@ const TeamJourneyConnected = (ownProps: OwnProps) => {
   const {ordinal} = ownProps
   const m = useConversationThreadMessage(ordinal)
   const message = m?.type === 'journeycard' ? m : emptyJourney
-  const conv = useConversationThreadSelector(s => s.meta)
+  const conv = useThreadMeta(
+    C.useShallow(m => ({
+      cannotWrite: m.cannotWrite,
+      channelname: m.channelname,
+      teamID: m.teamID,
+      teamname: m.teamname,
+      tlfname: m.tlfname,
+    }))
+  )
   const {cannotWrite, channelname, teamname, teamID} = conv
   const welcomeMessage = {display: '', raw: '', set: false}
   const teamMetaByID = useTeamsListMap()
diff --git a/shared/chat/conversation/messages/message-popup/attachment.tsx b/shared/chat/conversation/messages/message-popup/attachment.tsx
index 8291181c3f0d..696f48ea0a94 100644
--- a/shared/chat/conversation/messages/message-popup/attachment.tsx
+++ b/shared/chat/conversation/messages/message-popup/attachment.tsx
@@ -12,10 +12,11 @@ import {
 import {openLocalPathInSystemFileManagerDesktop} from '@/util/fs-storeless-actions'
 import {
   showConversationInfoPanel,
+  useConversationThreadID,
   useConversationThreadMessage,
-  useConversationThreadSelector,
+  useThreadMeta,
 } from '../../thread-context'
-import {useConversationMetadata} from '../../data-hooks'
+import {useConversationMetadata, useConversationParticipants} from '../../data-hooks'
 import {useRoute} from '@react-navigation/native'
 import type {MessagePopupItems} from './hooks'
 import {useHeader, useHeaderForMessage, useItems, useModeration, useStorelessItems} from './hooks'
@@ -157,6 +158,7 @@ const PopAttachLoaded = (ownProps: OwnProps & {
 
 const PopAttachThread = (ownProps: OwnProps) => {
   const {ordinal, onHidden} = ownProps
+  const conversationIDKey = useConversationThreadID()
   const loadedMessage = useConversationThreadMessage(ordinal)
   const message = loadedMessage?.type === 'attachment' ? loadedMessage : emptyMessage
   const {attachmentDownload, messageAttachmentNativeSave, messageAttachmentNativeShare} =
@@ -167,9 +169,8 @@ const PopAttachThread = (ownProps: OwnProps) => {
   // infoPanel only exists on the desktop/tablet split-view chatRoot route
   const infoPanelShowing =
     route.name === 'chatRoot' && 'infoPanel' in route.params && !!route.params.infoPanel
-  const {meta, participantInfo} = useConversationThreadSelector(
-    C.useShallow(s => ({meta: s.meta, participantInfo: s.participants}))
-  )
+  const meta = useThreadMeta(m => m)
+  const participantInfo = useConversationParticipants(conversationIDKey)
   return (
     <PopAttachLoaded
       {...ownProps}
diff --git a/shared/chat/conversation/messages/message-popup/hooks.tsx b/shared/chat/conversation/messages/message-popup/hooks.tsx
index bbc5aacf3024..47f7077062a1 100644
--- a/shared/chat/conversation/messages/message-popup/hooks.tsx
+++ b/shared/chat/conversation/messages/message-popup/hooks.tsx
@@ -10,7 +10,7 @@ import {
 } from '../../message-actions'
 import {formatTimeForPopup, formatTimeForRevoked} from '@/util/timestamp'
 import {linkFromConvAndMessage} from '@/constants/deeplinks'
-import {markConversationAsUnread} from '../../data-hooks'
+import {markConversationAsUnread, useConversationParticipants} from '../../data-hooks'
 import {showForwardMessagePicker} from '../../fwd-msg'
 import {navToProfile, setThreadInputEditing, setThreadInputReplyTo} from '@/constants/router'
 import {SetOrangeLineContext} from '../../orange-line-context'
@@ -20,8 +20,8 @@ import {
   useConversationThreadID,
   useConversationThreadMessage,
   useConversationThreadMessageActions,
-  useConversationThreadSelector,
   useConversationThreadSetMarkAsUnread,
+  useThreadMeta,
 } from '../../thread-context'
 import ExplodingPopupHeader from './exploding-header'
 import MessagePopupHeader from './header'
@@ -332,9 +332,8 @@ export const useModeration = (
 const useThreadItems = (ordinal: T.Chat.Ordinal, onHidden: () => void) => {
   const conversationIDKey = useConversationThreadID()
   const message = useConversationThreadMessage(ordinal) ?? emptyText
-  const {meta, participantInfo} = useConversationThreadSelector(
-    C.useShallow(s => ({meta: s.meta, participantInfo: s.participants}))
-  )
+  const meta = useThreadMeta(m => m)
+  const participantInfo = useConversationParticipants(conversationIDKey)
   const {messageDelete, toggleMessageReaction} = useConversationThreadMessageActions()
   const setMarkAsUnread = useConversationThreadSetMarkAsUnread()
   return useItemsForMessage({
diff --git a/shared/chat/conversation/messages/message-popup/text.tsx b/shared/chat/conversation/messages/message-popup/text.tsx
index 7cc6264f532b..bb5daf9ebb8b 100644
--- a/shared/chat/conversation/messages/message-popup/text.tsx
+++ b/shared/chat/conversation/messages/message-popup/text.tsx
@@ -1,4 +1,3 @@
-import * as C from '@/constants'
 import * as Chat from '@/constants/chat'
 import * as Kb from '@/common-adapters'
 import type * as React from 'react'
@@ -6,12 +5,13 @@ import * as T from '@/constants/types'
 import {copyToClipboard} from '@/util/storeless-actions'
 import {openURL} from '@/util/misc'
 import {replyPrivatelyToConversationMessage} from '../../message-actions'
-import {useConversationMetadata} from '../../data-hooks'
+import {useConversationMetadata, useConversationParticipants} from '../../data-hooks'
 import {useCurrentUserState} from '@/stores/current-user'
 import {
+  useConversationThreadID,
   useConversationThreadMessage,
   useConversationThreadMessageActions,
-  useConversationThreadSelector,
+  useThreadMeta,
 } from '../../thread-context'
 import type {MessagePopupItems} from './hooks'
 import {useHeader, useHeaderForMessage, useItems, useModeration, useStorelessItems} from './hooks'
@@ -153,10 +153,10 @@ const PopTextLoaded = (ownProps: OwnProps & {
 
 const PopTextThread = (ownProps: OwnProps) => {
   const {ordinal, onHidden} = ownProps
+  const conversationIDKey = useConversationThreadID()
   const message = useConversationThreadMessage(ordinal) ?? emptyMessage
-  const {meta, participantInfo} = useConversationThreadSelector(
-    C.useShallow(s => ({meta: s.meta, participantInfo: s.participants}))
-  )
+  const meta = useThreadMeta(m => m)
+  const participantInfo = useConversationParticipants(conversationIDKey)
   const itemsData = useItems(ordinal, onHidden)
   const header = useHeader(ordinal, onHidden)
   const {messageReplyPrivately} = useConversationThreadMessageActions()
diff --git a/shared/chat/conversation/messages/reset-user.tsx b/shared/chat/conversation/messages/reset-user.tsx
index 82913bdcb00b..aa6c7201c220 100644
--- a/shared/chat/conversation/messages/reset-user.tsx
+++ b/shared/chat/conversation/messages/reset-user.tsx
@@ -2,15 +2,14 @@ import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import {navToProfile} from '@/constants/router'
-import {useConversationThreadID, useConversationThreadSelector} from '../thread-context'
+import {useConversationThreadID, useThreadMeta} from '../thread-context'
+import {useConversationParticipants} from '../data-hooks'
 
 const ResetUser = () => {
-  const {meta, participantInfo} = useConversationThreadSelector(
-    C.useShallow(s => ({meta: s.meta, participantInfo: s.participants}))
-  )
   const conversationIDKey = useConversationThreadID()
+  const participantInfo = useConversationParticipants(conversationIDKey)
   const _participants = participantInfo.all
-  const _resetParticipants = meta.resetParticipants
+  const _resetParticipants = useThreadMeta(m => m.resetParticipants)
   const _viewProfile = navToProfile
   const username = [..._resetParticipants][0] || ''
   const nonResetUsers = new Set(_participants)
diff --git a/shared/chat/conversation/messages/retention-notice.tsx b/shared/chat/conversation/messages/retention-notice.tsx
index 80c453972738..591fa83d26cb 100644
--- a/shared/chat/conversation/messages/retention-notice.tsx
+++ b/shared/chat/conversation/messages/retention-notice.tsx
@@ -1,7 +1,8 @@
 import type * as T from '@/constants/types'
+import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import {useChatTeam} from '../team-hooks'
-import {useConversationShowInfoPanel, useConversationThreadSelector} from '../thread-context'
+import {useConversationShowInfoPanel, useThreadMeta} from '../thread-context'
 
 // Parses retention policies into a string suitable for display at the top of a conversation
 function makeRetentionNotice(
@@ -40,7 +41,15 @@ function makeRetentionNotice(
 }
 
 function RetentionNoticeContainer() {
-  const meta = useConversationThreadSelector(s => s.meta)
+  const meta = useThreadMeta(
+    C.useShallow(m => ({
+      retentionPolicy: m.retentionPolicy,
+      teamID: m.teamID,
+      teamRetentionPolicy: m.teamRetentionPolicy,
+      teamType: m.teamType,
+      teamname: m.teamname,
+    }))
+  )
   const {teamType, retentionPolicy: policy, teamRetentionPolicy: teamPolicy} = meta
   const {yourOperations} = useChatTeam(meta.teamID, meta.teamname)
   const canChange = meta.teamType !== 'adhoc' ? yourOperations.setRetentionPolicy : true
diff --git a/shared/chat/conversation/messages/special-bottom-message.tsx b/shared/chat/conversation/messages/special-bottom-message.tsx
index 3e4c27762ae4..8fd109fb1d87 100644
--- a/shared/chat/conversation/messages/special-bottom-message.tsx
+++ b/shared/chat/conversation/messages/special-bottom-message.tsx
@@ -1,10 +1,17 @@
+import * as C from '@/constants'
 import * as Chat from '@/constants/chat'
-import {useConversationThreadSelector} from '../thread-context'
+import {useThreadMeta} from '../thread-context'
 import OldProfileReset from './system-old-profile-reset-notice/container'
 import ResetUser from './reset-user'
 
 function BottomMessageContainer() {
-  const meta = useConversationThreadSelector(s => s.meta)
+  const meta = useThreadMeta(
+    C.useShallow(m => ({
+      resetParticipants: m.resetParticipants,
+      supersededBy: m.supersededBy,
+      wasFinalizedBy: m.wasFinalizedBy,
+    }))
+  )
   const showResetParticipants = meta.resetParticipants.size !== 0
   const showSuperseded = !!meta.wasFinalizedBy || meta.supersededBy !== Chat.noConversationIDKey
 
diff --git a/shared/chat/conversation/messages/special-top-message.tsx b/shared/chat/conversation/messages/special-top-message.tsx
index 378b8c29c5f2..d049bc3354cf 100644
--- a/shared/chat/conversation/messages/special-top-message.tsx
+++ b/shared/chat/conversation/messages/special-top-message.tsx
@@ -10,7 +10,9 @@ import {useChatThreadRouteParams} from '../thread-search-route'
 import {
   useConversationThreadID,
   useConversationThreadSelector,
+  useThreadMeta,
 } from '../thread-context'
+import {useConversationParticipants} from '../data-hooks'
 import * as FS from '@/constants/fs'
 import {useCurrentUserState} from '@/stores/current-user'
 
@@ -110,15 +112,21 @@ const ErrorMessage = () => {
 function SpecialTopMessage() {
   const username = useCurrentUserState(s => s.username)
   const conversationIDKey = useConversationThreadID()
-  const {hasLoadedEver, meta, moreToLoadBack, participants} = useConversationThreadSelector(
+  const {hasLoadedEver, moreToLoadBack} = useConversationThreadSelector(
     C.useShallow(s => ({
       hasLoadedEver: s.messageOrdinals !== undefined,
-      meta: s.meta,
       moreToLoadBack: s.moreToLoadBack,
-      participants: s.participants,
     }))
   )
-  const {teamType, supersedes, retentionPolicy, teamRetentionPolicy} = meta
+  const {teamType, supersedes, retentionPolicy, teamRetentionPolicy} = useThreadMeta(
+    C.useShallow(m => ({
+      retentionPolicy: m.retentionPolicy,
+      supersedes: m.supersedes,
+      teamRetentionPolicy: m.teamRetentionPolicy,
+      teamType: m.teamType,
+    }))
+  )
+  const participants = useConversationParticipants(conversationIDKey)
   const loadMoreType = moreToLoadBack ? 'moreToLoad' : 'noMoreToLoad'
   const pendingState =
     conversationIDKey === T.Chat.pendingWaitingConversationIDKey
diff --git a/shared/chat/conversation/messages/system-added-to-team/wrapper.tsx b/shared/chat/conversation/messages/system-added-to-team/wrapper.tsx
index 2e2c5a5ce4d2..d0794f9ae205 100644
--- a/shared/chat/conversation/messages/system-added-to-team/wrapper.tsx
+++ b/shared/chat/conversation/messages/system-added-to-team/wrapper.tsx
@@ -7,7 +7,7 @@ import {getAddedUsernames} from '../system-users-added-to-conv/container'
 import {indefiniteArticle} from '@/util/string'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useChatTeamMembers} from '../../team-hooks'
-import {useConversationShowInfoPanel, useConversationThreadID, useConversationThreadSelector} from '../../thread-context'
+import {useConversationShowInfoPanel, useConversationThreadID, useThreadMeta} from '../../thread-context'
 import {makeMessageWrapper} from '../wrapper/wrapper'
 
 type OwnProps = {message: T.Chat.MessageSystemAddedToTeam}
@@ -16,11 +16,11 @@ function SystemAddedToTeamContainer(p: OwnProps) {
   const {message} = p
   const {addee, adder, author, bulkAdds, role: _role, timestamp} = message
   const conversationIDKey = useConversationThreadID()
-  const {teamID, teamname, teamType} = useConversationThreadSelector(
-    C.useShallow(s => ({
-      teamID: s.meta.teamID,
-      teamType: s.meta.teamType,
-      teamname: s.meta.teamname,
+  const {teamID, teamname, teamType} = useThreadMeta(
+    C.useShallow(m => ({
+      teamID: m.teamID,
+      teamType: m.teamType,
+      teamname: m.teamname,
     }))
   )
   const showInfoPanel = useConversationShowInfoPanel()
diff --git a/shared/chat/conversation/messages/system-change-retention/wrapper.tsx b/shared/chat/conversation/messages/system-change-retention/wrapper.tsx
index 6684506827d3..7c8ab5d39954 100644
--- a/shared/chat/conversation/messages/system-change-retention/wrapper.tsx
+++ b/shared/chat/conversation/messages/system-change-retention/wrapper.tsx
@@ -5,7 +5,7 @@ import * as T from '@/constants/types'
 import * as dateFns from 'date-fns'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useChatTeam} from '../../team-hooks'
-import {useConversationShowInfoPanel, useConversationThreadSelector} from '../../thread-context'
+import {useConversationShowInfoPanel, useThreadMeta} from '../../thread-context'
 import {makeMessageWrapper} from '../wrapper/wrapper'
 
 type OwnProps = {message: T.Chat.MessageSystemChangeRetention}
@@ -14,11 +14,11 @@ function SystemChangeRetentionContainer(p: OwnProps) {
   const {message} = p
   const {isInherit, isTeam, membersType, policy, user} = message
   const you = useCurrentUserState(s => s.username)
-  const {teamID, teamType, teamname} = useConversationThreadSelector(
-    C.useShallow(s => ({
-      teamID: s.meta.teamID,
-      teamType: s.meta.teamType,
-      teamname: s.meta.teamname,
+  const {teamID, teamType, teamname} = useThreadMeta(
+    C.useShallow(m => ({
+      teamID: m.teamID,
+      teamType: m.teamType,
+      teamname: m.teamname,
     }))
   )
   const showInfoPanel = useConversationShowInfoPanel()
diff --git a/shared/chat/conversation/messages/system-create-team/wrapper.tsx b/shared/chat/conversation/messages/system-create-team/wrapper.tsx
index 707dc1221da1..1e74c3678405 100644
--- a/shared/chat/conversation/messages/system-create-team/wrapper.tsx
+++ b/shared/chat/conversation/messages/system-create-team/wrapper.tsx
@@ -6,15 +6,15 @@ import type * as T from '@/constants/types'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useChatTeam} from '../../team-hooks'
 import {makeAddMembersWizard} from '@/teams/add-members-wizard/state'
-import {useConversationShowInfoPanel, useConversationThreadSelector} from '../../thread-context'
+import {useConversationShowInfoPanel, useThreadMeta} from '../../thread-context'
 import {makeMessageWrapper} from '../wrapper/wrapper'
 
 type OwnProps = {message: T.Chat.MessageSystemCreateTeam}
 
 function SystemCreateTeamContainer(p: OwnProps) {
   const {creator} = p.message
-  const {teamID, teamname} = useConversationThreadSelector(
-    C.useShallow(s => ({teamID: s.meta.teamID, teamname: s.meta.teamname}))
+  const {teamID, teamname} = useThreadMeta(
+    C.useShallow(m => ({teamID: m.teamID, teamname: m.teamname}))
   )
   const showInfoPanel = useConversationShowInfoPanel()
   const {role} = useChatTeam(teamID, teamname)
diff --git a/shared/chat/conversation/messages/system-invite-accepted/wrapper.tsx b/shared/chat/conversation/messages/system-invite-accepted/wrapper.tsx
index 2659e23e4b7e..8020a253403d 100644
--- a/shared/chat/conversation/messages/system-invite-accepted/wrapper.tsx
+++ b/shared/chat/conversation/messages/system-invite-accepted/wrapper.tsx
@@ -4,7 +4,7 @@ import type * as T from '@/constants/types'
 import * as Kb from '@/common-adapters'
 import UserNotice from '../user-notice'
 import {useCurrentUserState} from '@/stores/current-user'
-import {useConversationThreadSelector} from '../../thread-context'
+import {useThreadMeta} from '../../thread-context'
 import {makeMessageWrapper} from '../wrapper/wrapper'
 
 type OwnProps = {message: T.Chat.MessageSystemInviteAccepted}
@@ -12,7 +12,7 @@ type OwnProps = {message: T.Chat.MessageSystemInviteAccepted}
 function SystemInviteAcceptedContainer(p: OwnProps) {
   const {message} = p
   const {role} = message
-  const teamID = useConversationThreadSelector(s => s.meta.teamID)
+  const teamID = useThreadMeta(m => m.teamID)
   const you = useCurrentUserState(s => s.username)
   const navigateAppend = C.Router2.navigateAppend
   const onViewTeam = () => {
diff --git a/shared/chat/conversation/messages/system-joined/container.tsx b/shared/chat/conversation/messages/system-joined/container.tsx
index 1986d5ea8400..71864861f5ad 100644
--- a/shared/chat/conversation/messages/system-joined/container.tsx
+++ b/shared/chat/conversation/messages/system-joined/container.tsx
@@ -1,17 +1,19 @@
 import type * as T from '@/constants/types'
+import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import UserNotice from '../user-notice'
 import {getAddedUsernames} from '../system-users-added-to-conv/container'
 import {formatTimeForChat} from '@/util/timestamp'
-import {useConversationThreadSelector} from '../../thread-context'
+import {useThreadMeta} from '../../thread-context'
 
 type OwnProps = {message: T.Chat.MessageSystemJoined}
 
 function JoinedContainer(p: OwnProps) {
   const {message} = p
   const {joiners, author, leavers, timestamp} = message
-  const meta = useConversationThreadSelector(s => s.meta)
-  const {channelname, teamType, teamname} = meta
+  const {channelname, teamType, teamname} = useThreadMeta(
+    C.useShallow(m => ({channelname: m.channelname, teamType: m.teamType, teamname: m.teamname}))
+  )
   const joiners2 = !joiners?.length && !leavers?.length ? [author] : joiners
   const isBigTeam = teamType === 'big'
   const multiProps = {channelname, isBigTeam, teamname, timestamp}
diff --git a/shared/chat/conversation/messages/system-left/wrapper.tsx b/shared/chat/conversation/messages/system-left/wrapper.tsx
index 54a0b4457c0d..4822f0149b97 100644
--- a/shared/chat/conversation/messages/system-left/wrapper.tsx
+++ b/shared/chat/conversation/messages/system-left/wrapper.tsx
@@ -1,11 +1,13 @@
+import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import UserNotice from '../user-notice'
-import {useConversationThreadSelector} from '../../thread-context'
+import {useThreadMeta} from '../../thread-context'
 import {makeMessageWrapper} from '../wrapper/wrapper'
 
 function SystemLeft() {
-  const meta = useConversationThreadSelector(s => s.meta)
-  const {channelname, teamType, teamname} = meta
+  const {channelname, teamType, teamname} = useThreadMeta(
+    C.useShallow(m => ({channelname: m.channelname, teamType: m.teamType, teamname: m.teamname}))
+  )
   const isBigTeam = teamType === 'big'
 
   return (
diff --git a/shared/chat/conversation/messages/system-new-channel/wrapper.tsx b/shared/chat/conversation/messages/system-new-channel/wrapper.tsx
index e92f47391aa1..9a176b905db0 100644
--- a/shared/chat/conversation/messages/system-new-channel/wrapper.tsx
+++ b/shared/chat/conversation/messages/system-new-channel/wrapper.tsx
@@ -2,14 +2,14 @@ import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import type * as T from '@/constants/types'
 import UserNotice from '../user-notice'
-import {useConversationThreadSelector} from '../../thread-context'
+import {useThreadMeta} from '../../thread-context'
 import {makeMessageWrapper} from '../wrapper/wrapper'
 
 type OwnProps = {message: T.Chat.MessageSystemNewChannel}
 
 function SystemNewChannelContainer(p: OwnProps) {
   const {message} = p
-  const teamID = useConversationThreadSelector(s => s.meta.teamID)
+  const teamID = useThreadMeta(m => m.teamID)
   const navigateAppend = C.Router2.navigateAppend
   const onManageChannels = () => navigateAppend({name: 'teamAddToChannels', params: {teamID}})
 
diff --git a/shared/chat/conversation/messages/system-old-profile-reset-notice/container.tsx b/shared/chat/conversation/messages/system-old-profile-reset-notice/container.tsx
index 379700323871..dd8f4deedda8 100644
--- a/shared/chat/conversation/messages/system-old-profile-reset-notice/container.tsx
+++ b/shared/chat/conversation/messages/system-old-profile-reset-notice/container.tsx
@@ -1,17 +1,17 @@
-import * as C from '@/constants'
 import type * as T from '@/constants/types'
+import * as C from '@/constants'
 import {navigateToThread, previewConversation} from '@/constants/router'
 import {Text} from '@/common-adapters'
 import UserNotice from '../user-notice'
-import {useConversationThreadSelector} from '../../thread-context'
+import {useConversationThreadID, useThreadMeta} from '../../thread-context'
+import {useConversationParticipants} from '../../data-hooks'
 
 const SystemOldProfileResetNotice = () => {
-  const {meta, participantInfo} = useConversationThreadSelector(
-    C.useShallow(s => ({
-      meta: s.meta,
-      participantInfo: s.participants,
-    }))
+  const conversationIDKey = useConversationThreadID()
+  const meta = useThreadMeta(
+    C.useShallow(m => ({supersededBy: m.supersededBy, wasFinalizedBy: m.wasFinalizedBy}))
   )
+  const participantInfo = useConversationParticipants(conversationIDKey)
   const _participants = participantInfo.all
   const nextConversationIDKey = meta.supersededBy
   const username = meta.wasFinalizedBy || ''
diff --git a/shared/chat/conversation/messages/system-profile-reset-notice.tsx b/shared/chat/conversation/messages/system-profile-reset-notice.tsx
index f7f374565578..c80d1abffe6f 100644
--- a/shared/chat/conversation/messages/system-profile-reset-notice.tsx
+++ b/shared/chat/conversation/messages/system-profile-reset-notice.tsx
@@ -2,10 +2,12 @@ import * as C from '@/constants'
 import type * as T from '@/constants/types'
 import * as Kb from '@/common-adapters'
 import UserNotice from './user-notice'
-import {useConversationThreadSelector} from '../thread-context'
+import {useThreadMeta} from '../thread-context'
 
 const SystemProfileResetNotice = () => {
-  const meta = useConversationThreadSelector(s => s.meta)
+  const meta = useThreadMeta(
+    C.useShallow(m => ({supersedes: m.supersedes, wasFinalizedBy: m.wasFinalizedBy}))
+  )
   const prevConversationIDKey = meta.supersedes
   const username = meta.wasFinalizedBy || ''
   const _onOpenOlderConversation = (conversationIDKey: T.Chat.ConversationIDKey) => {
diff --git a/shared/chat/conversation/messages/system-simple-to-complex/wrapper.tsx b/shared/chat/conversation/messages/system-simple-to-complex/wrapper.tsx
index 5ad69e3159c5..2b125d4b406d 100644
--- a/shared/chat/conversation/messages/system-simple-to-complex/wrapper.tsx
+++ b/shared/chat/conversation/messages/system-simple-to-complex/wrapper.tsx
@@ -3,14 +3,14 @@ import type * as T from '@/constants/types'
 import * as Kb from '@/common-adapters'
 import UserNotice from '../user-notice'
 import {useCurrentUserState} from '@/stores/current-user'
-import {useConversationThreadSelector} from '../../thread-context'
+import {useThreadMeta} from '../../thread-context'
 import {makeMessageWrapper} from '../wrapper/wrapper'
 
 type OwnProps = {message: T.Chat.MessageSystemSimpleToComplex}
 
 function SystemSimpleToComplexContainer(p: OwnProps) {
   const {message} = p
-  const teamID = useConversationThreadSelector(s => s.meta.teamID)
+  const teamID = useThreadMeta(m => m.teamID)
   const you = useCurrentUserState(s => s.username)
   const navigateAppend = C.Router2.navigateAppend
   const onManageChannels = () => navigateAppend({name: 'teamAddToChannels', params: {teamID}})
diff --git a/shared/chat/conversation/messages/system-users-added-to-conv/container.tsx b/shared/chat/conversation/messages/system-users-added-to-conv/container.tsx
index 370127e3b1f6..1df6290e51c2 100644
--- a/shared/chat/conversation/messages/system-users-added-to-conv/container.tsx
+++ b/shared/chat/conversation/messages/system-users-added-to-conv/container.tsx
@@ -3,13 +3,13 @@ import type * as T from '@/constants/types'
 import * as Kb from '@/common-adapters'
 import UserNotice from '../user-notice'
 import {useCurrentUserState} from '@/stores/current-user'
-import {useConversationThreadSelector} from '../../thread-context'
+import {useThreadMeta} from '../../thread-context'
 
 type OwnProps = {message: T.Chat.MessageSystemUsersAddedToConversation}
 
 function UsersAddedToConversationContainer(p: OwnProps) {
   const {usernames} = p.message
-  const channelname = useConversationThreadSelector(s => s.meta.channelname)
+  const channelname = useThreadMeta(m => m.channelname)
   const you = useCurrentUserState(s => s.username)
   let otherUsers: Array<string> | undefined
   if (usernames.includes(you)) {
diff --git a/shared/chat/conversation/messages/wrapper/exploding-meta.tsx b/shared/chat/conversation/messages/wrapper/exploding-meta.tsx
index c3f1b9dc2298..7eaa9613c62a 100644
--- a/shared/chat/conversation/messages/wrapper/exploding-meta.tsx
+++ b/shared/chat/conversation/messages/wrapper/exploding-meta.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import {useIsHighlighted} from '../ids-context'
+import {produce} from 'immer'
 import * as Kb from '@/common-adapters'
 import {addTicker, removeTicker} from '@/util/second-timer'
 import {formatDurationShort} from '@/util/timestamp'
@@ -19,11 +20,7 @@ export type OwnProps = {
 function ExplodingMetaContainer(p: OwnProps) {
   const pending = isPendingSubmitState(p.submitState)
   return (
-    <ExplodingMetaInner
-      {...p}
-      key={`${p.messageKey}:${pending ? 'pending' : 'active'}`}
-      pending={pending}
-    />
+    <ExplodingMetaInner {...p} key={`${p.messageKey}:${pending ? 'pending' : 'active'}`} pending={pending} />
   )
 }
 
@@ -41,11 +38,7 @@ const isPendingSubmitState = (submitState?: T.Chat.Message['submitState']) =>
 
 const cappedLoopInterval = (difference: number) => Math.min(getLoopInterval(difference), 60000)
 
-const makeInitialTimerState = (p: {
-  exploded: boolean
-  explodesAt: number
-  pending: boolean
-}): TimerState => {
+const makeInitialTimerState = (p: {exploded: boolean; explodesAt: number; pending: boolean}): TimerState => {
   const now = Date.now()
   if (p.pending) {
     return {exploded: p.exploded, inter: 0, mode: 'none', now}
@@ -65,12 +58,13 @@ function ExplodingMetaInner(p: ExplodingMetaInnerProps) {
 
   let currentTimerState = timerState
   if (timerState.exploded !== exploded) {
-    currentTimerState = {
-      ...timerState,
-      exploded,
-      inter: exploded && !timerState.exploded ? 0 : timerState.inter,
-      mode: exploded && !timerState.exploded ? 'boom' : timerState.mode,
-    }
+    currentTimerState = produce(timerState, draft => {
+      draft.exploded = exploded
+      if (exploded) {
+        draft.inter = 0
+        draft.mode = 'boom'
+      }
+    })
     setTimerState(currentTimerState)
   }
   const {inter, mode, now} = currentTimerState
@@ -87,12 +81,14 @@ function ExplodingMetaInner(p: ExplodingMetaInnerProps) {
       const id = addTicker(() => {
         const n = Date.now()
         const difference = explodesAt - n
-        setTimerState(state => {
-          if (difference <= 0 || exploded) {
-            return state.mode === 'countdown' ? {...state, mode: 'boom', now: n} : {...state, now: n}
-          }
-          return {...state, now: n}
-        })
+        setTimerState(
+          produce(draft => {
+            if ((difference <= 0 || exploded) && draft.mode === 'countdown') {
+              draft.mode = 'boom'
+            }
+            draft.now = n
+          })
+        )
       })
       return () => {
         removeTicker(id)
@@ -101,16 +97,32 @@ function ExplodingMetaInner(p: ExplodingMetaInnerProps) {
       const id = setTimeout(() => {
         const n = Date.now()
         if (pending) {
-          setTimerState(state => ({...state, inter: 0, now: n}))
+          setTimerState(
+            produce(draft => {
+              draft.inter = 0
+              draft.now = n
+            })
+          )
           return
         }
         const difference = explodesAt - n
         if (difference <= 0 || exploded) {
-          setTimerState(state => ({...state, inter: 0, mode: 'boom', now: n}))
+          setTimerState(
+            produce(draft => {
+              draft.inter = 0
+              draft.mode = 'boom'
+              draft.now = n
+            })
+          )
           return
         }
         // we don't need a timer longer than 60000 (android complains also)
-        setTimerState(state => ({...state, inter: cappedLoopInterval(difference), now: n}))
+        setTimerState(
+          produce(draft => {
+            draft.inter = cappedLoopInterval(difference)
+            draft.now = n
+          })
+        )
       }, inter)
       return () => {
         clearTimeout(id)
@@ -127,7 +139,12 @@ function ExplodingMetaInner(p: ExplodingMetaInnerProps) {
     }
     sharedTimerKeyRef.current = messageKey
     sharedTimerIDRef.current = SharedTimer.addObserver(
-      () => setTimerState(state => ({...state, mode: 'hidden'})),
+      () =>
+        setTimerState(
+          produce(draft => {
+            draft.mode = 'hidden'
+          })
+        ),
       {
         key: sharedTimerKeyRef.current,
         ms: animationDuration,
diff --git a/shared/chat/conversation/messages/wrapper/long-pressable/index.tsx b/shared/chat/conversation/messages/wrapper/long-pressable/index.tsx
index 864ec6f24360..88f059e38130 100644
--- a/shared/chat/conversation/messages/wrapper/long-pressable/index.tsx
+++ b/shared/chat/conversation/messages/wrapper/long-pressable/index.tsx
@@ -15,7 +15,7 @@ type Props = {
 }
 import {useConversationThreadToggleSearch} from '../../../thread-context'
 import Swipeable, {type SwipeableMethods} from '@/common-adapters/swipeable-row'
-import {FocusContext} from '@/chat/conversation/normal/context'
+import {ThreadRefsContext} from '@/chat/conversation/normal/context'
 
 function ReplyIcon({progress}: {progress: Animated.Value}) {
   const opacity = progress.interpolate({inputRange: [-20, 0], outputRange: [1, 0], extrapolate: 'clamp'})
@@ -30,7 +30,7 @@ function LongPressable(props: Props & {ref?: React.Ref<Kb.MeasureRef>}) {
   const toggleThreadSearch = useConversationThreadToggleSearch()
   const setReplyTo = InputState.useConversationInputDispatch(s => s.setReplyTo)
   const ordinal = useOrdinal()
-  const {focusInput} = React.useContext(FocusContext)
+  const {focusInput} = React.useContext(ThreadRefsContext)
   const swipeRef = React.useRef<SwipeableMethods | null>(null)
 
   if (!isMobile) {
diff --git a/shared/chat/conversation/messages/wrapper/send-indicator.tsx b/shared/chat/conversation/messages/wrapper/send-indicator.tsx
index 538c45fd93f8..ddd714701c94 100644
--- a/shared/chat/conversation/messages/wrapper/send-indicator.tsx
+++ b/shared/chat/conversation/messages/wrapper/send-indicator.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
+import {produce} from 'immer'
 import {useColorScheme} from 'react-native'
 
 type AnimationStatus =
@@ -92,7 +93,11 @@ function SendIndicator(p: OwnProps) {
     }
     shownEncryptingSet.add(id)
     const timeoutID = setTimeout(() => {
-      setIndicatorState(state => ({...state, encrypting: false}))
+      setIndicatorState(
+        produce(draft => {
+          draft.encrypting = false
+        })
+      )
     }, 600)
     return () => {
       clearTimeout(timeoutID)
@@ -104,7 +109,13 @@ function SendIndicator(p: OwnProps) {
       return undefined
     }
     const timeoutID = setTimeout(() => {
-      setIndicatorState(state => (state.sent ? {...state, sentHidden: true} : state))
+      setIndicatorState(
+        produce(draft => {
+          if (draft.sent) {
+            draft.sentHidden = true
+          }
+        })
+      )
     }, 400)
     return () => {
       clearTimeout(timeoutID)
diff --git a/shared/chat/conversation/messages/wrapper/shared-timers.tsx b/shared/chat/conversation/messages/wrapper/shared-timers.tsx
index 139e72e099c0..60fbd6aad00e 100644
--- a/shared/chat/conversation/messages/wrapper/shared-timers.tsx
+++ b/shared/chat/conversation/messages/wrapper/shared-timers.tsx
@@ -6,6 +6,11 @@ import logger from '@/logger'
  * be kept in sync. Timers are given a key that can be
  * subscribed to. When all observers of a timer are
  * removed the timeout is cancelled and the key deleted
+ *
+ * No explicit logout reset: every observer here is added from a message row's
+ * effect and removed in that effect's cleanup (see exploding-meta.tsx), and
+ * logout unmounts every message row. So _refs/_timers always drain back to
+ * empty on logout without this module needing to know about it.
  */
 
 export type SharedTimerID = number
diff --git a/shared/chat/conversation/messages/wrapper/wrapper.tsx b/shared/chat/conversation/messages/wrapper/wrapper.tsx
index c865a1d893ba..d53766d24da6 100644
--- a/shared/chat/conversation/messages/wrapper/wrapper.tsx
+++ b/shared/chat/conversation/messages/wrapper/wrapper.tsx
@@ -24,9 +24,13 @@ import {
   getConversationThreadDisplayMessage,
   ShownUsernameCacheContext,
   useConversationThreadActions,
+  useConversationThreadID,
   useConversationThreadMessageActions,
   useConversationThreadSelector,
+  useThreadMeta,
 } from '../../thread-context'
+import {emptyParticipantInfo} from '../../data-hooks'
+import {useInboxMetadataState} from '@/chat/inbox/metadata'
 import type {ConversationInputState} from '../../input-area/input-state'
 import {useChatTeamMemberRole} from '../../team-hooks'
 
@@ -202,7 +206,7 @@ function AuthorSection(p: AuthorProps) {
 
 const getAuthorData = (
   message: T.Chat.Message,
-  meta: T.Chat.ConversationMeta,
+  meta: Pick<T.Chat.ConversationMeta, 'botAliases' | 'teamID' | 'teamType' | 'teamname'>,
   participants: T.Chat.ParticipantInfo,
   showUsername: string
 ): FlatAuthorData => {
@@ -372,6 +376,18 @@ export const useMessageData = (ordinal: T.Chat.Ordinal, isCenteredHighlight?: bo
   const {retryMessage} = useConversationThreadActions()
   const messageActions = useConversationThreadMessageActions()
   const shownCache = React.useContext(ShownUsernameCacheContext)
+  const conversationIDKey = useConversationThreadID()
+  // Reload-free read: avoid useConversationParticipants' per-mount unboxRows + engine
+  // listener registration, which is too expensive to pay per message row.
+  const participantInfo = useInboxMetadataState(s => s.participants.get(conversationIDKey)) ?? emptyParticipantInfo
+  const authorMeta = useThreadMeta(
+    C.useShallow(m => ({
+      botAliases: m.botAliases,
+      teamID: m.teamID,
+      teamType: m.teamType,
+      teamname: m.teamname,
+    }))
+  )
 
   return useConversationThreadSelector(
     C.useShallow(s => {
@@ -397,7 +413,7 @@ export const useMessageData = (ordinal: T.Chat.Ordinal, isCenteredHighlight?: bo
         ...commonData,
         ...getEditCancelRetryData(commonData.ecrType, message),
         ...getRowActions(messageActions, uiDispatch, retryMessage),
-        ...getAuthorData(message, s.meta, s.participants, showUsername),
+        ...getAuthorData(message, authorMeta, participantInfo, showUsername),
         message,
       }
     })
diff --git a/shared/chat/conversation/normal/container.test.tsx b/shared/chat/conversation/normal/container.test.tsx
index ff34b4c5d23e..a65902885a01 100644
--- a/shared/chat/conversation/normal/container.test.tsx
+++ b/shared/chat/conversation/normal/container.test.tsx
@@ -96,6 +96,7 @@ jest.mock('../thread-context', () => ({
   useConversationThreadSelector: (
     selector: (state: {loaded: boolean; meta: T.Chat.ConversationMeta}) => unknown
   ) => selector({loaded: mockLoaded, meta: mockMeta}),
+  useThreadMeta: (selector: (meta: T.Chat.ConversationMeta) => unknown) => selector(mockMeta),
 }))
 
 jest.mock('../team-hooks', () => {
diff --git a/shared/chat/conversation/normal/container.tsx b/shared/chat/conversation/normal/container.tsx
index 8cb4c726c46f..e59c5e85cb0b 100644
--- a/shared/chat/conversation/normal/container.tsx
+++ b/shared/chat/conversation/normal/container.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 import {useEngineActionListener} from '@/engine/action-listener'
 import Normal from '.'
 import * as T from '@/constants/types'
-import {FocusProvider, ScrollProvider} from './context'
+import {ThreadRefsProvider} from './context'
 import {OrangeLineContext, SetOrangeLineContext, useExplicitOrangeLineState} from '../orange-line-context'
 import {ChatTeamProvider} from '../team-hooks'
 import {ConversationCenterProvider} from '../center-context'
@@ -12,6 +12,7 @@ import {ConversationInputProvider} from '../input-area/input-state'
 import {
   useConversationThreadID,
   useConversationThreadSelector,
+  useThreadMeta,
 } from '../thread-context'
 import {ConversationThreadLoadStatusProvider} from '../thread-load-status-context'
 import {MaybeMentionProvider} from '@/common-adapters/markdown/maybe-mention/context'
@@ -53,10 +54,12 @@ const useOrangeLine = (
   React.useLayoutEffect(() => {
     currentOrangeLineKeyRef.current = {conversationIDKey: id, mobileAppState}
   }, [id, mobileAppState])
-  const meta = useConversationThreadSelector(s => s.meta)
+  const {maxVisibleMsgID, readMsgID} = useThreadMeta(
+    C.useShallow(m => ({maxVisibleMsgID: m.maxVisibleMsgID, readMsgID: m.readMsgID}))
+  )
   // Keep the read position from when this conversation mounted. Mark-as-read updates
-  // meta.readMsgID shortly after navigation, but the open thread should retain its orange line.
-  const [initialReadMsgID] = React.useState(() => meta.readMsgID)
+  // readMsgID shortly after navigation, but the open thread should retain its orange line.
+  const [initialReadMsgID] = React.useState(() => readMsgID)
 
   const loadOrangeLine = React.useEffectEvent(
     (conversationIDKey: T.Chat.ConversationIDKey, readMsgID: T.Chat.MessageID) => {
@@ -97,15 +100,13 @@ const useOrangeLine = (
     }
   }, [id, loaded, initialReadMsgID])
 
-  const maxVisibleMsgID = meta.maxVisibleMsgID
-
   // just use the rpc for orange line if we're not active
   // if we are active we want to keep whatever state we had so it is maintained
   React.useEffect(() => {
     if (!active) {
-      loadOrangeLine(id, meta.readMsgID)
+      loadOrangeLine(id, readMsgID)
     }
-  }, [maxVisibleMsgID, active, id, meta.readMsgID])
+  }, [maxVisibleMsgID, active, id, readMsgID])
 
   const setOrangeLine = React.useEffectEvent((ordinal: T.Chat.Ordinal) => {
     const currentKey = currentOrangeLineKeyRef.current
@@ -118,16 +119,13 @@ const useOrangeLine = (
     })
   })
 
-  const explicitOrangeLine = useExplicitOrangeLineState(s => s.update)
+  const explicitOrangeLine = useExplicitOrangeLineState(s => s.updates.get(id))
   const explicitOrangeLineVersionRef = React.useRef(explicitOrangeLine?.version ?? 0)
   React.useEffect(() => {
     if (!explicitOrangeLine || explicitOrangeLine.version <= explicitOrangeLineVersionRef.current) {
       return
     }
     explicitOrangeLineVersionRef.current = explicitOrangeLine.version
-    if (explicitOrangeLine.conversationIDKey !== id) {
-      return
-    }
     setOrangeLine(explicitOrangeLine.ordinal)
   }, [explicitOrangeLine, id])
 
@@ -136,8 +134,8 @@ const useOrangeLine = (
 
 const useShowManageChannels = () => {
   const navigateAppend = C.Router2.navigateAppend
-  const {teamID, teamname} = useConversationThreadSelector(
-    C.useShallow(s => ({teamID: s.meta.teamID, teamname: s.meta.teamname}))
+  const {teamID, teamname} = useThreadMeta(
+    C.useShallow(m => ({teamID: m.teamID, teamname: m.teamname}))
   )
   useEngineActionListener('chat.1.chatUi.chatShowManageChannels', action => {
     if (
@@ -194,11 +192,9 @@ const NormalWrapper = function NormalWrapper() {
           >
             <ConversationCenterProvider id={conversationIDKey}>
               <ConversationInputProvider key={conversationIDKey} id={conversationIDKey}>
-                <FocusProvider>
-                  <ScrollProvider>
-                    <Normal />
-                  </ScrollProvider>
-                </FocusProvider>
+                <ThreadRefsProvider>
+                  <Normal />
+                </ThreadRefsProvider>
               </ConversationInputProvider>
             </ConversationCenterProvider>
           </ConversationThreadLoadStatusProvider>
diff --git a/shared/chat/conversation/normal/context.tsx b/shared/chat/conversation/normal/context.tsx
index ecb27fad4e99..d23a2dac163f 100644
--- a/shared/chat/conversation/normal/context.tsx
+++ b/shared/chat/conversation/normal/context.tsx
@@ -2,30 +2,6 @@ import * as React from 'react'
 
 type FocusRefType = null | {focus: () => void}
 
-type FocusContextType = {
-  focusInput: () => void
-  setInputRef: (inputRef: FocusRefType) => void
-}
-
-export const FocusContext = React.createContext<FocusContextType>({
-  focusInput: () => {},
-  setInputRef: () => {},
-})
-FocusContext.displayName = 'FocusContext'
-
-export const FocusProvider = function FocusProvider({children}: {children: React.ReactNode}) {
-  const inputRef = React.useRef<FocusRefType>(null)
-  const [value] = React.useState<FocusContextType>(() => ({
-    focusInput: () => {
-      inputRef.current?.focus()
-    },
-    setInputRef: r => {
-      inputRef.current = r
-    },
-  }))
-  return <FocusContext value={value}>{children}</FocusContext>
-}
-
 type ScrollType = {
   scrollUp: () => void
   scrollDown: () => void
@@ -33,21 +9,29 @@ type ScrollType = {
 }
 type ScrollRefType = null | ScrollType
 
-type ScrollContextType = ScrollType & {
+type ThreadRefsType = ScrollType & {
+  focusInput: () => void
+  setInputRef: (inputRef: FocusRefType) => void
   setScrollRef: (scrollRef: ScrollRefType) => void
 }
 
-export const ScrollContext = React.createContext<ScrollContextType>({
+export const ThreadRefsContext = React.createContext<ThreadRefsType>({
+  focusInput: () => {},
   scrollDown: () => {},
   scrollToBottom: () => {},
   scrollUp: () => {},
+  setInputRef: () => {},
   setScrollRef: () => {},
 })
-ScrollContext.displayName = 'ScrollContext'
+ThreadRefsContext.displayName = 'ThreadRefsContext'
 
-export const ScrollProvider = function ScrollProvider({children}: {children: React.ReactNode}) {
+export const ThreadRefsProvider = function ThreadRefsProvider({children}: {children: React.ReactNode}) {
+  const inputRef = React.useRef<FocusRefType>(null)
   const scrollRef = React.useRef<ScrollRefType>(null)
-  const [value] = React.useState<ScrollContextType>(() => ({
+  const [value] = React.useState<ThreadRefsType>(() => ({
+    focusInput: () => {
+      inputRef.current?.focus()
+    },
     scrollDown: () => {
       scrollRef.current?.scrollDown()
     },
@@ -57,9 +41,12 @@ export const ScrollProvider = function ScrollProvider({children}: {children: Rea
     scrollUp: () => {
       scrollRef.current?.scrollUp()
     },
+    setInputRef: r => {
+      inputRef.current = r
+    },
     setScrollRef: r => {
       scrollRef.current = r
     },
   }))
-  return <ScrollContext value={value}>{children}</ScrollContext>
+  return <ThreadRefsContext value={value}>{children}</ThreadRefsContext>
 }
diff --git a/shared/chat/conversation/normal/index.tsx b/shared/chat/conversation/normal/index.tsx
index d5bd9255acee..7155b2ed7616 100644
--- a/shared/chat/conversation/normal/index.tsx
+++ b/shared/chat/conversation/normal/index.tsx
@@ -11,8 +11,8 @@ import ThreadLoadStatus from '../load-status'
 import {useConversationCenterActions} from '../center-context'
 import {
   useConversationThreadID,
-  useConversationThreadSelector,
   useConversationThreadToggleSearch,
+  useThreadMeta,
 } from '../thread-context'
 import {useThreadSearchRoute} from '../thread-search-route'
 import {indefiniteArticle} from '@/util/string'
@@ -54,9 +54,9 @@ const DesktopConversation = function DesktopConversation() {
     })
   }
   const showThreadSearch = !!useThreadSearchRoute()
-  const meta = useConversationThreadSelector(s => s.meta)
-  const {cannotWrite, minWriterRole} = meta
-  const threadLoadedOffline = meta.offline
+  const {cannotWrite, minWriterRole, offline: threadLoadedOffline} = useThreadMeta(
+    C.useShallow(m => ({cannotWrite: m.cannotWrite, minWriterRole: m.minWriterRole, offline: m.offline}))
+  )
   const dragAndDropRejectReason = cannotWrite
     ? `You must be at least ${indefiniteArticle(minWriterRole)} ${minWriterRole} to post.`
     : undefined
@@ -133,7 +133,7 @@ const NativeConversation = function NativeConversation() {
 
   const safeStyle = {height, maxHeight: height, minHeight: height}
 
-  const threadLoadedOffline = useConversationThreadSelector(s => s.meta.offline)
+  const threadLoadedOffline = useThreadMeta(m => m.offline)
 
   const stickyOffset = React.useMemo(() => ({closed: -insets.bottom, opened: 0}), [insets.bottom])
 
diff --git a/shared/chat/conversation/orange-line-context.tsx b/shared/chat/conversation/orange-line-context.tsx
index 95121569b0e5..3baa33242644 100644
--- a/shared/chat/conversation/orange-line-context.tsx
+++ b/shared/chat/conversation/orange-line-context.tsx
@@ -3,38 +3,37 @@ import * as T from '@/constants/types'
 import * as Z from '@/util/zustand'
 
 type ExplicitOrangeLine = T.Immutable<{
-  conversationIDKey: T.Chat.ConversationIDKey
   ordinal: T.Chat.Ordinal
   version: number
 }>
 
 type ExplicitOrangeLineState = T.Immutable<{
-  update?: ExplicitOrangeLine
+  updates: Map<T.Chat.ConversationIDKey, ExplicitOrangeLine>
   dispatch: {
     resetState: () => void
     setOrangeLine: (conversationIDKey: T.Chat.ConversationIDKey, ordinal: T.Chat.Ordinal) => void
   }
 }>
 
-let explicitOrangeLineVersion = 0
-
 export const useExplicitOrangeLineState = Z.createZustand<ExplicitOrangeLineState>(
   'chat-explicit-orange-line',
-  set => ({
-    dispatch: {
-      resetState: Z.defaultReset,
-      setOrangeLine: (conversationIDKey, ordinal) => {
-        set(s => {
-          s.update = {
-            conversationIDKey,
-            ordinal,
-            version: ++explicitOrangeLineVersion,
-          }
-        })
+  set => {
+    let explicitOrangeLineVersion = 0
+    return {
+      dispatch: {
+        resetState: Z.defaultReset,
+        setOrangeLine: (conversationIDKey, ordinal) => {
+          set(s => {
+            s.updates.set(conversationIDKey, {
+              ordinal,
+              version: ++explicitOrangeLineVersion,
+            })
+          })
+        },
       },
-    },
-    update: undefined,
-  })
+      updates: new Map(),
+    }
+  }
 )
 
 export const setConversationOrangeLine = (
diff --git a/shared/chat/conversation/pinned-message.tsx b/shared/chat/conversation/pinned-message.tsx
index 2f020d523f64..56d5842321fb 100644
--- a/shared/chat/conversation/pinned-message.tsx
+++ b/shared/chat/conversation/pinned-message.tsx
@@ -7,17 +7,17 @@ import {useCurrentUserState} from '@/stores/current-user'
 import {useChatTeam} from './team-hooks'
 import {ZoomedImage} from './common'
 import {useConversationCenterActions} from './center-context'
-import {useConversationThreadID, useConversationThreadSelector} from './thread-context'
+import {useConversationThreadID, useThreadMeta} from './thread-context'
 import logger from '@/logger'
 import {RPCError} from '@/util/errors'
 
 const PinnedMessage = function PinnedMessage() {
   const conversationIDKey = useConversationThreadID()
-  const {pinnedMsg, teamID, teamname} = useConversationThreadSelector(
-    C.useShallow(s => ({
-      pinnedMsg: s.meta.pinnedMsg,
-      teamID: s.meta.teamID,
-      teamname: s.meta.teamname,
+  const {pinnedMsg, teamID, teamname} = useThreadMeta(
+    C.useShallow(m => ({
+      pinnedMsg: m.pinnedMsg,
+      teamID: m.teamID,
+      teamname: m.teamname,
     }))
   )
   const {centerOnMessage} = useConversationCenterActions()
diff --git a/shared/chat/conversation/rekey/container.tsx b/shared/chat/conversation/rekey/container.tsx
index aa0fdb56a422..e420e15b9378 100644
--- a/shared/chat/conversation/rekey/container.tsx
+++ b/shared/chat/conversation/rekey/container.tsx
@@ -4,11 +4,11 @@ import * as T from '@/constants/types'
 import ParticipantRekey from './participant-rekey'
 import YouRekey from './you-rekey'
 import {navToProfile} from '@/constants/router'
-import {useConversationThreadSelector} from '../thread-context'
+import {useThreadMeta} from '../thread-context'
 
 const Container = () => {
   const _you = useCurrentUserState(s => s.username)
-  const rekeyers = useConversationThreadSelector(s => s.meta.rekeyers)
+  const rekeyers = useThreadMeta(m => m.rekeyers)
   const onBack = C.Router2.navigateUp
   const navigateAppend = C.Router2.navigateAppend
   const onEnterPaperkey = () => {
diff --git a/shared/chat/conversation/send-actions.tsx b/shared/chat/conversation/send-actions.tsx
index 6ae77b3b000b..7767dbb677c8 100644
--- a/shared/chat/conversation/send-actions.tsx
+++ b/shared/chat/conversation/send-actions.tsx
@@ -9,6 +9,7 @@ import {
   useConversationThreadActions,
   useConversationThreadID,
   useConversationThreadSelector,
+  useThreadMeta,
 } from './thread-context'
 
 type SendTextParams = {
@@ -82,14 +83,14 @@ export const sendTextToConversation = (
 export const useConversationSendActions = () => {
   const conversationIDKey = useConversationThreadID()
   const actions = useConversationThreadActions()
-  const {explodingMode, messageMap, messageOrdinals, meta} = useConversationThreadSelector(
+  const {explodingMode, messageMap, messageOrdinals} = useConversationThreadSelector(
     C.useShallow(s => ({
       explodingMode: s.explodingMode,
       messageMap: s.messageMap,
       messageOrdinals: s.messageOrdinals,
-      meta: s.meta,
     }))
   )
+  const meta = useThreadMeta(C.useShallow(m => ({tlfname: m.tlfname})))
   const clientPrev = getClientPrevFromThread(messageMap, messageOrdinals)
 
   const editMessage = (ordinal: T.Chat.Ordinal, text: string) => {
diff --git a/shared/chat/conversation/team-hooks.tsx b/shared/chat/conversation/team-hooks.tsx
index fcb9e1bdee01..199ea70a1ab0 100644
--- a/shared/chat/conversation/team-hooks.tsx
+++ b/shared/chat/conversation/team-hooks.tsx
@@ -4,11 +4,12 @@ import {useEngineActionListener} from '@/engine/action-listener'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useUsersState} from '@/stores/users'
 import * as Teams from '@/constants/teams'
+import {produce} from 'immer'
 import logger from '@/logger'
 import * as React from 'react'
 import {useTeamsListMap, useTeamsRoleMap} from '@/teams/use-teams-list'
 import {updateChosenChannelsTeamnames, useChosenChannelsTeamnames} from './manage-channels-badge'
-import {useConversationThreadSelector} from './thread-context'
+import {useThreadMeta} from './thread-context'
 
 type ChatTeamState = {
   allowPromote: boolean
@@ -141,7 +142,14 @@ const useChatTeamRaw = (teamID: T.Teams.TeamID, teamname?: string, enabled = tru
       return
     }
     const requestVersion = ++requestVersionRef.current
-    setState(prev => ({...prev, loading: true, teamname: prev.teamname || knownTeamname}))
+    setState(
+      produce(draft => {
+        draft.loading = true
+        if (!draft.teamname) {
+          draft.teamname = knownTeamname
+        }
+      })
+    )
     try {
       const [annotatedTeam] = await Promise.all([
         T.RPCGen.teamsGetAnnotatedTeamRpcPromise({teamID: validTeamID}),
@@ -159,7 +167,14 @@ const useChatTeamRaw = (teamID: T.Teams.TeamID, teamname?: string, enabled = tru
         return
       }
       logger.warn(`Failed to load chat team metadata for ${validTeamID}`, error)
-      setState(prev => ({...prev, loading: false, teamname: prev.teamname || knownTeamname}))
+      setState(
+        produce(draft => {
+          draft.loading = false
+          if (!draft.teamname) {
+            draft.teamname = knownTeamname
+          }
+        })
+      )
     }
   }, [clearState, enabled, knownTeamname, loadRoleMapIfStale, validTeamID])
 
@@ -250,7 +265,12 @@ const useChatTeamMembersRaw = (teamID: T.Teams.TeamID, enabled = true): ChatTeam
         return
       }
       logger.warn(`Failed to reload chat team members for ${validTeamID}`, error)
-      setState(prev => ({...prev, loadedTeamID: validTeamID, loading: false}))
+      setState(
+        produce(draft => {
+          draft.loadedTeamID = validTeamID
+          draft.loading = false
+        })
+      )
     }
   }, [enabled, loadMemberInfos, validTeamID])
 
@@ -259,7 +279,12 @@ const useChatTeamMembersRaw = (teamID: T.Teams.TeamID, enabled = true): ChatTeam
       clearState()
       return
     }
-    setState(prev => ({...prev, loadedTeamID: validTeamID, loading: true}))
+    setState(
+      produce(draft => {
+        draft.loadedTeamID = validTeamID
+        draft.loading = true
+      })
+    )
     await loadMembers()
   }, [clearState, enabled, loadMembers, validTeamID])
 
@@ -294,7 +319,12 @@ const useChatTeamMembersRaw = (teamID: T.Teams.TeamID, enabled = true): ChatTeam
           return
         }
         logger.warn(`Failed to reload chat team members for ${validTeamID}`, error)
-        setState(prev => ({...prev, loadedTeamID: validTeamID, loading: false}))
+        setState(
+          produce(draft => {
+            draft.loadedTeamID = validTeamID
+            draft.loading = false
+          })
+        )
       }
     }
     C.ignorePromise(f())
@@ -390,11 +420,15 @@ const useChatTeamNamesRaw = (teamIDs: ReadonlyArray<T.Teams.TeamID>, enabled = t
         return
       }
       logger.warn(`Failed to load chat team names for ${teamIDsKey}`, error)
-      setState(prev => ({
-        loadedTeamIDsKey: teamIDsKey,
-        loading: false,
-        teamnames: prev.loadedTeamIDsKey === teamIDsKey ? new Map(prev.teamnames) : new Map(),
-      }))
+      setState(
+        produce(draft => {
+          if (draft.loadedTeamIDsKey !== teamIDsKey) {
+            draft.teamnames = new Map()
+          }
+          draft.loadedTeamIDsKey = teamIDsKey
+          draft.loading = false
+        })
+      )
     }
   }, [enabled, loadTeamNamesForIDs, teamIDsKey, username, validTeamIDs])
 
@@ -403,11 +437,15 @@ const useChatTeamNamesRaw = (teamIDs: ReadonlyArray<T.Teams.TeamID>, enabled = t
       clearState()
       return
     }
-    setState(prev => ({
-      loadedTeamIDsKey: teamIDsKey,
-      loading: true,
-      teamnames: prev.loadedTeamIDsKey === teamIDsKey ? new Map(prev.teamnames) : new Map(),
-    }))
+    setState(
+      produce(draft => {
+        if (draft.loadedTeamIDsKey !== teamIDsKey) {
+          draft.teamnames = new Map()
+        }
+        draft.loadedTeamIDsKey = teamIDsKey
+        draft.loading = true
+      })
+    )
     await loadTeamNames()
   }, [clearState, enabled, loadTeamNames, teamIDsKey, username])
 
@@ -472,21 +510,23 @@ const useChatTeamNamesRaw = (teamIDs: ReadonlyArray<T.Teams.TeamID>, enabled = t
   useEngineActionListener('keybase.1.NotifyTeam.teamDeleted', action => {
     if (enabled && validTeamIDs.includes(action.payload.params.teamID)) {
       requestVersionRef.current++
-      setState(prev => {
-        const teamnames = new Map(prev.teamnames)
-        teamnames.delete(action.payload.params.teamID)
-        return {loadedTeamIDsKey: prev.loadedTeamIDsKey, loading: false, teamnames}
-      })
+      setState(
+        produce(draft => {
+          draft.teamnames.delete(action.payload.params.teamID)
+          draft.loading = false
+        })
+      )
     }
   })
   useEngineActionListener('keybase.1.NotifyTeam.teamExit', action => {
     if (enabled && validTeamIDs.includes(action.payload.params.teamID)) {
       requestVersionRef.current++
-      setState(prev => {
-        const teamnames = new Map(prev.teamnames)
-        teamnames.delete(action.payload.params.teamID)
-        return {loadedTeamIDsKey: prev.loadedTeamIDsKey, loading: false, teamnames}
-      })
+      setState(
+        produce(draft => {
+          draft.teamnames.delete(action.payload.params.teamID)
+          draft.loading = false
+        })
+      )
     }
   })
 
@@ -504,11 +544,11 @@ ChatTeamContext.displayName = 'ChatTeamContext'
 
 export const ChatTeamProvider = (props: React.PropsWithChildren) => {
   const {children} = props
-  const {teamID, teamType, teamname} = useConversationThreadSelector(
-    C.useShallow(s => ({
-      teamID: s.meta.teamID,
-      teamType: s.meta.teamType,
-      teamname: s.meta.teamname,
+  const {teamID, teamType, teamname} = useThreadMeta(
+    C.useShallow(m => ({
+      teamID: m.teamID,
+      teamType: m.teamType,
+      teamname: m.teamname,
     }))
   )
   const outer = React.useContext(ChatTeamContext)
diff --git a/shared/chat/conversation/thread-context.test.tsx b/shared/chat/conversation/thread-context.test.tsx
index 0d495c677121..eecd52dcc497 100644
--- a/shared/chat/conversation/thread-context.test.tsx
+++ b/shared/chat/conversation/thread-context.test.tsx
@@ -1,7 +1,6 @@
 /** @jest-environment jsdom */
 /// <reference types="jest" />
 import * as Common from '@/constants/chat/common'
-import * as Meta from '@/constants/chat/meta'
 import * as Message from '@/constants/chat/message'
 import * as T from '@/constants/types'
 import HiddenString from '@/util/hidden-string'
@@ -27,20 +26,7 @@ import {
   useConversationThreadSelector,
   useConversationThreadStore,
 } from './thread-context'
-
-jest.mock('@/chat/inbox/rows-state', () => ({
-  flushInboxRowUpdates: jest.fn(),
-  getInboxRowTrustedState: jest.fn(() => undefined),
-  queueInboxRowUpdate: jest.fn(),
-  setInboxRowTrustedState: jest.fn(),
-  syncInboxRowBadgeState: jest.fn(),
-  syncInboxRowsFromLayout: jest.fn(),
-  syncInboxRowsFromMetaAndParticipants: jest.fn(),
-  syncInboxRowsFromMetas: jest.fn(),
-  syncInboxRowsFromParticipantMap: jest.fn(),
-  syncInboxRowsFromParticipants: jest.fn(),
-  updateInboxRowTyping: jest.fn(),
-}))
+import {useConversationParticipants} from './data-hooks'
 
 const convID = T.Chat.conversationIDToKey(new Uint8Array([1, 2, 3, 4]))
 const emptyStringSet = new Set<string>()
@@ -169,43 +155,6 @@ const makeIncomingOutboxReaction = (
   pagination: null,
 })
 
-const makeUnverifiedInboxUIItem = (): T.RPCChat.UnverifiedInboxUIItem => ({
-  commands: {typ: T.RPCChat.ConversationCommandGroupsTyp.none},
-  convID: T.Chat.conversationIDKeyToString(convID),
-  convRetention: null,
-  draft: null,
-  finalizeInfo: null,
-  isDefaultConv: false,
-  isPublic: false,
-  localMetadata: {
-    channelName: '',
-    headline: '',
-    headlineDecorated: '',
-    resetParticipants: null,
-    snippet: '',
-    snippetDecoration: T.RPCChat.SnippetDecoration.none,
-    writerNames: null,
-  },
-  localVersion: 1,
-  maxMsgID: T.Chat.messageIDToNumber(T.Chat.numberToMessageID(301)),
-  maxVisibleMsgID: T.Chat.messageIDToNumber(T.Chat.numberToMessageID(301)),
-  memberStatus: T.RPCChat.ConversationMemberStatus.active,
-  membersType: T.RPCChat.ConversationMembersType.impteamnative,
-  name: 'alice,bob,charlie',
-  notifications: null,
-  readMsgID: 0,
-  status: T.RPCChat.ConversationStatus.unfiled,
-  supersededBy: null,
-  supersedes: null,
-  teamRetention: null,
-  teamType: T.RPCChat.TeamType.simple,
-  time: 1,
-  tlfID: 'tlf-id',
-  topicType: T.RPCChat.TopicType.chat,
-  version: 1,
-  visibility: T.RPCGen.TLFVisibility.private,
-})
-
 const makeFailedOutboxRecord = (
   conversationIDKey: T.Chat.ConversationIDKey,
   outboxID: T.Chat.OutboxID
@@ -331,7 +280,7 @@ test('separate providers do not share thread state', () => {
 })
 
 test('mounted thread syncs participant updates received outside its provider', () => {
-  const {result} = renderHook(() => useConversationThreadSelector(s => s.participants), {wrapper})
+  const {result} = renderHook(() => useConversationParticipants(convID), {wrapper})
   const participantInfo = {
     all: ['alice', 'helperbot'],
     contactName: new Map<string, string>(),
@@ -339,10 +288,7 @@ test('mounted thread syncs participant updates received outside its provider', (
   }
 
   act(() => {
-    participantInfoReceived(convID, participantInfo, {
-      ...Meta.makeConversationMeta(),
-      conversationIDKey: convID,
-    })
+    participantInfoReceived(convID, participantInfo)
   })
 
   expect(result.current.all).toEqual(['alice', 'helperbot'])
@@ -1136,45 +1082,6 @@ test('toggleMessageReaction overlays locally without mutating server reactions',
   })
 })
 
-test('mounted thread listener applies inbox failure metadata for the active conversation', () => {
-  const {result} = renderHook(
-    () => ({
-      meta: useConversationThreadSelector(s => s.meta),
-      participants: useConversationThreadSelector(s => s.participants),
-    }),
-    {wrapper}
-  )
-
-  act(() => {
-    notifyEngineActionListeners({
-      payload: {
-        params: {
-          convID: T.Chat.keyToConversationID(convID),
-          error: {
-            message: 'rekey needed',
-            rekeyInfo: {
-              readerNames: ['charlie'],
-              rekeyers: ['bob'],
-              tlfName: 'alice,bob,charlie',
-              tlfPublic: false,
-              writerNames: ['alice', 'bob'],
-            },
-            remoteConv: makeUnverifiedInboxUIItem(),
-            typ: T.RPCChat.ConversationErrorType.otherrekeyneeded,
-            unverifiedTLFName: 'alice,bob,charlie',
-          },
-        },
-      },
-      type: 'chat.1.chatUi.chatInboxFailed',
-    } as never)
-  })
-
-  expect(result.current.meta.trustedState).toBe('error')
-  expect(result.current.meta.snippet).toBe('rekey needed')
-  expect([...result.current.meta.rekeyers]).toEqual(['bob'])
-  expect(result.current.participants.name).toEqual(['alice', 'bob', 'charlie'])
-})
-
 test('mounted thread listener applies request and payment decorators for the active conversation', () => {
   const {result} = renderHook(
     () => ({
diff --git a/shared/chat/conversation/thread-context.tsx b/shared/chat/conversation/thread-context.tsx
index 631e3f95bdd2..ab58d3d94909 100644
--- a/shared/chat/conversation/thread-context.tsx
+++ b/shared/chat/conversation/thread-context.tsx
@@ -1,18 +1,9 @@
 import * as Common from '@/constants/chat/common'
-import * as Message from '@/constants/chat/message'
 import * as Meta from '@/constants/chat/meta'
-import * as TeamsUtil from '@/constants/teams'
 import * as React from 'react'
 import * as Strings from '@/constants/strings'
 import * as T from '@/constants/types'
-import {
-  getVisibleScreen,
-  navigateAppend,
-  navigateToInbox,
-  navigateToThread,
-  navigateUp,
-  setChatRootParams,
-} from '@/constants/router'
+import {getVisibleScreen, navigateAppend, navigateToThread, navigateUp, setChatRootParams} from '@/constants/router'
 import {isPhone} from '@/constants/platform'
 import logger from '@/logger'
 import throttle from 'lodash/throttle'
@@ -20,9 +11,6 @@ import {clearChatTimeCache} from '@/util/timestamp'
 import {findLast} from '@/util/arrays'
 import {ignorePromise} from '@/constants/utils'
 import {RPCError} from '@/util/errors'
-import {persistRoute} from '@/util/storeless-actions'
-import {uint8ArrayToString} from '@/util/uint8array'
-import {useEngineActionListener} from '@/engine/action-listener'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useUsersState} from '@/stores/users'
 import {useConfigState} from '@/stores/config'
@@ -41,7 +29,6 @@ import {
   explodeMessagesInThreadState,
   failAttachmentDownloadInThreadState,
   finishAttachmentDownloadInThreadState,
-  getOrdinalForMessageID,
   type OptimisticReaction,
   retryMessageInThreadState,
   setMessageSubmitStateInThreadState,
@@ -56,16 +43,10 @@ import {
   getInboxConversationMeta,
   getInboxConversationParticipants,
   metasReceived,
-  participantInfoReceived,
   unboxRows,
   useInboxMetadataState,
 } from '@/chat/inbox/metadata'
-import {
-  loadThreadMessageIDAtIndex,
-  loadThreadNonblock,
-  markConversationRead,
-  threadLoadReasonToRPCReason,
-} from './thread-rpc'
+import {loadThreadMessageIDAtIndex, markConversationRead} from './thread-rpc'
 import {
   cancelConversationPost,
   createAdhocConversation,
@@ -74,9 +55,17 @@ import {
   postConversationReaction,
 } from './message-rpc'
 import {cancelActiveThreadSearchRPC} from '../search-rpc'
-
-const numMessagesOnInitialLoad = isMobile ? 20 : 100
-const numMessagesOnScrollback = 100
+import {
+  emptyConversationMeta,
+  getClientPrevFromSnapshot,
+  getExplodingModeFromConfig,
+  getMeta,
+  loadConversationThreadMessages,
+  numMessagesOnInitialLoad,
+  numMessagesOnScrollback,
+  persistExplodingMode,
+} from './thread-load'
+import {useThreadEngineListeners} from './thread-engine'
 
 const sameStringSet = (a: ReadonlySet<string>, b: ReadonlySet<string>) => {
   if (a.size !== b.size) {
@@ -90,84 +79,10 @@ const sameStringSet = (a: ReadonlySet<string>, b: ReadonlySet<string>) => {
   return true
 }
 
-const ignoreErrors = [
-  T.RPCGen.StatusCode.scgenericapierror,
-  T.RPCGen.StatusCode.scapinetworkerror,
-  T.RPCGen.StatusCode.sctimeout,
-]
-
-const makeEmptyParticipantInfo = (): T.Chat.ParticipantInfo => ({
+const emptyParticipantInfo: T.Chat.ParticipantInfo = {
   all: [],
   contactName: new Map(),
   name: [],
-})
-
-const getExplodingModeFromGregorItems = (
-  conversationIDKey: T.Chat.ConversationIDKey,
-  items: ReadonlyArray<{item: T.RPCGen.Gregor1.Item}>
-) => {
-  const explodingItems = items.filter(i => i.item.category.startsWith(Common.explodingModeGregorKeyPrefix))
-  if (!explodingItems.length) {
-    return 0
-  }
-  const category = `${Common.explodingModeGregorKeyPrefix}${conversationIDKey}`
-  const item = explodingItems.find(i => i.item.category === category)
-  if (!item) {
-    // Other conversations have exploding modes but this one's category is absent,
-    // meaning it was dismissed: the mode is off.
-    return 0
-  }
-  const secondsString = uint8ArrayToString(item.item.body)
-  const seconds = parseInt(secondsString, 10)
-  if (isNaN(seconds)) {
-    logger.warn(`Got dirty exploding mode ${secondsString} for category ${category}`)
-    return undefined
-  }
-  return seconds
-}
-
-const getExplodingModeFromConfig = (conversationIDKey: T.Chat.ConversationIDKey) =>
-  getExplodingModeFromGregorItems(conversationIDKey, useConfigState.getState().gregorPushState) ?? 0
-
-const persistExplodingMode = (
-  conversationIDKey: T.Chat.ConversationIDKey,
-  meta: T.Chat.ConversationMeta,
-  seconds: number
-) => {
-  const f = async () => {
-    logger.info(`Setting exploding mode for conversation ${conversationIDKey} to ${seconds}`)
-    const category = `${Common.explodingModeGregorKeyPrefix}${conversationIDKey}`
-    const convRetention = Meta.getEffectiveRetentionPolicy(meta)
-    try {
-      if (seconds === 0 || seconds === convRetention.seconds) {
-        await T.RPCGen.gregorDismissCategoryRpcPromise({category})
-      } else {
-        await T.RPCGen.gregorUpdateCategoryRpcPromise({
-          body: seconds.toString(),
-          category,
-          dtime: {offset: 0, time: 0},
-        })
-        logger.info(`Successfully set exploding mode for conversation ${conversationIDKey} to ${seconds}`)
-      }
-    } catch (error) {
-      if (error instanceof RPCError) {
-        if (seconds !== 0) {
-          logger.error(
-            `Failed to set exploding mode for conversation ${conversationIDKey} to ${seconds}. Service responded with: ${error.message}`
-          )
-        } else {
-          logger.error(
-            `Failed to unset exploding mode for conversation ${conversationIDKey}. Service responded with: ${error.message}`
-          )
-        }
-        if (ignoreErrors.includes(error.code)) {
-          return
-        }
-      }
-      throw error
-    }
-  }
-  ignorePromise(f())
 }
 
 const formatTextForQuoting = (text: string) =>
@@ -176,15 +91,6 @@ const formatTextForQuoting = (text: string) =>
     .map(line => `> ${line}\n`)
     .join('')
 
-const getClientPrevFromSnapshot = (snapshot: ConversationThreadState): T.Chat.MessageID => {
-  const ordinal = findLast(snapshot.messageOrdinals ?? [], o => {
-    const m = snapshot.messageMap.get(o)
-    return !!m?.id
-  })
-  const message = ordinal ? snapshot.messageMap.get(ordinal) : undefined
-  return message?.id || T.Chat.numberToMessageID(0)
-}
-
 const ConversationThreadIDContext = React.createContext<T.Chat.ConversationIDKey | undefined>(undefined)
 ConversationThreadIDContext.displayName = 'ConversationThreadIDContext'
 
@@ -194,7 +100,6 @@ export type ConversationThreadState = {
   flipStatusMap: Map<string, T.RPCChat.UICoinFlipStatus>
   loaded: boolean
   liveUpdateVersion: number
-  meta: T.Chat.ConversationMeta
   messageIDToOrdinal: Map<T.Chat.MessageID, T.Chat.Ordinal>
   messageMap: Map<T.Chat.Ordinal, T.Chat.Message>
   messageOrdinals?: ReadonlyArray<T.Chat.Ordinal>
@@ -203,7 +108,6 @@ export type ConversationThreadState = {
   moreToLoadForward: boolean
   optimisticReactionMap: Map<T.Chat.OutboxID, OptimisticReaction>
   paymentStatusMap: Map<T.Wallets.PaymentID, T.Chat.ChatPaymentInfo>
-  participants: T.Chat.ParticipantInfo
   pendingOutboxToOrdinal: Map<T.Chat.OutboxID, T.Chat.Ordinal>
   typing: Set<string>
   unfurlPrompt: Map<T.Chat.MessageID, Set<string>>
@@ -234,11 +138,9 @@ const makeEmptyThreadState = (): ConversationThreadState =>
       messageMap: new Map<T.Chat.Ordinal, T.Chat.Message>(),
       messageOrdinals: undefined as ReadonlyArray<T.Chat.Ordinal> | undefined,
       messageTypeMap: new Map<T.Chat.Ordinal, T.Chat.RenderMessageType>(),
-      meta: Meta.makeConversationMeta(),
       moreToLoadBack: false,
       moreToLoadForward: false,
       optimisticReactionMap: new Map<T.Chat.OutboxID, OptimisticReaction>(),
-      participants: makeEmptyParticipantInfo(),
       paymentStatusMap: new Map<T.Wallets.PaymentID, T.Chat.ChatPaymentInfo>(),
       pendingOutboxToOrdinal: new Map<T.Chat.OutboxID, T.Chat.Ordinal>(),
       typing: new Set<string>(),
@@ -249,15 +151,7 @@ const makeEmptyThreadState = (): ConversationThreadState =>
   )
 
 const makeInitialThreadState = (id: T.Chat.ConversationIDKey) => {
-  const meta = getInboxConversationMeta(id)
-  const participants = getInboxConversationParticipants(id)
   return produce(makeEmptyThreadState(), s => {
-    if (meta) {
-      s.meta = T.castDraft(meta)
-    }
-    if (participants) {
-      s.participants = T.castDraft(participants)
-    }
     s.explodingMode = getExplodingModeFromConfig(id)
   })
 }
@@ -275,8 +169,8 @@ type SelectedConversationOptions = ThreadLoadStatusOptions & {
   skipThreadLoad?: boolean
 }
 
-type ScrollDirection = 'none' | 'back' | 'forward'
-type LoadMoreMessagesParams = ThreadLoadStatusOptions & {
+export type ScrollDirection = 'none' | 'back' | 'forward'
+export type LoadMoreMessagesParams = ThreadLoadStatusOptions & {
   allowMarkAsRead?: boolean
   centeredMessageID?: {
     conversationIDKey: T.Chat.ConversationIDKey
@@ -307,7 +201,7 @@ type LoadNewerMessagesDueToScroll = (
 type JumpToRecent = (options?: ThreadLoadStatusOptions) => void
 type MessagesClear = () => void
 type SelectedConversation = (options?: SelectedConversationOptions) => void
-type ConversationThreadActions = {
+export type ConversationThreadActions = {
   addMessages: (
     messages: ReadonlyArray<T.Chat.Message>,
     opt?: {
@@ -351,11 +245,9 @@ type ConversationThreadActions = {
   receiveRequestInfo: (messageID: T.Chat.MessageID, requestInfo: T.Chat.ChatRequestInfo) => void
   retryMessage: (outboxID: T.Chat.OutboxID) => void
   setExplodingMode: (seconds: number, incoming?: boolean) => void
-  setMeta: (meta?: T.Chat.ConversationMeta) => void
   setMessageErrored: (outboxID: T.Chat.OutboxID, reason: string, errorTyp?: number) => void
   setMessageSubmitState: (ordinal: T.Chat.Ordinal, submitState: T.Chat.Message['submitState']) => void
   setMarkAsUnread: (readMsgID?: T.Chat.MessageID | false) => void
-  setParticipants: (participants: T.Chat.ParticipantInfo) => void
   setTyping: (typing: ReadonlySet<string>) => void
   showUnfurlPrompt: (messageID: T.Chat.MessageID, domain: string) => void
   addOptimisticReaction: (outboxID: T.Chat.OutboxID, reaction: OptimisticReaction) => void
@@ -379,7 +271,6 @@ type ConversationThreadActions = {
     bytesComplete?: number,
     bytesTotal?: number
   ) => void
-  updateMeta: (meta: Partial<T.Chat.ConversationMeta>) => void
 }
 
 const ConversationThreadActionsContext = React.createContext<ConversationThreadActions | undefined>(
@@ -428,463 +319,6 @@ const useScrollLoadGate = () => {
   }
 }
 
-const scrollDirectionToPagination = (
-  scrollDirection: ScrollDirection,
-  numberOfMessagesToLoad: number
-) => {
-  const pagination = {
-    last: false,
-    next: '',
-    num: numberOfMessagesToLoad,
-    previous: '',
-  }
-  switch (scrollDirection) {
-    case 'none':
-      break
-    case 'back':
-      pagination.next = 'deadbeef'
-      break
-    case 'forward':
-      pagination.previous = 'deadbeef'
-  }
-  return pagination
-}
-
-const getCurrentUser = () => {
-  const s = useCurrentUserState.getState()
-  return {devicename: s.deviceName, username: s.username}
-}
-
-const getLastOrdinalFromSnapshot = (snapshot: ConversationThreadState) =>
-  snapshot.messageOrdinals?.at(-1) ?? T.Chat.numberToOrdinal(0)
-
-const getOrdinalForMessageIDInSnapshot = (
-  snapshot: ConversationThreadState,
-  messageID: T.Chat.MessageID
-) =>
-  getOrdinalForMessageID(
-    snapshot.messageMap,
-    snapshot.pendingOutboxToOrdinal,
-    messageID,
-    snapshot.messageIDToOrdinal
-  )
-
-const applyMessagesUpdatedToThread = (
-  conversationIDKey: T.Chat.ConversationIDKey,
-  messagesUpdated: T.RPCChat.MessagesUpdated,
-  actions: ConversationThreadActions
-) => {
-  if (!messagesUpdated.updates) return
-  const snapshot = actions.getSnapshot()
-  const activelyLookingAtThread = Common.isUserActivelyLookingAtThisThread(conversationIDKey)
-  if (!snapshot.loaded && !activelyLookingAtThread) {
-    return
-  }
-
-  const {username, devicename} = getCurrentUser()
-  const messages = messagesUpdated.updates.flatMap(uimsg => {
-    if (!Message.getMessageID(uimsg)) return []
-    const message = Message.uiMessageToMessage(
-      conversationIDKey,
-      uimsg,
-      username,
-      () => getLastOrdinalFromSnapshot(actions.getSnapshot()),
-      devicename
-    )
-    return message ? [message] : []
-  })
-  if (messages.length === 0) {
-    return
-  }
-  actions.addMessages(messages, {liveUpdate: true, markAsRead: activelyLookingAtThread})
-}
-
-const applyIncomingMutationToThread = (
-  conversationIDKey: T.Chat.ConversationIDKey,
-  valid: T.RPCChat.UIMessageValid,
-  modifiedMessage: T.RPCChat.UIMessage | null | undefined,
-  actions: ConversationThreadActions
-) => {
-  const body = valid.messageBody
-  logger.info(`Got chat incoming message of messageType: ${body.messageType}`)
-  const mutationOrdinal = T.Chat.numberToOrdinal(valid.messageID)
-  if (actions.getSnapshot().messageMap.has(mutationOrdinal)) {
-    actions.deleteMessages({liveUpdate: true, ordinals: [mutationOrdinal]})
-  }
-
-  switch (body.messageType) {
-    case T.RPCChat.MessageType.edit:
-      if (modifiedMessage) {
-        const {username, devicename} = getCurrentUser()
-        const modMessage = Message.uiMessageToMessage(
-          conversationIDKey,
-          modifiedMessage,
-          username,
-          () => getLastOrdinalFromSnapshot(actions.getSnapshot()),
-          devicename
-        )
-        if (modMessage) {
-          actions.addMessages([modMessage], {liveUpdate: true})
-        }
-      }
-      return true
-    case T.RPCChat.MessageType.delete: {
-      const {delete: d} = body
-      if (d.messageIDs) {
-        const messageIDs = T.Chat.numbersToMessageIDs(d.messageIDs)
-        const snapshot = actions.getSnapshot()
-        const isExplodeNow = messageIDs.some(id => {
-          const ordinal = getOrdinalForMessageIDInSnapshot(snapshot, id)
-          const message = ordinal ? snapshot.messageMap.get(ordinal) : undefined
-          return !!((message?.type === 'text' || message?.type === 'attachment') && message.exploding)
-        })
-
-        if (isExplodeNow) {
-          actions.explodeMessages(messageIDs, valid.senderUsername, true)
-        } else {
-          actions.deleteMessages({liveUpdate: true, messageIDs})
-        }
-      }
-      return true
-    }
-    default:
-      return false
-  }
-}
-
-const applyIncomingMessageToThread = (
-  conversationIDKey: T.Chat.ConversationIDKey,
-  incomingMessage: T.RPCChat.IncomingMessage,
-  actions: ConversationThreadActions
-) => {
-  const snapshot = actions.getSnapshot()
-  const activelyLookingAtThread = Common.isUserActivelyLookingAtThisThread(conversationIDKey)
-  if (!snapshot.loaded && !activelyLookingAtThread) {
-    return
-  }
-  const {message: cMsg, modifiedMessage} = incomingMessage
-  const {username, devicename} = getCurrentUser()
-
-  if (
-    cMsg.state === T.RPCChat.MessageUnboxedState.outbox &&
-    cMsg.outbox.messageType === T.RPCChat.MessageType.reaction
-  ) {
-    actions.updateOptimisticReactionDecorated(
-      T.Chat.stringToOutboxID(cMsg.outbox.outboxID),
-      cMsg.outbox.decoratedTextBody ?? cMsg.outbox.body
-    )
-    return
-  }
-
-  if (cMsg.state === T.RPCChat.MessageUnboxedState.valid) {
-    const {valid} = cMsg
-    const {messageType} = valid.messageBody
-    if (
-      (messageType === T.RPCChat.MessageType.edit || messageType === T.RPCChat.MessageType.delete) &&
-      applyIncomingMutationToThread(conversationIDKey, valid, modifiedMessage, actions)
-    ) {
-      return
-    }
-  }
-
-  const message = Message.uiMessageToMessage(
-    conversationIDKey,
-    cMsg,
-    username,
-    () => getLastOrdinalFromSnapshot(actions.getSnapshot()),
-    devicename
-  )
-  if (!message) return
-
-  if (
-    cMsg.state === T.RPCChat.MessageUnboxedState.valid &&
-    cMsg.valid.messageBody.messageType === T.RPCChat.MessageType.attachmentuploaded &&
-    message.type === 'attachment'
-  ) {
-    const placeholderID = cMsg.valid.messageBody.attachmentuploaded.messageID
-    const snapshot = actions.getSnapshot()
-    const ordinal = getOrdinalForMessageIDInSnapshot(snapshot, T.Chat.numberToMessageID(placeholderID))
-    const existing = ordinal ? snapshot.messageMap.get(ordinal) : undefined
-    if (ordinal && existing) {
-      actions.addMessages([Message.upgradeMessage(existing, {...message, ordinal})], {
-        liveUpdate: true,
-        markAsRead: activelyLookingAtThread,
-      })
-    } else {
-      if (snapshot.moreToLoadForward) {
-        return
-      }
-      actions.addMessages([message], {liveUpdate: true, markAsRead: activelyLookingAtThread})
-    }
-  } else {
-    if (actions.getSnapshot().moreToLoadForward) {
-      return
-    }
-    actions.addMessages([message], {liveUpdate: true, markAsRead: activelyLookingAtThread})
-  }
-}
-
-const applyFailedMessageToThread = (
-  conversationIDKey: T.Chat.ConversationIDKey,
-  failedMessage: T.RPCChat.FailedMessageInfo,
-  actions: ConversationThreadActions
-) => {
-  const {outboxRecords} = failedMessage
-  if (!outboxRecords) return
-  for (const outboxRecord of outboxRecords) {
-    if (T.Chat.conversationIDToKey(outboxRecord.convID) !== conversationIDKey) {
-      continue
-    }
-    const s = outboxRecord.state
-    if (s.state !== T.RPCChat.OutboxStateType.error) {
-      continue
-    }
-    const {error} = s
-    const outboxID = T.Chat.rpcOutboxIDToOutboxID(outboxRecord.outboxID)
-    actions.setMessageErrored(outboxID, Message.rpcErrorToString(error), error.typ)
-  }
-}
-
-const applyReactionUpdateToThread = (
-  reactionUpdate: T.RPCChat.ReactionUpdateNotif,
-  actions: ConversationThreadActions
-) => {
-  if (!reactionUpdate.reactionUpdates || reactionUpdate.reactionUpdates.length === 0) {
-    return
-  }
-  const updates = reactionUpdate.reactionUpdates.map(ru => ({
-    reactions: Message.reactionMapToReactions(ru.reactions),
-    targetMsgID: T.Chat.numberToMessageID(ru.targetMsgID),
-  }))
-  actions.updateReactions(updates)
-}
-
-const applyExpungeToThread = (expunge: T.RPCChat.ExpungeInfo, actions: ConversationThreadActions) => {
-  const deletableMessageTypes =
-    useConfigState.getState().chatDeletableByDeleteHistory || Common.allMessageTypes
-  actions.deleteMessages({
-    deletableMessageTypes,
-    liveUpdate: true,
-    upToMessageID: T.Chat.numberToMessageID(expunge.expunge.upto),
-  })
-}
-
-const applyEphemeralPurgeToThread = (
-  ephemeralPurge: T.RPCChat.EphemeralPurgeNotifInfo,
-  actions: ConversationThreadActions
-) => {
-  const messageIDs = ephemeralPurge.msgs?.reduce<Array<T.Chat.MessageID>>((arr, msg) => {
-    const msgID = Message.getMessageID(msg)
-    if (msgID) {
-      arr.push(msgID)
-    }
-    return arr
-  }, [])
-  if (messageIDs) {
-    actions.explodeMessages(messageIDs, undefined, true)
-  }
-}
-
-const applyConversationMetaToThread = (
-  meta: T.Chat.ConversationMeta | undefined,
-  actions: ConversationThreadActions
-) => {
-  if (!meta) {
-    return
-  }
-  const oldMeta = actions.getSnapshot().meta
-  if (oldMeta.conversationIDKey === meta.conversationIDKey) {
-    actions.setMeta(Meta.updateMeta(oldMeta, meta))
-  } else {
-    actions.setMeta(meta)
-  }
-}
-
-const applyInboxUIItemToThread = (
-  conv: T.RPCChat.InboxUIItem | null | undefined,
-  actions: ConversationThreadActions
-) => {
-  if (conv) {
-    applyConversationMetaToThread(Meta.inboxUIItemToConversationMeta(conv), actions)
-  }
-}
-
-const loadConversationThreadMessages = (
-  conversationIDKey: T.Chat.ConversationIDKey,
-  p: LoadMoreMessagesParams,
-  actions: ConversationThreadActions
-) => {
-  if (!T.Chat.isValidConversationIDKey(conversationIDKey)) {
-    return
-  }
-  const {scrollDirection = 'none', numberOfMessagesToLoad = numMessagesOnInitialLoad} = p
-  const {
-    allowMarkAsRead = true,
-    reason,
-    forceContainsLatestCalc,
-    messageIDControl,
-    knownRemotes,
-    centeredMessageID,
-    isThreadLoadCurrent,
-    onThreadLoadStatus,
-  } = p
-  const isCurrentThreadLoad = () => isThreadLoadCurrent?.() ?? true
-
-  const f = async () => {
-    if (!isCurrentThreadLoad()) {
-      logger.info('loadMoreMessages: bail: stale mounted thread load')
-      return
-    }
-
-    if (!conversationIDKey || !T.Chat.isValidConversationIDKey(conversationIDKey)) {
-      logger.info('loadMoreMessages: bail: no conversationIDKey')
-      return
-    }
-
-    const loadStartedSnapshot = actions.getSnapshot()
-    const currentMeta = loadStartedSnapshot.meta
-    if (currentMeta.membershipType === 'youAreReset' || currentMeta.rekeyers.size > 0) {
-      logger.info('loadMoreMessages: bail: we are reset')
-      return
-    }
-    const loadStartedLiveUpdateVersion = loadStartedSnapshot.liveUpdateVersion
-    const protectLoadedFocusRefresh =
-      loadStartedSnapshot.loaded &&
-      scrollDirection === 'none' &&
-      !centeredMessageID &&
-      !messageIDControl &&
-      (reason === 'focused' || reason === 'tab selected')
-    logger.info(
-      `loadMoreMessages: calling rpc convo: ${conversationIDKey} num: ${numberOfMessagesToLoad} reason: ${reason}`
-    )
-
-    const loadingKey = Strings.waitingKeyChatThreadLoad(conversationIDKey)
-    let reconciled = false
-    const onGotThread = (thread: string, why: string) => {
-      if (!thread) {
-        return
-      }
-      if (!isCurrentThreadLoad()) {
-        logger.info(`loadMoreMessages: stale response ignored: ${why}`)
-        return
-      }
-      if (
-        protectLoadedFocusRefresh &&
-        actions.getSnapshot().liveUpdateVersion !== loadStartedLiveUpdateVersion
-      ) {
-        logger.info(
-          `loadMoreMessages: stale response ignored after live update: ${why} reason=${reason} convID=${conversationIDKey}`
-        )
-        return
-      }
-
-      const {username, devicename} = getCurrentUser()
-      const uiMessages = JSON.parse(thread) as T.RPCChat.UIMessages
-
-      const messages = (uiMessages.messages ?? []).reduce<Array<T.Chat.Message>>((arr, m) => {
-        const message = Message.uiMessageToMessage(
-          conversationIDKey,
-          m,
-          username,
-          () => getLastOrdinalFromSnapshot(actions.getSnapshot()),
-          devicename
-        )
-        if (message) {
-          arr.push(message)
-        }
-        return arr
-      }, [])
-
-      const moreToLoad = uiMessages.pagination ? !uiMessages.pagination.last : true
-      const canMarkReadForThreadWindow =
-        allowMarkAsRead &&
-        !centeredMessageID &&
-        !messageIDControl &&
-        scrollDirection !== 'back' &&
-        reason !== 'findNewestConversation' &&
-        reason !== 'findNewestConversationFromLayout'
-      let validatedRange: {from: T.Chat.Ordinal; to: T.Chat.Ordinal} | undefined
-      if (messages.length) {
-        if (scrollDirection === 'none' && !reconciled) {
-          const ords = messages
-            .filter(m => m.conversationMessage !== false && m.type !== 'deleted')
-            .map(m => m.ordinal)
-          if (ords.length > 0) {
-            validatedRange = {
-              from: Math.min(...ords) as T.Chat.Ordinal,
-              to: Math.max(...ords) as T.Chat.Ordinal,
-            }
-          }
-          reconciled = true
-        }
-      }
-      actions.applyThreadLoad({
-        centered: !!centeredMessageID,
-        disableActiveMarkRead: !allowMarkAsRead || !!centeredMessageID || !!messageIDControl,
-        enableActiveMarkRead: canMarkReadForThreadWindow,
-        forceContainsLatestCalc,
-        messages,
-        moreToLoad,
-        scrollDirection,
-        validatedRange,
-      })
-
-      if (canMarkReadForThreadWindow) {
-        actions.markThreadAsRead()
-      }
-    }
-
-    const pagination = messageIDControl
-      ? null
-      : scrollDirectionToPagination(scrollDirection, numberOfMessagesToLoad)
-    try {
-      const results = await loadThreadNonblock({
-        conversationIDKey,
-        knownRemotes,
-        messageIDControl,
-        onCachedThread: thread => onGotThread(thread, 'cached'),
-        onFullThread: thread => onGotThread(thread, 'full'),
-        onThreadStatus: status => {
-          logger.info(
-            `loadMoreMessages: thread status received: convID: ${conversationIDKey} typ: ${status.typ}`
-          )
-          if (isCurrentThreadLoad()) {
-            onThreadLoadStatus?.(conversationIDKey, status.typ)
-          }
-        },
-        pagination,
-        reason: threadLoadReasonToRPCReason(reason),
-        waitingKey: loadingKey,
-      })
-      if (!isCurrentThreadLoad()) {
-        return
-      }
-      if (actions.getSnapshot().meta.conversationIDKey === conversationIDKey) {
-        actions.updateMeta({offline: results.offline})
-      }
-    } catch (error) {
-      if (!isCurrentThreadLoad()) {
-        return
-      }
-      if (error instanceof RPCError) {
-        logger.warn(`loadMoreMessages: error: ${error.desc}`)
-        if (error.code === T.RPCGen.StatusCode.scchatnotinteam) {
-          // We're no longer in this conv's team. Clear the persisted last-route
-          // (ui.routeState2) so app startup doesn't keep restoring and reloading
-          // this conv, which would re-trigger this error on every launch.
-          persistRoute(true, true, () => useConfigState.getState().startup.loaded)
-          navigateToInbox(true, 'maybeKickedFromTeam')
-        }
-        if (error.code !== T.RPCGen.StatusCode.scteamreaderror) {
-          throw error
-        }
-      }
-    }
-  }
-
-  ignorePromise(f())
-}
-
 export const useConversationThreadSelector = <TValue,>(
   selector: (snapshot: ConversationThreadState) => TValue
 ) => {
@@ -903,6 +337,16 @@ export const useConversationThreadStore = () => {
   return store
 }
 
+// Reads the meta for the current thread from its single owner (the inbox metadata
+// store). Pass a narrow selector (wrap object results in C.useShallow) so render-hot
+// callers don't re-render on unrelated meta churn (e.g. draft updates).
+export const useThreadMeta = <TValue,>(
+  selector: (meta: T.Immutable<T.Chat.ConversationMeta>) => TValue
+): TValue => {
+  const id = useConversationThreadID()
+  return useInboxMetadataState(s => selector(s.metas.get(id) ?? emptyConversationMeta))
+}
+
 type ConversationThreadProviderProps = React.PropsWithChildren<{
   id: T.Chat.ConversationIDKey
 }>
@@ -993,7 +437,7 @@ const ConversationThreadProviderInner = (p: ConversationThreadProviderProps) =>
         logger.info(`marking read messages ${id} failed due to no id`)
         return
       }
-      if (snapshot.meta.conversationIDKey === id && readMsgID === snapshot.meta.readMsgID) {
+      if (readMsgID === getInboxConversationMeta(id)?.readMsgID) {
         logger.info(`marking read messages is noop bail: ${id} ${readMsgID}`)
         return
       }
@@ -1066,7 +510,7 @@ const ConversationThreadProviderInner = (p: ConversationThreadProviderProps) =>
             // moreToLoadForward true would drop live incoming messages and block mark-read.
             let containsLatest = false
             if (p.centered && p.forceContainsLatestCalc) {
-              const {maxVisibleMsgID} = s.meta
+              const {maxVisibleMsgID} = getMeta(id)
               const ordinal = findLast(s.messageOrdinals ?? [], o => !!s.messageMap.get(o)?.id)
               const message = ordinal ? s.messageMap.get(ordinal) : undefined
               containsLatest = !!message?.id && maxVisibleMsgID > 0 && message.id >= maxVisibleMsgID
@@ -1141,32 +585,9 @@ const ConversationThreadProviderInner = (p: ConversationThreadProviderProps) =>
       s.explodingMode = seconds
     })
     if (!incoming) {
-      persistExplodingMode(id, getSnapshot().meta, seconds)
+      persistExplodingMode(id, getMeta(id), seconds)
     }
   })
-  const setMeta = React.useEffectEvent((meta?: T.Chat.ConversationMeta) => {
-    updateThreadState(s => {
-      s.meta = T.castDraft(meta ?? Meta.makeConversationMeta())
-    })
-    if (meta) {
-      metasReceived([getSnapshot().meta])
-    }
-  })
-  const updateMeta = React.useEffectEvent((meta: Partial<T.Chat.ConversationMeta>) => {
-    updateThreadState(s => {
-      Object.assign(s.meta, meta)
-    })
-    const nextMeta = getSnapshot().meta
-    if (nextMeta.conversationIDKey === id) {
-      metasReceived([nextMeta])
-    }
-  })
-  const setParticipants = React.useEffectEvent((participants: T.Chat.ParticipantInfo) => {
-    updateThreadState(s => {
-      s.participants = T.castDraft(participants)
-    })
-    participantInfoReceived(id, participants, getSnapshot().meta)
-  })
   const setMarkAsUnread = React.useEffectEvent((readMsgID?: T.Chat.MessageID | false) => {
     if (readMsgID === false) {
       return
@@ -1177,7 +598,7 @@ const ConversationThreadProviderInner = (p: ConversationThreadProviderProps) =>
         return
       }
       const snapshot = getSnapshot()
-      const unreadLineID = readMsgID ? readMsgID : snapshot.meta.maxVisibleMsgID
+      const unreadLineID = readMsgID ? readMsgID : getMeta(id).maxVisibleMsgID
       let msgID = unreadLineID
 
       if (snapshot.messageMap.size) {
@@ -1234,7 +655,7 @@ const ConversationThreadProviderInner = (p: ConversationThreadProviderProps) =>
         revertDeleting()
         return
       }
-      if (snapshot.meta.conversationIDKey !== id) {
+      if (!getInboxConversationMeta(id)) {
         logger.warn('Deleting message w/ no meta')
         revertDeleting()
         return
@@ -1253,7 +674,7 @@ const ConversationThreadProviderInner = (p: ConversationThreadProviderProps) =>
         await postConversationDelete({
           conversationIDKey: id,
           messageID: message.id,
-          tlfName: snapshot.meta.tlfname,
+          tlfName: getMeta(id).tlfname,
         })
       } catch (error) {
         revertDeleting()
@@ -1390,7 +811,7 @@ const ConversationThreadProviderInner = (p: ConversationThreadProviderProps) =>
           conversationIDKey: id,
           messageID,
           outboxID,
-          tlfName: snapshot.meta.tlfname,
+          tlfName: getMeta(id).tlfname,
         })
       } catch (error) {
         removeOptimisticReaction(localOutboxID)
@@ -1403,15 +824,14 @@ const ConversationThreadProviderInner = (p: ConversationThreadProviderProps) =>
   })
   const unfurlRemove = React.useEffectEvent((messageID: T.Chat.MessageID) => {
     const f = async () => {
-      const snapshot = getSnapshot()
-      if (snapshot.meta.conversationIDKey !== id) {
+      if (!getInboxConversationMeta(id)) {
         logger.debug('unfurl remove no meta found, aborting!')
         return
       }
       await postConversationDelete({
         conversationIDKey: id,
         messageID,
-        tlfName: snapshot.meta.tlfname,
+        tlfName: getMeta(id).tlfname,
       })
     }
     ignorePromise(f())
@@ -1550,29 +970,23 @@ const ConversationThreadProviderInner = (p: ConversationThreadProviderProps) =>
     }
   )
   const [threadActions] = React.useState<ConversationThreadActions>(() => {
-    const threadActionsHolder: {current?: ConversationThreadActions} = {}
-    const loadMoreMessagesImpl = (p: LoadMoreMessagesParams) => {
-      const actions = threadActionsHolder.current
-      if (actions) {
-        loadConversationThreadMessages(id, p, actions)
-      }
-    }
-    const throttledLoadMoreMessages = throttle(loadMoreMessagesImpl, 500)
+    const impl = (p: LoadMoreMessagesParams) => loadConversationThreadMessages(id, p, threadActions)
+    const throttled = throttle(impl, 500)
     // The throttle keeps only the last trailing call, so a centered or jump-to-recent
     // load issued between two other loads would be silently dropped — after
     // loadMessagesCentered already cleared the thread. Run those immediately instead.
     const loadMoreMessages: LoadMoreMessages = Object.assign(
       (p: LoadMoreMessagesParams) => {
         if (p.centeredMessageID || p.messageIDControl || p.reason === 'jump to recent') {
-          throttledLoadMoreMessages.cancel()
-          loadMoreMessagesImpl(p)
+          throttled.cancel()
+          impl(p)
         } else {
-          throttledLoadMoreMessages(p)
+          throttled(p)
         }
       },
       {
         cancel: () => {
-          throttledLoadMoreMessages.cancel()
+          throttled.cancel()
         },
       }
     )
@@ -1603,8 +1017,6 @@ const ConversationThreadProviderInner = (p: ConversationThreadProviderProps) =>
       setMarkReadBlocked,
       setMessageErrored,
       setMessageSubmitState,
-      setMeta,
-      setParticipants,
       setTyping,
       showUnfurlPrompt,
       startAttachmentDownload,
@@ -1614,11 +1026,9 @@ const ConversationThreadProviderInner = (p: ConversationThreadProviderProps) =>
       updateAttachmentDownloadProgress,
       updateAttachmentUploadProgress,
       updateCoinFlipStatuses,
-      updateMeta,
       updateOptimisticReactionDecorated,
       updateReactions,
     }
-    threadActionsHolder.current = threadActions
     return threadActions
   })
   React.useEffect(() => {
@@ -1626,270 +1036,7 @@ const ConversationThreadProviderInner = (p: ConversationThreadProviderProps) =>
       threadActions.loadMoreMessages.cancel()
     }
   }, [threadActions])
-  const inboxParticipants = useInboxMetadataState(s => s.participants.get(id))
-  React.useEffect(() => {
-    if (!inboxParticipants) {
-      return
-    }
-    updateThreadState(s => {
-      s.participants = T.castDraft(inboxParticipants)
-    })
-  }, [inboxParticipants])
-  useEngineActionListener('chat.1.NotifyChat.NewChatActivity', action => {
-    const {activity} = action.payload.params
-    switch (activity.activityType) {
-      case T.RPCChat.ChatActivityType.incomingMessage: {
-        const {incomingMessage} = activity
-        const conversationIDKey = T.Chat.conversationIDToKey(incomingMessage.convID)
-        if (conversationIDKey === id) {
-          applyInboxUIItemToThread(incomingMessage.conv, threadActions)
-          applyIncomingMessageToThread(conversationIDKey, incomingMessage, threadActions)
-        }
-        break
-      }
-      case T.RPCChat.ChatActivityType.setStatus: {
-        const {setStatus} = activity
-        const conversationIDKey = setStatus.conv
-          ? T.Chat.stringToConversationIDKey(setStatus.conv.convID)
-          : T.Chat.noConversationIDKey
-        if (conversationIDKey === id) {
-          applyInboxUIItemToThread(setStatus.conv, threadActions)
-        }
-        break
-      }
-      case T.RPCChat.ChatActivityType.readMessage: {
-        const {readMessage} = activity
-        const conversationIDKey = readMessage.conv
-          ? T.Chat.stringToConversationIDKey(readMessage.conv.convID)
-          : T.Chat.noConversationIDKey
-        if (conversationIDKey === id) {
-          applyInboxUIItemToThread(readMessage.conv, threadActions)
-        }
-        break
-      }
-      case T.RPCChat.ChatActivityType.newConversation: {
-        const {newConversation} = activity
-        const conversationIDKey = newConversation.conv
-          ? T.Chat.stringToConversationIDKey(newConversation.conv.convID)
-          : T.Chat.noConversationIDKey
-        if (conversationIDKey === id) {
-          applyInboxUIItemToThread(newConversation.conv, threadActions)
-        }
-        break
-      }
-      case T.RPCChat.ChatActivityType.setAppNotificationSettings: {
-        const {setAppNotificationSettings} = activity
-        if (T.Chat.conversationIDToKey(setAppNotificationSettings.convID) === id) {
-          threadActions.updateMeta(Meta.parseNotificationSettings(setAppNotificationSettings.settings))
-        }
-        break
-      }
-      case T.RPCChat.ChatActivityType.messagesUpdated: {
-        const {messagesUpdated} = activity
-        const conversationIDKey = T.Chat.conversationIDToKey(messagesUpdated.convID)
-        if (conversationIDKey === id) {
-          applyMessagesUpdatedToThread(conversationIDKey, messagesUpdated, threadActions)
-        }
-        break
-      }
-      case T.RPCChat.ChatActivityType.failedMessage: {
-        const {failedMessage} = activity
-        applyInboxUIItemToThread(failedMessage.conv, threadActions)
-        applyFailedMessageToThread(id, failedMessage, threadActions)
-        break
-      }
-      case T.RPCChat.ChatActivityType.reactionUpdate: {
-        const {reactionUpdate} = activity
-        const conversationIDKey = T.Chat.conversationIDToKey(reactionUpdate.convID)
-        if (conversationIDKey === id) {
-          applyReactionUpdateToThread(reactionUpdate, threadActions)
-        }
-        break
-      }
-      case T.RPCChat.ChatActivityType.expunge: {
-        const {expunge} = activity
-        const conversationIDKey = T.Chat.conversationIDToKey(expunge.convID)
-        if (conversationIDKey === id) {
-          applyExpungeToThread(expunge, threadActions)
-        }
-        break
-      }
-      case T.RPCChat.ChatActivityType.ephemeralPurge: {
-        const {ephemeralPurge} = activity
-        const conversationIDKey = T.Chat.conversationIDToKey(ephemeralPurge.convID)
-        if (conversationIDKey === id) {
-          applyEphemeralPurgeToThread(ephemeralPurge, threadActions)
-        }
-        break
-      }
-      default:
-    }
-  })
-  useEngineActionListener('keybase.1.gregorUI.pushState', action => {
-    const items = (action.payload.params.state.items ?? []).reduce<
-      Array<{md: T.RPCGen.Gregor1.Metadata; item: T.RPCGen.Gregor1.Item}>
-    >((arr, {md, item}) => {
-      if (md && item) {
-        arr.push({item, md})
-      }
-      return arr
-    }, [])
-    const seconds = getExplodingModeFromGregorItems(id, items)
-    if (seconds !== undefined) {
-      threadActions.setExplodingMode(seconds, true)
-    }
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatConvUpdate', action => {
-    const {conv} = action.payload.params
-    const conversationIDKey = conv ? T.Chat.stringToConversationIDKey(conv.convID) : T.Chat.noConversationIDKey
-    if (conversationIDKey === id) {
-      applyInboxUIItemToThread(conv, threadActions)
-    }
-  })
-  useEngineActionListener('chat.1.chatUi.chatInboxFailed', action => {
-    const {convID, error} = action.payload.params
-    if (T.Chat.conversationIDToKey(convID) !== id) {
-      return
-    }
-    const {meta, participants} = Meta.inboxUIItemErrorToConversationMetaAndParticipants(
-      error,
-      useCurrentUserState.getState().username,
-      threadActions.getSnapshot().meta
-    )
-    if (meta) {
-      threadActions.setMeta(meta)
-    }
-    if (participants) {
-      threadActions.setParticipants(participants)
-    }
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatSetConvSettings', action => {
-    const {conv, convID} = action.payload.params
-    if (T.Chat.conversationIDToKey(convID) !== id) {
-      return
-    }
-    const newRole = conv?.convSettings?.minWriterRoleInfo?.role
-    const role = newRole && TeamsUtil.teamRoleByEnum[newRole]
-    const cannotWrite = conv?.convSettings?.minWriterRoleInfo?.cannotWrite || false
-    if (role) {
-      threadActions.updateMeta({cannotWrite, minWriterRole: role})
-    } else {
-      logger.warn(
-        `got NotifyChat.ChatSetConvSettings with no valid minWriterRole for convID ${id}. The local version may be out of date.`
-      )
-    }
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatSetConvRetention', action => {
-    const {conv, convID} = action.payload.params
-    if (T.Chat.conversationIDToKey(convID) !== id) {
-      return
-    }
-    if (!conv) {
-      logger.warn('onChatSetConvRetention: no conv given')
-      return
-    }
-    const meta = Meta.inboxUIItemToConversationMeta(conv)
-    if (!meta) {
-      logger.warn(`onChatSetConvRetention: no meta found for ${convID.toString()}`)
-      return
-    }
-    applyConversationMetaToThread(meta, threadActions)
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatSetTeamRetention', action => {
-    const meta = (action.payload.params.convs ?? []).reduce<T.Chat.ConversationMeta | undefined>(
-      (found, conv) => {
-        if (found) {
-          return found
-        }
-        const meta = Meta.inboxUIItemToConversationMeta(conv)
-        return meta?.conversationIDKey === id ? meta : undefined
-      },
-      undefined
-    )
-    if (meta) {
-      applyConversationMetaToThread(meta, threadActions)
-    }
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatParticipantsInfo', action => {
-    const participants = action.payload.params.participants?.[id]
-    if (participants) {
-      threadActions.setParticipants(Common.uiParticipantsToParticipantInfo(participants))
-    }
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatRequestInfo', action => {
-    const {convID, info, msgID} = action.payload.params
-    if (T.Chat.conversationIDToKey(convID) !== id) {
-      return
-    }
-    const requestInfo = Message.uiRequestInfoToChatRequestInfo(info)
-    if (!requestInfo) {
-      logger.error(
-        `got 'NotifyChat.ChatRequestInfo' with no valid requestInfo for convID ${id} messageID: ${msgID}. The local version may be absent or out of date.`
-      )
-      return
-    }
-    threadActions.receiveRequestInfo(T.Chat.numberToMessageID(msgID), requestInfo)
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatPaymentInfo', action => {
-    const {convID, info, msgID} = action.payload.params
-    if (T.Chat.conversationIDToKey(convID) !== id) {
-      return
-    }
-    const paymentInfo = Message.uiPaymentInfoToChatPaymentInfo([info])
-    if (!paymentInfo) {
-      logger.error(
-        `got 'NotifyChat.ChatPaymentInfo' with no valid paymentInfo for convID ${id} messageID: ${msgID}. The local version may be absent or out of date.`
-      )
-      return
-    }
-    threadActions.receivePaymentInfo(T.Chat.numberToMessageID(msgID), paymentInfo)
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatPromptUnfurl', action => {
-    const {convID, domain, msgID} = action.payload.params
-    if (T.Chat.conversationIDToKey(convID) !== id) {
-      return
-    }
-    threadActions.showUnfurlPrompt(T.Chat.numberToMessageID(msgID), domain)
-  })
-  useEngineActionListener('chat.1.chatUi.chatCoinFlipStatus', action => {
-    const statuses = action.payload.params.statuses?.filter(status => {
-      return T.Chat.stringToConversationIDKey(status.convID) === id
-    })
-    if (statuses?.length) {
-      threadActions.updateCoinFlipStatuses(statuses)
-    }
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatTypingUpdate', action => {
-    action.payload.params.typingUpdates?.forEach(update => {
-      if (T.Chat.conversationIDToKey(update.convID) === id) {
-        threadActions.setTyping(new Set(update.typers?.map(typer => typer.username)))
-      }
-    })
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatAttachmentDownloadProgress', action => {
-    const {bytesComplete, bytesTotal, convID, msgID} = action.payload.params
-    if (T.Chat.conversationIDToKey(convID) === id) {
-      threadActions.updateAttachmentDownloadProgress(msgID, bytesComplete, bytesTotal)
-    }
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatAttachmentDownloadComplete', action => {
-    const {convID, msgID} = action.payload.params
-    if (T.Chat.conversationIDToKey(convID) === id) {
-      threadActions.completeAttachmentDownload(msgID)
-    }
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatAttachmentUploadStart', action => {
-    const {convID, outboxID} = action.payload.params
-    if (T.Chat.conversationIDToKey(convID) === id) {
-      threadActions.updateAttachmentUploadProgress(outboxID)
-    }
-  })
-  useEngineActionListener('chat.1.NotifyChat.ChatAttachmentUploadProgress', action => {
-    const {bytesComplete, bytesTotal, convID, outboxID} = action.payload.params
-    if (T.Chat.conversationIDToKey(convID) === id) {
-      threadActions.updateAttachmentUploadProgress(outboxID, bytesComplete, bytesTotal)
-    }
-  })
+  useThreadEngineListeners(id, threadActions)
 
   return (
     <ConversationThreadContextProvider
@@ -2057,7 +1204,6 @@ export const useConversationThreadMessageActions = () => {
 export const useConversationThreadSelectedConversation = () => {
   const conversationIDKey = useConversationThreadID()
   const loadMoreMessages = useConversationThreadLoadMoreMessages()
-  const participantInfo = useConversationThreadSelector(s => s.participants)
 
   const selectedConversation: SelectedConversation = (options?: SelectedConversationOptions) => {
     const {skipThreadLoad, ...loadStatusOptions} = options ?? {}
@@ -2066,6 +1212,7 @@ export const useConversationThreadSelectedConversation = () => {
     unboxRows([conversationIDKey])
 
     const username = useCurrentUserState.getState().username
+    const participantInfo = getInboxConversationParticipants(conversationIDKey) ?? emptyParticipantInfo
     const otherParticipants = Meta.getRowParticipants(participantInfo, username || '')
     if (otherParticipants.length === 1) {
       const otherUsername = otherParticipants[0] || ''
diff --git a/shared/chat/conversation/thread-engine.tsx b/shared/chat/conversation/thread-engine.tsx
new file mode 100644
index 000000000000..d8fed1eaf88f
--- /dev/null
+++ b/shared/chat/conversation/thread-engine.tsx
@@ -0,0 +1,374 @@
+import * as Common from '@/constants/chat/common'
+import * as Message from '@/constants/chat/message'
+import * as T from '@/constants/types'
+import logger from '@/logger'
+import {useConfigState} from '@/stores/config'
+import {useEngineActionListener} from '@/engine/action-listener'
+import {
+  getCurrentUser,
+  getExplodingModeFromGregorItems,
+  getLastOrdinalFromSnapshot,
+  getOrdinalForMessageIDInSnapshot,
+} from './thread-load'
+import type {ConversationThreadActions} from './thread-context'
+
+export const applyMessagesUpdatedToThread = (
+  conversationIDKey: T.Chat.ConversationIDKey,
+  messagesUpdated: T.RPCChat.MessagesUpdated,
+  actions: ConversationThreadActions
+) => {
+  if (!messagesUpdated.updates) return
+  const snapshot = actions.getSnapshot()
+  const activelyLookingAtThread = Common.isUserActivelyLookingAtThisThread(conversationIDKey)
+  if (!snapshot.loaded && !activelyLookingAtThread) {
+    return
+  }
+
+  const {username, devicename} = getCurrentUser()
+  const messages = messagesUpdated.updates.flatMap(uimsg => {
+    if (!Message.getMessageID(uimsg)) return []
+    const message = Message.uiMessageToMessage(
+      conversationIDKey,
+      uimsg,
+      username,
+      () => getLastOrdinalFromSnapshot(actions.getSnapshot()),
+      devicename
+    )
+    return message ? [message] : []
+  })
+  if (messages.length === 0) {
+    return
+  }
+  actions.addMessages(messages, {liveUpdate: true, markAsRead: activelyLookingAtThread})
+}
+
+export const applyIncomingMutationToThread = (
+  conversationIDKey: T.Chat.ConversationIDKey,
+  valid: T.RPCChat.UIMessageValid,
+  modifiedMessage: T.RPCChat.UIMessage | null | undefined,
+  actions: ConversationThreadActions
+) => {
+  const body = valid.messageBody
+  logger.info(`Got chat incoming message of messageType: ${body.messageType}`)
+  const mutationOrdinal = T.Chat.numberToOrdinal(valid.messageID)
+  if (actions.getSnapshot().messageMap.has(mutationOrdinal)) {
+    actions.deleteMessages({liveUpdate: true, ordinals: [mutationOrdinal]})
+  }
+
+  switch (body.messageType) {
+    case T.RPCChat.MessageType.edit:
+      if (modifiedMessage) {
+        const {username, devicename} = getCurrentUser()
+        const modMessage = Message.uiMessageToMessage(
+          conversationIDKey,
+          modifiedMessage,
+          username,
+          () => getLastOrdinalFromSnapshot(actions.getSnapshot()),
+          devicename
+        )
+        if (modMessage) {
+          actions.addMessages([modMessage], {liveUpdate: true})
+        }
+      }
+      return true
+    case T.RPCChat.MessageType.delete: {
+      const {delete: d} = body
+      if (d.messageIDs) {
+        const messageIDs = T.Chat.numbersToMessageIDs(d.messageIDs)
+        const snapshot = actions.getSnapshot()
+        const isExplodeNow = messageIDs.some(id => {
+          const ordinal = getOrdinalForMessageIDInSnapshot(snapshot, id)
+          const message = ordinal ? snapshot.messageMap.get(ordinal) : undefined
+          return !!((message?.type === 'text' || message?.type === 'attachment') && message.exploding)
+        })
+
+        if (isExplodeNow) {
+          actions.explodeMessages(messageIDs, valid.senderUsername, true)
+        } else {
+          actions.deleteMessages({liveUpdate: true, messageIDs})
+        }
+      }
+      return true
+    }
+    default:
+      return false
+  }
+}
+
+export const applyIncomingMessageToThread = (
+  conversationIDKey: T.Chat.ConversationIDKey,
+  incomingMessage: T.RPCChat.IncomingMessage,
+  actions: ConversationThreadActions
+) => {
+  const snapshot = actions.getSnapshot()
+  const activelyLookingAtThread = Common.isUserActivelyLookingAtThisThread(conversationIDKey)
+  if (!snapshot.loaded && !activelyLookingAtThread) {
+    return
+  }
+  const {message: cMsg, modifiedMessage} = incomingMessage
+  const {username, devicename} = getCurrentUser()
+
+  if (
+    cMsg.state === T.RPCChat.MessageUnboxedState.outbox &&
+    cMsg.outbox.messageType === T.RPCChat.MessageType.reaction
+  ) {
+    actions.updateOptimisticReactionDecorated(
+      T.Chat.stringToOutboxID(cMsg.outbox.outboxID),
+      cMsg.outbox.decoratedTextBody ?? cMsg.outbox.body
+    )
+    return
+  }
+
+  if (cMsg.state === T.RPCChat.MessageUnboxedState.valid) {
+    const {valid} = cMsg
+    const {messageType} = valid.messageBody
+    if (
+      (messageType === T.RPCChat.MessageType.edit || messageType === T.RPCChat.MessageType.delete) &&
+      applyIncomingMutationToThread(conversationIDKey, valid, modifiedMessage, actions)
+    ) {
+      return
+    }
+  }
+
+  const message = Message.uiMessageToMessage(
+    conversationIDKey,
+    cMsg,
+    username,
+    () => getLastOrdinalFromSnapshot(actions.getSnapshot()),
+    devicename
+  )
+  if (!message) return
+
+  if (
+    cMsg.state === T.RPCChat.MessageUnboxedState.valid &&
+    cMsg.valid.messageBody.messageType === T.RPCChat.MessageType.attachmentuploaded &&
+    message.type === 'attachment'
+  ) {
+    const placeholderID = cMsg.valid.messageBody.attachmentuploaded.messageID
+    const snapshot = actions.getSnapshot()
+    const ordinal = getOrdinalForMessageIDInSnapshot(snapshot, T.Chat.numberToMessageID(placeholderID))
+    const existing = ordinal ? snapshot.messageMap.get(ordinal) : undefined
+    if (ordinal && existing) {
+      actions.addMessages([Message.upgradeMessage(existing, {...message, ordinal})], {
+        liveUpdate: true,
+        markAsRead: activelyLookingAtThread,
+      })
+    } else {
+      if (snapshot.moreToLoadForward) {
+        return
+      }
+      actions.addMessages([message], {liveUpdate: true, markAsRead: activelyLookingAtThread})
+    }
+  } else {
+    if (actions.getSnapshot().moreToLoadForward) {
+      return
+    }
+    actions.addMessages([message], {liveUpdate: true, markAsRead: activelyLookingAtThread})
+  }
+}
+
+export const applyFailedMessageToThread = (
+  conversationIDKey: T.Chat.ConversationIDKey,
+  failedMessage: T.RPCChat.FailedMessageInfo,
+  actions: ConversationThreadActions
+) => {
+  const {outboxRecords} = failedMessage
+  if (!outboxRecords) return
+  for (const outboxRecord of outboxRecords) {
+    if (T.Chat.conversationIDToKey(outboxRecord.convID) !== conversationIDKey) {
+      continue
+    }
+    const s = outboxRecord.state
+    if (s.state !== T.RPCChat.OutboxStateType.error) {
+      continue
+    }
+    const {error} = s
+    const outboxID = T.Chat.rpcOutboxIDToOutboxID(outboxRecord.outboxID)
+    actions.setMessageErrored(outboxID, Message.rpcErrorToString(error), error.typ)
+  }
+}
+
+export const applyReactionUpdateToThread = (
+  reactionUpdate: T.RPCChat.ReactionUpdateNotif,
+  actions: ConversationThreadActions
+) => {
+  if (!reactionUpdate.reactionUpdates || reactionUpdate.reactionUpdates.length === 0) {
+    return
+  }
+  const updates = reactionUpdate.reactionUpdates.map(ru => ({
+    reactions: Message.reactionMapToReactions(ru.reactions),
+    targetMsgID: T.Chat.numberToMessageID(ru.targetMsgID),
+  }))
+  actions.updateReactions(updates)
+}
+
+export const applyExpungeToThread = (expunge: T.RPCChat.ExpungeInfo, actions: ConversationThreadActions) => {
+  const deletableMessageTypes =
+    useConfigState.getState().chatDeletableByDeleteHistory || Common.allMessageTypes
+  actions.deleteMessages({
+    deletableMessageTypes,
+    liveUpdate: true,
+    upToMessageID: T.Chat.numberToMessageID(expunge.expunge.upto),
+  })
+}
+
+export const applyEphemeralPurgeToThread = (
+  ephemeralPurge: T.RPCChat.EphemeralPurgeNotifInfo,
+  actions: ConversationThreadActions
+) => {
+  const messageIDs = ephemeralPurge.msgs?.reduce<Array<T.Chat.MessageID>>((arr, msg) => {
+    const msgID = Message.getMessageID(msg)
+    if (msgID) {
+      arr.push(msgID)
+    }
+    return arr
+  }, [])
+  if (messageIDs) {
+    actions.explodeMessages(messageIDs, undefined, true)
+  }
+}
+
+export const useThreadEngineListeners = (
+  id: T.Chat.ConversationIDKey,
+  threadActions: ConversationThreadActions
+): void => {
+  useEngineActionListener('chat.1.NotifyChat.NewChatActivity', action => {
+    const {activity} = action.payload.params
+    switch (activity.activityType) {
+      case T.RPCChat.ChatActivityType.incomingMessage: {
+        const {incomingMessage} = activity
+        const conversationIDKey = T.Chat.conversationIDToKey(incomingMessage.convID)
+        if (conversationIDKey === id) {
+          applyIncomingMessageToThread(conversationIDKey, incomingMessage, threadActions)
+        }
+        break
+      }
+      case T.RPCChat.ChatActivityType.messagesUpdated: {
+        const {messagesUpdated} = activity
+        const conversationIDKey = T.Chat.conversationIDToKey(messagesUpdated.convID)
+        if (conversationIDKey === id) {
+          applyMessagesUpdatedToThread(conversationIDKey, messagesUpdated, threadActions)
+        }
+        break
+      }
+      case T.RPCChat.ChatActivityType.failedMessage: {
+        const {failedMessage} = activity
+        applyFailedMessageToThread(id, failedMessage, threadActions)
+        break
+      }
+      case T.RPCChat.ChatActivityType.reactionUpdate: {
+        const {reactionUpdate} = activity
+        const conversationIDKey = T.Chat.conversationIDToKey(reactionUpdate.convID)
+        if (conversationIDKey === id) {
+          applyReactionUpdateToThread(reactionUpdate, threadActions)
+        }
+        break
+      }
+      case T.RPCChat.ChatActivityType.expunge: {
+        const {expunge} = activity
+        const conversationIDKey = T.Chat.conversationIDToKey(expunge.convID)
+        if (conversationIDKey === id) {
+          applyExpungeToThread(expunge, threadActions)
+        }
+        break
+      }
+      case T.RPCChat.ChatActivityType.ephemeralPurge: {
+        const {ephemeralPurge} = activity
+        const conversationIDKey = T.Chat.conversationIDToKey(ephemeralPurge.convID)
+        if (conversationIDKey === id) {
+          applyEphemeralPurgeToThread(ephemeralPurge, threadActions)
+        }
+        break
+      }
+      default:
+    }
+  })
+  useEngineActionListener('keybase.1.gregorUI.pushState', action => {
+    const items = (action.payload.params.state.items ?? []).reduce<
+      Array<{md: T.RPCGen.Gregor1.Metadata; item: T.RPCGen.Gregor1.Item}>
+    >((arr, {md, item}) => {
+      if (md && item) {
+        arr.push({item, md})
+      }
+      return arr
+    }, [])
+    const seconds = getExplodingModeFromGregorItems(id, items)
+    if (seconds !== undefined) {
+      threadActions.setExplodingMode(seconds, true)
+    }
+  })
+  useEngineActionListener('chat.1.NotifyChat.ChatRequestInfo', action => {
+    const {convID, info, msgID} = action.payload.params
+    if (T.Chat.conversationIDToKey(convID) !== id) {
+      return
+    }
+    const requestInfo = Message.uiRequestInfoToChatRequestInfo(info)
+    if (!requestInfo) {
+      logger.error(
+        `got 'NotifyChat.ChatRequestInfo' with no valid requestInfo for convID ${id} messageID: ${msgID}. The local version may be absent or out of date.`
+      )
+      return
+    }
+    threadActions.receiveRequestInfo(T.Chat.numberToMessageID(msgID), requestInfo)
+  })
+  useEngineActionListener('chat.1.NotifyChat.ChatPaymentInfo', action => {
+    const {convID, info, msgID} = action.payload.params
+    if (T.Chat.conversationIDToKey(convID) !== id) {
+      return
+    }
+    const paymentInfo = Message.uiPaymentInfoToChatPaymentInfo([info])
+    if (!paymentInfo) {
+      logger.error(
+        `got 'NotifyChat.ChatPaymentInfo' with no valid paymentInfo for convID ${id} messageID: ${msgID}. The local version may be absent or out of date.`
+      )
+      return
+    }
+    threadActions.receivePaymentInfo(T.Chat.numberToMessageID(msgID), paymentInfo)
+  })
+  useEngineActionListener('chat.1.NotifyChat.ChatPromptUnfurl', action => {
+    const {convID, domain, msgID} = action.payload.params
+    if (T.Chat.conversationIDToKey(convID) !== id) {
+      return
+    }
+    threadActions.showUnfurlPrompt(T.Chat.numberToMessageID(msgID), domain)
+  })
+  useEngineActionListener('chat.1.chatUi.chatCoinFlipStatus', action => {
+    const statuses = action.payload.params.statuses?.filter(status => {
+      return T.Chat.stringToConversationIDKey(status.convID) === id
+    })
+    if (statuses?.length) {
+      threadActions.updateCoinFlipStatuses(statuses)
+    }
+  })
+  useEngineActionListener('chat.1.NotifyChat.ChatTypingUpdate', action => {
+    action.payload.params.typingUpdates?.forEach(update => {
+      if (T.Chat.conversationIDToKey(update.convID) === id) {
+        threadActions.setTyping(new Set(update.typers?.map(typer => typer.username)))
+      }
+    })
+  })
+  useEngineActionListener('chat.1.NotifyChat.ChatAttachmentDownloadProgress', action => {
+    const {bytesComplete, bytesTotal, convID, msgID} = action.payload.params
+    if (T.Chat.conversationIDToKey(convID) === id) {
+      threadActions.updateAttachmentDownloadProgress(msgID, bytesComplete, bytesTotal)
+    }
+  })
+  useEngineActionListener('chat.1.NotifyChat.ChatAttachmentDownloadComplete', action => {
+    const {convID, msgID} = action.payload.params
+    if (T.Chat.conversationIDToKey(convID) === id) {
+      threadActions.completeAttachmentDownload(msgID)
+    }
+  })
+  useEngineActionListener('chat.1.NotifyChat.ChatAttachmentUploadStart', action => {
+    const {convID, outboxID} = action.payload.params
+    if (T.Chat.conversationIDToKey(convID) === id) {
+      threadActions.updateAttachmentUploadProgress(outboxID)
+    }
+  })
+  useEngineActionListener('chat.1.NotifyChat.ChatAttachmentUploadProgress', action => {
+    const {bytesComplete, bytesTotal, convID, outboxID} = action.payload.params
+    if (T.Chat.conversationIDToKey(convID) === id) {
+      threadActions.updateAttachmentUploadProgress(outboxID, bytesComplete, bytesTotal)
+    }
+  })
+}
diff --git a/shared/chat/conversation/thread-load-status-context.test.tsx b/shared/chat/conversation/thread-load-status-context.test.tsx
index ebcd485d3602..797ac75ffebc 100644
--- a/shared/chat/conversation/thread-load-status-context.test.tsx
+++ b/shared/chat/conversation/thread-load-status-context.test.tsx
@@ -14,20 +14,6 @@ import {
 } from './thread-load-status-context'
 import {ConversationThreadProvider} from './thread-context'
 
-jest.mock('@/chat/inbox/rows-state', () => ({
-  flushInboxRowUpdates: jest.fn(),
-  getInboxRowTrustedState: jest.fn(() => undefined),
-  queueInboxRowUpdate: jest.fn(),
-  setInboxRowTrustedState: jest.fn(),
-  syncInboxRowBadgeState: jest.fn(),
-  syncInboxRowsFromLayout: jest.fn(),
-  syncInboxRowsFromMetaAndParticipants: jest.fn(),
-  syncInboxRowsFromMetas: jest.fn(),
-  syncInboxRowsFromParticipantMap: jest.fn(),
-  syncInboxRowsFromParticipants: jest.fn(),
-  updateInboxRowTyping: jest.fn(),
-}))
-
 const convID = T.Chat.conversationIDToKey(new Uint8Array([1, 2, 3, 4]))
 const otherConvID = T.Chat.conversationIDToKey(new Uint8Array([5, 6, 7, 8]))
 
diff --git a/shared/chat/conversation/thread-load.tsx b/shared/chat/conversation/thread-load.tsx
new file mode 100644
index 000000000000..de4121253cad
--- /dev/null
+++ b/shared/chat/conversation/thread-load.tsx
@@ -0,0 +1,320 @@
+import * as Common from '@/constants/chat/common'
+import * as Message from '@/constants/chat/message'
+import * as Meta from '@/constants/chat/meta'
+import * as Strings from '@/constants/strings'
+import * as T from '@/constants/types'
+import {navigateToInbox} from '@/constants/router'
+import logger from '@/logger'
+import {findLast} from '@/util/arrays'
+import {ignorePromise} from '@/constants/utils'
+import {RPCError} from '@/util/errors'
+import {persistRoute} from '@/util/storeless-actions'
+import {uint8ArrayToString} from '@/util/uint8array'
+import {useCurrentUserState} from '@/stores/current-user'
+import {useConfigState} from '@/stores/config'
+import {getOrdinalForMessageID} from './thread-message-state'
+import {getInboxConversationMeta, updateInboxConversationMeta} from '@/chat/inbox/metadata'
+import {loadThreadNonblock, threadLoadReasonToRPCReason} from './thread-rpc'
+import type {
+  ConversationThreadActions,
+  ConversationThreadState,
+  LoadMoreMessagesParams,
+  ScrollDirection,
+} from './thread-context'
+
+export const numMessagesOnInitialLoad = isMobile ? 20 : 100
+export const numMessagesOnScrollback = 100
+
+const ignoreErrors = [
+  T.RPCGen.StatusCode.scgenericapierror,
+  T.RPCGen.StatusCode.scapinetworkerror,
+  T.RPCGen.StatusCode.sctimeout,
+]
+
+// The inbox metadata store is the single owner of conversation meta; fall back to
+// an empty meta for reads that predate an unbox.
+export const emptyConversationMeta = Meta.makeConversationMeta()
+export const getMeta = (id: T.Chat.ConversationIDKey) => getInboxConversationMeta(id) ?? emptyConversationMeta
+
+export const getCurrentUser = () => {
+  const s = useCurrentUserState.getState()
+  return {devicename: s.deviceName, username: s.username}
+}
+
+export const getExplodingModeFromGregorItems = (
+  conversationIDKey: T.Chat.ConversationIDKey,
+  items: ReadonlyArray<{item: T.RPCGen.Gregor1.Item}>
+) => {
+  const explodingItems = items.filter(i => i.item.category.startsWith(Common.explodingModeGregorKeyPrefix))
+  if (!explodingItems.length) {
+    return 0
+  }
+  const category = `${Common.explodingModeGregorKeyPrefix}${conversationIDKey}`
+  const item = explodingItems.find(i => i.item.category === category)
+  if (!item) {
+    // Other conversations have exploding modes but this one's category is absent,
+    // meaning it was dismissed: the mode is off.
+    return 0
+  }
+  const secondsString = uint8ArrayToString(item.item.body)
+  const seconds = parseInt(secondsString, 10)
+  if (isNaN(seconds)) {
+    logger.warn(`Got dirty exploding mode ${secondsString} for category ${category}`)
+    return undefined
+  }
+  return seconds
+}
+
+export const getExplodingModeFromConfig = (conversationIDKey: T.Chat.ConversationIDKey) =>
+  getExplodingModeFromGregorItems(conversationIDKey, useConfigState.getState().gregorPushState) ?? 0
+
+export const persistExplodingMode = (
+  conversationIDKey: T.Chat.ConversationIDKey,
+  meta: T.Chat.ConversationMeta,
+  seconds: number
+) => {
+  const f = async () => {
+    logger.info(`Setting exploding mode for conversation ${conversationIDKey} to ${seconds}`)
+    const category = `${Common.explodingModeGregorKeyPrefix}${conversationIDKey}`
+    const convRetention = Meta.getEffectiveRetentionPolicy(meta)
+    try {
+      if (seconds === 0 || seconds === convRetention.seconds) {
+        await T.RPCGen.gregorDismissCategoryRpcPromise({category})
+      } else {
+        await T.RPCGen.gregorUpdateCategoryRpcPromise({
+          body: seconds.toString(),
+          category,
+          dtime: {offset: 0, time: 0},
+        })
+        logger.info(`Successfully set exploding mode for conversation ${conversationIDKey} to ${seconds}`)
+      }
+    } catch (error) {
+      if (error instanceof RPCError) {
+        if (seconds !== 0) {
+          logger.error(
+            `Failed to set exploding mode for conversation ${conversationIDKey} to ${seconds}. Service responded with: ${error.message}`
+          )
+        } else {
+          logger.error(
+            `Failed to unset exploding mode for conversation ${conversationIDKey}. Service responded with: ${error.message}`
+          )
+        }
+        if (ignoreErrors.includes(error.code)) {
+          return
+        }
+      }
+      throw error
+    }
+  }
+  ignorePromise(f())
+}
+
+export const getClientPrevFromSnapshot = (snapshot: ConversationThreadState): T.Chat.MessageID => {
+  const ordinal = findLast(snapshot.messageOrdinals ?? [], o => {
+    const m = snapshot.messageMap.get(o)
+    return !!m?.id
+  })
+  const message = ordinal ? snapshot.messageMap.get(ordinal) : undefined
+  return message?.id || T.Chat.numberToMessageID(0)
+}
+
+export const getLastOrdinalFromSnapshot = (snapshot: ConversationThreadState) =>
+  snapshot.messageOrdinals?.at(-1) ?? T.Chat.numberToOrdinal(0)
+
+export const getOrdinalForMessageIDInSnapshot = (
+  snapshot: ConversationThreadState,
+  messageID: T.Chat.MessageID
+) =>
+  getOrdinalForMessageID(
+    snapshot.messageMap,
+    snapshot.pendingOutboxToOrdinal,
+    messageID,
+    snapshot.messageIDToOrdinal
+  )
+
+export const scrollDirectionToPagination = (
+  scrollDirection: ScrollDirection,
+  numberOfMessagesToLoad: number
+) => {
+  const pagination = {
+    last: false,
+    next: '',
+    num: numberOfMessagesToLoad,
+    previous: '',
+  }
+  switch (scrollDirection) {
+    case 'none':
+      break
+    case 'back':
+      pagination.next = 'deadbeef'
+      break
+    case 'forward':
+      pagination.previous = 'deadbeef'
+  }
+  return pagination
+}
+
+export const loadConversationThreadMessages = (
+  conversationIDKey: T.Chat.ConversationIDKey,
+  p: LoadMoreMessagesParams,
+  actions: ConversationThreadActions
+) => {
+  if (!T.Chat.isValidConversationIDKey(conversationIDKey)) {
+    return
+  }
+  const {scrollDirection = 'none', numberOfMessagesToLoad = numMessagesOnInitialLoad} = p
+  const {
+    allowMarkAsRead = true,
+    reason,
+    forceContainsLatestCalc,
+    messageIDControl,
+    knownRemotes,
+    centeredMessageID,
+    isThreadLoadCurrent,
+    onThreadLoadStatus,
+  } = p
+  const isCurrentThreadLoad = () => isThreadLoadCurrent?.() ?? true
+
+  const f = async () => {
+    if (!isCurrentThreadLoad()) {
+      logger.info('loadMoreMessages: bail: stale mounted thread load')
+      return
+    }
+
+    if (!conversationIDKey || !T.Chat.isValidConversationIDKey(conversationIDKey)) {
+      logger.info('loadMoreMessages: bail: no conversationIDKey')
+      return
+    }
+
+    const loadStartedSnapshot = actions.getSnapshot()
+    const currentMeta = getMeta(conversationIDKey)
+    if (currentMeta.membershipType === 'youAreReset' || currentMeta.rekeyers.size > 0) {
+      logger.info('loadMoreMessages: bail: we are reset')
+      return
+    }
+    const loadStartedLiveUpdateVersion = loadStartedSnapshot.liveUpdateVersion
+    const protectLoadedFocusRefresh =
+      loadStartedSnapshot.loaded &&
+      scrollDirection === 'none' &&
+      !centeredMessageID &&
+      !messageIDControl &&
+      (reason === 'focused' || reason === 'tab selected')
+    logger.info(
+      `loadMoreMessages: calling rpc convo: ${conversationIDKey} num: ${numberOfMessagesToLoad} reason: ${reason}`
+    )
+
+    const loadingKey = Strings.waitingKeyChatThreadLoad(conversationIDKey)
+    let reconciled = false
+    const onGotThread = (thread: string, why: string) => {
+      if (!thread) {
+        return
+      }
+      if (!isCurrentThreadLoad()) {
+        logger.info(`loadMoreMessages: stale response ignored: ${why}`)
+        return
+      }
+      if (
+        protectLoadedFocusRefresh &&
+        actions.getSnapshot().liveUpdateVersion !== loadStartedLiveUpdateVersion
+      ) {
+        logger.info(
+          `loadMoreMessages: stale response ignored after live update: ${why} reason=${reason} convID=${conversationIDKey}`
+        )
+        return
+      }
+
+      const {username, devicename} = getCurrentUser()
+      const {messages, pagination} = Message.parseUIMessagesJSON(
+        conversationIDKey,
+        thread,
+        username,
+        devicename,
+        () => getLastOrdinalFromSnapshot(actions.getSnapshot())
+      )
+      const moreToLoad = pagination ? !pagination.last : true
+      const canMarkReadForThreadWindow =
+        allowMarkAsRead &&
+        !centeredMessageID &&
+        !messageIDControl &&
+        scrollDirection !== 'back' &&
+        reason !== 'findNewestConversation' &&
+        reason !== 'findNewestConversationFromLayout'
+      let validatedRange: {from: T.Chat.Ordinal; to: T.Chat.Ordinal} | undefined
+      if (messages.length) {
+        if (scrollDirection === 'none' && !reconciled) {
+          const ords = messages
+            .filter(m => m.conversationMessage !== false && m.type !== 'deleted')
+            .map(m => m.ordinal)
+          if (ords.length > 0) {
+            validatedRange = {
+              from: Math.min(...ords) as T.Chat.Ordinal,
+              to: Math.max(...ords) as T.Chat.Ordinal,
+            }
+          }
+          reconciled = true
+        }
+      }
+      actions.applyThreadLoad({
+        centered: !!centeredMessageID,
+        disableActiveMarkRead: !allowMarkAsRead || !!centeredMessageID || !!messageIDControl,
+        enableActiveMarkRead: canMarkReadForThreadWindow,
+        forceContainsLatestCalc,
+        messages,
+        moreToLoad,
+        scrollDirection,
+        validatedRange,
+      })
+
+      if (canMarkReadForThreadWindow) {
+        actions.markThreadAsRead()
+      }
+    }
+
+    const pagination = messageIDControl
+      ? null
+      : scrollDirectionToPagination(scrollDirection, numberOfMessagesToLoad)
+    try {
+      const results = await loadThreadNonblock({
+        conversationIDKey,
+        knownRemotes,
+        messageIDControl,
+        onCachedThread: thread => onGotThread(thread, 'cached'),
+        onFullThread: thread => onGotThread(thread, 'full'),
+        onThreadStatus: status => {
+          logger.info(
+            `loadMoreMessages: thread status received: convID: ${conversationIDKey} typ: ${status.typ}`
+          )
+          if (isCurrentThreadLoad()) {
+            onThreadLoadStatus?.(conversationIDKey, status.typ)
+          }
+        },
+        pagination,
+        reason: threadLoadReasonToRPCReason(reason),
+        waitingKey: loadingKey,
+      })
+      if (!isCurrentThreadLoad()) {
+        return
+      }
+      updateInboxConversationMeta(conversationIDKey, {offline: results.offline})
+    } catch (error) {
+      if (!isCurrentThreadLoad()) {
+        return
+      }
+      if (error instanceof RPCError) {
+        logger.warn(`loadMoreMessages: error: ${error.desc}`)
+        if (error.code === T.RPCGen.StatusCode.scchatnotinteam) {
+          // We're no longer in this conv's team. Clear the persisted last-route
+          // (ui.routeState2) so app startup doesn't keep restoring and reloading
+          // this conv, which would re-trigger this error on every launch.
+          persistRoute(true, true, () => useConfigState.getState().startup.loaded)
+          navigateToInbox(true, 'maybeKickedFromTeam')
+        }
+        if (error.code !== T.RPCGen.StatusCode.scteamreaderror) {
+          throw error
+        }
+      }
+    }
+  }
+
+  ignorePromise(f())
+}
diff --git a/shared/chat/create-channel/index.tsx b/shared/chat/create-channel/index.tsx
index 987b1e3e8ae7..19cb4bea7dbd 100644
--- a/shared/chat/create-channel/index.tsx
+++ b/shared/chat/create-channel/index.tsx
@@ -55,14 +55,12 @@ const CreateChannel = (p: Props) => {
               onChangeText={props.onDescriptionChange}
             />
           </Kb.Box2>
-          <Kb.ButtonBar fullWidth={true} style={buttonBarStyle}>
-            <Kb.Button type="Dim" onClick={props.onBack} label="Cancel" />
-            <Kb.WaitingButton
-              waitingKey={C.waitingKeyTeamsCreateChannel(props.teamID)}
-              onClick={props.onSubmit}
-              label="Save"
-            />
-          </Kb.ButtonBar>
+          <Kb.ConfirmButtons
+            waitingKey={C.waitingKeyTeamsCreateChannel(props.teamID)}
+            onCancel={props.onBack}
+            onConfirm={props.onSubmit}
+            confirmLabel="Save"
+          />
         </Kb.Box2>
       </>
     )
diff --git a/shared/chat/emoji-picker/container.tsx b/shared/chat/emoji-picker/container.tsx
index 152508416480..b871cb093915 100644
--- a/shared/chat/emoji-picker/container.tsx
+++ b/shared/chat/emoji-picker/container.tsx
@@ -1,6 +1,7 @@
 import * as C from '@/constants'
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import * as T from '@/constants/types'
 import type {LayoutEvent} from '@/common-adapters/box'
 import {useChatTeam} from '@/chat/conversation/team-hooks'
@@ -113,12 +114,16 @@ const WrapperMobile = (props: Props) => {
   const canManageEmoji = useCanManageEmoji(conversationIDKey)
 
   return (
+    // collapsable={false}: Fabric view-flattening would drop this Box2 (and its
+    // testID) from the native tree, breaking e2e lookup on iOS
     <Kb.Box2
       direction="vertical"
       onLayout={onLayout}
       fullWidth={true}
       fullHeight={true}
       style={styles.contain}
+      testID={TestIDs.CHAT_EMOJI_PICKER}
+      collapsable={false}
     >
       <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center">
         <Kb.ClickableBox direction="vertical" onClick={onCancel} style={styles.cancelContainerMobile}>
@@ -197,6 +202,7 @@ const EmojiPickerDesktopInner = (props: Props) => {
         props.small && styles.containerDesktopSmall,
       ])}
       gap="tiny"
+      testID={TestIDs.CHAT_EMOJI_PICKER}
     >
       <Kb.Box2
         direction="horizontal"
diff --git a/shared/chat/emoji-picker/use-picker.tsx b/shared/chat/emoji-picker/use-picker.tsx
index fba031bbd56d..ef1825dfabf8 100644
--- a/shared/chat/emoji-picker/use-picker.tsx
+++ b/shared/chat/emoji-picker/use-picker.tsx
@@ -2,6 +2,13 @@ import * as Z from '@/util/zustand'
 import type * as T from '@/constants/types'
 import type {RenderableEmoji} from '@/common-adapters/emoji'
 
+// Mailbox for handing an emoji pick back from the mobile chatChooseEmoji route
+// to whichever screen pushed it. On mobile the picker is a separate routed
+// screen, so its result can't come back as a callback prop (nav params must be
+// serializable); on desktop the picker renders in-tree inside a popup and uses
+// a plain onPickAction callback instead, bypassing this store entirely.
+// Each consumer must clear its own key with updatePickerMap(key, undefined)
+// once it reads a pick, so a stale value isn't replayed on the next mount.
 export type PickKey = 'addAlias' | 'chatInput' | 'reaction'
 type PickerValue = {
   emojiStr: string
diff --git a/shared/chat/inbox-and-conversation-header.tsx b/shared/chat/inbox-and-conversation-header.tsx
index 8872e976b1b6..d1179712b06c 100644
--- a/shared/chat/inbox-and-conversation-header.tsx
+++ b/shared/chat/inbox-and-conversation-header.tsx
@@ -9,7 +9,7 @@ import {setInboxHeaderPortalNode, useInboxHeaderPortalContent} from '@/chat/inbo
 import {useChatTeam} from '@/chat/conversation/team-hooks'
 import {useRoute} from '@react-navigation/native'
 import {useInboxMetadataState} from '@/chat/inbox/metadata'
-import {useInboxRowsState} from '@/chat/inbox/rows-state'
+import {useInboxRowBig, useInboxRowSmall} from '@/chat/inbox/rows-state'
 import {useUsersState} from '@/stores/users'
 import {useCurrentUserState} from '@/stores/current-user'
 import {navToPath} from '@/constants/fs'
@@ -33,17 +33,13 @@ const Header = () => {
       participantInfo: s.participants.get(conversationIDKey) ?? emptyParticipantInfo,
     }))
   )
-  const inboxRow = useInboxRowsState(
-    C.useShallow(s => {
-      const big = s.rowsBig.get(conversationIDKey)
-      const small = s.rowsSmall.get(conversationIDKey)
-      return {
-        rowChannelname: big?.channelname ?? '',
-        rowParticipants: small?.participants ?? emptyParticipants,
-        rowTeamname: big?.teamname || small?.teamDisplayName || '',
-      }
-    })
-  )
+  const bigRow = useInboxRowBig(conversationIDKey)
+  const smallRow = useInboxRowSmall(conversationIDKey)
+  const inboxRow = {
+    rowChannelname: bigRow.channelname,
+    rowParticipants: smallRow.participants.length ? smallRow.participants : emptyParticipants,
+    rowTeamname: bigRow.teamname || smallRow.teamDisplayName,
+  }
   const {
     channelname: metaChannelname,
     descriptionDecorated,
diff --git a/shared/chat/inbox/badge-state.test.ts b/shared/chat/inbox/badge-state.test.ts
new file mode 100644
index 000000000000..46de21b179e2
--- /dev/null
+++ b/shared/chat/inbox/badge-state.test.ts
@@ -0,0 +1,46 @@
+/// <reference types="jest" />
+import * as T from '@/constants/types'
+import {resetAllStores} from '@/util/zustand'
+import {getInboxBadge, syncInboxBadgeState, useInboxBadgeState} from './badge-state'
+
+const convA = T.Chat.conversationIDToKey(new Uint8Array([1, 2, 3, 4]))
+const convB = T.Chat.conversationIDToKey(new Uint8Array([5, 6, 7, 8]))
+
+afterEach(() => {
+  resetAllStores()
+})
+
+test('syncInboxBadgeState applies badge and unread counts', () => {
+  syncInboxBadgeState({
+    conversations: [
+      {badgeCount: 2, convID: T.Chat.keyToConversationID(convA), unreadMessages: 5},
+      {badgeCount: 0, convID: T.Chat.keyToConversationID(convB), unreadMessages: 3},
+    ],
+  } as unknown as T.RPCGen.BadgeState)
+
+  expect(getInboxBadge(convA)).toEqual({badgeCount: 2, unreadCount: 5})
+  expect(getInboxBadge(convB)).toEqual({badgeCount: 0, unreadCount: 3})
+  expect(useInboxBadgeState.getState().counts.get(convA)?.badgeCount).toBe(2)
+})
+
+test('conversations absent from a later sync are zeroed (full-replace)', () => {
+  syncInboxBadgeState({
+    conversations: [
+      {badgeCount: 2, convID: T.Chat.keyToConversationID(convA), unreadMessages: 5},
+      {badgeCount: 1, convID: T.Chat.keyToConversationID(convB), unreadMessages: 1},
+    ],
+  } as unknown as T.RPCGen.BadgeState)
+
+  syncInboxBadgeState({
+    conversations: [{badgeCount: 4, convID: T.Chat.keyToConversationID(convA), unreadMessages: 9}],
+  } as unknown as T.RPCGen.BadgeState)
+
+  expect(getInboxBadge(convA)).toEqual({badgeCount: 4, unreadCount: 9})
+  // convB dropped from payload, so it has no entry and reads as the {0,0} default
+  expect(useInboxBadgeState.getState().counts.has(convB)).toBe(false)
+  expect(getInboxBadge(convB)).toEqual({badgeCount: 0, unreadCount: 0})
+})
+
+test('getInboxBadge defaults to zeroes for an unknown conversation', () => {
+  expect(getInboxBadge(convA)).toEqual({badgeCount: 0, unreadCount: 0})
+})
diff --git a/shared/chat/inbox/badge-state.tsx b/shared/chat/inbox/badge-state.tsx
new file mode 100644
index 000000000000..dcf716817cbc
--- /dev/null
+++ b/shared/chat/inbox/badge-state.tsx
@@ -0,0 +1,37 @@
+import * as T from '@/constants/types'
+import * as Z from '@/util/zustand'
+
+export type BadgeCounts = {badgeCount: number; unreadCount: number}
+
+type State = T.Immutable<{
+  counts: Map<T.Chat.ConversationIDKey, BadgeCounts>
+  dispatch: {
+    resetState: () => void
+  }
+}>
+
+export const useInboxBadgeState = Z.createZustand<State>('inboxBadge', () => ({
+  counts: new Map(),
+  dispatch: {resetState: Z.defaultReset},
+}))
+
+const emptyCounts: BadgeCounts = {badgeCount: 0, unreadCount: 0}
+
+// Full-replace semantics: the map is rebuilt from the payload each sync, so a
+// conversation absent from the payload gets no entry (reads default to {0,0}).
+export const syncInboxBadgeState = (badgeState?: T.RPCGen.BadgeState) => {
+  if (!badgeState) {
+    return
+  }
+  const next = new Map<T.Chat.ConversationIDKey, BadgeCounts>()
+  badgeState.conversations?.forEach(conversation => {
+    const id = T.Chat.conversationIDToKey(conversation.convID)
+    next.set(id, {badgeCount: conversation.badgeCount, unreadCount: conversation.unreadMessages})
+  })
+  useInboxBadgeState.setState(s => {
+    s.counts = next
+  })
+}
+
+export const getInboxBadge = (id: T.Chat.ConversationIDKey): BadgeCounts =>
+  useInboxBadgeState.getState().counts.get(id) ?? emptyCounts
diff --git a/shared/chat/inbox/engine.test.tsx b/shared/chat/inbox/engine.test.tsx
index bbf2c80f3896..60ed618248fc 100644
--- a/shared/chat/inbox/engine.test.tsx
+++ b/shared/chat/inbox/engine.test.tsx
@@ -2,24 +2,16 @@
 import * as T from '@/constants/types'
 import {resetAllStores} from '@/util/zustand'
 import {handleConvoEngineIncoming} from './engine'
-import {getInboxConversationMeta, getInboxConversationParticipants, syncBadgeState} from './metadata'
+import {getInboxConversationMeta, getInboxConversationParticipants} from './metadata'
 import {useConfigState} from '@/stores/config'
-import {
-  syncInboxRowBadgeState,
-  syncInboxRowsFromParticipantMap,
-  updateInboxRowTyping,
-} from '@/chat/inbox/rows-state'
+import {updateInboxTyping} from '@/chat/inbox/typing-state'
 
-jest.mock('@/chat/inbox/rows-state', () => ({
-  getInboxRowTrustedState: jest.fn(() => undefined),
-  setInboxRowTrustedState: jest.fn(),
-  syncInboxRowBadgeState: jest.fn(),
-  syncInboxRowsFromLayout: jest.fn(),
-  syncInboxRowsFromMetaAndParticipants: jest.fn(),
-  syncInboxRowsFromMetas: jest.fn(),
-  syncInboxRowsFromParticipantMap: jest.fn(),
-  syncInboxRowsFromParticipants: jest.fn(),
-  updateInboxRowTyping: jest.fn(),
+jest.mock('@/chat/inbox/badge-state', () => ({
+  syncInboxBadgeState: jest.fn(),
+}))
+
+jest.mock('@/chat/inbox/typing-state', () => ({
+  updateInboxTyping: jest.fn(),
 }))
 
 afterEach(() => {
@@ -371,7 +363,7 @@ test('global typing and participant updates route to inbox rows', () => {
     type: 'chat.1.NotifyChat.ChatTypingUpdate',
   } as never)
 
-  expect(updateInboxRowTyping).toHaveBeenCalledWith(typingUpdates)
+  expect(updateInboxTyping).toHaveBeenCalledWith(typingUpdates)
 
   const participantMap = {
     [T.Chat.conversationIDKeyToString(convID)]: [
@@ -385,7 +377,7 @@ test('global typing and participant updates route to inbox rows', () => {
     type: 'chat.1.NotifyChat.ChatParticipantsInfo',
   } as never)
 
-  expect(syncInboxRowsFromParticipantMap).toHaveBeenCalledWith(participantMap)
+  expect(getInboxConversationParticipants(convID)?.name).toEqual(['alice', 'bob'])
 })
 
 test('global inbox failure routing stores error metadata and rekey participants', () => {
@@ -417,35 +409,3 @@ test('global inbox failure routing stores error metadata and rekey participants'
   expect([...(meta?.rekeyers ?? [])]).toEqual(['bob'])
   expect(getInboxConversationParticipants(convID)?.name).toEqual(['alice', 'bob', 'charlie'])
 })
-
-test('syncBadgeState delegates badge ownership to inbox rows', () => {
-  const badgeState = {
-    bigTeamBadgeCount: 0,
-    conversations: [
-      {
-        badgeCount: 1,
-        convID: T.Chat.keyToConversationID(convID),
-        unreadMessages: 6,
-      },
-    ],
-    homeTodoItems: 0,
-    inboxVers: 0,
-    newDevices: null,
-    newFollowers: 0,
-    newGitRepoGlobalUniqueIDs: [],
-    newTeamAccessRequestCount: 0,
-    newTeams: [],
-    newTlfs: 0,
-    rekeysNeeded: 0,
-    resetState: {active: false, endTime: 0},
-    revokedDevices: null,
-    smallTeamBadgeCount: 1,
-    teamsWithResetUsers: null,
-    unverifiedEmails: 0,
-    unverifiedPhones: 0,
-  } as T.RPCGen.BadgeState
-
-  syncBadgeState(badgeState)
-
-  expect(syncInboxRowBadgeState).toHaveBeenCalledWith(badgeState)
-})
diff --git a/shared/chat/inbox/engine.tsx b/shared/chat/inbox/engine.tsx
index 8abfa90d0fb8..75c6591bf652 100644
--- a/shared/chat/inbox/engine.tsx
+++ b/shared/chat/inbox/engine.tsx
@@ -9,7 +9,7 @@ import {NotifyPopup} from '@/util/misc'
 import {showMain} from '@/util/storeless-actions'
 import {useShellState} from '@/stores/shell'
 import {useUsersState} from '@/stores/users'
-import {updateInboxRowTyping} from '@/chat/inbox/rows-state'
+import {updateInboxTyping} from '@/chat/inbox/typing-state'
 import {
   forceUnboxRowsForService,
   getInboxConversationMeta,
@@ -243,7 +243,7 @@ export const handleConvoEngineIncoming = (action: EngineGen.Actions): ConvoEngin
     case 'chat.1.NotifyChat.NewChatActivity':
       return onNewChatActivity(action.payload.params.activity)
     case 'chat.1.NotifyChat.ChatTypingUpdate': {
-      updateInboxRowTyping(action.payload.params.typingUpdates)
+      updateInboxTyping(action.payload.params.typingUpdates)
       return handledConvoEngineIncoming()
     }
     case 'chat.1.NotifyChat.ChatSetConvRetention': {
diff --git a/shared/chat/inbox/header-portal-state.tsx b/shared/chat/inbox/header-portal-state.tsx
index 0d9a2e2e5e5b..b7fcb10c146d 100644
--- a/shared/chat/inbox/header-portal-state.tsx
+++ b/shared/chat/inbox/header-portal-state.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react'
 
+// These never get an explicit logout reset: the ref callback that sets
+// portalNode fires with null on unmount, and the effect that sets
+// portalContent clears it on unmount too. Both owning components live only
+// inside the logged-in chat tree, so logout unmounts them and clears this
+// module state as a side effect - no extra reset wiring needed.
 let portalNode: HTMLElement | null = null
 let portalContent: React.ReactElement | null = null
 const listeners = new Set<() => void>()
diff --git a/shared/chat/inbox/index.tsx b/shared/chat/inbox/index.tsx
index d6c6b0956c21..8f0d557b957a 100644
--- a/shared/chat/inbox/index.tsx
+++ b/shared/chat/inbox/index.tsx
@@ -30,6 +30,7 @@ import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import {createPortal} from 'react-dom'
 import SearchRow from './search-row'
 import {useOpenedRowState} from './row/opened-row-state'
+import {useCurrentUserState} from '@/stores/current-user'
 import {Alert} from 'react-native'
 import {SafeAreaView as ScreensSafeAreaView} from 'react-native-screens/experimental'
 
@@ -298,7 +299,15 @@ function InboxWithSearch(props: {
   refreshInbox?: T.Chat.ChatRootInboxRefresh
 }) {
   const search = useInboxSearch()
-  return <InboxBody conversationIDKey={props.conversationIDKey} refreshInbox={props.refreshInbox} search={search} />
+  const username = useCurrentUserState(s => s.username)
+  return (
+    <InboxBody
+      key={username}
+      conversationIDKey={props.conversationIDKey}
+      refreshInbox={props.refreshInbox}
+      search={search}
+    />
+  )
 }
 
 // Desktop InboxBody
@@ -595,8 +604,14 @@ function InboxBody(props: ControlledInboxProps) {
 }
 
 function Inbox(props: InboxProps) {
+  const username = useCurrentUserState(s => s.username)
   return props.search ? (
-    <InboxBody conversationIDKey={props.conversationIDKey} refreshInbox={props.refreshInbox} search={props.search} />
+    <InboxBody
+      key={username}
+      conversationIDKey={props.conversationIDKey}
+      refreshInbox={props.refreshInbox}
+      search={props.search}
+    />
   ) : (
     <InboxWithSearch conversationIDKey={props.conversationIDKey} refreshInbox={props.refreshInbox} />
   )
diff --git a/shared/chat/inbox/layout-state.tsx b/shared/chat/inbox/layout-state.tsx
index fc4ca5064692..ababe6afd22a 100644
--- a/shared/chat/inbox/layout-state.tsx
+++ b/shared/chat/inbox/layout-state.tsx
@@ -98,6 +98,51 @@ export const useInboxLayoutState = Z.createZustand<State>('chat-inbox-layout', (
   }
 })
 
+// Per-conversation index over the current layout so row hooks can do a cheap
+// map lookup instead of scanning smallTeams/bigTeams. Built once per layout
+// object and memoized on it (a new layout object replaces the prior on change),
+// so selector bodies stay allocation-free after the first read.
+export type SmallLayoutRow = T.Immutable<T.RPCChat.UIInboxSmallTeamRow>
+export type BigLayoutChannelRow = T.Immutable<T.RPCChat.UIInboxBigTeamChannelRow>
+type LayoutIndex = {
+  bigChannels: Map<T.Chat.ConversationIDKey, BigLayoutChannelRow>
+  small: Map<T.Chat.ConversationIDKey, SmallLayoutRow>
+}
+const layoutIndexCache = new WeakMap<object, LayoutIndex>()
+
+const getLayoutIndex = (layout?: T.Immutable<T.RPCChat.UIInboxLayout>): LayoutIndex | undefined => {
+  if (!layout) {
+    return undefined
+  }
+  const existing = layoutIndexCache.get(layout)
+  if (existing) {
+    return existing
+  }
+  const small = new Map<T.Chat.ConversationIDKey, SmallLayoutRow>()
+  layout.smallTeams?.forEach(row => {
+    small.set(T.Chat.stringToConversationIDKey(row.convID), row)
+  })
+  const bigChannels = new Map<T.Chat.ConversationIDKey, BigLayoutChannelRow>()
+  layout.bigTeams?.forEach(row => {
+    if (row.state === T.RPCChat.UIInboxBigTeamRowTyp.channel) {
+      bigChannels.set(T.Chat.stringToConversationIDKey(row.channel.convID), row.channel)
+    }
+  })
+  const index: LayoutIndex = {bigChannels, small}
+  layoutIndexCache.set(layout, index)
+  return index
+}
+
+export const getSmallLayoutRow = (
+  s: {layout?: T.Immutable<T.RPCChat.UIInboxLayout>},
+  id: T.Chat.ConversationIDKey
+) => getLayoutIndex(s.layout)?.small.get(id)
+
+export const getBigLayoutChannelRow = (
+  s: {layout?: T.Immutable<T.RPCChat.UIInboxLayout>},
+  id: T.Chat.ConversationIDKey
+) => getLayoutIndex(s.layout)?.bigChannels.get(id)
+
 export const useInboxLayout = () =>
   useInboxLayoutState(
     Z.useShallow(s => ({
diff --git a/shared/chat/inbox/metadata.test.tsx b/shared/chat/inbox/metadata.test.tsx
index cbde2fbfde72..5d3b8203f826 100644
--- a/shared/chat/inbox/metadata.test.tsx
+++ b/shared/chat/inbox/metadata.test.tsx
@@ -1,8 +1,9 @@
 /// <reference types="jest" />
+import * as Meta from '@/constants/chat/meta'
 import * as T from '@/constants/types'
 import {resetAllStores} from '@/util/zustand'
 import {useConfigState} from '@/stores/config'
-import {forceUnboxRowsForService} from './metadata'
+import {forceUnboxRowsForService, getInboxConversationMeta, metasReceived} from './metadata'
 
 const convID = T.Chat.conversationIDToKey(new Uint8Array([1, 2, 3, 4]))
 
@@ -46,3 +47,29 @@ test('forceUnboxRowsForService reruns once for requests made while an unbox is i
   resolvers[1]?.()
   await flushPromises()
 })
+
+const makeMeta = (over: Partial<T.Chat.ConversationMeta>): T.Chat.ConversationMeta => ({
+  ...Meta.makeConversationMeta(),
+  conversationIDKey: convID,
+  ...over,
+})
+
+test('metasReceived version-gates: newer inbox version wins, older is ignored', () => {
+  metasReceived([makeMeta({inboxVersion: 2, snippet: 'v2', trustedState: 'trusted'})])
+  metasReceived([makeMeta({inboxVersion: 1, snippet: 'v1', trustedState: 'trusted'})])
+  expect(getInboxConversationMeta(convID)?.snippet).toBe('v2')
+  expect(getInboxConversationMeta(convID)?.inboxVersion).toBe(2)
+})
+
+test('metasReceived gates same-version updates (change swallowed without force)', () => {
+  metasReceived([makeMeta({inboxVersion: 2, snippet: 'orig', trustedState: 'trusted'})])
+  metasReceived([makeMeta({inboxVersion: 2, snippet: 'changed', trustedState: 'trusted'})])
+  expect(getInboxConversationMeta(convID)?.snippet).toBe('orig')
+})
+
+test('metasReceived force overwrites regardless of version', () => {
+  metasReceived([makeMeta({inboxVersion: 2, snippet: 'orig', trustedState: 'trusted'})])
+  metasReceived([makeMeta({inboxVersion: 1, snippet: 'forced'})], undefined, {force: true})
+  expect(getInboxConversationMeta(convID)?.snippet).toBe('forced')
+  expect(getInboxConversationMeta(convID)?.inboxVersion).toBe(1)
+})
diff --git a/shared/chat/inbox/metadata.tsx b/shared/chat/inbox/metadata.tsx
index 4a1f57ba7b49..95b1385fa249 100644
--- a/shared/chat/inbox/metadata.tsx
+++ b/shared/chat/inbox/metadata.tsx
@@ -16,16 +16,6 @@ import * as Z from '@/util/zustand'
 import {useConfigState} from '@/stores/config'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useUsersState} from '@/stores/users'
-import {
-  getInboxRowTrustedState,
-  setInboxRowTrustedState,
-  syncInboxRowBadgeState,
-  syncInboxRowsFromMetaAndParticipants,
-  syncInboxRowsFromLayout,
-  syncInboxRowsFromMetas,
-  syncInboxRowsFromParticipantMap,
-  syncInboxRowsFromParticipants,
-} from '@/chat/inbox/rows-state'
 
 type InboxMetadataState = T.Immutable<{
   metas: Map<T.Chat.ConversationIDKey, T.Chat.ConversationMeta>
@@ -55,16 +45,21 @@ export const updateInboxConversationMeta = (
   if (!oldMeta) {
     return
   }
-  metasReceived([
-    {
-      ...oldMeta,
-      ...partial,
-      rekeyers: partial.rekeyers ? new Set(partial.rekeyers) : oldMeta.rekeyers,
-      resetParticipants: partial.resetParticipants
-        ? new Set(partial.resetParticipants)
-        : oldMeta.resetParticipants,
-    },
-  ])
+  // Already merged from the current meta, so bypass version gating.
+  metasReceived(
+    [
+      {
+        ...oldMeta,
+        ...partial,
+        rekeyers: partial.rekeyers ? new Set(partial.rekeyers) : oldMeta.rekeyers,
+        resetParticipants: partial.resetParticipants
+          ? new Set(partial.resetParticipants)
+          : oldMeta.resetParticipants,
+      },
+    ],
+    undefined,
+    {force: true}
+  )
 }
 
 export const metaReceivedError = (
@@ -75,8 +70,6 @@ export const metaReceivedError = (
     logger.info(
       `metaReceivedError: ignoring transient error for convID: ${conversationIDKey} error: ${error.message}`
     )
-    // Allow a later unbox to retry; a row left 'requesting' is never re-requested.
-    setInboxRowTrustedState([conversationIDKey], 'untrusted')
     return
   }
   logger.info(
@@ -90,43 +83,49 @@ export const metaReceivedError = (
   if (!meta) {
     return
   }
-  metasReceived([meta])
+  // Error metas share the prior inbox version but flip trustedState to 'error';
+  // gating would swallow that, so force the overwrite.
+  metasReceived([meta], undefined, {force: true})
   if (participants) {
-    participantInfoReceived(conversationIDKey, participants, meta)
+    participantInfoReceived(conversationIDKey, participants)
   }
 }
 
 export const participantInfoReceived = (
   conversationIDKey: T.Chat.ConversationIDKey,
-  participantInfo: T.Chat.ParticipantInfo,
-  meta?: T.Chat.ConversationMeta
+  participantInfo: T.Chat.ParticipantInfo
 ) => {
   useInboxMetadataState.setState(s => {
     s.participants.set(conversationIDKey, T.castDraft(participantInfo))
   })
-  if (meta) {
-    syncInboxRowsFromMetaAndParticipants([{meta, participantInfo}])
-  }
 }
 
 export const metasReceived = (
   metas: ReadonlyArray<T.Chat.ConversationMeta>,
-  removals?: ReadonlyArray<T.Chat.ConversationIDKey>
+  removals?: ReadonlyArray<T.Chat.ConversationIDKey>,
+  options?: {force?: boolean}
 ) => {
+  const force = options?.force ?? false
+  // Version-gate against the currently stored meta so a stale-version update
+  // can't clobber newer data (previously done by the thread store). Compute
+  // against getState() (not the immer draft) so updateMeta never sees a proxy.
+  const current = useInboxMetadataState.getState().metas
+  const nextMetas = metas.map(m => {
+    const old = force ? undefined : current.get(m.conversationIDKey)
+    return old ? Meta.updateMeta(old, m) : m
+  })
   useInboxMetadataState.setState(s => {
     removals?.forEach(r => {
       s.metas.delete(r)
       s.participants.delete(r)
     })
-    metas.forEach(m => {
-      s.metas.set(m.conversationIDKey, T.castDraft(m))
+    nextMetas.forEach(next => {
+      s.metas.set(next.conversationIDKey, T.castDraft(next))
     })
   })
-  syncInboxRowsFromMetas(metas, removals)
 }
 
 const updateInboxParticipants = (inboxUIItems: ReadonlyArray<T.RPCChat.InboxUIItem>) => {
-  syncInboxRowsFromParticipants(inboxUIItems)
   const participantEntries = new Array<{
     conversationIDKey: T.Chat.ConversationIDKey
     participantInfo: T.Chat.ParticipantInfo
@@ -152,7 +151,6 @@ const updateInboxParticipants = (inboxUIItems: ReadonlyArray<T.RPCChat.InboxUIIt
 export const syncInboxParticipantsFromParticipantMap = (
   participantMap?: {[key: string]: ReadonlyArray<T.RPCChat.UIParticipant> | null} | null
 ) => {
-  syncInboxRowsFromParticipantMap(participantMap)
   useInboxMetadataState.setState(s => {
     Object.keys(participantMap ?? {}).forEach(convIDStr => {
       const participants = participantMap?.[convIDStr]
@@ -266,7 +264,6 @@ export const onChatRouteChanged = (
 }
 
 export const hydrateInboxLayout = (layout: T.RPCChat.UIInboxLayout) => {
-  syncInboxRowsFromLayout(layout)
   const missingSnippetIds = (layout.smallTeams ?? [])
     .filter(row => !row.snippet)
     .map(row => T.Chat.stringToConversationIDKey(row.convID))
@@ -296,8 +293,14 @@ export const clearConversationsForInboxSync = () => {
   })
 }
 
-const trustedStateForConversation = (id: T.Chat.ConversationIDKey) =>
-  useInboxMetadataState.getState().metas.get(id)?.trustedState ?? getInboxRowTrustedState(id)
+const inFlightUnboxRows = new Set<T.Chat.ConversationIDKey>()
+const pendingForcedUnboxRows = new Set<T.Chat.ConversationIDKey>()
+
+// Trusted state now lives on the meta itself; a conv with no meta is 'requesting'
+// while its unbox is in flight, otherwise 'untrusted'.
+const trustedStateForConversation = (id: T.Chat.ConversationIDKey): T.Chat.MetaTrustedState =>
+  useInboxMetadataState.getState().metas.get(id)?.trustedState ??
+  (inFlightUnboxRows.has(id) ? 'requesting' : 'untrusted')
 
 const untrustedConversationIDKeys = (ids: ReadonlyArray<T.Chat.ConversationIDKey>) =>
   ids.filter(id => {
@@ -305,9 +308,6 @@ const untrustedConversationIDKeys = (ids: ReadonlyArray<T.Chat.ConversationIDKey
     return trustedState !== 'requesting' && trustedState !== 'trusted'
   })
 
-const inFlightUnboxRows = new Set<T.Chat.ConversationIDKey>()
-const pendingForcedUnboxRows = new Set<T.Chat.ConversationIDKey>()
-
 type ConvoMetaQueueState = T.Immutable<{
   generation: number
   inFlight: boolean
@@ -441,7 +441,6 @@ const requestInboxUnboxRows = (ids: ReadonlyArray<T.Chat.ConversationIDKey>, for
       return
     }
     conversationIDKeys.forEach(id => inFlightUnboxRows.add(id))
-    setInboxRowTrustedState(conversationIDKeys, 'requesting')
     logger.info(
       `unboxRows: unboxing len: ${conversationIDKeys.length} convs: ${conversationIDKeys.join(',')}`
     )
@@ -453,9 +452,8 @@ const requestInboxUnboxRows = (ids: ReadonlyArray<T.Chat.ConversationIDKey>, for
       if (error instanceof RPCError) {
         logger.info(`unboxRows: failed ${error.desc}`)
       }
-      // No per-conversation results arrived; leaving rows 'requesting' would make
-      // every future non-forced unbox skip them permanently.
-      setInboxRowTrustedState(conversationIDKeys, 'untrusted')
+      // No per-conversation results arrived; the finally block clears the
+      // in-flight marker so these convs fall back to 'untrusted' and can retry.
     } finally {
       conversationIDKeys.forEach(id => inFlightUnboxRows.delete(id))
       const rerunIDs = conversationIDKeys.filter(id => {
@@ -489,12 +487,8 @@ export const queueMetaToRequest = (ids: ReadonlyArray<T.Chat.ConversationIDKey>)
   useConvoMetaQueueState.getState().dispatch.queueMetaToRequest(ids)
 }
 
-const hasKnownMeta = (id: T.Chat.ConversationIDKey) => {
-  if (useInboxMetadataState.getState().metas.has(id)) {
-    return true
-  }
-  return getInboxRowTrustedState(id) === 'trusted'
-}
+const hasKnownMeta = (id: T.Chat.ConversationIDKey) =>
+  useInboxMetadataState.getState().metas.has(id)
 
 export const ensureWidgetMetas = (
   widgetList: ReadonlyArray<{convID: T.Chat.ConversationIDKey}> | null | undefined
@@ -591,7 +585,8 @@ export const onChatInboxSynced = async (
       }, [])
       const removals = syncRes.incremental.removals?.map(T.Chat.stringToConversationIDKey)
       if (metas.length || removals?.length) {
-        metasReceived(metas, removals)
+        // Incremental unverified sync is authoritative for these convs; force past gating.
+        metasReceived(metas, removals, {force: true})
       }
 
       forceUnboxRowsForService(
@@ -605,7 +600,3 @@ export const onChatInboxSynced = async (
       await refreshInbox('inboxSyncedUnknown')
   }
 }
-
-export const syncBadgeState = (badgeState?: T.RPCGen.BadgeState) => {
-  syncInboxRowBadgeState(badgeState)
-}
diff --git a/shared/chat/inbox/row/small-team/index.tsx b/shared/chat/inbox/row/small-team/index.tsx
index 3dc90b1c7bb0..3c03da62f0ed 100644
--- a/shared/chat/inbox/row/small-team/index.tsx
+++ b/shared/chat/inbox/row/small-team/index.tsx
@@ -302,7 +302,7 @@ const BottomLineDisplay = (p: BottomLineDisplayProps) => {
   return (
     <Kb.Box2 direction="horizontal" fullWidth={true} style={isMobile ? {backgroundColor} : undefined}>
       {hasResetUsers && (
-        <Kb.Meta title="reset" style={styles.alertMeta} backgroundColor={Kb.Styles.globalColors.red} />
+        <Kb.Meta variant="reset" style={styles.alertMeta} />
       )}
       {youNeedToRekey && (
         <Kb.Meta
@@ -449,7 +449,7 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       alertMeta: Kb.Styles.platformStyles({
-        common: {alignSelf: 'center', marginRight: 6},
+        common: {marginRight: 6},
         isMobile: {marginTop: 2},
       }),
       bold: {...Kb.Styles.globalStyles.fontBold},
diff --git a/shared/chat/inbox/row/teams-divider-container.tsx b/shared/chat/inbox/row/teams-divider-container.tsx
index 7ca514e18f77..186490821578 100644
--- a/shared/chat/inbox/row/teams-divider-container.tsx
+++ b/shared/chat/inbox/row/teams-divider-container.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import type {ChatInboxRowItem} from '../rowitem'
 import {useConfigState} from '@/stores/config'
-import {useInboxRowsState} from '@/chat/inbox/rows-state'
+import {useInboxBadgeState} from '@/chat/inbox/badge-state'
 import TeamsDivider from './teams-divider'
 
 type Props = Omit<React.ComponentProps<typeof TeamsDivider>, 'badgeCount'> & {
@@ -22,11 +22,11 @@ const TeamsDividerContainer = React.memo(function TeamsDividerContainer(props: P
     return ids
   }, [rows])
 
-  const visibleBadges = useInboxRowsState(
+  const visibleBadges = useInboxBadgeState(
     React.useCallback(s => {
       let total = 0
       for (const conversationIDKey of visibleSmallConvIDs) {
-        total += s.rowsSmall.get(conversationIDKey)?.badgeCount ?? 0
+        total += s.counts.get(conversationIDKey)?.badgeCount ?? 0
       }
       return total
     }, [visibleSmallConvIDs])
diff --git a/shared/chat/inbox/rows-state.test.ts b/shared/chat/inbox/rows-state.test.ts
index 8b5f88867ecf..003351a5c7f0 100644
--- a/shared/chat/inbox/rows-state.test.ts
+++ b/shared/chat/inbox/rows-state.test.ts
@@ -1,45 +1,51 @@
+/** @jest-environment jsdom */
 /// <reference types="jest" />
-import * as T from '@/constants/types'
 import * as Meta from '@/constants/chat/meta'
+import * as T from '@/constants/types'
+import {act, cleanup, renderHook} from '@testing-library/react'
 import {resetAllStores} from '@/util/zustand'
 import {useCurrentUserState} from '@/stores/current-user'
-import {
-  syncInboxRowBadgeState,
-  syncInboxRowsFromLayout,
-  syncInboxRowsFromMetaAndParticipants,
-  syncInboxRowsFromMetas,
-  syncInboxRowsFromParticipantMap,
-  syncInboxRowsFromParticipants,
-  updateInboxRowTyping,
-  useInboxRowsState,
-} from './rows-state'
+import {metasReceived, participantInfoReceived} from './metadata'
+import {syncInboxBadgeState} from './badge-state'
+import {updateInboxTyping} from './typing-state'
+import {useInboxLayoutState} from './layout-state'
+import {useInboxRowBig, useInboxRowSmall} from './rows-state'
 
-afterEach(() => {
-  resetAllStores()
-})
+const convID = T.Chat.conversationIDToKey(new Uint8Array([1, 2, 3, 4]))
+
+const setLayout = (layout: Partial<T.RPCChat.UIInboxLayout>) => {
+  useInboxLayoutState.getState().dispatch.updateLayout(
+    JSON.stringify({bigTeams: null, smallTeams: null, totalSmallTeams: 0, ...layout})
+  )
+}
 
-test('explicit meta and participant updates merge into the row caches', () => {
-  const convID = T.Chat.conversationIDToKey(new Uint8Array([1, 2, 3, 4]))
+beforeEach(() => {
   useCurrentUserState.getState().dispatch.setBootstrap({
     deviceID: 'device-id',
     deviceName: 'device-name',
     uid: 'uid',
     username: 'alice',
   })
+})
 
-  syncInboxRowBadgeState({
-    conversations: [{badgeCount: 2, convID: T.Chat.keyToConversationID(convID), unreadMessages: 1}],
-  } as unknown as T.RPCGen.BadgeState)
-  updateInboxRowTyping([
-    {
-      convID: T.Chat.keyToConversationID(convID),
-      typers: [{deviceID: 'device-id', uid: 'uid', username: 'carol'}],
-    },
-  ])
+afterEach(() => {
+  cleanup()
+  resetAllStores()
+})
 
-  syncInboxRowsFromMetaAndParticipants([
-    {
-      meta: {
+test('meta, participant, badge and typing stores merge into the computed small/big rows', () => {
+  act(() => {
+    syncInboxBadgeState({
+      conversations: [{badgeCount: 2, convID: T.Chat.keyToConversationID(convID), unreadMessages: 1}],
+    } as unknown as T.RPCGen.BadgeState)
+    updateInboxTyping([
+      {
+        convID: T.Chat.keyToConversationID(convID),
+        typers: [{deviceID: 'device-id', uid: 'uid', username: 'carol'}],
+      },
+    ] as ReadonlyArray<T.RPCChat.ConvTypingUpdate>)
+    metasReceived([
+      {
         ...Meta.makeConversationMeta(),
         channelname: 'general',
         conversationIDKey: convID,
@@ -53,21 +59,12 @@ test('explicit meta and participant updates merge into the row caches', () => {
         timestamp: 1234,
         trustedState: 'requesting',
       },
-      participantInfo: {all: ['alice', 'bob'], contactName: new Map(), name: ['alice', 'bob']},
-    },
-  ])
-  expect(useInboxRowsState.getState().rowsBig.get(convID)?.badgeCount).toBe(2)
-
-  expect(useInboxRowsState.getState().rowsBig.get(convID)).toMatchObject({
-    badgeCount: 2,
-    channelname: 'general',
-    hasBadge: true,
-    hasDraft: true,
-    hasUnread: true,
-    snippetDecoration: T.RPCChat.SnippetDecoration.pendingMessage,
-    unreadCount: 1,
+    ])
+    participantInfoReceived(convID, {all: ['alice', 'bob'], contactName: new Map(), name: ['alice', 'bob']})
   })
-  expect(useInboxRowsState.getState().rowsSmall.get(convID)).toMatchObject({
+
+  const {result: small} = renderHook(() => useInboxRowSmall(convID))
+  expect(small.current).toMatchObject({
     badgeCount: 2,
     draft: 'draft text',
     hasBadge: true,
@@ -87,82 +84,84 @@ test('explicit meta and participant updates merge into the row caches', () => {
     youAreReset: false,
     youNeedToRekey: true,
   })
-})
 
-test('layout and meta sync populate inbox rows without a convo store lookup', () => {
-  const convID = T.Chat.conversationIDToKey(new Uint8Array([1, 2, 3, 4]))
-  useCurrentUserState.getState().dispatch.setBootstrap({
-    deviceID: 'device-id',
-    deviceName: 'device-name',
-    uid: 'uid',
-    username: 'alice',
+  const {result: big} = renderHook(() => useInboxRowBig(convID))
+  expect(big.current).toMatchObject({
+    badgeCount: 2,
+    channelname: 'general',
+    hasBadge: true,
+    hasDraft: true,
+    hasUnread: true,
+    snippetDecoration: T.RPCChat.SnippetDecoration.pendingMessage,
+    unreadCount: 1,
   })
+})
 
-  syncInboxRowsFromLayout({
-    bigTeams: [
-      {
-        channel: {
-          channelname: 'general',
+test('layout fills gaps until a trusted meta wins; participant store overrides name-split', () => {
+  const {result: small} = renderHook(() => useInboxRowSmall(convID))
+  const {result: big} = renderHook(() => useInboxRowBig(convID))
+
+  // layout only: untrusted, so the layout row supplies snippet/time/muted/participants
+  act(() => {
+    setLayout({
+      bigTeams: [
+        {
+          channel: {
+            channelname: 'general',
+            convID: T.Chat.conversationIDKeyToString(convID),
+            draft: 'big draft',
+            isMuted: false,
+            teamname: 'team',
+          },
+          state: T.RPCChat.UIInboxBigTeamRowTyp.channel,
+        },
+      ],
+      smallTeams: [
+        {
           convID: T.Chat.conversationIDKeyToString(convID),
-          draft: 'big draft',
-          isMuted: false,
-          teamname: 'team',
+          draft: '',
+          isMuted: true,
+          isTeam: false,
+          lastSendTime: 0,
+          name: 'alice,bob',
+          snippet: 'layout snippet',
+          snippetDecoration: T.RPCChat.SnippetDecoration.none,
+          time: 123,
         },
-        state: T.RPCChat.UIInboxBigTeamRowTyp.channel,
-      },
-    ],
-    smallTeams: [
-      {
-        convID: T.Chat.conversationIDKeyToString(convID),
-        draft: '',
-        isMuted: true,
-        isTeam: false,
-        lastSendTime: 0,
-        name: 'alice,bob',
-        snippet: 'layout snippet',
-        snippetDecoration: T.RPCChat.SnippetDecoration.none,
-        time: 123,
-      },
-    ],
-    totalSmallTeams: 1,
+      ],
+      totalSmallTeams: 1,
+    })
   })
-
-  expect(useInboxRowsState.getState().rowsSmall.get(convID)).toMatchObject({
+  expect(small.current).toMatchObject({
     isMuted: true,
     participants: ['bob'],
     snippet: 'layout snippet',
     timestamp: 123,
   })
-  expect(useInboxRowsState.getState().rowsBig.get(convID)).toMatchObject({
-    channelname: 'general',
-    hasDraft: true,
-    teamname: 'team',
-  })
+  expect(big.current).toMatchObject({channelname: 'general', hasDraft: true, teamname: 'team'})
 
-  syncInboxRowsFromParticipants([
-    {
-      convID: T.Chat.conversationIDKeyToString(convID),
-      participants: [
-        {assertion: 'alice', inConvName: true, type: T.RPCChat.UIParticipantType.user},
-        {assertion: 'carol', inConvName: true, type: T.RPCChat.UIParticipantType.user},
-      ],
-    } as unknown as T.RPCChat.InboxUIItem,
-  ])
-  expect(useInboxRowsState.getState().rowsSmall.get(convID)?.participants).toEqual(['carol'])
+  // participant store wins over the layout name-split
+  act(() => {
+    participantInfoReceived(convID, {all: ['alice', 'carol'], contactName: new Map(), name: ['alice', 'carol']})
+  })
+  expect(small.current.participants).toEqual(['carol'])
 
-  syncInboxRowsFromMetas([
-    {
-      ...Meta.makeConversationMeta(),
-      conversationIDKey: convID,
-      draft: 'meta draft',
-      isMuted: false,
-      snippetDecorated: 'meta snippet',
-      teamname: 'meta-team',
-      timestamp: 456,
-      trustedState: 'trusted',
-    },
-  ])
-  expect(useInboxRowsState.getState().rowsSmall.get(convID)).toMatchObject({
+  // a trusted meta takes precedence over the layout row for the gap fields
+  act(() => {
+    metasReceived([
+      {
+        ...Meta.makeConversationMeta(),
+        conversationIDKey: convID,
+        draft: 'meta draft',
+        isMuted: false,
+        snippetDecorated: 'meta snippet',
+        teamname: 'meta-team',
+        timestamp: 456,
+        trustedState: 'trusted',
+      },
+    ])
+  })
+  expect(small.current).toMatchObject({
     draft: 'meta draft',
     isMuted: false,
     snippet: 'meta snippet',
@@ -170,11 +169,9 @@ test('layout and meta sync populate inbox rows without a convo store lookup', ()
     timestamp: 456,
   })
 
-  syncInboxRowsFromParticipantMap({
-    [convID]: [
-      {assertion: 'alice', inConvName: true, type: T.RPCChat.UIParticipantType.user},
-      {assertion: 'dave', inConvName: true, type: T.RPCChat.UIParticipantType.user},
-    ],
+  // later participant updates still flow through
+  act(() => {
+    participantInfoReceived(convID, {all: ['alice', 'dave'], contactName: new Map(), name: ['alice', 'dave']})
   })
-  expect(useInboxRowsState.getState().rowsSmall.get(convID)?.participants).toEqual(['dave'])
+  expect(small.current.participants).toEqual(['dave'])
 })
diff --git a/shared/chat/inbox/rows-state.tsx b/shared/chat/inbox/rows-state.tsx
index 9e9861df4e94..3e54550add1a 100644
--- a/shared/chat/inbox/rows-state.tsx
+++ b/shared/chat/inbox/rows-state.tsx
@@ -1,8 +1,16 @@
+import * as React from 'react'
 import * as T from '@/constants/types'
-import * as Common from '@/constants/chat/common'
-import * as Z from '@/util/zustand'
 import {useCurrentUserState} from '@/stores/current-user'
-import {shallowEqual} from '@/constants/utils'
+import {useInboxMetadataState} from '@/chat/inbox/metadata'
+import {
+  getBigLayoutChannelRow,
+  getSmallLayoutRow,
+  useInboxLayoutState,
+  type BigLayoutChannelRow,
+  type SmallLayoutRow,
+} from '@/chat/inbox/layout-state'
+import {useInboxBadgeState, type BadgeCounts} from '@/chat/inbox/badge-state'
+import {useInboxTypingState} from '@/chat/inbox/typing-state'
 
 export type InboxRowBig = {
   badgeCount: number
@@ -41,73 +49,13 @@ export type InboxRowSmall = {
   youNeedToRekey: boolean
 }
 
-const defaultInboxRowBig = {
-  badgeCount: 0,
-  channelname: '',
-  hasBadge: false,
-  hasDraft: false,
-  hasUnread: false,
-  isError: false,
-  isMuted: false,
-  snippet: '',
-  snippetDecoration: 0,
-  teamname: '',
-  trustedState: 'untrusted',
-  unreadCount: 0,
-} satisfies InboxRowBig
+type Meta = T.Immutable<T.Chat.ConversationMeta> | undefined
+type ParticipantInfo = T.Immutable<T.Chat.ParticipantInfo> | undefined
 
-const defaultInboxRowSmall: InboxRowSmall = {
-  badgeCount: 0,
-  draft: '',
-  hasBadge: false,
-  hasResetUsers: false,
-  hasUnread: false,
-  isDecryptingSnippet: true,
-  isLocked: false,
-  isMuted: false,
-  participantNeedToRekey: false,
-  participants: [],
-  snippet: '',
-  snippetDecoration: T.RPCChat.SnippetDecoration.none,
-  teamDisplayName: '',
-  timestamp: 0,
-  trustedState: 'untrusted',
-  typingSnippet: '',
-  unreadCount: 0,
-  youAreReset: false,
-  youNeedToRekey: false,
-}
-
-type State = T.Immutable<{
-  rowsBig: Map<string, InboxRowBig>
-  rowsSmall: Map<string, InboxRowSmall>
-  dispatch: {
-    resetState: () => void
-  }
-}>
-
-const ensureBigRow = (rowsBig: Map<string, InboxRowBig>, id: string) => {
-  if (!rowsBig.has(id)) {
-    rowsBig.set(id, {...defaultInboxRowBig})
-  }
-  return rowsBig.get(id)!
-}
-
-const ensureSmallRow = (rowsSmall: Map<string, InboxRowSmall>, id: string) => {
-  if (!rowsSmall.has(id)) {
-    rowsSmall.set(id, {...defaultInboxRowSmall, participants: [] as string[]})
+const buildTypingSnippet = (typing?: ReadonlySet<string>): string => {
+  if (!typing?.size) {
+    return ''
   }
-  return rowsSmall.get(id)!
-}
-
-export const useInboxRowsState = Z.createZustand<State>('inboxRows', () => ({
-  dispatch: {resetState: Z.defaultReset},
-  rowsBig: new Map(),
-  rowsSmall: new Map(),
-}))
-
-const buildTypingSnippet = (typing: ReadonlySet<string>): string => {
-  if (!typing.size) return ''
   if (typing.size === 1) {
     const [t] = typing
     return `${t} is typing...`
@@ -125,251 +73,122 @@ const bigSnippetDecoration = (sd: T.RPCChat.SnippetDecoration): number => {
   }
 }
 
-const applyParticipantsToSmallRow = (
-  small: InboxRowSmall,
-  participantInfo: T.Chat.ParticipantInfo,
-  you: string
-) => {
-  const filtered = participantInfo.name.length
-    ? participantInfo.name.filter((pp, _, list) => list.length === 1 || pp !== you)
-    : []
-  if (!shallowEqual(small.participants, filtered)) {
-    small.participants = filtered
-  }
-}
+const filterParticipants = (names: ReadonlyArray<string>, you: string): Array<string> =>
+  names.length ? names.filter((pp, _i, list) => list.length === 1 || pp !== you) : []
 
-const applyMetaToRows = (
-  rowsBig: Map<string, InboxRowBig>,
-  rowsSmall: Map<string, InboxRowSmall>,
-  meta: T.Chat.ConversationMeta,
-  you: string,
-  participantInfo?: T.Chat.ParticipantInfo
-) => {
-  const id = meta.conversationIDKey
-  const snippet = meta.snippetDecorated ?? meta.snippet ?? ''
+const isMetaTrusted = (trustedState: T.Chat.MetaTrustedState) =>
+  trustedState === 'trusted' || trustedState === 'error'
 
-  const big = ensureBigRow(rowsBig, id)
-  big.channelname = meta.channelname
-  big.hasBadge = big.badgeCount > 0
-  big.hasDraft = !!meta.draft
-  big.hasUnread = big.unreadCount > 0
-  big.isError = meta.trustedState === 'error'
-  big.isMuted = meta.isMuted
-  big.snippet = snippet
-  big.snippetDecoration = bigSnippetDecoration(meta.snippetDecoration)
-  big.teamname = meta.teamname
-  big.trustedState = meta.trustedState
-
-  const small = ensureSmallRow(rowsSmall, id)
-  small.draft = meta.draft || ''
-  small.hasBadge = small.badgeCount > 0
-  small.hasResetUsers = meta.resetParticipants.size > 0
-  small.hasUnread = small.unreadCount > 0
-  small.isDecryptingSnippet =
-    !!id && !snippet && (meta.trustedState === 'requesting' || meta.trustedState === 'untrusted')
-  small.isLocked = meta.rekeyers.size > 0 || !!meta.wasFinalizedBy
-  small.isMuted = meta.isMuted
-  small.participantNeedToRekey = meta.rekeyers.size > 0
-  if (participantInfo) {
-    applyParticipantsToSmallRow(small, participantInfo, you)
+const computeSmallRow = (
+  id: string,
+  you: string,
+  meta: Meta,
+  participantInfo: ParticipantInfo,
+  layoutRow: SmallLayoutRow | undefined,
+  counts: BadgeCounts | undefined,
+  typing: ReadonlySet<string> | undefined
+): InboxRowSmall => {
+  const trustedState: T.Chat.MetaTrustedState = meta?.trustedState ?? 'untrusted'
+  const metaTrusted = isMetaTrusted(trustedState)
+  const badgeCount = counts?.badgeCount ?? 0
+  const unreadCount = counts?.unreadCount ?? 0
+
+  const metaSnippet = meta ? (meta.snippetDecorated ?? meta.snippet ?? '') : ''
+  // ONE precedence rule: meta wins when trusted/error; otherwise the layout row
+  // fills the gaps (snippet, draft, time, isMuted, name-split participants).
+  const useLayout = !metaTrusted && !!layoutRow
+
+  const snippet = useLayout ? (layoutRow.snippet ?? '') : metaSnippet
+  const snippetDecoration = useLayout
+    ? layoutRow.snippetDecoration
+    : (meta?.snippetDecoration ?? T.RPCChat.SnippetDecoration.none)
+  const draft = (useLayout ? layoutRow.draft : meta?.draft) || ''
+  const timestamp = (useLayout ? layoutRow.time : meta?.timestamp) || 0
+  const isMuted = useLayout ? layoutRow.isMuted : (meta?.isMuted ?? false)
+  const teamDisplayName = useLayout
+    ? layoutRow.isTeam
+      ? (layoutRow.name.split('#')[0] ?? '')
+      : ''
+    : meta?.teamname
+      ? (meta.teamname.split('#')[0] ?? '')
+      : ''
+
+  let participants = filterParticipants(participantInfo?.name ?? [], you)
+  if (participants.length === 0 && layoutRow && !layoutRow.isTeam && layoutRow.name) {
+    const names = layoutRow.name
+      .split(',')
+      .map(n => n.trim())
+      .filter(Boolean)
+    participants = filterParticipants(names, you)
   }
-  small.snippet = snippet
-  small.snippetDecoration = meta.snippetDecoration
-  small.teamDisplayName = meta.teamname ? meta.teamname.split('#')[0] ?? '' : ''
-  small.timestamp = meta.timestamp || 0
-  small.trustedState = meta.trustedState
-  small.youAreReset = meta.membershipType === 'youAreReset'
-  small.youNeedToRekey = meta.rekeyers.has(you)
-}
-
-export const syncInboxRowsFromMetaAndParticipants = (
-  entries: ReadonlyArray<{
-    meta: T.Chat.ConversationMeta
-    participantInfo?: T.Chat.ParticipantInfo
-  }>
-) => {
-  const you = useCurrentUserState.getState().username
-  useInboxRowsState.setState(s => {
-    entries.forEach(({meta, participantInfo}) => {
-      applyMetaToRows(s.rowsBig, s.rowsSmall, meta, you, participantInfo)
-    })
-  })
-}
 
-export const syncInboxRowsFromMetas = (
-  metas: ReadonlyArray<T.Chat.ConversationMeta>,
-  removals?: ReadonlyArray<T.Chat.ConversationIDKey>
-) => {
-  const you = useCurrentUserState.getState().username
-  useInboxRowsState.setState(s => {
-    removals?.forEach(id => {
-      s.rowsBig.delete(id)
-      s.rowsSmall.delete(id)
-    })
-    metas.forEach(meta => {
-      applyMetaToRows(s.rowsBig, s.rowsSmall, meta, you)
-    })
-  })
-}
-
-export const syncInboxRowsFromParticipants = (inboxUIItems: ReadonlyArray<T.RPCChat.InboxUIItem>) => {
-  const you = useCurrentUserState.getState().username
-  useInboxRowsState.setState(s => {
-    inboxUIItems.forEach(inboxUIItem => {
-      const participantInfo = Common.uiParticipantsToParticipantInfo(inboxUIItem.participants ?? [])
-      if (participantInfo.all.length > 0) {
-        const id = T.Chat.stringToConversationIDKey(inboxUIItem.convID)
-        applyParticipantsToSmallRow(ensureSmallRow(s.rowsSmall, id), participantInfo, you)
-      }
-    })
-  })
-}
-
-export const syncInboxRowsFromParticipantMap = (
-  participantMap?: {[key: string]: ReadonlyArray<T.RPCChat.UIParticipant> | null} | null
-) => {
-  const you = useCurrentUserState.getState().username
-  useInboxRowsState.setState(s => {
-    Object.keys(participantMap ?? {}).forEach(convIDStr => {
-      const participants = participantMap?.[convIDStr]
-      if (!participants) {
-        return
-      }
-      const participantInfo = Common.uiParticipantsToParticipantInfo(participants)
-      if (participantInfo.all.length > 0) {
-        const id = T.Chat.stringToConversationIDKey(convIDStr)
-        applyParticipantsToSmallRow(ensureSmallRow(s.rowsSmall, id), participantInfo, you)
-      }
-    })
-  })
-}
-
-export const syncInboxRowsFromLayout = (layout: T.RPCChat.UIInboxLayout) => {
-  const you = useCurrentUserState.getState().username
-  useInboxRowsState.setState(s => {
-    layout.smallTeams?.forEach(row => {
-      const id = T.Chat.stringToConversationIDKey(row.convID)
-      const small = ensureSmallRow(s.rowsSmall, id)
-      const snippet = row.snippet ?? ''
-      small.draft = row.draft || ''
-      small.hasBadge = small.badgeCount > 0
-      small.hasUnread = small.unreadCount > 0
-      small.isDecryptingSnippet = !!id && !snippet && small.trustedState !== 'trusted'
-      small.isMuted = row.isMuted
-      small.snippet = snippet
-      small.snippetDecoration = row.snippetDecoration
-      small.teamDisplayName = row.isTeam ? row.name.split('#')[0] ?? '' : ''
-      small.timestamp = row.time || 0
-      if (!row.isTeam && row.name && small.participants.length === 0) {
-        const names = row.name
-          .split(',')
-          .map(n => n.trim())
-          .filter(Boolean)
-        const participantInfo: T.Chat.ParticipantInfo = {all: names, contactName: new Map(), name: names}
-        applyParticipantsToSmallRow(small, participantInfo, you)
-      }
-
-      const big = ensureBigRow(s.rowsBig, id)
-      big.hasBadge = big.badgeCount > 0
-      big.hasDraft = !!row.draft
-      big.hasUnread = big.unreadCount > 0
-      big.isMuted = row.isMuted
-      big.snippet = snippet
-      big.snippetDecoration = bigSnippetDecoration(row.snippetDecoration)
-      big.teamname = row.isTeam ? row.name : ''
-    })
-    layout.bigTeams?.forEach(row => {
-      if (row.state !== T.RPCChat.UIInboxBigTeamRowTyp.channel) {
-        return
-      }
-      const id = T.Chat.stringToConversationIDKey(row.channel.convID)
-      const big = ensureBigRow(s.rowsBig, id)
-      big.channelname = row.channel.channelname
-      big.hasBadge = big.badgeCount > 0
-      big.hasDraft = !!row.channel.draft
-      big.hasUnread = big.unreadCount > 0
-      big.isMuted = row.channel.isMuted
-      big.teamname = row.channel.teamname
-    })
-  })
-}
-
-export const getInboxRowTrustedState = (id: T.Chat.ConversationIDKey) => {
-  const {rowsBig, rowsSmall} = useInboxRowsState.getState()
-  return rowsSmall.get(id)?.trustedState ?? rowsBig.get(id)?.trustedState
-}
-
-export const setInboxRowTrustedState = (
-  ids: ReadonlyArray<T.Chat.ConversationIDKey>,
-  trustedState: T.Chat.MetaTrustedState
-) => {
-  useInboxRowsState.setState(s => {
-    ids.forEach(id => {
-      const small = ensureSmallRow(s.rowsSmall, id)
-      small.trustedState = trustedState
-      small.isDecryptingSnippet =
-        !!id && !small.snippet && (trustedState === 'requesting' || trustedState === 'untrusted')
-
-      const big = ensureBigRow(s.rowsBig, id)
-      big.trustedState = trustedState
-      big.isError = trustedState === 'error'
-    })
-  })
+  const rekeyersSize = meta?.rekeyers.size ?? 0
+  return {
+    badgeCount,
+    draft,
+    hasBadge: badgeCount > 0,
+    hasResetUsers: (meta?.resetParticipants.size ?? 0) > 0,
+    hasUnread: unreadCount > 0,
+    isDecryptingSnippet: !!id && !snippet && !metaTrusted,
+    isLocked: rekeyersSize > 0 || !!meta?.wasFinalizedBy,
+    isMuted,
+    participantNeedToRekey: rekeyersSize > 0,
+    participants,
+    snippet,
+    snippetDecoration,
+    teamDisplayName,
+    timestamp,
+    trustedState,
+    typingSnippet: buildTypingSnippet(typing),
+    unreadCount,
+    youAreReset: meta?.membershipType === 'youAreReset',
+    youNeedToRekey: !!meta && meta.rekeyers.has(you),
+  }
 }
 
-export const syncInboxRowBadgeState = (badgeState?: T.RPCGen.BadgeState) => {
-  if (!badgeState) {
-    return
+const computeBigRow = (
+  meta: Meta,
+  layoutChannel: BigLayoutChannelRow | undefined,
+  counts: BadgeCounts | undefined
+): InboxRowBig => {
+  const trustedState: T.Chat.MetaTrustedState = meta?.trustedState ?? 'untrusted'
+  const metaTrusted = isMetaTrusted(trustedState)
+  const badgeCount = counts?.badgeCount ?? 0
+  const unreadCount = counts?.unreadCount ?? 0
+  const useLayout = !metaTrusted && !!layoutChannel
+  const metaSnippet = meta ? (meta.snippetDecorated ?? meta.snippet ?? '') : ''
+  return {
+    badgeCount,
+    channelname: useLayout ? layoutChannel.channelname : (meta?.channelname ?? ''),
+    hasBadge: badgeCount > 0,
+    hasDraft: useLayout ? !!layoutChannel.draft : !!meta?.draft,
+    hasUnread: unreadCount > 0,
+    isError: trustedState === 'error',
+    isMuted: useLayout ? layoutChannel.isMuted : (meta?.isMuted ?? false),
+    snippet: metaSnippet,
+    snippetDecoration: bigSnippetDecoration(meta?.snippetDecoration ?? T.RPCChat.SnippetDecoration.none),
+    teamname: useLayout ? layoutChannel.teamname : (meta?.teamname ?? ''),
+    trustedState,
+    unreadCount,
   }
-  const updated = new Set<string>()
-  useInboxRowsState.setState(s => {
-    badgeState.conversations?.forEach(conversation => {
-      const id = T.Chat.conversationIDToKey(conversation.convID)
-      updated.add(id)
-
-      const big = ensureBigRow(s.rowsBig, id)
-      big.badgeCount = conversation.badgeCount
-      big.hasBadge = conversation.badgeCount > 0
-      big.hasUnread = conversation.unreadMessages > 0
-      big.unreadCount = conversation.unreadMessages
-
-      const small = ensureSmallRow(s.rowsSmall, id)
-      small.badgeCount = conversation.badgeCount
-      small.hasBadge = conversation.badgeCount > 0
-      small.hasUnread = conversation.unreadMessages > 0
-      small.unreadCount = conversation.unreadMessages
-    })
-
-    for (const [id, big] of s.rowsBig) {
-      if (updated.has(id)) continue
-      big.badgeCount = 0
-      big.hasBadge = false
-      big.hasUnread = false
-      big.unreadCount = 0
-    }
-    for (const [id, small] of s.rowsSmall) {
-      if (updated.has(id)) continue
-      small.badgeCount = 0
-      small.hasBadge = false
-      small.hasUnread = false
-      small.unreadCount = 0
-    }
-  })
 }
 
-export const updateInboxRowTyping = (updates?: ReadonlyArray<T.RPCChat.ConvTypingUpdate> | null) => {
-  useInboxRowsState.setState(s => {
-    updates?.forEach(update => {
-      const id = T.Chat.conversationIDToKey(update.convID)
-      const typing = new Set(update.typers?.map(typer => typer.username))
-      const small = ensureSmallRow(s.rowsSmall, id)
-      small.typingSnippet = buildTypingSnippet(typing)
-    })
-  })
+export const useInboxRowSmall = (id: string): InboxRowSmall => {
+  const you = useCurrentUserState(s => s.username)
+  const meta = useInboxMetadataState(s => s.metas.get(id))
+  const participantInfo = useInboxMetadataState(s => s.participants.get(id))
+  const layoutRow = useInboxLayoutState(s => getSmallLayoutRow(s, id))
+  const counts = useInboxBadgeState(s => s.counts.get(id))
+  const typing = useInboxTypingState(s => s.typing.get(id))
+  return React.useMemo(
+    () => computeSmallRow(id, you, meta, participantInfo, layoutRow, counts, typing),
+    [id, you, meta, participantInfo, layoutRow, counts, typing]
+  )
 }
 
-export const useInboxRowBig = (id: string): InboxRowBig =>
-  useInboxRowsState(s => s.rowsBig.get(id)) ?? defaultInboxRowBig
-
-export const useInboxRowSmall = (id: string): InboxRowSmall =>
-  useInboxRowsState(s => s.rowsSmall.get(id)) ?? defaultInboxRowSmall
+export const useInboxRowBig = (id: string): InboxRowBig => {
+  const meta = useInboxMetadataState(s => s.metas.get(id))
+  const layoutChannel = useInboxLayoutState(s => getBigLayoutChannelRow(s, id))
+  const counts = useInboxBadgeState(s => s.counts.get(id))
+  return React.useMemo(() => computeBigRow(meta, layoutChannel, counts), [meta, layoutChannel, counts])
+}
diff --git a/shared/chat/inbox/typing-state.test.ts b/shared/chat/inbox/typing-state.test.ts
new file mode 100644
index 000000000000..5f712833e2fc
--- /dev/null
+++ b/shared/chat/inbox/typing-state.test.ts
@@ -0,0 +1,37 @@
+/// <reference types="jest" />
+import * as T from '@/constants/types'
+import {resetAllStores} from '@/util/zustand'
+import {updateInboxTyping, useInboxTypingState} from './typing-state'
+
+const convA = T.Chat.conversationIDToKey(new Uint8Array([1, 2, 3, 4]))
+const convB = T.Chat.conversationIDToKey(new Uint8Array([5, 6, 7, 8]))
+
+afterEach(() => {
+  resetAllStores()
+})
+
+test('updateInboxTyping stores typers per conversation and replaces prior sets', () => {
+  updateInboxTyping([
+    {
+      convID: T.Chat.keyToConversationID(convA),
+      typers: [{deviceID: 'd', uid: 'u', username: 'carol'}],
+    },
+    {
+      convID: T.Chat.keyToConversationID(convB),
+      typers: [
+        {deviceID: 'd', uid: 'u', username: 'bob'},
+        {deviceID: 'd', uid: 'u', username: 'dave'},
+      ],
+    },
+  ] as ReadonlyArray<T.RPCChat.ConvTypingUpdate>)
+
+  expect([...(useInboxTypingState.getState().typing.get(convA) ?? [])]).toEqual(['carol'])
+  expect((useInboxTypingState.getState().typing.get(convB) ?? new Set()).size).toBe(2)
+
+  // an update for convA with no typers replaces its set; convB is left untouched
+  updateInboxTyping([{convID: T.Chat.keyToConversationID(convA), typers: []}] as ReadonlyArray<
+    T.RPCChat.ConvTypingUpdate
+  >)
+  expect((useInboxTypingState.getState().typing.get(convA) ?? new Set()).size).toBe(0)
+  expect((useInboxTypingState.getState().typing.get(convB) ?? new Set()).size).toBe(2)
+})
diff --git a/shared/chat/inbox/typing-state.tsx b/shared/chat/inbox/typing-state.tsx
new file mode 100644
index 000000000000..1d9b2cfb2c2e
--- /dev/null
+++ b/shared/chat/inbox/typing-state.tsx
@@ -0,0 +1,35 @@
+import * as T from '@/constants/types'
+import * as Z from '@/util/zustand'
+
+type State = T.Immutable<{
+  typing: Map<T.Chat.ConversationIDKey, ReadonlySet<string>>
+  dispatch: {
+    resetState: () => void
+  }
+}>
+
+export const useInboxTypingState = Z.createZustand<State>('inboxTyping', () => ({
+  dispatch: {resetState: Z.defaultReset},
+  typing: new Map(),
+}))
+
+// Each ChatTypingUpdate carries the current typers for the named convs, so we
+// replace those convs' sets and leave the rest untouched.
+export const updateInboxTyping = (updates?: ReadonlyArray<T.RPCChat.ConvTypingUpdate> | null) => {
+  if (!updates?.length) {
+    return
+  }
+  useInboxTypingState.setState(s => {
+    updates.forEach(update => {
+      const id = T.Chat.conversationIDToKey(update.convID)
+      const typers = new Set(update.typers?.map(typer => typer.username))
+      // Absent key already means nobody typing; delete rather than store an
+      // empty Set so the map doesn't grow unbounded as conversations go quiet.
+      if (typers.size) {
+        s.typing.set(id, typers)
+      } else {
+        s.typing.delete(id)
+      }
+    })
+  })
+}
diff --git a/shared/chat/inbox/use-inbox-state.tsx b/shared/chat/inbox/use-inbox-state.tsx
index 9837abe49cac..d5a571b60dba 100644
--- a/shared/chat/inbox/use-inbox-state.tsx
+++ b/shared/chat/inbox/use-inbox-state.tsx
@@ -1,28 +1,26 @@
 import * as C from '@/constants'
 import * as Chat from '@/constants/chat'
 import * as React from 'react'
+import {produce} from 'immer'
 import * as T from '@/constants/types'
 import {useConfigState} from '@/stores/config'
 import {useCurrentUserState} from '@/stores/current-user'
-import {useInboxRowsState} from '@/chat/inbox/rows-state'
+import {useInboxBadgeState} from '@/chat/inbox/badge-state'
 import {useIsFocused} from '@react-navigation/core'
 import type {ChatInboxRowItem} from './rowitem'
 import {useInboxLayout, useInboxRetryState} from './layout-state'
 import {buildInboxRows} from './rows'
 import {queueMetaToRequest} from './metadata'
 
-const useInboxBadges = (
-  inboxRows: ReadonlyArray<ChatInboxRowItem>,
-  selectedConversationIDKey: string
-) => {
+const useInboxBadges = (inboxRows: ReadonlyArray<ChatInboxRowItem>, selectedConversationIDKey: string) => {
   const bigConvIds = React.useMemo(() => {
     return inboxRows.map(r => (r.type === 'big' ? r.conversationIDKey : ''))
   }, [inboxRows])
 
-  const unreadBadges = useInboxRowsState(
+  const unreadBadges = useInboxBadgeState(
     C.useShallow(s =>
       bigConvIds.map(conversationIDKey =>
-        conversationIDKey ? (s.rowsBig.get(conversationIDKey)?.badgeCount ?? 0) : 0
+        conversationIDKey ? (s.counts.get(conversationIDKey)?.badgeCount ?? 0) : 0
       )
     )
   )
@@ -69,32 +67,27 @@ export function useInboxState(
   const loadInboxNumSmallRows = C.useRPC(T.RPCGen.configGuiGetValueRpcPromise)
 
   const {hasLoaded: inboxHasLoaded, layout: inboxLayout, refresh: inboxRefresh} = useInboxLayout()
-  const {retriedOnCurrentEmpty: inboxRetriedOnCurrentEmpty, setRetriedOnCurrentEmpty} =
-    useInboxRetryState()
+  const {retriedOnCurrentEmpty: inboxRetriedOnCurrentEmpty, setRetriedOnCurrentEmpty} = useInboxRetryState()
   const [inboxControls, setInboxControls] = React.useState(() => ({
     inboxNumSmallRows: 5,
     inboxNumSmallRowsLoaded: false,
     inboxNumSmallRowsUserChanged: false,
     smallTeamsExpanded: false,
-    username,
   }))
-  const controlsMatchUser = inboxControls.username === username
-  const inboxNumSmallRows = controlsMatchUser ? inboxControls.inboxNumSmallRows : 5
-  const inboxNumSmallRowsLoaded = controlsMatchUser ? inboxControls.inboxNumSmallRowsLoaded : false
-  const smallTeamsExpanded = controlsMatchUser ? inboxControls.smallTeamsExpanded : false
+  const {inboxNumSmallRows, inboxNumSmallRowsLoaded, smallTeamsExpanded} = inboxControls
   const inboxNumSmallRowsLoadVersionRef = React.useRef(0)
 
   const setInboxNumSmallRows = React.useCallback((rows: number, persist = true) => {
     if (rows <= 0) {
       return
     }
-    setInboxControls(state => ({
-      inboxNumSmallRows: rows,
-      inboxNumSmallRowsLoaded: true,
-      inboxNumSmallRowsUserChanged: true,
-      smallTeamsExpanded: state.username === username ? state.smallTeamsExpanded : false,
-      username,
-    }))
+    setInboxControls(
+      produce(draft => {
+        draft.inboxNumSmallRows = rows
+        draft.inboxNumSmallRowsLoaded = true
+        draft.inboxNumSmallRowsUserChanged = true
+      })
+    )
     if (!persist) {
       return
     }
@@ -107,17 +100,14 @@ export function useInboxState(
       } catch {}
     }
     C.ignorePromise(f())
-  }, [username])
+  }, [])
   const toggleSmallTeamsExpanded = React.useCallback(() => {
-    setInboxControls(state => ({
-      inboxNumSmallRows: state.username === username ? state.inboxNumSmallRows : 5,
-      inboxNumSmallRowsLoaded: state.username === username ? state.inboxNumSmallRowsLoaded : false,
-      inboxNumSmallRowsUserChanged:
-        state.username === username ? state.inboxNumSmallRowsUserChanged : false,
-      smallTeamsExpanded: !(state.username === username ? state.smallTeamsExpanded : false),
-      username,
-    }))
-  }, [username])
+    setInboxControls(
+      produce(draft => {
+        draft.smallTeamsExpanded = !draft.smallTeamsExpanded
+      })
+    )
+  }, [])
 
   const {
     allowShowFloatingButton,
@@ -180,32 +170,27 @@ export function useInboxState(
           return
         }
         const count = rows.i ?? -1
-        setInboxControls(state => {
-          if (state.username === username && state.inboxNumSmallRowsUserChanged) {
-            return state
-          }
-          return {
-            inboxNumSmallRows:
-              count > 0 ? count : state.username === username ? state.inboxNumSmallRows : 5,
-            inboxNumSmallRowsLoaded: true,
-            inboxNumSmallRowsUserChanged: false,
-            smallTeamsExpanded: state.username === username ? state.smallTeamsExpanded : false,
-            username,
-          }
-        })
+        setInboxControls(
+          produce(draft => {
+            if (draft.inboxNumSmallRowsUserChanged) {
+              return
+            }
+            if (count > 0) {
+              draft.inboxNumSmallRows = count
+            }
+            draft.inboxNumSmallRowsLoaded = true
+          })
+        )
       },
       () => {
         if (inboxNumSmallRowsLoadVersionRef.current !== loadVersion) {
           return
         }
-        setInboxControls(state => ({
-          inboxNumSmallRows: state.username === username ? state.inboxNumSmallRows : 5,
-          inboxNumSmallRowsLoaded: true,
-          inboxNumSmallRowsUserChanged:
-            state.username === username ? state.inboxNumSmallRowsUserChanged : false,
-          smallTeamsExpanded: state.username === username ? state.smallTeamsExpanded : false,
-          username,
-        }))
+        setInboxControls(
+          produce(draft => {
+            draft.inboxNumSmallRowsLoaded = true
+          })
+        )
       }
     )
     return () => {
diff --git a/shared/chat/new-team-dialog-container.tsx b/shared/chat/new-team-dialog-container.tsx
index 3af5b9538cc5..82b630f5503a 100644
--- a/shared/chat/new-team-dialog-container.tsx
+++ b/shared/chat/new-team-dialog-container.tsx
@@ -1,4 +1,3 @@
-import * as C from '@/constants'
 import {CreateNewTeam} from '../teams/new-team'
 import {useCurrentUserState} from '@/stores/current-user'
 import {createNewTeamAndNavigate} from '@/teams/team-page-actions'
@@ -9,10 +8,6 @@ type Props = {conversationIDKey?: T.Chat.ConversationIDKey}
 
 const NewTeamDialog = (props: Props) => {
   const conversationIDKey = props.conversationIDKey ?? T.Chat.noConversationIDKey
-  const navigateUp = C.Router2.navigateUp
-  const onCancel = () => {
-    navigateUp()
-  }
   const participantInfo = useConversationParticipants(conversationIDKey)
   const username = useCurrentUserState(s => s.username)
   const onSubmit = (teamname: string) => {
@@ -21,7 +16,7 @@ const NewTeamDialog = (props: Props) => {
       .map(assertion => ({assertion, role: 'writer' as const}))
     void createNewTeamAndNavigate(teamname, false, {fromChat: true, usersToAdd})
   }
-  return <CreateNewTeam baseTeam="" onCancel={onCancel} onSubmit={onSubmit} />
+  return <CreateNewTeam baseTeam="" onSubmit={onSubmit} />
 }
 
 export default NewTeamDialog
diff --git a/shared/chat/readme.md b/shared/chat/readme.md
index 21640bbe9398..c77311b5c35e 100644
--- a/shared/chat/readme.md
+++ b/shared/chat/readme.md
@@ -1,19 +1,37 @@
 How chat works:
 
-## Inbox:
+## Data ownership
 
-Conversations are of 2 basic types. - Small: adhoc conversations or teams with only the #general channel - Big: teams with multiple channels
+Chat data is split across several focused stores instead of one global redux tree. Roughly:
+
+- **Inbox metadata** (`chat/inbox/metadata.tsx`, `useInboxMetadataState`) is the single owner of conversation `meta` (trustedState, snippet, participants pointer, draft, timestamp, etc.) and `participants`. All meta writes go through `metasReceived`, which version-gates each incoming meta against the currently stored one (`Meta.updateMeta`) so a stale/out-of-order update can't clobber newer data. Callers that already merged from the current meta (e.g. `updateInboxConversationMeta`, error metas, incremental inbox sync) pass `{force: true}` to bypass gating. Converters live in `constants/chat/meta.tsx` (`baseMetaFromUIItem` is the shared base used by the various `*ToConversationMeta` functions).
+- **Per-conversation thread store** (`chat/conversation/thread-context.tsx`) is a vanilla zustand store created fresh per mounted `ConversationThreadProvider` and destroyed when the provider unmounts. It holds `messageMap`/`messageOrdinals`/`messageIDToOrdinal`/`messageTypeMap`/`pendingOutboxToOrdinal`, live `typing` (a `Set<string>`), exploding mode, and payment/request/flip/unfurl maps. It reads conversation meta from the inbox metadata store rather than owning its own copy (`useThreadMeta`, `getMeta`). The module is split: `thread-engine.tsx` holds engine-notification handlers (`applyMessagesUpdatedToThread`, `applyIncomingMutationToThread`, etc.) and `thread-load.tsx` holds thread-load logic (RPC calls, exploding-mode-from-gregor, pagination sizing).
+- **Inbox rows are computed, not cached.** `chat/inbox/rows-state.tsx` exposes `useInboxRowSmall`/`useInboxRowBig`, which `useMemo` a display row from: inbox metadata (meta + participants), `chat/inbox/layout-state.tsx` (a memoized index built from the service's `UIInboxLayout`, used as a fallback for rows whose meta isn't trusted yet), `chat/inbox/badge-state.tsx` (badge/unread counts, fully replaced from each `BadgeState` RPC payload), and `chat/inbox/typing-state.tsx` (per-conversation typing username sets, merged in from `ChatTypingUpdate`). Merge precedence is one rule: meta wins whenever it's `trusted` or `error`; otherwise the layout row fills the gaps (snippet, draft, time, mute, name-split participants).
+- **Message conversion** lives in `constants/chat/message.tsx` (`uiMessageToMessage` converts a single RPC `UIMessage` to the internal `Message` type; `parseUIMessagesJSON` does the same for a JSON-stringified array, used for bulk thread-load ingestion).
+- **Orange line** (the "new messages" divider) is a small standalone store, `chat/conversation/orange-line-context.tsx` (`useExplicitOrangeLineState`), keyed by conversationIDKey -> `{ordinal, version}`.
+
+## How data flows in
+
+Engine notifications land in `shared/constants/init/shared.tsx`'s `_onEngineIncoming`, which calls `handleConvoEngineIncoming` (`chat/inbox/engine.tsx`) directly for chat-relevant action types. That function is the inbox-side router: it turns RPC notifications (`ChatConvUpdate`, `NewChatActivity`, `ChatTypingUpdate`, `ChatParticipantsInfo`, `ChatThreadsStale`, etc.) into calls against the metadata store (`metasReceived`, `metaReceivedError`, `updateInboxConversationMeta`), the typing store (`updateInboxTyping`), or an unbox request (`unboxRows`/`forceUnboxRowsForService`). Thread-specific engine events (message updates/mutations, reactions, attachments) are instead handled by `thread-engine.tsx`'s listeners, wired up per-conversation inside `thread-context.tsx` (`useThreadEngineListeners`) so they only run while that conversation's provider is mounted. Thread loads (initial, scrollback, centered, jump-to-recent) go through `loadMoreMessages` -> `loadConversationThreadMessages` in `thread-load.tsx`, which issues the RPC and calls back into the thread store's `applyThreadLoad`.
+
+## Lifecycle
+
+The thread store and its sibling `ShownUsernameCacheContext` are created in `ConversationThreadProviderInner` and torn down by unmounting; the screen mounts a fresh provider (via a React `key` on the conversationIDKey) when you switch conversations, so there's no manual "clear old thread" step — the old store and its listeners just go away. `ConversationThreadProvider` special-cases the case where the requested id matches the currently-provided one, reusing the existing store/actions instead of remounting (e.g. nested same-thread wrappers). On logout, `Z.resetAllStores()` (`util/zustand.tsx`) resets every store created via `Z.createZustand` — inbox metadata, badge, typing, layout, orange-line, etc. — back to its initial state; it's invoked from `stores/config.tsx` when `loggedIn` flips to false.
 
-We get a list of untrusted conversations from the server. Untrusted (unboxed) means we don't have any snippets and can't verify the participants / channel name. If we've previously loaded them the daemon can give us a trusted payload with the untrusted payload
-We request untrusted conversations to be unboxed (converted to trusted). This is driven by the inbox scrolling rows into view.
-The primary ID of a conversation is a ConversationIDKey. Our data structures are mostly maps driven off of this key
+## Intentional dualities
+
+A few pieces of state are deliberately duplicated rather than unified, because they represent different things:
+
+- **Typing**: the thread store's `typing` is a live `Set<string>` of who's typing right now in the open conversation; the inbox's `typingSnippet` (computed in `rows-state.tsx`) is a display string ("X is typing...") for inbox rows, sourced from the separate `typing-state.tsx` map so an unopened conversation's row can still show it.
+- **Draft**: the composer's unsent text (`unsentText` in `chat/conversation/input-area/input-state.tsx`) is local, per-conversation UI state scoped to the input's own React context/reducer, cleared by unmount. `meta.draft` (in the inbox metadata store) is the last draft synced to the service, used to render the draft snippet on inbox rows for conversations you aren't currently looking at. They're independent by design — the input doesn't read from or write to `meta.draft` on every keystroke.
+
+## Inbox
+
+Conversations are of 2 basic types. - Small: adhoc conversations or teams with only the #general channel - Big: teams with multiple channels
 
-badgeMap: id to the badge number
-messageMap: id to message id to message
-messageOrdinals: id to list of ordinals
-metaMap: id to metadata
-unreadMap: id to unread count
-etc
+We get a list of untrusted conversations from the server. Untrusted (unboxed) means we don't have any snippets and can't verify the participants / channel name. If we've previously loaded them the daemon can give us a trusted payload with the untrusted payload.
+We request untrusted conversations to be unboxed (converted to trusted). This is driven by the inbox scrolling rows into view, via a queue (`queueMetaToRequest`) that unboxes in small batches rather than all at once.
+The primary ID of a conversation is a ConversationIDKey. Data structures are mostly maps driven off of this key, split by store as described above (meta/participants, thread messages, badges, layout, typing).
 
 The inbox operates in 2 modes: 'normal' and 'filtered'.
 Filtered is driven by a filter string. Each item calculates a score and is sorted by this score (exact match > prefix match > substring match). We show small items, then big items. No dividers or hierarchy of channel/team.
@@ -24,7 +42,7 @@ The normal mode is split into 2 sections.
 
 If you have a mix of small/big teams we can show a divider between them and truncate the small list.
 
-The inbox is entirely derived from the metaMap
+Row display data is derived at render time from inbox metadata plus the layout/badge/typing stores (see above), not read out of a single cached map.
 
 Edge cases:
 
@@ -45,4 +63,4 @@ We keep the original ordinal if we can so the ordering of the thread from our pe
 
 ## Pending
 
-When we build a search for users we want to preview the conversation. We have a special conversationIDKey for this Constants.pendingConversationIDKey. This always exists in the metaMap. The users go into the participants property. Usually the convesationIDKey inside the meta is the same as the key in the metaMap but in this special instance the key of the preview conversation goes in there depending on the participants
+When we build a search for users we want to preview the conversation. We have a special conversationIDKey for this Constants.pendingConversationIDKey. This always exists in the inbox metadata store. The users go into the participants property. Usually the convesationIDKey inside the meta is the same as the key in the metadata store but in this special instance the key of the preview conversation goes in there depending on the participants
diff --git a/shared/chat/send-to-chat/index.tsx b/shared/chat/send-to-chat/index.tsx
index 427fb5d19d1d..46628bcc2384 100644
--- a/shared/chat/send-to-chat/index.tsx
+++ b/shared/chat/send-to-chat/index.tsx
@@ -133,10 +133,12 @@ export const DesktopSendToChatRender = (props: DesktopSendToChatRenderProps) =>
           onChangeText={props.setTitle}
         />
       </Kb.Box2>
-      <Kb.ButtonBar fullWidth={true} style={desktopStyles.buttonBar}>
-        <Kb.Button type="Dim" label="Cancel" onClick={props.onCancel} />
-        <Kb.Button label="Send in conversation" onClick={props.onSend} disabled={!props.enabled} />
-      </Kb.ButtonBar>
+      <Kb.ConfirmButtons
+        onCancel={props.onCancel}
+        onConfirm={props.onSend}
+        confirmLabel="Send in conversation"
+        confirmDisabled={!props.enabled}
+      />
     </Kb.Box2>
   )
 }
@@ -153,7 +155,6 @@ const desktopStyles = Kb.Styles.styleSheetCreate(
         marginBottom: Kb.Styles.globalMargins.small,
         ...Kb.Styles.paddingH(Kb.Styles.globalMargins.large),
       },
-      buttonBar: {alignItems: 'center'},
       container: Kb.Styles.platformStyles({
         isElectron: {
           maxHeight: 560,
diff --git a/shared/chat/user-emoji.tsx b/shared/chat/user-emoji.tsx
index f6f2b0ea2a81..d3410c7f47e3 100644
--- a/shared/chat/user-emoji.tsx
+++ b/shared/chat/user-emoji.tsx
@@ -1,6 +1,5 @@
-import * as C from '@/constants'
 import * as T from '@/constants/types'
-import * as React from 'react'
+import {useRPCLoad} from '@/util/use-rpc-load'
 
 const emptyEmojiGroups: ReadonlyArray<T.RPCChat.EmojiGroup> = []
 const emptyEmojis: ReadonlyArray<T.RPCChat.Emoji> = []
@@ -13,12 +12,6 @@ const flattenUserEmojis = (groups: ReadonlyArray<T.RPCChat.EmojiGroup>) => {
   return emojis
 }
 
-type UserEmojiLoadState = {
-  completedKey: string
-  emojiGroups: ReadonlyArray<T.RPCChat.EmojiGroup>
-  emojis: ReadonlyArray<T.RPCChat.Emoji>
-}
-
 export const useUserEmoji = ({
   conversationIDKey,
   disabled,
@@ -28,75 +21,37 @@ export const useUserEmoji = ({
   disabled?: boolean
   onlyInTeam?: boolean
 }) => {
-  const loadUserEmoji = C.useRPC(T.RPCChat.localUserEmojisRpcPromise)
   const requestOnlyInTeam = onlyInTeam ?? false
   const requestKey = `${conversationIDKey ?? T.Chat.noConversationIDKey}:${
     requestOnlyInTeam ? 'team' : 'all'
   }`
-  const [loadState, setLoadState] = React.useState<UserEmojiLoadState>(() => ({
-    completedKey: '',
-    emojiGroups: emptyEmojiGroups,
-    emojis: emptyEmojis,
-  }))
-  const requestIDRef = React.useRef(0)
-
-  React.useEffect(() => {
-    if (disabled) {
-      requestIDRef.current += 1
-      return
-    }
-
-    const requestID = requestIDRef.current + 1
-    requestIDRef.current = requestID
-
-    loadUserEmoji(
-      [
-        {
-          convID:
-            conversationIDKey && conversationIDKey !== T.Chat.noConversationIDKey
-              ? T.Chat.keyToConversationID(conversationIDKey)
-              : null,
-          opts: {
-            getAliases: true,
-            getCreationInfo: false,
-            onlyInTeam: requestOnlyInTeam,
-          },
+  const {data, loading} = useRPCLoad(
+    T.RPCChat.localUserEmojisRpcPromise,
+    [
+      {
+        convID:
+          conversationIDKey && conversationIDKey !== T.Chat.noConversationIDKey
+            ? T.Chat.keyToConversationID(conversationIDKey)
+            : null,
+        opts: {
+          getAliases: true,
+          getCreationInfo: false,
+          onlyInTeam: requestOnlyInTeam,
         },
-      ],
-      results => {
-        if (requestIDRef.current !== requestID) {
-          return
-        }
+      },
+    ],
+    {
+      enabled: !disabled,
+      key: requestKey,
+      map: results => {
         const nextGroups = results.emojis.emojis ?? emptyEmojiGroups
-        setLoadState({
-          completedKey: requestKey,
-          emojiGroups: nextGroups,
-          emojis: flattenUserEmojis(nextGroups),
-        })
+        return {emojiGroups: nextGroups, emojis: flattenUserEmojis(nextGroups)}
       },
-      () => {
-        if (requestIDRef.current !== requestID) {
-          return
-        }
-        setLoadState({
-          completedKey: requestKey,
-          emojiGroups: emptyEmojiGroups,
-          emojis: emptyEmojis,
-        })
-      }
-    )
-
-    return () => {
-      if (requestIDRef.current === requestID) {
-        requestIDRef.current += 1
-      }
     }
-  }, [conversationIDKey, disabled, loadUserEmoji, requestKey, requestOnlyInTeam])
-
-  const isCurrent = loadState.completedKey === requestKey
+  )
   return {
-    emojiGroups: disabled ? undefined : isCurrent ? loadState.emojiGroups : emptyEmojiGroups,
-    emojis: isCurrent ? loadState.emojis : emptyEmojis,
-    loading: !disabled && loadState.completedKey !== requestKey,
+    emojiGroups: disabled ? undefined : (data?.emojiGroups ?? emptyEmojiGroups),
+    emojis: data?.emojis ?? emptyEmojis,
+    loading,
   }
 }
diff --git a/shared/common-adapters/avatar/icon-to-img-set.tsx b/shared/common-adapters/avatar/icon-to-img-set.tsx
deleted file mode 100644
index 5b073592b022..000000000000
--- a/shared/common-adapters/avatar/icon-to-img-set.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import {iconMeta} from '../icon.constants-gen'
-import type {IconType} from '../icon.constants-gen'
-import type {getAssetPath as getAssetPathType} from '@/constants/platform'
-
-type MultMap = {
-  [1]?: number
-  [2]?: number
-  [3]?: number
-}
-
-const multiKeys = [1, 2, 3] as const
-
-const idealSizeMultMap: {[key: string]: MultMap} = {
-  '128': {'1': 256, '2': 256, '3': 960},
-  '16': {'1': 192, '2': 192, '3': 192},
-  '32': {'1': 192, '2': 192, '3': 192},
-  '48': {'1': 192, '2': 192, '3': 192},
-  '64': {'1': 192, '2': 256, '3': 192},
-  '96': {'1': 192, '2': 192, '3': 960},
-}
-
-const _getMultsMapCache: {[key: string]: MultMap} = {}
-function getMultsMap(imgMap: {[size: string]: unknown}, targetSize: number): MultMap {
-  const ssizes = Object.keys(imgMap)
-  if (!ssizes.length) return {}
-
-  const sizeKey = `${targetSize}]${ssizes.join(':')}`
-  if (_getMultsMapCache[sizeKey]) return _getMultsMapCache[sizeKey]
-
-  const sizes = ssizes.map(s => parseInt(s, 10)).sort((a: number, b: number) => a - b)
-  const multsMap: MultMap = {1: undefined, 2: undefined, 3: undefined}
-
-  for (const mult of multiKeys) {
-    const level1 = idealSizeMultMap[String(targetSize)]
-    if (level1) {
-      const level2 = level1[mult]
-      if (level2) {
-        multsMap[mult] = level2
-        continue
-      }
-    }
-    const ideal = mult * targetSize
-    const size = sizes.find(size => size >= ideal)
-    multsMap[mult] = size || sizes.at(-1)
-  }
-
-  _getMultsMapCache[sizeKey] = multsMap
-  return multsMap
-}
-
-function iconTypeToImgSetDesktop(imgMap: {[key: string]: IconType}, targetSize: number) {
-  const {getAssetPath} = require('@/constants/platform') as {getAssetPath: typeof getAssetPathType}
-  const multsMap = getMultsMap(imgMap, targetSize)
-  const keys = Object.keys(multsMap) as unknown as Array<keyof typeof multsMap>
-  const sets = keys
-    .map(mult => {
-      const m = multsMap[mult]
-      if (!m) return null
-      const img: string = imgMap[m] as string
-      if (!img) return null
-      const url = getAssetPath('images', 'icons', img)
-      return `url('${url}.png') ${mult}x`
-    })
-    .filter(Boolean)
-    .join(', ')
-  return sets ? `-webkit-image-set(${sets})` : ''
-}
-
-function iconTypeToImgSetNative(imgMap: {[key: string]: IconType}, targetSize: number) {
-  const multsMap = getMultsMap(imgMap, targetSize)
-  const idealMults = [2, 3, 1] as const
-  for (const mult of idealMults) {
-    if (multsMap[mult]) {
-      const size = multsMap[mult]
-      if (!size) return null
-      const icon = imgMap[size]
-      if (!icon) return null
-      return iconMeta[icon].require
-    }
-  }
-  return null
-}
-
-export const iconTypeToImgSet: (imgMap: {[key: string]: IconType}, targetSize: number) => string = (
-  isMobile ? iconTypeToImgSetNative : iconTypeToImgSetDesktop
-) as any
diff --git a/shared/common-adapters/avatar/index.tsx b/shared/common-adapters/avatar/index.tsx
index 9598daa4a608..4b1c72b4c3e4 100644
--- a/shared/common-adapters/avatar/index.tsx
+++ b/shared/common-adapters/avatar/index.tsx
@@ -5,9 +5,10 @@ import {useConfigState} from '@/stores/config'
 import * as AvatarZus from './store'
 import {Pressable, View, useColorScheme} from 'react-native'
 import {navToProfile} from '@/constants/router'
+import {normalizeFilePathURL} from '@/util/file-url'
 import {Image} from 'expo-image'
-import {iconTypeToImgSet} from './icon-to-img-set'
-import type {IconType} from '../icon.constants-gen'
+import {iconMeta, type IconType} from '../icon.constants-gen'
+import type {getAssetPath as getAssetPathType} from '@/constants/platform'
 import type * as React from 'react'
 import type * as T from '@/constants/types'
 
@@ -17,6 +18,7 @@ type Props = {
   imageOverrideUrl?: string
   isTeam?: boolean
   onClick?: ((e?: React.BaseSyntheticEvent) => void) | 'profile'
+  testID?: string
   size: 128 | 96 | 64 | 48 | 32 | 24 | 16
   style?: Styles.CustomStyles<'borderStyle'>
   teamname?: string
@@ -34,6 +36,91 @@ const teamPlaceHolders: {[key: string]: IconType} = {
   '960': 'icon-team-placeholder-avatar-960',
 }
 
+// ── Placeholder img-set resolution ───────────────────────────────────────────
+
+type MultMap = {
+  [1]?: number
+  [2]?: number
+  [3]?: number
+}
+
+const multiKeys = [1, 2, 3] as const
+
+const idealSizeMultMap: {[key: string]: MultMap} = {
+  '128': {'1': 256, '2': 256, '3': 960},
+  '16': {'1': 192, '2': 192, '3': 192},
+  '32': {'1': 192, '2': 192, '3': 192},
+  '48': {'1': 192, '2': 192, '3': 192},
+  '64': {'1': 192, '2': 256, '3': 192},
+  '96': {'1': 192, '2': 192, '3': 960},
+}
+
+const _getMultsMapCache: {[key: string]: MultMap} = {}
+function getMultsMap(imgMap: {[size: string]: unknown}, targetSize: number): MultMap {
+  const ssizes = Object.keys(imgMap)
+  if (!ssizes.length) return {}
+
+  const sizeKey = `${targetSize}]${ssizes.join(':')}`
+  if (_getMultsMapCache[sizeKey]) return _getMultsMapCache[sizeKey]
+
+  const sizes = ssizes.map(s => parseInt(s, 10)).sort((a: number, b: number) => a - b)
+  const multsMap: MultMap = {1: undefined, 2: undefined, 3: undefined}
+
+  for (const mult of multiKeys) {
+    const level1 = idealSizeMultMap[String(targetSize)]
+    if (level1) {
+      const level2 = level1[mult]
+      if (level2) {
+        multsMap[mult] = level2
+        continue
+      }
+    }
+    const ideal = mult * targetSize
+    const size = sizes.find(size => size >= ideal)
+    multsMap[mult] = size || sizes.at(-1)
+  }
+
+  _getMultsMapCache[sizeKey] = multsMap
+  return multsMap
+}
+
+function iconTypeToImgSetDesktop(imgMap: {[key: string]: IconType}, targetSize: number) {
+  const {getAssetPath} = require('@/constants/platform') as {getAssetPath: typeof getAssetPathType}
+  const multsMap = getMultsMap(imgMap, targetSize)
+  const keys = Object.keys(multsMap) as unknown as Array<keyof typeof multsMap>
+  const sets = keys
+    .map(mult => {
+      const m = multsMap[mult]
+      if (!m) return null
+      const img: string = imgMap[m] as string
+      if (!img) return null
+      const url = getAssetPath('images', 'icons', img)
+      return `url('${url}.png') ${mult}x`
+    })
+    .filter(Boolean)
+    .join(', ')
+  return sets ? `-webkit-image-set(${sets})` : ''
+}
+
+function iconTypeToImgSetNative(imgMap: {[key: string]: IconType}, targetSize: number) {
+  const multsMap = getMultsMap(imgMap, targetSize)
+  const idealMults = [2, 3, 1] as const
+  for (const mult of idealMults) {
+    if (multsMap[mult]) {
+      const size = multsMap[mult]
+      if (!size) return null
+      const icon = imgMap[size]
+      if (!icon) return null
+      return iconMeta[icon].require
+    }
+  }
+  return null
+}
+
+const iconTypeToImgSet: (imgMap: {[key: string]: IconType}, targetSize: number) => string = (
+  isMobile ? iconTypeToImgSetNative : iconTypeToImgSetDesktop
+) as any
+
 // ── Native-only ──────────────────────────────────────────────────────────────
 
 const sizeToTeamBorderRadius: Record<number, number> = {
@@ -62,19 +149,6 @@ const AVATAR_CONTAINER_SIZE = 175
 const AVATAR_BORDER_SIZE = 4
 const AVATAR_SIZE = AVATAR_CONTAINER_SIZE - AVATAR_BORDER_SIZE * 2
 
-const normalizeImageOverrideUrl = (url: string) => {
-  const isWindowsPath = /^[a-zA-Z]:[\\/]/.test(url)
-  if (url.startsWith('/') || isWindowsPath) {
-    let path = url.replace(/\\/g, '/')
-    if (isWindowsPath && !path.startsWith('/')) path = '/' + path
-    return encodeURI(`file://${path}`).replace(/#/g, '%23')
-  }
-  if (url.startsWith('file://') && (url.includes(' ') || url.includes('#'))) {
-    return encodeURI(url).replace(/#/g, '%23')
-  }
-  return url
-}
-
 const clickableStyle = {cursor: 'pointer'} as const
 const borderTeamStyle = {
   boxShadow: `0px 0px 0px 1px ${Styles.globalColors.black_10} inset`,
@@ -83,7 +157,7 @@ const borderTeamStyle = {
 // ── Component ────────────────────────────────────────────────────────────────
 
 function Avatar(p: Props) {
-  const {size, teamname, username, isTeam: _isTeam, onClick: _onClick, style, children} = p
+  const {size, teamname, username, isTeam: _isTeam, onClick: _onClick, style, children, testID} = p
   const {imageOverrideUrl, crop} = p
   const isTeam = _isTeam || !!teamname
   const name = isTeam ? teamname : username
@@ -101,7 +175,7 @@ function Avatar(p: Props) {
 
     let bgImage: string | undefined
     if (imageOverrideUrl) {
-      bgImage = `url("${normalizeImageOverrideUrl(imageOverrideUrl)}")`
+      bgImage = `url("${normalizeFilePathURL(imageOverrideUrl)}")`
     } else if (address && name) {
       const typ = isTeam ? 'team' : 'user'
       const imgSize = size <= 64 ? 192 : size <= 96 ? 256 : 960
@@ -117,6 +191,7 @@ function Avatar(p: Props) {
     return (
       <div
         className={Styles.classNames('avatar', avatarSizeClassName)}
+        data-testid={testID}
         onClick={onClick}
         style={Styles.collapseStyles([onClick && clickableStyle, style]) as React.CSSProperties}
       >
@@ -189,10 +264,10 @@ function Avatar(p: Props) {
   )
 
   if (onClick) {
-    return <Pressable onPress={onClick} style={containerStyle}>{content}</Pressable>
+    return <Pressable onPress={onClick} style={containerStyle} testID={testID}>{content}</Pressable>
   }
 
-  return <View style={containerStyle}>{content}</View>
+  return <View style={containerStyle} testID={testID}>{content}</View>
 }
 
 export default Avatar
diff --git a/shared/common-adapters/badge.tsx b/shared/common-adapters/badge.tsx
index 1d25223565de..3c34966f9314 100644
--- a/shared/common-adapters/badge.tsx
+++ b/shared/common-adapters/badge.tsx
@@ -25,87 +25,61 @@ function Badge(p: Badge2Props) {
   const height = p.height ?? (isMobile ? 20 : 16)
   const leftRightPadding = p.leftRightPadding ?? (Styles.isPhone ? 5 : 4)
 
-  if (border) {
-    const outerSize = height
-    const innerSize = height - 3
-    return (
-      <Kb.Box2
-        direction="vertical"
-        pointerEvents="none"
-        centerChildren={true}
-        style={Styles.collapseStyles([
-          styles.container,
-          {
-            borderRadius: outerSize,
-            height: outerSize,
-            minWidth: outerSize,
-          },
-          containerStyle,
-        ])}
-      >
-        <Kb.Box2
-          direction="vertical"
-          className={className}
+  // with a border the badge shrinks inside a white ring box of the full height
+  const innerSize = border ? height - 3 : height
+  const badge = (
+    <Kb.Box2
+      direction="vertical"
+      className={className}
+      pointerEvents={border ? undefined : 'none'}
+      style={Styles.collapseStyles([
+        styles.badge,
+        {
+          ...Styles.paddingH(leftRightPadding),
+          borderRadius: innerSize,
+          height: innerSize,
+          minWidth: innerSize,
+        },
+        badgeStyle,
+      ])}
+    >
+      {!!badgeNumber && (
+        <Kb.Text
+          center={true}
+          type="BodyTinyBold"
           style={Styles.collapseStyles([
-            styles.badge,
-            {
-              ...Styles.paddingH(leftRightPadding),
-              borderRadius: innerSize,
-              height: innerSize,
-              minWidth: innerSize,
-            },
-            badgeStyle,
+            styles.text,
+            {fontSize, height, lineHeight: border || isMobile ? height : `${height}px`} as const,
+            badgeNumberStyle,
           ])}
         >
-          {!!badgeNumber && (
-            <Kb.Text
-              center={true}
-              type="BodyTinyBold"
-              style={Styles.collapseStyles([
-                styles.text,
-                {fontSize, height, lineHeight: height} as const,
-                badgeNumberStyle,
-              ])}
-            >
-              {badgeNumber}
-            </Kb.Text>
-          )}
-        </Kb.Box2>
-      </Kb.Box2>
-    )
-  } else {
-    return (
-      <Kb.Box2
-        direction="vertical"
-        className={className}
-        pointerEvents="none"
-        style={Styles.collapseStyles([
-          styles.badge,
-          {
-            ...Styles.paddingH(leftRightPadding),
-            borderRadius: height,
-            height: height,
-            minWidth: height,
-          },
-          badgeStyle,
-        ])}
-      >
-        {!!badgeNumber && (
-          <Kb.Text
-            center={true}
-            type="BodyTinyBold"
-            style={Styles.collapseStyles([
-              styles.text,
-              {fontSize, height, lineHeight: isMobile ? height : `${height}px`} as const,
-              badgeNumberStyle,
-            ])}
-          >
-            {badgeNumber}
-          </Kb.Text>
-        )}
-      </Kb.Box2>
-    )
+          {badgeNumber}
+        </Kb.Text>
+      )}
+    </Kb.Box2>
+  )
+
+  if (!border) {
+    return badge
   }
+  return (
+    <Kb.Box2
+      direction="vertical"
+      pointerEvents="none"
+      centerChildren={true}
+      style={Styles.collapseStyles([
+        styles.container,
+        {
+          borderRadius: height,
+          height,
+          minWidth: height,
+        },
+        containerStyle,
+      ])}
+    >
+      {badge}
+    </Kb.Box2>
+  )
 }
 export default Badge
 
diff --git a/shared/common-adapters/banner.tsx b/shared/common-adapters/banner.tsx
index 1f4238b8cfea..6658a6d3d029 100644
--- a/shared/common-adapters/banner.tsx
+++ b/shared/common-adapters/banner.tsx
@@ -60,6 +60,20 @@ export const BannerParagraph = (props: BannerParagraphProps) => (
   </Text>
 )
 
+// red banner for local error state; renders nothing when there is no error
+export const ErrorBanner = (props: {error?: string | Error | null; onClose?: () => void}) => {
+  const {error, onClose} = props
+  const message = typeof error === 'string' ? error : error?.message
+  if (!message) {
+    return null
+  }
+  return (
+    <Banner color="red" onClose={onClose}>
+      {message}
+    </Banner>
+  )
+}
+
 type BannerProps = {
   color: Color
   children:
@@ -91,12 +105,12 @@ export const Banner = (props: BannerProps) => (
       direction="vertical"
       style={Styles.collapseStyles([
         props.narrow
-          ? styles.narrowTextContainer
+          ? styles.textContainer
           : props.inline
-          ? styles.inlineTextContainer
-          : props.small
-          ? styles.smallTextContainer
-          : styles.textContainer,
+            ? styles.inlineTextContainer
+            : props.small
+              ? styles.smallTextContainer
+              : styles.textContainer,
         props.textContainerStyle,
       ])}
       centerChildren={true}
@@ -152,19 +166,6 @@ const styles = Styles.styleSheetCreate(
       inlineTextContainer: {
         ...Styles.padding(Styles.globalMargins.tiny, Styles.globalMargins.small),
       },
-      narrowTextContainer: Styles.platformStyles({
-        common: {
-          flex: 1,
-          maxWidth: '100%',
-          ...Styles.paddingV(Styles.globalMargins.tiny),
-        },
-        isElectron: {
-          ...Styles.paddingH(Styles.globalMargins.medium),
-        },
-        isMobile: {
-          ...Styles.paddingH(Styles.globalMargins.small),
-        },
-      }),
       smallTextContainer: {
         flex: 1,
         maxWidth: '100%',
diff --git a/shared/common-adapters/bottom-sheet.desktop.tsx b/shared/common-adapters/bottom-sheet.desktop.tsx
deleted file mode 100644
index c961cc4fe017..000000000000
--- a/shared/common-adapters/bottom-sheet.desktop.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-export const BottomSheetView = () => null
-export const BottomSheetModal = () => null
-export const BottomSheetBackdrop = () => null
-export const BottomSheetScrollView = () => null
-export const BottomSheetHandle = () => null
diff --git a/shared/common-adapters/box-grow.tsx b/shared/common-adapters/box-grow.tsx
index fd3a3455f94c..4053c5ff5e8e 100644
--- a/shared/common-adapters/box-grow.tsx
+++ b/shared/common-adapters/box-grow.tsx
@@ -8,26 +8,35 @@ type Props = {
   onLayout?: (e: LayoutEvent) => void
 }
 
-const BoxGrow = (p: Props) => {
+const BoxGrowImpl = (p: Props & {direction: 'vertical' | 'horizontal'}) => {
+  const {direction, onLayout, style, children} = p
   return (
-    <Box2 direction="vertical" alignSelf="stretch" relative={true} style={Styles.collapseStyles([styles.outer, p.style])} onLayout={p.onLayout}>
-      <Box2 direction="vertical" style={styles.inner}>
-        {p.children}
+    <Box2
+      direction={direction}
+      alignSelf="stretch"
+      relative={true}
+      style={Styles.collapseStyles([direction === 'vertical' ? styles.outer : styles.outer2, style])}
+      onLayout={onLayout}
+    >
+      <Box2 direction={direction} style={styles.inner}>
+        {children}
       </Box2>
     </Box2>
   )
 }
 
+const BoxGrow = (p: Props) => <BoxGrowImpl {...p} direction="vertical" />
+export const BoxGrow2 = (p: Props) => <BoxGrowImpl {...p} direction="horizontal" />
+
 const styles = Styles.styleSheetCreate(
   () =>
     ({
       inner: {...Styles.globalStyles.fillAbsolute, height: '100%', width: '100%'},
-      inner2: {...Styles.globalStyles.fillAbsolute, display: 'flex', height: '100%', width: '100%'},
       outer: {
         flexGrow: 1,
       },
+      // horizontal variant also shrinks so it can't overflow its parent
       outer2: {
-        display: 'flex',
         flexGrow: 1,
         flexShrink: 1,
       },
@@ -35,14 +44,3 @@ const styles = Styles.styleSheetCreate(
 )
 
 export default BoxGrow
-
-export const BoxGrow2 = (p: Props) => {
-  const {onLayout, style, children} = p
-  return (
-    <Box2 direction="horizontal" alignSelf="stretch" relative={true} style={Styles.collapseStyles([styles.outer2, style])} onLayout={onLayout}>
-      <Box2 direction="horizontal" style={styles.inner2}>
-        {children}
-      </Box2>
-    </Box2>
-  )
-}
diff --git a/shared/common-adapters/box.tsx b/shared/common-adapters/box.tsx
index c4c4cbb6962f..043afad26df0 100644
--- a/shared/common-adapters/box.tsx
+++ b/shared/common-adapters/box.tsx
@@ -65,7 +65,7 @@ const hgapEndStyles = new Map(marginKeys.map(gap => [gap, {paddingRight: Styles.
 const vgapEndStyles = new Map(marginKeys.map(gap => [gap, {paddingBottom: Styles.globalMargins[gap]}]))
 const paddingStyles = new Map(marginKeys.map(p => [p, {padding: Styles.globalMargins[p]}]))
 
-export const box2SharedProps = (p: Box2Props) => {
+const box2SharedProps = (p: Box2Props) => {
   const {direction, fullHeight, fullWidth, centerChildren, alignSelf, alignItems, noShrink} = p
   const {flex, justifyContent, overflow, padding, relative} = p
   const {collapsable = true, onLayout, pointerEvents, children, gap, gapStart, gapEnd} = p
@@ -185,7 +185,7 @@ export const box2SharedProps = (p: Box2Props) => {
 }
 
 // Shared className generator used by Box2 and ClickableBox.
-export const box2ClassNames = (p: Box2Props, extra?: string): string => {
+const box2ClassNames = (p: Box2Props, extra?: string): string => {
   const {direction, alignItems, alignSelf, gap, gapStart, gapEnd, justifyContent, overflow} = p
   const {padding, centerChildren, flex, fullHeight, fullWidth, noShrink, pointerEvents, relative, tooltip, className} = p
   const horizontal = direction === 'horizontal' || direction === 'horizontalReverse'
diff --git a/shared/common-adapters/button.tsx b/shared/common-adapters/button.tsx
index 0659f44ceb34..174f3fd7e5bd 100644
--- a/shared/common-adapters/button.tsx
+++ b/shared/common-adapters/button.tsx
@@ -65,10 +65,8 @@ const secondaryContainer: Styles._StylesCrossPlatform = Styles.platformStyles({
   common: baseContainer,
   isElectron: {backgroundColor: Styles.globalColors.white},
   isMobile: {
+    ...Styles.border(Styles.globalColors.black_20, 1),
     backgroundColor: Styles.globalColors.white,
-    borderColor: Styles.globalColors.black_20,
-    borderStyle: 'solid' as const,
-    borderWidth: 1,
   },
 })
 
@@ -147,8 +145,9 @@ const Progress = ({small, white}: {small?: boolean; white: boolean}) => {
 
 type FullProps = ButtonProps & {ref?: React.Ref<MeasureRef | null>}
 
-const ButtonDesktop = (props: FullProps) => {
-  const {children, label, onClick, ref: measureRef, type = 'Default', mode = 'Primary', small, fullWidth, disabled, waiting, tooltip, style, labelStyle: labelStyleOverride, testID} = props
+// Style/state derivation shared by the desktop and native renderers
+const buttonShared = (props: FullProps) => {
+  const {children, label, type = 'Default', mode = 'Primary', small, fullWidth, disabled, waiting, style} = props
   const unclickable = disabled || waiting
   const isPrimary = mode === 'Primary'
   const hasChildrenOnly = !!children && !label
@@ -169,6 +168,15 @@ const ButtonDesktop = (props: FullProps) => {
       ])
     : (container as Styles.StylesCrossPlatform)
 
+  const whiteSpinner = isPrimary && type !== 'Dim'
+
+  return {containerStyle, isPrimary, labelStyle, type, unclickable, whiteSpinner}
+}
+
+const ButtonDesktop = (props: FullProps) => {
+  const {onClick, ref: measureRef, small, waiting, tooltip, labelStyle: labelStyleOverride, testID, children, label} = props
+  const {containerStyle, isPrimary, labelStyle, type, unclickable, whiteSpinner} = buttonShared(props)
+
   const className = Styles.classNames(
     isPrimary ? 'button--primary' : 'button--secondary',
     `button--type-${type}`,
@@ -184,8 +192,6 @@ const ButtonDesktop = (props: FullProps) => {
         }
       : undefined
 
-  const whiteSpinner = isPrimary && type !== 'Dim'
-
   const btn = (
     <div className={className} style={Styles.castStyleDesktop(containerStyle)} onClick={handleClick} ref={measureRef as React.Ref<HTMLDivElement>} data-testid={testID}>
       {children}
@@ -207,30 +213,11 @@ const ButtonDesktop = (props: FullProps) => {
 
 const ButtonNative = (props: FullProps) => {
   const {Pressable, Text: RNText, View} = require('react-native') as {Pressable: typeof PressableType; Text: typeof RNTextType; View: typeof ViewType}
-  const {children, label, onClick, type = 'Default', mode = 'Primary', small, fullWidth, disabled, waiting, style, labelStyle: labelStyleOverride, testID} = props
-  const unclickable = disabled || waiting
-  const isPrimary = mode === 'Primary'
-  const hasChildrenOnly = !!children && !label
-
-  const container = isPrimary ? primaryContainers[type] : secondaryContainer
-  const labelStyle = isPrimary ? primaryLabelStyles[type] : secondaryLabelStyles[type]
-
-  const needsCollapse = small || fullWidth || unclickable || hasChildrenOnly || style
-  const containerStyle = needsCollapse
-    ? Styles.collapseStyles([
-        container,
-        small && smallStyle,
-        hasChildrenOnly && childrenOnlyStyle,
-        hasChildrenOnly && small && childrenOnlySmallStyle,
-        fullWidth && fullWidthStyle,
-        unclickable && opacity30Style,
-        style,
-      ])
-    : (container as Styles.StylesCrossPlatform)
+  const {children, label, onClick, small, waiting, labelStyle: labelStyleOverride, testID} = props
+  const {containerStyle, labelStyle, unclickable, whiteSpinner} = buttonShared(props)
 
   const handlePress = unclickable ? undefined : onClick
 
-  const whiteSpinner = isPrimary && type !== 'Dim'
   const fontStyle = {...Styles.globalStyles.fontSemibold, fontSize: 16}
 
   const inner = (
diff --git a/shared/common-adapters/checkbox.tsx b/shared/common-adapters/checkbox.tsx
index 4a8c4c87624e..b348e088c07d 100644
--- a/shared/common-adapters/checkbox.tsx
+++ b/shared/common-adapters/checkbox.tsx
@@ -21,9 +21,8 @@ type Props = {
 }
 
 const CHECKBOX_SIZE = 13
-const CHECKBOX_MARGIN = 8
 
-const Kb = {Box2, ClickableBox, Icon, Styles, Switch, Text}
+const Kb = {Box2, ClickableBox, Icon, Switch, Text}
 
 const Checkbox = (props: Props) => {
   if (!isMobile) {
@@ -32,7 +31,8 @@ const Checkbox = (props: Props) => {
         direction="horizontal"
         alignItems="flex-start"
         alignSelf="flex-start"
-        style={Kb.Styles.collapseStyles([
+        gap="tiny"
+        style={Styles.collapseStyles([
           styles.container,
           !props.disabled && styles.clickable,
           props.style,
@@ -42,8 +42,8 @@ const Checkbox = (props: Props) => {
         }
       >
         <div
-          style={Kb.Styles.castStyleDesktop(
-            Kb.Styles.collapseStyles([
+          style={Styles.castStyleDesktop(
+            Styles.collapseStyles([
               styles.checkbox,
               props.checked && styles.checkboxChecked,
               props.disabled && styles.checkboxInactive,
@@ -54,9 +54,9 @@ const Checkbox = (props: Props) => {
         >
           <Kb.Icon
             type="iconfont-check"
-            style={Kb.Styles.collapseStyles([styles.icon, !props.checked && styles.transparent])}
-            hoverColor={Kb.Styles.globalColors.white}
-            color={props.checkboxColor ?? Kb.Styles.globalColors.white}
+            style={Styles.collapseStyles([styles.icon, !props.checked && styles.transparent])}
+            hoverColor={Styles.globalColors.white}
+            color={props.checkboxColor ?? Styles.globalColors.white}
             fontSize={9}
           />
         </div>
@@ -90,42 +90,41 @@ const Checkbox = (props: Props) => {
   )
 }
 
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  checkbox: Kb.Styles.platformStyles({
+const styles = Styles.styleSheetCreate(() => ({
+  checkbox: Styles.platformStyles({
     isElectron: {
-      ...Kb.Styles.globalStyles.flexBoxColumn,
-      ...Kb.Styles.transition('background'),
-      backgroundColor: Kb.Styles.globalColors.white,
-      ...Kb.Styles.border(Kb.Styles.globalColors.black_20, 1, 2),
+      ...Styles.globalStyles.flexBoxColumn,
+      ...Styles.transition('background'),
+      backgroundColor: Styles.globalColors.white,
+      ...Styles.border(Styles.globalColors.black_20, 1, 2),
       flexShrink: 0,
-      ...Kb.Styles.size(CHECKBOX_SIZE),
+      ...Styles.size(CHECKBOX_SIZE),
       justifyContent: 'center',
-      marginRight: CHECKBOX_MARGIN,
       marginTop: 2,
       position: 'relative',
     },
   }),
   checkboxChecked: {
-    backgroundColor: Kb.Styles.globalColors.blue,
-    borderColor: Kb.Styles.globalColors.blue,
+    backgroundColor: Styles.globalColors.blue,
+    borderColor: Styles.globalColors.blue,
   },
-  checkboxInactive: {borderColor: Kb.Styles.globalColors.black_10},
-  clickable: Kb.Styles.platformStyles({
+  checkboxInactive: {borderColor: Styles.globalColors.black_10},
+  clickable: Styles.platformStyles({
     isElectron: {
-      ...Kb.Styles.desktopStyles.clickable,
+      ...Styles.desktopStyles.clickable,
     },
   }),
   container: {
-    ...Kb.Styles.paddingV(2),
+    ...Styles.paddingV(2),
   },
-  icon: Kb.Styles.platformStyles({
+  icon: Styles.platformStyles({
     isElectron: {
-      ...Kb.Styles.transition('opacity'),
+      ...Styles.transition('opacity'),
       alignSelf: 'center',
     },
   }),
   mobileContainer: {
-    ...Kb.Styles.paddingV(Kb.Styles.globalMargins.xtiny),
+    ...Styles.paddingV(Styles.globalMargins.xtiny),
   },
   semiTransparent: {opacity: 0.4},
   transparent: {opacity: 0},
diff --git a/shared/common-adapters/confirm-buttons.tsx b/shared/common-adapters/confirm-buttons.tsx
new file mode 100644
index 000000000000..1ed26c34a16f
--- /dev/null
+++ b/shared/common-adapters/confirm-buttons.tsx
@@ -0,0 +1,103 @@
+import Button, {type ButtonProps} from './button'
+import ButtonBar from './button-bar'
+import WaitingButton from './waiting-button'
+import {Box2} from './box'
+import * as Styles from '@/styles'
+
+const Kb = {
+  Box2,
+  Button,
+  ButtonBar,
+  WaitingButton,
+}
+
+type Props = {
+  cancelLabel?: string
+  confirmDisabled?: boolean
+  confirmLabel: string
+  confirmType?: ButtonProps['type']
+  onCancel: () => void
+  onConfirm: () => void
+  // modal-footer variant: buttons share the row 50/50, cancel is desktop-only
+  // (mobile modals close from the header)
+  split?: boolean
+  style?: Styles.StylesCrossPlatform
+  // either follow keys in the waiting store, or drive directly with a boolean
+  waitingKey?: string | Array<string>
+  waiting?: boolean
+}
+
+/**
+ * The standard cancel + confirm footer for form/confirmation screens. Both
+ * buttons follow the same waiting state: confirm shows the spinner, cancel
+ * just disables. Desktop: row with confirm on the right. Mobile: stacked
+ * full width with confirm on top.
+ */
+const ConfirmButtons = (props: Props) => {
+  const splitStyle = props.split ? styles.split : undefined
+  const cancel = props.waitingKey ? (
+    <Kb.WaitingButton
+      key="cancel"
+      type="Dim"
+      onClick={props.onCancel}
+      label={props.cancelLabel ?? 'Cancel'}
+      waitingKey={props.waitingKey}
+      onlyDisable={true}
+      fullWidth={isMobile}
+      style={splitStyle}
+    />
+  ) : (
+    <Kb.Button
+      key="cancel"
+      type="Dim"
+      onClick={props.onCancel}
+      label={props.cancelLabel ?? 'Cancel'}
+      disabled={props.waiting}
+      fullWidth={isMobile}
+      style={splitStyle}
+    />
+  )
+  const confirm = props.waitingKey ? (
+    <Kb.WaitingButton
+      key="confirm"
+      type={props.confirmType}
+      onClick={props.onConfirm}
+      label={props.confirmLabel}
+      disabled={props.confirmDisabled}
+      waitingKey={props.waitingKey}
+      fullWidth={isMobile}
+      style={splitStyle}
+    />
+  ) : (
+    <Kb.Button
+      key="confirm"
+      type={props.confirmType}
+      onClick={props.onConfirm}
+      label={props.confirmLabel}
+      disabled={props.confirmDisabled}
+      waiting={props.waiting}
+      fullWidth={isMobile}
+      style={splitStyle}
+    />
+  )
+  if (props.split) {
+    return (
+      <Kb.Box2 direction="horizontal" gap="tiny" fullWidth={true} style={props.style}>
+        {!isMobile && cancel}
+        {confirm}
+      </Kb.Box2>
+    )
+  }
+  return (
+    <Kb.ButtonBar direction={isMobile ? 'column' : 'row'} fullWidth={isMobile} style={props.style}>
+      {isMobile ? confirm : cancel}
+      {isMobile ? cancel : confirm}
+    </Kb.ButtonBar>
+  )
+}
+
+const styles = Styles.styleSheetCreate(() => ({
+  split: {...Styles.globalStyles.flexOne},
+}))
+
+export default ConfirmButtons
diff --git a/shared/common-adapters/confirm-modal.tsx b/shared/common-adapters/confirm-modal.tsx
index fda729795473..2b9b0a306486 100644
--- a/shared/common-adapters/confirm-modal.tsx
+++ b/shared/common-adapters/confirm-modal.tsx
@@ -34,7 +34,6 @@ const ConfirmModal = (props: Props) => (
       </Banner>
     ) : null}
     <Box2
-      alignItems="center"
       direction="vertical"
       centerChildren={true}
       fullWidth={true}
diff --git a/shared/common-adapters/copyable-text.tsx b/shared/common-adapters/copyable-text.tsx
index b6d0decae826..41cbcefe201c 100644
--- a/shared/common-adapters/copyable-text.tsx
+++ b/shared/common-adapters/copyable-text.tsx
@@ -45,16 +45,14 @@ const CopyableText = (props: Props) => {
       onPress={() => handleCopy()}
       style={props.style}
     >
-      <Box2 direction="vertical" fullWidth={true} alignItems="flex-start" relative={true} style={styles.base}>
+      <Box2 direction="vertical" fullWidth={true} relative={true} style={styles.base}>
         <Text style={Styles.collapseStyles([styles.text, props.textStyle])} type="BodySmall">
           {props.value}
         </Text>
-        <Box2 direction="vertical" alignItems="center" style={styles.copyToastContainer}>
-          <Box2 direction="horizontal" alignItems="center" style={styles.copyToast}>
-            <Text style={styles.copyToastText} type="Body">
-              {hasCopied ? 'Copied!' : 'Tap to copy'}
-            </Text>
-          </Box2>
+        <Box2 direction="horizontal" alignItems="center" style={styles.copyToast}>
+          <Text style={styles.copyToastText} type="Body">
+            {hasCopied ? 'Copied!' : 'Tap to copy'}
+          </Text>
         </Box2>
       </Box2>
     </TouchableHighlight>
@@ -76,7 +74,7 @@ const styles = Styles.styleSheetCreate(
           textAlign: 'left',
         },
         isElectron: {
-          border: `solid 1px ${Styles.globalColors.black_10}`,
+          ...Styles.border(Styles.globalColors.black_10, 1),
           justifyContent: 'stretch',
           lineHeight: '17px',
           overflowX: 'hidden',
@@ -95,15 +93,12 @@ const styles = Styles.styleSheetCreate(
       }),
       copyToast: {
         ...Styles.paddingH(Styles.globalMargins.medium),
+        // Box2 defaults to alignSelf center, which centers the absolute pill horizontally
         backgroundColor: Styles.globalColors.black_50,
         borderRadius: Styles.globalMargins.large,
-        height: Styles.globalMargins.medium + Styles.globalMargins.tiny,
-      },
-      copyToastContainer: {
         bottom: Styles.globalMargins.small,
-        left: 0,
+        height: Styles.globalMargins.medium + Styles.globalMargins.tiny,
         position: 'absolute',
-        right: 0,
       },
       copyToastText: {
         color: Styles.globalColors.white,
diff --git a/shared/common-adapters/delayed-mounting.tsx b/shared/common-adapters/delayed-mounting.tsx
deleted file mode 100644
index c63e2d089d04..000000000000
--- a/shared/common-adapters/delayed-mounting.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import {useTimeout} from './use-timers'
-
-type Props = {
-  delay: number
-  children: React.ReactNode
-}
-
-const DelayedMounting = (props: Props) => {
-  const [showing, setShowing] = React.useState(false)
-  const setShowingTrue = useTimeout(() => setShowing(true), props.delay)
-  React.useEffect(setShowingTrue, [setShowingTrue])
-  return <>{showing && props.children}</>
-}
-
-export default DelayedMounting
diff --git a/shared/common-adapters/dropdown.css b/shared/common-adapters/dropdown.css
index b7db63768f49..1edf1e788047 100644
--- a/shared/common-adapters/dropdown.css
+++ b/shared/common-adapters/dropdown.css
@@ -1,8 +1,8 @@
 .dropdown_border {
   border: solid 1px var(--color-black_10);
-  color: var(--color.black_50);
+  color: var(--color-black_50);
   &.hover:hover {
     border: solid 1px var(--color-blue);
-    color: var(--color.blueDark);
+    color: var(--color-blueDark);
   }
 }
diff --git a/shared/common-adapters/dropdown.tsx b/shared/common-adapters/dropdown.tsx
index 15d90454cf1c..5b254f2345dd 100644
--- a/shared/common-adapters/dropdown.tsx
+++ b/shared/common-adapters/dropdown.tsx
@@ -39,7 +39,9 @@ export const DropdownButton = (props: DropdownButtonProps) => {
   return (
     <Kb.ClickableBox
       onClick={!disabled ? toggleOpen : undefined}
-      direction="vertical"
+      direction="horizontal"
+      alignItems="center"
+      fullWidth={!inline}
       ref={popupAnchor}
       className={Styles.classNames('dropdown_border', {
         hover: !disabled,
@@ -56,7 +58,6 @@ export const DropdownButton = (props: DropdownButtonProps) => {
         },
         disabled ? {opacity: 0.3} : {},
         {cursor: !disabled ? 'pointer' : undefined},
-        {width: inline ? undefined : '100%'},
         style,
       ])}
     >
@@ -223,8 +224,6 @@ const styles = Styles.styleSheetCreate(
         },
       }),
       measureBox: {
-        ...Styles.globalStyles.flexBoxRow,
-        alignItems: 'center',
         ...(isMobile
           ? {
               borderColor: Styles.globalColors.black_10,
diff --git a/shared/common-adapters/emoji/custom-emoji.tsx b/shared/common-adapters/emoji/custom-emoji.tsx
index 250f40e4d1e1..ffce7fdcfd39 100644
--- a/shared/common-adapters/emoji/custom-emoji.tsx
+++ b/shared/common-adapters/emoji/custom-emoji.tsx
@@ -32,8 +32,7 @@ const CustomEmoji = (props: Props) => {
   return (
     <Kb.Box2
       direction="horizontal"
-      alignItems="center"
-      justifyContent="center"
+      centerChildren={true}
       style={Kb.Styles.collapseStyles([
         styles.emoji,
         {
diff --git a/shared/common-adapters/emoji/index.tsx b/shared/common-adapters/emoji/index.tsx
index 6dcf1b2bfb59..91c66db3e1d7 100644
--- a/shared/common-adapters/emoji/index.tsx
+++ b/shared/common-adapters/emoji/index.tsx
@@ -11,7 +11,7 @@ export type RenderableEmoji = {
   renderUrl?: string
 }
 
-export const RPCUserReacjiToRenderableEmoji = (
+const RPCUserReacjiToRenderableEmoji = (
   userReacji: T.RPCGen.UserReacji,
   noAnim: boolean
 ): RenderableEmoji => ({
diff --git a/shared/common-adapters/emoji/native-emoji.tsx b/shared/common-adapters/emoji/native-emoji.tsx
index 687a5b63df41..617940063b26 100644
--- a/shared/common-adapters/emoji/native-emoji.tsx
+++ b/shared/common-adapters/emoji/native-emoji.tsx
@@ -27,7 +27,7 @@ const unifiedToNative = (unified: string) =>
 
 const nameReg = /^(?::([^:]+):)(?::skin-tone-(\d):)?$/
 
-function EmojiWrapper(props: Props) {
+function NativeEmoji(props: Props) {
   const {emojiName, size} = props
 
   if (isMobile) {
@@ -115,4 +115,4 @@ function EmojiWrapper(props: Props) {
   )
 }
 
-export default EmojiWrapper
+export default NativeEmoji
diff --git a/shared/common-adapters/emoji/slow-data.tsx b/shared/common-adapters/emoji/slow-data.tsx
index cf5bab1f2910..9811b2e542a5 100644
--- a/shared/common-adapters/emoji/slow-data.tsx
+++ b/shared/common-adapters/emoji/slow-data.tsx
@@ -36,7 +36,7 @@ for (const cat in categorized) {
   }
 }
 
-export const categoryOrder = [
+const categoryOrder = [
   'Smileys & People',
   'Animals & Nature',
   'Food & Drink',
diff --git a/shared/common-adapters/error-boundary.tsx b/shared/common-adapters/error-boundary.tsx
index 28929fc00eae..6a13a01cb45d 100644
--- a/shared/common-adapters/error-boundary.tsx
+++ b/shared/common-adapters/error-boundary.tsx
@@ -132,7 +132,7 @@ type Props = {
   fallbackStyle?: Styles.StylesCrossPlatform
 }
 
-const EB = (p: Props) => {
+const ErrorBoundary = (p: Props) => {
   const {children, fallbackStyle, closeOnClick} = p
   const [componentStack, setComponentStack] = React.useState('')
 
@@ -166,4 +166,4 @@ const styles = Styles.styleSheetCreate(
     }) as const
 )
 
-export default EB
+export default ErrorBoundary
diff --git a/shared/common-adapters/floating-menu/menu-layout/index.tsx b/shared/common-adapters/floating-menu/menu-layout/index.tsx
index f1530f12a251..f8718e61a57b 100644
--- a/shared/common-adapters/floating-menu/menu-layout/index.tsx
+++ b/shared/common-adapters/floating-menu/menu-layout/index.tsx
@@ -188,7 +188,7 @@ const MenuRow = (props: MenuRowProps) => (
         gap={props.icon ? 'small' : undefined}
       >
         {props.icon || props.isSelected ? (
-          <Box2 direction="horizontal" fullHeight={true} alignItems="center" justifyContent="center" style={nativeStyles.iconContainer}>
+          <Box2 direction="horizontal" fullHeight={true} centerChildren={true} style={nativeStyles.iconContainer}>
             {props.isSelected && (
               <Icon
                 type="iconfont-check"
@@ -215,13 +215,7 @@ const MenuRow = (props: MenuRowProps) => (
           </Box2>
         ) : null}
         <Box2 direction="horizontal" fullHeight={true} fullWidth={true}>
-          <Box2
-            direction="vertical"
-            fullHeight={true}
-            fullWidth={true}
-            alignItems="center"
-            justifyContent="center"
-          >
+          <Box2 direction="vertical" fullHeight={true} fullWidth={true} centerChildren={true}>
             <Box2 direction="horizontal" fullWidth={true}>
               <Text type="Body" style={Styles.collapseStyles([styleRowText(props), props.style])}>
                 {props.title}
@@ -388,7 +382,6 @@ const desktopStyles = Styles.styleSheetCreate(
       iconBadge: sharedIconBadgeStyle,
       itemBodyText: {color: undefined},
       itemContainer: {
-        ...Styles.globalStyles.flexBoxColumn,
         ...Styles.padding(7, Styles.globalMargins.small),
       },
       menuContainer: Styles.platformStyles({
diff --git a/shared/common-adapters/floating-picker.tsx b/shared/common-adapters/floating-picker.tsx
index 28cd32f8c02a..283042440b00 100644
--- a/shared/common-adapters/floating-picker.tsx
+++ b/shared/common-adapters/floating-picker.tsx
@@ -6,7 +6,7 @@ import {Box2} from './box'
 import Popup from './popup'
 import Text from './text'
 
-export type PickerItem<T> = {
+type PickerItem<T> = {
   label: string
   value: T
 }
@@ -59,8 +59,6 @@ function WrapPicker<T>(p: {
   )
 }
 
-export {Picker}
-
 // NOTE: this doesn't seem to work well when debugging w/ chrome. aka if you scroll and set a value
 // the native component will undo it a bunch and its very finnicky. works fine outside of that it seems
 const FloatingPicker = <T extends string | number>(props: Props<T>): React.ReactNode => {
diff --git a/shared/common-adapters/header-buttons.tsx b/shared/common-adapters/header-buttons.tsx
index 95bd7ba17054..ba0d691d31c5 100644
--- a/shared/common-adapters/header-buttons.tsx
+++ b/shared/common-adapters/header-buttons.tsx
@@ -51,7 +51,6 @@ const styles = Styles.styleSheetCreate(() => ({
   leftAction: Styles.platformStyles({
     common: {
       flexShrink: 1,
-      justifyContent: 'flex-start',
     },
   }),
   rightAction: Styles.platformStyles({
diff --git a/shared/common-adapters/icon.shared.tsx b/shared/common-adapters/icon.shared.tsx
index febd237a989a..add18aa05e16 100644
--- a/shared/common-adapters/icon.shared.tsx
+++ b/shared/common-adapters/icon.shared.tsx
@@ -1,14 +1,6 @@
 import type {IconType} from './icon.constants-gen'
 import {iconMeta} from './icon.constants-gen'
 
-export function typeExtension(type: IconType): string {
-  return iconMeta[type].extension || 'png'
-}
-
-export function getImagesDir(type: IconType): string {
-  return iconMeta[type].imagesDir || 'icons'
-}
-
 export function isValidIconType(inputType: string): inputType is IconType {
   if (!inputType) return false
   const iconType = inputType as IconType
diff --git a/shared/common-adapters/icon.tsx b/shared/common-adapters/icon.tsx
index 676e7743380f..6d13e58d3abc 100644
--- a/shared/common-adapters/icon.tsx
+++ b/shared/common-adapters/icon.tsx
@@ -18,6 +18,7 @@ export type IconProps = {
   hint?: string
   onClick?: () => void
   padding?: keyof typeof Styles.globalMargins
+  testID?: string
 }
 
 const sizeToFontDesktop = {Big: 24, Bigger: 36, Default: 16, Huge: 48, Small: 12, Tiny: 8} as const
@@ -63,7 +64,7 @@ const IconDesktop = (props: IconProps) => {
     ? ({...inlineStyle, cursor: 'pointer'} as React.CSSProperties)
     : inlineStyle
 
-  return <span className={cn} style={finalStyle} onClick={handleClick} title={hint} />
+  return <span className={cn} style={finalStyle} onClick={handleClick} title={hint} data-testid={props.testID} />
 }
 
 const nativeBaseStyle: Styles._StylesCrossPlatform = {
@@ -95,6 +96,7 @@ const IconNative = (props: IconProps) => {
       allowFontScaling={false}
       suppressHighlighting={true}
       onPress={onClick}
+      testID={props.testID}
     >
       {code}
     </RNText>
diff --git a/shared/common-adapters/image-icon.tsx b/shared/common-adapters/image-icon.tsx
index e47b310f4ca0..8803918f0500 100644
--- a/shared/common-adapters/image-icon.tsx
+++ b/shared/common-adapters/image-icon.tsx
@@ -1,7 +1,6 @@
 import type * as Styles from '@/styles'
 import {iconMeta} from './icon.constants-gen'
 import type {IconType} from './icon.constants-gen'
-import {typeExtension, getImagesDir} from './icon.shared'
 import type {Image as RNImageType} from 'react-native'
 import type {getAssetPath as getAssetPathType} from '@/constants/platform'
 
@@ -12,6 +11,9 @@ export type ImageIconProps = {
   allowLazy?: boolean
 }
 
+const typeExtension = (type: IconType) => iconMeta[type].extension || 'png'
+const getImagesDir = (type: IconType) => iconMeta[type].imagesDir || 'icons'
+
 const ImageIconDesktop = (props: ImageIconProps) => {
   const {getAssetPath} = require('@/constants/platform') as {getAssetPath: typeof getAssetPathType}
   const {type, style, className, allowLazy = true} = props
diff --git a/shared/common-adapters/index-impl.js b/shared/common-adapters/index-impl.js
index 6569d00f13bd..53e42a3638fd 100644
--- a/shared/common-adapters/index-impl.js
+++ b/shared/common-adapters/index-impl.js
@@ -33,15 +33,9 @@ module.exports = {
   get BottomSheetScrollView() {
     return require('./popup/bottom-sheet').BottomSheetScrollView
   },
-  get Box() {
-    return require('./box').default
-  },
   get Box2() {
     return require('./box').Box2
   },
-  get Box2Animated() {
-    return require('./box').Box2Animated
-  },
   get BoxGrow() {
     return require('./box-grow').default
   },
@@ -60,9 +54,6 @@ module.exports = {
   get Checkbox() {
     return require('./checkbox').default
   },
-  get ChoiceList() {
-    return require('./choice-list').default
-  },
   get ConfirmModal() {
     return require('./confirm-modal').default
   },
@@ -86,9 +77,6 @@ module.exports = {
   get CopyableText() {
     return require('./copyable-text').default
   },
-  get DelayedMounting() {
-    return require('./delayed-mounting').default
-  },
   get Divider() {
     return require('./divider').default
   },
@@ -170,9 +158,6 @@ module.exports = {
   get Placeholder() {
     return require('./placeholder').default
   },
-  get PlatformIcon() {
-    return require('./platform-icon').default
-  },
   get Popup() {
     return require('./popup/index').default
   },
@@ -194,9 +179,6 @@ module.exports = {
   get Reloadable() {
     return require('./reload').default
   },
-  get RichButton() {
-    return require('./rich-button').default
-  },
   get RoundedBox() {
     return require('./rounded-box').default
   },
@@ -233,15 +215,9 @@ module.exports = {
   get Tabs() {
     return require('./tabs').default
   },
-  get TeamWithPopup() {
-    return require('./team-with-popup').default
-  },
   get Text() {
     return require('./text').default
   },
-  get TimelineMarker() {
-    return require('./timeline-marker').default
-  },
   get Toast() {
     return require('./toast').default
   },
diff --git a/shared/common-adapters/index.tsx b/shared/common-adapters/index.tsx
index 802063b73f98..7dae2f5e0709 100644
--- a/shared/common-adapters/index.tsx
+++ b/shared/common-adapters/index.tsx
@@ -15,7 +15,8 @@ export {default as AvatarLine} from './avatar/avatar-line'
 export {BottomAccessory} from './bottom-accessory'
 export {default as BackButton} from './back-button'
 export {default as Badge} from './badge'
-export {Banner, BannerParagraph} from './banner'
+export {Banner, BannerParagraph, ErrorBanner} from './banner'
+export {default as ConfirmButtons} from './confirm-buttons'
 export {Box2} from './box'
 export type {LayoutEvent} from './box'
 export type {MeasureRef} from './measure-ref'
@@ -30,6 +31,7 @@ export {ClickableBox} from './box'
 export type {ClickableBoxProps} from './box'
 export {default as ConfirmModal} from './confirm-modal'
 export {default as ModalFooter} from './modal-footer'
+export {LoadingScreen, LoadingOverlay} from './loading'
 export {default as CopyText} from './copy-text'
 export {default as CopyableText} from './copyable-text'
 export {default as Divider} from './divider'
diff --git a/shared/common-adapters/input3.tsx b/shared/common-adapters/input3.tsx
index fd22408632ed..ce3d8be88997 100644
--- a/shared/common-adapters/input3.tsx
+++ b/shared/common-adapters/input3.tsx
@@ -21,6 +21,41 @@ type InputLikeRef = {
   value?: string
 }
 type InputChangeEvent = {target: {value: string}}
+
+// Shared container + icon/prefix/decoration frame around the platform input element
+const InputFrame = (p: {
+  children: React.ReactNode
+  focused: boolean
+  fontSize?: number
+  props: Input3Props
+}) => {
+  const {children, focused, fontSize, props} = p
+  const {containerStyle, decoration, disabled, error, hideBorder, icon, prefix} = props
+  return (
+    <Box2
+      direction="horizontal"
+      alignItems="center"
+      padding="xtiny"
+      style={Styles.collapseStyles([
+        styles.container,
+        focused && styles.focused,
+        error && styles.error,
+        hideBorder && styles.hideBorder,
+        disabled && styles.disabled,
+        containerStyle,
+      ])}
+    >
+      {!!icon && (
+        <Box2 direction="horizontal" style={styles.icon}>
+          <IconAuto color={Styles.globalColors.black_20} type={icon} fontSize={fontSize} style={styles.displayFlex} />
+        </Box2>
+      )}
+      {!!prefix && <Text type="BodySemibold" style={styles.prefix}>{prefix}</Text>}
+      {children}
+      {decoration}
+    </Box2>
+  )
+}
 type InputKeyEvent = {
   key?: string
   shiftKey?: boolean
@@ -30,10 +65,10 @@ type InputKeyEvent = {
 
 const DesktopInput3 = (props: Input3Props & {ref?: React.Ref<Input3Ref>}) => {
   const {
-    autoCapitalize, autoCorrect, autoFocus, containerStyle, decoration, disabled, error,
-    growAndScroll, hideBorder, icon, inputStyle, maxLength, multiline, selectTextOnFocus,
+    autoCapitalize, autoCorrect, autoFocus, disabled,
+    growAndScroll, inputStyle, maxLength, multiline, selectTextOnFocus,
     onBlur: onBlurProp, onChangeText, onClick, onEnterKeyDown, onFocus: onFocusProp,
-    onKeyDown: onKeyDownProp, placeholder, prefix, ref, rowsMax, rowsMin,
+    onKeyDown: onKeyDownProp, placeholder, ref, rowsMax, rowsMin,
     secureTextEntry, spellCheck, textType = 'BodySemibold', value,
   } = props
 
@@ -146,36 +181,17 @@ const DesktopInput3 = (props: Input3Props & {ref?: React.Ref<Input3Ref>}) => {
   )
 
   return (
-    <Box2
-      direction="horizontal"
-      alignItems="center"
-      padding="xtiny"
-      style={Styles.collapseStyles([
-        styles.container,
-        focused && styles.focused,
-        error && styles.error,
-        hideBorder && styles.hideBorder,
-        disabled && styles.disabled,
-        containerStyle,
-      ])}
-    >
-      {!!icon && (
-        <Box2 direction="horizontal" style={styles.icon}>
-          <IconAuto color={Styles.globalColors.black_20} type={icon} fontSize={fontSize} style={styles.displayFlex} />
-        </Box2>
-      )}
-      {!!prefix && <Text type="BodySemibold" style={styles.prefix}>{prefix}</Text>}
+    <InputFrame focused={focused} fontSize={fontSize} props={props}>
       {inputElement}
-      {decoration}
-    </Box2>
+    </InputFrame>
   )
 }
 
 const NativeInput3 = (props: Input3Props & {ref?: React.Ref<Input3Ref>}) => {
   const {
-    autoCapitalize, autoCorrect, autoFocus, containerStyle, decoration, disabled, error,
-    hideBorder, icon, inputStyle, keyboardType, maxLength, multiline, onEnterKeyDown,
-    onBlur: onBlurProp, onChangeText, onFocus: onFocusProp, placeholder, prefix, ref,
+    autoCapitalize, autoCorrect, autoFocus, disabled,
+    inputStyle, keyboardType, maxLength, multiline, onEnterKeyDown,
+    onBlur: onBlurProp, onChangeText, onFocus: onFocusProp, placeholder, ref,
     returnKeyType, rowsMax, rowsMin, secureTextEntry, selectTextOnFocus,
     textContentType, textType = 'BodySemibold', value,
   } = props
@@ -220,25 +236,7 @@ const NativeInput3 = (props: Input3Props & {ref?: React.Ref<Input3Ref>}) => {
   const rows = rowsMin || Math.min(2, rowsMax || 2)
 
   return (
-    <Box2
-      direction="horizontal"
-      alignItems="center"
-      padding="xtiny"
-      style={Styles.collapseStyles([
-        styles.container,
-        focused && styles.focused,
-        error && styles.error,
-        hideBorder && styles.hideBorder,
-        disabled && styles.disabled,
-        containerStyle,
-      ])}
-    >
-      {!!icon && (
-        <Box2 direction="horizontal" style={styles.icon}>
-          <IconAuto color={Styles.globalColors.black_20} type={icon} fontSize={fontSize} style={styles.displayFlex} />
-        </Box2>
-      )}
-      {!!prefix && <Text type="BodySemibold" style={styles.prefix}>{prefix}</Text>}
+    <InputFrame focused={focused} fontSize={fontSize} props={props}>
       <NativeTextInput
         autoCapitalize={autoCapitalize ?? 'none'}
         autoCorrect={autoCorrect ?? false}
@@ -270,8 +268,7 @@ const NativeInput3 = (props: Input3Props & {ref?: React.Ref<Input3Ref>}) => {
         underlineColorAndroid="transparent"
         value={value}
       />
-      {decoration}
-    </Box2>
+    </InputFrame>
   )
 }
 
diff --git a/shared/common-adapters/list-common.tsx b/shared/common-adapters/list-common.tsx
deleted file mode 100644
index 5fd7c3cb5f6b..000000000000
--- a/shared/common-adapters/list-common.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import {smallHeight, largeHeight} from './list-item'
-import type {Props} from './list.shared'
-
-export function useListProps<T>(p: Props<T>) {
-  const {
-    items,
-    renderItem,
-    itemHeight,
-    onEndReached,
-    keyProperty,
-    estimatedItemHeight,
-    extraData: extraDataProp,
-    selectedIndex,
-    ListHeaderComponent,
-    ListFooterComponent,
-    recycleItems: recycleItemsOverride,
-  } = p
-  const {getItemType, drawDistance, onViewableItemsChanged, viewabilityConfig} = p
-
-  const legendRenderItem = ({item, index}: {item: T; index: number}) => {
-    return renderItem(index, item)
-  }
-
-  const keyExtractor = p.keyExtractor
-    ? p.keyExtractor
-    : keyProperty
-      ? (item: T, _index: number) => String((item as Record<string, unknown>)[keyProperty])
-      : (_item: T, index: number) => String(index)
-
-  const getFixedItemSize =
-    itemHeight.type === 'fixed'
-      ? () => itemHeight.height
-      : itemHeight.type === 'fixedListItemAuto'
-        ? () => (itemHeight.sizeType === 'Large' ? largeHeight : smallHeight)
-        : itemHeight.type === 'variable'
-          ? (item: T, index: number) => itemHeight.getItemLayout(index, item).length
-          : itemHeight.type === 'perItem'
-            ? (item: T) => itemHeight.getSize(item)
-            : undefined
-
-  const estimatedItemSize =
-    estimatedItemHeight ??
-    (itemHeight.type === 'fixed'
-      ? itemHeight.height
-      : itemHeight.type === 'fixedListItemAuto'
-        ? itemHeight.sizeType === 'Large'
-          ? largeHeight
-          : smallHeight
-        : 48)
-
-  const recycleItems =
-    recycleItemsOverride ??
-    (itemHeight.type === 'fixed' || itemHeight.type === 'fixedListItemAuto' || itemHeight.type === 'perItem')
-
-  return {
-    ListFooterComponent,
-    ListHeaderComponent,
-    data: items as T[],
-    drawDistance,
-    empty: items.length === 0,
-    estimatedItemSize,
-    extraData: extraDataProp ?? selectedIndex,
-    getFixedItemSize,
-    getItemType,
-    keyExtractor,
-    onEndReached: onEndReached ? () => onEndReached() : undefined,
-    onViewableItemsChanged: onViewableItemsChanged as any,
-    recycleItems,
-    renderItem: legendRenderItem,
-    viewabilityConfig,
-  }
-}
diff --git a/shared/common-adapters/list-item.tsx b/shared/common-adapters/list-item.tsx
index 2a725c626a4d..59489af2396a 100644
--- a/shared/common-adapters/list-item.tsx
+++ b/shared/common-adapters/list-item.tsx
@@ -71,8 +71,7 @@ const ListItem = (props: Props) => {
           direction="vertical"
           style={getStatusIconStyle(props)}
           alignSelf="flex-start"
-          alignItems="center"
-          justifyContent="center"
+          centerChildren={true}
         >
           {props.statusIcon}
         </Kb.Box2>
@@ -136,12 +135,10 @@ const styles = Styles.styleSheetCreate(() => {
     clickableBoxLarge: {
       flexShrink: 0,
       minHeight: largeHeight,
-      width: '100%',
     } as const,
     clickableBoxSmall: {
       flexShrink: 0,
       minHeight: smallHeight,
-      width: '100%',
     } as const,
     contentContainer: {
       flexGrow: 1,
@@ -338,11 +335,12 @@ const CardListItem = (props: Props) => (
     direction="horizontal"
     alignItems="center"
     fullWidth={true}
+    gap="small"
     overflow="hidden"
     padding="small"
     style={Styles.collapseStyles([cardStyles.card, props.style])}
   >
-    {props.icon && <Kb.Box2 direction="vertical" style={cardStyles.icon}>{props.icon}</Kb.Box2>}
+    {props.icon}
     <Kb.Box2 direction="vertical" flex={1} fullWidth={true}>{props.body}</Kb.Box2>
   </Kb.ClickableBox>
 )
@@ -352,9 +350,6 @@ const cardStyles = Styles.styleSheetCreate(() => ({
     ...Styles.border(Styles.globalColors.grey, 1, Styles.borderRadius),
     backgroundColor: Styles.globalColors.white,
   },
-  icon: {
-    marginRight: Styles.globalMargins.small,
-  },
 }))
 
 export default ListItem
diff --git a/shared/common-adapters/list.tsx b/shared/common-adapters/list.tsx
index c19297293950..aefa5d0fef3f 100644
--- a/shared/common-adapters/list.tsx
+++ b/shared/common-adapters/list.tsx
@@ -4,13 +4,85 @@ import * as Styles from '@/styles'
 import type {Props} from './list.shared'
 import {LegendList as LegendListWeb} from '@legendapp/list/react'
 import {LegendList as LegendListNative} from '@legendapp/list/react-native'
-import {useListProps} from './list-common'
+import {smallHeight, largeHeight} from './list-item'
 export type {LegendListRef, Props} from './list.shared'
 
+function useListProps<T>(p: Props<T>) {
+  const {
+    items,
+    renderItem,
+    itemHeight,
+    onEndReached,
+    keyProperty,
+    estimatedItemHeight,
+    extraData: extraDataProp,
+    selectedIndex,
+    ListHeaderComponent,
+    ListFooterComponent,
+    recycleItems: recycleItemsOverride,
+  } = p
+  const {getItemType, drawDistance, onViewableItemsChanged, viewabilityConfig} = p
+
+  const legendRenderItem = ({item, index}: {item: T; index: number}) => {
+    return renderItem(index, item)
+  }
+
+  const keyExtractor = p.keyExtractor
+    ? p.keyExtractor
+    : keyProperty
+      ? (item: T, _index: number) => String((item as Record<string, unknown>)[keyProperty])
+      : (_item: T, index: number) => String(index)
+
+  const getFixedItemSize =
+    itemHeight.type === 'fixed'
+      ? () => itemHeight.height
+      : itemHeight.type === 'fixedListItemAuto'
+        ? () => (itemHeight.sizeType === 'Large' ? largeHeight : smallHeight)
+        : itemHeight.type === 'variable'
+          ? (item: T, index: number) => itemHeight.getItemLayout(index, item).length
+          : itemHeight.type === 'perItem'
+            ? (item: T) => itemHeight.getSize(item)
+            : undefined
+
+  const estimatedItemSize =
+    estimatedItemHeight ??
+    (itemHeight.type === 'fixed'
+      ? itemHeight.height
+      : itemHeight.type === 'fixedListItemAuto'
+        ? itemHeight.sizeType === 'Large'
+          ? largeHeight
+          : smallHeight
+        : 48)
+
+  const recycleItems =
+    recycleItemsOverride ??
+    (itemHeight.type === 'fixed' || itemHeight.type === 'fixedListItemAuto' || itemHeight.type === 'perItem')
+
+  return {
+    empty: items.length === 0 && !ListHeaderComponent && !ListFooterComponent,
+    listProps: {
+      ListFooterComponent,
+      ListHeaderComponent,
+      data: items as T[],
+      drawDistance,
+      estimatedItemSize,
+      extraData: extraDataProp ?? selectedIndex,
+      getFixedItemSize,
+      getItemType,
+      keyExtractor,
+      onEndReached: onEndReached ? () => onEndReached() : undefined,
+      onViewableItemsChanged: onViewableItemsChanged as any,
+      recycleItems,
+      renderItem: legendRenderItem,
+      viewabilityConfig,
+    },
+  }
+}
+
 const DesktopList = function List<T>({ref, ...p}: Props<T>) {
-  const {empty, ...listProps} = useListProps(p as Props<T>)
+  const {empty, listProps} = useListProps(p as Props<T>)
   const {style} = p
-  if (empty && !p.ListHeaderComponent && !p.ListFooterComponent) return null
+  if (empty) return null
 
   return (
     <LegendListWeb
@@ -31,8 +103,8 @@ const DesktopList = function List<T>({ref, ...p}: Props<T>) {
 }
 
 const NativeList = function List<T>({ref, ...p}: Props<T>) {
-  const {empty, ...listProps} = useListProps(p as Props<T>)
-  if (empty && !p.ListHeaderComponent && !p.ListFooterComponent) return null
+  const {empty, listProps} = useListProps(p as Props<T>)
+  if (empty) return null
 
   return (
     <View style={styles.outerView}>
diff --git a/shared/common-adapters/loading-line.tsx b/shared/common-adapters/loading-line.tsx
index 0fea294c0027..e6ce3bc667e7 100644
--- a/shared/common-adapters/loading-line.tsx
+++ b/shared/common-adapters/loading-line.tsx
@@ -22,7 +22,7 @@ function LoadingLine() {
 
   if (!isMobile) {
     return (
-      <Box2 direction="vertical" style={styles.container}>
+      <Box2 direction="vertical" fullWidth={true} style={styles.container}>
         <Box2 direction="vertical" fullWidth={true} className="loading-line" style={styles.line} />
       </Box2>
     )
@@ -36,7 +36,6 @@ const styles = Styles.styleSheetCreate(() => ({
     left: 0,
     position: 'absolute',
     top: 0,
-    width: '100%',
   },
   line: {
     backgroundColor: Styles.globalColors.blue,
diff --git a/shared/common-adapters/loading.tsx b/shared/common-adapters/loading.tsx
new file mode 100644
index 000000000000..a8c5148fd022
--- /dev/null
+++ b/shared/common-adapters/loading.tsx
@@ -0,0 +1,27 @@
+import * as Styles from '@/styles'
+import {Box2} from './box'
+import ProgressIndicator from './progress-indicator'
+
+const Kb = {
+  Box2,
+  ProgressIndicator,
+}
+
+// full-size centered spinner, for screens that have nothing to show yet
+export const LoadingScreen = (props: {type?: 'Small' | 'Large' | 'Huge'}) => (
+  <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} centerChildren={true} padding="small">
+    <Kb.ProgressIndicator type={props.type} />
+  </Kb.Box2>
+)
+
+// spinner covering the parent (which needs relative positioning) while keeping content visible
+export const LoadingOverlay = (props: {show: boolean}) =>
+  props.show ? (
+    <Kb.Box2 direction="vertical" centerChildren={true} style={styles.overlay}>
+      <Kb.ProgressIndicator />
+    </Kb.Box2>
+  ) : null
+
+const styles = Styles.styleSheetCreate(() => ({
+  overlay: {...Styles.globalStyles.fillAbsolute},
+}))
diff --git a/shared/common-adapters/markdown/react.tsx b/shared/common-adapters/markdown/react.tsx
index fec79a78bd71..8c1355eeeda7 100644
--- a/shared/common-adapters/markdown/react.tsx
+++ b/shared/common-adapters/markdown/react.tsx
@@ -45,15 +45,20 @@ const electronWrapStyle = {
   wordBreak: 'break-word',
 } as const
 
+// markdown spans take color/weight from the enclosing message text
+const electronInherit = {
+  color: 'inherit',
+  fontWeight: 'inherit',
+} as const
+
 const _markdownStyles = Styles.styleSheetCreate(
   () =>
     ({
       bigTextBlockStyle: Styles.platformStyles({
         isElectron: {
           ...electronWrapStyle,
-          color: 'inherit',
+          ...electronInherit,
           display: 'block',
-          fontWeight: 'inherit',
         },
         isMobile: {
           fontSize: 32,
@@ -105,11 +110,11 @@ const _markdownStyles = Styles.styleSheetCreate(
       }),
       italicStyle: Styles.platformStyles({
         common: {fontStyle: 'italic'},
-        isElectron: {color: 'inherit', fontWeight: 'inherit', ...electronWrapStyle},
+        isElectron: {...electronInherit, ...electronWrapStyle},
         isMobile: {color: undefined, fontWeight: undefined},
       }),
       neutralPreviewStyle: Styles.platformStyles({
-        isElectron: {color: 'inherit', fontWeight: 'inherit'},
+        isElectron: electronInherit,
         isMobile: {color: Styles.globalColors.black_50, fontWeight: undefined},
       }),
       quoteStyle: Styles.platformStyles({
@@ -137,8 +142,7 @@ const _markdownStyles = Styles.styleSheetCreate(
       strikeStyle: Styles.platformStyles({
         isElectron: {
           ...electronWrapStyle,
-          color: 'inherit',
-          fontWeight: 'inherit',
+          ...electronInherit,
           textDecoration: 'line-through',
         },
         isMobile: {
@@ -148,7 +152,7 @@ const _markdownStyles = Styles.styleSheetCreate(
       }),
       textBlockStyle: Styles.platformStyles({
         isAndroid: {lineHeight: undefined},
-        isElectron: {color: 'inherit', display: 'block', fontWeight: 'inherit', ...electronWrapStyle},
+        isElectron: {...electronInherit, display: 'block', ...electronWrapStyle},
       }),
       wrapStyle: Styles.platformStyles({isElectron: electronWrapStyle}),
     }) as const
diff --git a/shared/common-adapters/markdown/service-decoration.tsx b/shared/common-adapters/markdown/service-decoration.tsx
index 4faa4791bf98..8a617f8f4c51 100644
--- a/shared/common-adapters/markdown/service-decoration.tsx
+++ b/shared/common-adapters/markdown/service-decoration.tsx
@@ -24,6 +24,33 @@ const linkStyle = Styles.platformStyles({
   isMobile: {fontWeight: undefined},
 })
 
+// Shared shell for every link decoration: same text type, hover classes and
+// [wrapStyle, linkStyle, override] style merge; behavior comes from url/onClick
+const LinkText = (p: {
+  children: React.ReactNode
+  className?: string
+  linkStyle?: StylesTextCrossPlatform | undefined
+  onClick?: () => void
+  title: string
+  url?: string
+  wrapStyle?: StylesTextCrossPlatform | undefined
+}) => {
+  const {children, className = 'hover-underline hover_contained_color_blueDark', onClick, title, url} = p
+  const urlProps = useClickURL(url)
+  return (
+    <Text
+      className={className}
+      type="BodyPrimaryLink"
+      style={Styles.collapseStyles([p.wrapStyle, linkStyle, p.linkStyle])}
+      title={title}
+      onClick={onClick}
+      {...urlProps}
+    >
+      {children}
+    </Text>
+  )
+}
+
 type KeybaseLinkProps = {
   link: string
   linkStyle?: StylesTextCrossPlatform | undefined
@@ -31,24 +58,19 @@ type KeybaseLinkProps = {
 }
 
 const KeybaseLink = (props: KeybaseLinkProps) => {
-  const onClick = () => {
-    // Route through the linking config for keybase:// and https://keybase.io/ URLs
-    // so React Navigation handles navigation declaratively.
-    // emitDeepLink normalizes URLs and dispatches through the linking config,
-    // falling back to handleAppLink for patterns not yet in the config.
-    emitDeepLink(props.link)
-  }
-
+  // Route through the linking config for keybase:// and https://keybase.io/ URLs
+  // so React Navigation handles navigation declaratively.
+  // emitDeepLink normalizes URLs and dispatches through the linking config,
+  // falling back to handleAppLink for patterns not yet in the config.
   return (
-    <Text
-      className="hover-underline hover_contained_color_blueDark"
-      type="BodyPrimaryLink"
-      style={Styles.collapseStyles([props.wrapStyle, linkStyle, props.linkStyle])}
+    <LinkText
       title={props.link}
-      onClick={onClick}
+      linkStyle={props.linkStyle}
+      wrapStyle={props.wrapStyle}
+      onClick={() => emitDeepLink(props.link)}
     >
       {props.link}
-    </Text>
+    </LinkText>
   )
 }
 
@@ -63,29 +85,28 @@ type WarningLinkProps = {
 const WarningLink = (props: WarningLinkProps) => {
   const {display, punycode, url} = props
   const navigateAppend = C.Router2.navigateAppend
-  const urlProps = useClickURL(url)
   if (isMobile) {
     return (
-      <Text
+      <LinkText
         className="hover-underline"
-        type="BodyPrimaryLink"
-        style={Styles.collapseStyles([props.wrapStyle, linkStyle, props.linkStyle])}
         title={display}
+        linkStyle={props.linkStyle}
+        wrapStyle={props.wrapStyle}
         onClick={() =>
           navigateAppend({name: 'chatConfirmNavigateExternal', params: {display, punycode, url}})
         }
       >
         {display}
-      </Text>
+      </LinkText>
     )
   }
   return (
-    <Text
+    <LinkText
       className="hover-underline"
-      type="BodyPrimaryLink"
-      style={Styles.collapseStyles([props.wrapStyle, linkStyle, props.linkStyle])}
       title={display}
-      {...urlProps}
+      linkStyle={props.linkStyle}
+      wrapStyle={props.wrapStyle}
+      url={url}
     >
       <WithTooltip
         tooltip={punycode}
@@ -95,29 +116,7 @@ const WarningLink = (props: WarningLinkProps) => {
       >
         {display}
       </WithTooltip>
-    </Text>
-  )
-}
-
-const URLText = (p: {
-  url: string
-  className?: string
-  type?: string
-  style?: Styles.StylesCrossPlatform
-  title?: string
-  children?: React.ReactNode
-}) => {
-  const urlProps = useClickURL(p.url)
-  return (
-    <Text
-      className={p.className}
-      type={p.type as any}
-      style={p.style}
-      title={p.title}
-      {...urlProps}
-    >
-      {p.children}
-    </Text>
+    </LinkText>
   )
 }
 
@@ -196,30 +195,28 @@ const ServiceDecoration = (p: Props) => {
         wrapStyle={styles['wrapStyle']}
       />
     ) : (
-      <URLText
-        className="hover-underline hover_contained_color_blueDark"
-        type="BodyPrimaryLink"
-        style={Styles.collapseStyles([styles['wrapStyle'], linkStyle, styleOverride?.link])}
+      <LinkText
         title={parsed.link.url}
+        linkStyle={styleOverride?.link}
+        wrapStyle={styles['wrapStyle']}
         url={openUrl}
       >
         {parsed.link.url}
-      </URLText>
+      </LinkText>
     )
   } else if (parsed.typ === T.RPCChat.UITextDecorationTyp.mailto) {
     const openUrl = parsed.mailto.url.toLowerCase().startsWith('mailto:')
       ? parsed.mailto.url
       : 'mailto:' + parsed.mailto.url
     return (
-      <URLText
-        className="hover-underline hover_contained_color_blueDark"
-        type="BodyPrimaryLink"
-        style={Styles.collapseStyles([styles['wrapStyle'], linkStyle, styleOverride?.mailto])}
+      <LinkText
         title={parsed.mailto.url}
+        linkStyle={styleOverride?.mailto}
+        wrapStyle={styles['wrapStyle']}
         url={openUrl}
       >
         {parsed.mailto.url}
-      </URLText>
+      </LinkText>
     )
   } else if (parsed.typ === T.RPCChat.UITextDecorationTyp.channelnamemention) {
     return (
diff --git a/shared/common-adapters/mention.tsx b/shared/common-adapters/mention.tsx
index 66de05faeb61..80b71fe88e37 100644
--- a/shared/common-adapters/mention.tsx
+++ b/shared/common-adapters/mention.tsx
@@ -44,21 +44,19 @@ export default Mention
 const styles = Styles.styleSheetCreate(() => ({
   follow: {
     backgroundColor: Styles.globalColors.greenLighterOrGreen,
-    borderRadius: 2,
     color: Styles.globalColors.greenDarkOrBlack,
   },
   highlight: {
     backgroundColor: Styles.globalColors.yellowOrYellowAlt,
-    borderRadius: 2,
     color: Styles.globalColors.blackOrBlack,
   },
   nonFollow: {
     backgroundColor: Styles.globalColors.blueLighter2,
-    borderRadius: 2,
     color: Styles.globalColors.blueDark,
   },
   text: Styles.platformStyles({
     common: {
+      borderRadius: 2,
       letterSpacing: 0.3,
       ...Styles.paddingH(2),
     },
diff --git a/shared/common-adapters/meta.tsx b/shared/common-adapters/meta.tsx
index 87df1ffa9a46..dbc43fb1b81d 100644
--- a/shared/common-adapters/meta.tsx
+++ b/shared/common-adapters/meta.tsx
@@ -4,43 +4,60 @@ import IconAuto from './icon-auto'
 import type {IconType} from './icon.constants-gen'
 import * as Styles from '@/styles'
 
-type Props = {
-  title: string | number
+type BaseProps = {
   style?: Styles.StylesCrossPlatform
   size?: 'Small'
   color?: string
-  backgroundColor: string
   noUppercase?: boolean
   icon?: IconType
   iconColor?: Styles.Color
 }
 
-const Meta = (props: Props) => (
-  <Box2
-    alignSelf="flex-start"
-    alignItems="center"
-    direction={props.icon ? 'horizontal' : 'vertical'}
-    pointerEvents="none"
-    style={Styles.collapseStyles([
-      styles.container,
-      props.backgroundColor && {backgroundColor: props.backgroundColor},
-      props.style,
-      props.size === 'Small' && styles.containerSmall,
-    ])}
-  >
-    {!!props.icon && <IconAuto color={props.iconColor} sizeType="Small" style={styles.icon} type={props.icon} />}
-    <Text
-      type={typeof props.title === 'number' ? 'BodySmallBold' : 'BodyTinyBold'}
+type Props = BaseProps &
+  (
+    | {variant: 'new' | 'open' | 'reset' | 'revoked'; title?: never; backgroundColor?: never}
+    | {variant?: never; title: string | number; backgroundColor: string}
+  )
+
+// common badge presets, centered so they sit next to text in a row
+const variants = {
+  new: {backgroundColor: Styles.globalColors.orange, title: 'new'},
+  open: {backgroundColor: Styles.globalColors.green, title: 'open'},
+  reset: {backgroundColor: Styles.globalColors.red, title: 'reset'},
+  revoked: {backgroundColor: Styles.globalColors.red, title: 'revoked'},
+} as const
+
+const Meta = (props: Props) => {
+  const title = props.variant ? variants[props.variant].title : props.title
+  const backgroundColor = props.variant ? variants[props.variant].backgroundColor : props.backgroundColor
+  return (
+    <Box2
+      alignSelf={props.variant ? 'center' : 'flex-start'}
+      alignItems="center"
+      direction={props.icon ? 'horizontal' : 'vertical'}
+      gap="xtiny"
+      pointerEvents="none"
       style={Styles.collapseStyles([
-        styles.text,
-        props.color && {color: props.color},
-        props.size === 'Small' && styles.textSmall,
-      ] as const)}
+        styles.container,
+        backgroundColor && {backgroundColor},
+        props.style,
+        props.size === 'Small' && styles.containerSmall,
+      ])}
     >
-      {props.noUppercase || typeof props.title === 'number' ? props.title : props.title.toUpperCase()}
-    </Text>
-  </Box2>
-)
+      {!!props.icon && <IconAuto color={props.iconColor} sizeType="Small" type={props.icon} />}
+      <Text
+        type={typeof title === 'number' ? 'BodySmallBold' : 'BodyTinyBold'}
+        style={Styles.collapseStyles([
+          styles.text,
+          props.color && {color: props.color},
+          props.size === 'Small' && styles.textSmall,
+        ] as const)}
+      >
+        {props.noUppercase || typeof title === 'number' ? title : title.toUpperCase()}
+      </Text>
+    </Box2>
+  )
+}
 
 const styles = Styles.styleSheetCreate(() => ({
   container: {
@@ -50,9 +67,6 @@ const styles = Styles.styleSheetCreate(() => ({
   containerSmall: {
     ...Styles.paddingH(2),
   },
-  icon: {
-    paddingRight: Styles.globalMargins.xtiny,
-  },
   text: Styles.platformStyles({
     common: {
       color: Styles.globalColors.white,
diff --git a/shared/common-adapters/name-with-icon.tsx b/shared/common-adapters/name-with-icon.tsx
index a948f1ed3cab..c85aa3927676 100644
--- a/shared/common-adapters/name-with-icon.tsx
+++ b/shared/common-adapters/name-with-icon.tsx
@@ -229,23 +229,19 @@ export const NameWithIcon = (props: NameWithIconProps) => {
     </>
   )
 
+  const boxProps = {
+    alignItems: 'center',
+    direction: props.horizontal ? 'horizontal' : 'vertical',
+    style: containerStyle,
+  } as const
+
+  // ClickableBox only when clickable: it renders Pressable/clickable-box2 with different semantics
   return _onClickWrapper ? (
-    <ClickableBox
-      onClick={e => e && _onClickWrapper(e)}
-      direction={props.horizontal ? 'horizontal' : 'vertical'}
-      alignItems="center"
-      style={containerStyle}
-    >
+    <ClickableBox {...boxProps} onClick={e => e && _onClickWrapper(e)}>
       {children}
     </ClickableBox>
   ) : (
-    <Box2
-      direction={props.horizontal ? 'horizontal' : 'vertical'}
-      alignItems="center"
-      style={containerStyle}
-    >
-      {children}
-    </Box2>
+    <Box2 {...boxProps}>{children}</Box2>
   )
 }
 
diff --git a/shared/common-adapters/phone-input.tsx b/shared/common-adapters/phone-input.tsx
index 8b8a0a1a613f..16d7af7cda28 100644
--- a/shared/common-adapters/phone-input.tsx
+++ b/shared/common-adapters/phone-input.tsx
@@ -393,8 +393,9 @@ const PhoneInput = (p: Props) => {
     return (
       <Kb.Box2
         direction={isSmall ? 'horizontal' : 'vertical'}
+        fullWidth={true}
         style={Styles.collapseStyles([
-          isSmall ? styles.containerSmall : styles.containerBig,
+          isSmall ? styles.containerSmall : undefined,
           styles.containerLoading,
         ])}
       >
@@ -512,7 +513,7 @@ const PhoneInput = (p: Props) => {
       return (
         <Kb.Text
           type="BodySemibold"
-          style={Styles.collapseStyles([styles.countrySelector, styles.countrySelectorBig])}
+          style={styles.countrySelectorBig}
         >
           {!country
             ? !prefix
@@ -525,12 +526,8 @@ const PhoneInput = (p: Props) => {
 
     return (
       <>
-        <Kb.Text type="Body" style={styles.countrySelector}>
-          {getCountryEmoji(country)}
-        </Kb.Text>
-        <Kb.Text type="BodySemibold" style={styles.countrySelector}>
-          {'+' + String(prefix)}
-        </Kb.Text>
+        <Kb.Text type="Body">{getCountryEmoji(country)}</Kb.Text>
+        <Kb.Text type="BodySemibold">{'+' + String(prefix)}</Kb.Text>
       </>
     )
   }
@@ -538,8 +535,9 @@ const PhoneInput = (p: Props) => {
   return (
     <Kb.Box2
       direction={isSmall ? 'horizontal' : 'vertical'}
+      fullWidth={true}
       style={Styles.collapseStyles([
-        isSmall ? styles.containerSmall : styles.containerBig,
+        isSmall ? styles.containerSmall : undefined,
         isSmall && focused && styles.highlight,
       ])}
     >
@@ -553,8 +551,9 @@ const PhoneInput = (p: Props) => {
         <Kb.ClickableBox
           onClick={toggleShowingMenu}
           direction="horizontal"
+          fullWidth={!isSmall}
           style={Styles.collapseStyles([
-            isSmall ? styles.fullWidthDesktopOnly : styles.fullWidth,
+            isSmall && styles.fullWidthDesktopOnly,
             styles.countrySelectorContainer,
           ])}
           alignItems="center"
@@ -651,21 +650,14 @@ const styles = Styles.styleSheetCreate(
       clearIcon: {
         marginRight: Styles.globalMargins.tiny,
       },
-      containerBig: {
-        width: '100%',
-      },
       containerLoading: {
         ...Styles.centered(),
         display: 'flex',
       },
       containerSmall: {
+        ...Styles.border(Styles.globalColors.black_10, 1, Styles.borderRadius),
         backgroundColor: Styles.globalColors.white,
-        borderColor: Styles.globalColors.black_10,
-        borderRadius: Styles.borderRadius,
-        borderStyle: 'solid',
-        borderWidth: 1,
         height: 38,
-        width: '100%',
       },
       countryLayout: {
         maxHeight: 200,
@@ -682,7 +674,6 @@ const styles = Styles.styleSheetCreate(
           ...Styles.paddingV(0),
         },
       }),
-      countrySelector: {marginRight: Styles.globalMargins.xtiny},
       countrySelectorBig: {
         flexGrow: 1,
       },
@@ -697,14 +688,10 @@ const styles = Styles.styleSheetCreate(
         marginBottom: Styles.globalMargins.tiny,
       },
       fakeInputBig: {
+        ...Styles.border(Styles.globalColors.black_10, 1, Styles.borderRadius),
         backgroundColor: Styles.globalColors.white,
-        borderColor: Styles.globalColors.black_10,
-        borderRadius: Styles.borderRadius,
-        borderStyle: 'solid',
-        borderWidth: 1,
         height: 48,
       },
-      fullWidth: {width: '100%'},
       fullWidthDesktopOnly: Styles.platformStyles({isElectron: {width: '100%'}}),
       highlight: {borderColor: Styles.globalColors.blue, borderWidth: 1},
       menuItem: {
diff --git a/shared/common-adapters/popup/bottom-sheet.tsx b/shared/common-adapters/popup/bottom-sheet.tsx
index e7cb6d3c0985..b8f4d8c6cd56 100644
--- a/shared/common-adapters/popup/bottom-sheet.tsx
+++ b/shared/common-adapters/popup/bottom-sheet.tsx
@@ -1,17 +1,15 @@
 import * as React from 'react'
-import type {BottomSheetModalProps, BottomSheetBackdropProps, BottomSheetHandleProps} from '@gorhom/bottom-sheet'
+import type {BottomSheetModalProps, BottomSheetBackdropProps} from '@gorhom/bottom-sheet'
 import * as _gorhomRaw from '@gorhom/bottom-sheet'
 
 type NativeMethods = {present: () => void; forceClose: () => void}
 type BackdropProps = BottomSheetBackdropProps & {disappearsOnIndex?: number; appearsOnIndex?: number; opacity?: number}
-type HandleProps = BottomSheetHandleProps & {style?: object; indicatorStyle?: object; children?: React.ReactNode}
 type ScrollViewProps = {style?: object; children?: React.ReactNode}
 type GorhomModule = {
   BottomSheetModal: React.ForwardRefExoticComponent<BottomSheetModalProps & React.RefAttributes<NativeMethods>>
   BottomSheetView: React.ComponentType<{children?: React.ReactNode}>
   BottomSheetBackdrop: React.ComponentType<BackdropProps>
   BottomSheetScrollView: React.ComponentType<ScrollViewProps>
-  BottomSheetHandle: React.ComponentType<HandleProps>
 }
 
 const _gorhom: GorhomModule | null = isMobile ? (_gorhomRaw as unknown as GorhomModule) : null
@@ -59,10 +57,4 @@ export const BottomSheetScrollView = (_p: ScrollViewProps) => {
   return <NativeScrollView {..._p} />
 }
 
-export const BottomSheetHandle = (_p: HandleProps) => {
-  if (!isMobile) return null
-  const {BottomSheetHandle: NativeHandle} = _gorhom!
-  return <NativeHandle {..._p} />
-}
-
 export type {BottomSheetBackdropProps} from '@gorhom/bottom-sheet'
diff --git a/shared/common-adapters/popup/index.tsx b/shared/common-adapters/popup/index.tsx
index be988606d2af..28e66b945488 100644
--- a/shared/common-adapters/popup/index.tsx
+++ b/shared/common-adapters/popup/index.tsx
@@ -3,7 +3,6 @@ import * as Styles from '@/styles'
 import {Box2} from '../box'
 import FloatingBox from './floating-box'
 import {EscapeHandler} from '../key-event-handler'
-import {Keyboard} from 'react-native'
 import {Portal} from '../portal'
 import {
   BottomSheetModal,
@@ -52,30 +51,9 @@ function DesktopPopupPositioned(props: PopupProps) {
   )
 }
 
-function NativePopupPositioned(props: PopupProps) {
-  const {hideKeyboard, children, containerStyle} = props
-  const [lastHK, setLastHK] = React.useState(hideKeyboard)
-  if (lastHK !== hideKeyboard) {
-    setLastHK(hideKeyboard)
-    if (hideKeyboard) {
-      Keyboard.dismiss()
-    }
-  }
-  return (
-    <Portal hostName="popup-root">
-      <Box2
-        direction="vertical"
-        pointerEvents="box-none"
-        style={Styles.collapseStyles([Styles.globalStyles.fillAbsolute, containerStyle])}
-      >
-        {children}
-      </Box2>
-    </Portal>
-  )
-}
-
 function PopupPositioned(props: PopupProps) {
-  return isMobile ? <NativePopupPositioned {...props} /> : <DesktopPopupPositioned {...props} />
+  // on mobile FloatingBox is the same portal + keyboard-dismiss overlay this needs
+  return isMobile ? <FloatingBox {...props} /> : <DesktopPopupPositioned {...props} />
 }
 
 function PopupCentered(props: PopupProps) {
@@ -84,6 +62,7 @@ function PopupCentered(props: PopupProps) {
     <EscapeHandler onESC={props.onHidden ?? (() => {})}>
       <Box2
         direction="vertical"
+        centerChildren={true}
         style={Styles.collapseStyles([desktopStyles.cover, props.style])}
         onMouseUp={() => {
           if (mouseDownOnCover) {
@@ -95,7 +74,7 @@ function PopupCentered(props: PopupProps) {
         }}
       >
         <Box2
-          direction="vertical"
+          direction="horizontal"
           relative={true}
           style={desktopStyles.centeredContainer}
           onMouseDown={(e: React.BaseSyntheticEvent) => {
@@ -169,7 +148,6 @@ function Popup(props: PopupProps) {
 
 const desktopStyles = Styles.styleSheetCreate(() => ({
   centeredContainer: {
-    ...Styles.globalStyles.flexBoxRow,
     maxHeight: '100%',
     maxWidth: '100%',
   },
@@ -185,9 +163,7 @@ const desktopStyles = Styles.styleSheetCreate(() => ({
     },
   }),
   cover: {
-    ...Styles.globalStyles.flexBoxColumn,
     ...Styles.globalStyles.fillAbsolute,
-    ...Styles.centered(),
     alignSelf: 'stretch',
     ...Styles.padding(Styles.globalMargins.large, Styles.globalMargins.large, Styles.globalMargins.small),
   },
diff --git a/shared/common-adapters/profile-card.tsx b/shared/common-adapters/profile-card.tsx
index b4aae27e9050..054bcfc65c42 100644
--- a/shared/common-adapters/profile-card.tsx
+++ b/shared/common-adapters/profile-card.tsx
@@ -15,7 +15,7 @@ import {useCurrentUserState} from '@/stores/current-user'
 import ProgressIndicator from './progress-indicator'
 import Text from './text'
 import WithTooltip from './with-tooltip'
-import DelayedMounting from './delayed-mounting'
+import {useTimeout} from './use-timers'
 import {type default as FollowButtonType} from '../profile/user/actions/follow-button'
 import type ChatButtonType from '../chat/chat-button'
 import type {MeasureRef} from './measure-ref'
@@ -25,6 +25,13 @@ import {noAssertion} from '@/tracker/model'
 
 const positionFallbacks = ['top center', 'bottom center'] as const
 
+const DelayedMounting = (props: {delay: number; children: React.ReactNode}) => {
+  const [showing, setShowing] = React.useState(false)
+  const setShowingTrue = useTimeout(() => setShowing(true), props.delay)
+  React.useEffect(setShowingTrue, [setShowingTrue])
+  return <>{showing && props.children}</>
+}
+
 const Kb = {
   Box2,
   ClickableBox,
diff --git a/shared/common-adapters/radio-button.css b/shared/common-adapters/radio-button.css
index 8c62b8b76c67..87e16cabb638 100644
--- a/shared/common-adapters/radio-button.css
+++ b/shared/common-adapters/radio-button.css
@@ -4,7 +4,6 @@
   border: solid 1px var(--color-black_20);
   flex: none;
   height: 14px;
-  margin-right: 8px;
   position: relative;
   width: 14px;
   opacity: 1;
diff --git a/shared/common-adapters/radio-button.tsx b/shared/common-adapters/radio-button.tsx
index 316a4d9034f9..c079e689d1d3 100644
--- a/shared/common-adapters/radio-button.tsx
+++ b/shared/common-adapters/radio-button.tsx
@@ -18,8 +18,7 @@ const Kb = {
   Text,
 }
 
-export const RADIOBUTTON_SIZE = 22
-export const RADIOBUTTON_MARGIN = 8
+const RADIOBUTTON_SIZE = 22
 
 const RadioButton = ({disabled, label, onSelect, selected, style}: Props) => {
   if (!isMobile) {
@@ -41,6 +40,7 @@ const RadioButton = ({disabled, label, onSelect, selected, style}: Props) => {
     <Kb.ClickableBox
       direction="horizontal"
       alignItems="center"
+      gap="tiny"
       style={Styles.collapseStyles([nativeStyles.container, style])}
       onClick={disabled ? undefined : () => onSelect(!selected)}
     >
@@ -75,6 +75,7 @@ const desktopStyles = Styles.styleSheetCreate(() => ({
   container: {
     ...Styles.globalStyles.flexBoxRow,
     alignItems: 'center',
+    gap: 8,
   },
   radio: Styles.platformStyles({
     isElectron: {
@@ -106,13 +107,11 @@ const nativeStyles = Styles.styleSheetCreate(
         top: 5,
       },
       outer: {
+        ...Styles.size(RADIOBUTTON_SIZE),
         backgroundColor: Styles.globalColors.white,
         borderRadius: 100,
         borderWidth: 1,
-        height: RADIOBUTTON_SIZE,
-        marginRight: RADIOBUTTON_MARGIN,
         position: 'relative' as const,
-        width: RADIOBUTTON_SIZE,
       },
     }) as const
 )
diff --git a/shared/common-adapters/safe-area-view.tsx b/shared/common-adapters/safe-area-view.tsx
index e55c90a52d32..91ae55b18e37 100644
--- a/shared/common-adapters/safe-area-view.tsx
+++ b/shared/common-adapters/safe-area-view.tsx
@@ -20,19 +20,18 @@ const SafeAreaViewTopNative = (p: Props) => {
   )
 }
 
-const SafeAreaViewTopDesktop = (props: Props): React.ReactNode => props.children ?? null
+// desktop has no insets; both exports pass children straight through
+const PassThrough = (props: Props): React.ReactNode => props.children ?? null
 
 const nativeStyles = Styles.styleSheetCreate(() => ({
   topSafeArea: {backgroundColor: Styles.globalColors.white, flexGrow: 0},
 }))
 
-export const SafeAreaViewTop = isMobile ? SafeAreaViewTopNative : SafeAreaViewTopDesktop
+export const SafeAreaViewTop = isMobile ? SafeAreaViewTopNative : PassThrough
 
 const desktopInsets = {bottom: 0, left: 0, right: 0, top: 0}
 export const useSafeAreaInsets = isMobile
   ? useSafeAreaInsetsNative
   : () => desktopInsets
 
-const DesktopSafeAreaView = (props: Props): React.ReactNode => props.children ?? null
-
-export default isMobile ? SafeAreaView : DesktopSafeAreaView
+export default isMobile ? SafeAreaView : PassThrough
diff --git a/shared/common-adapters/scroll-view.tsx b/shared/common-adapters/scroll-view.tsx
index 7a3b86ffb44f..0cd7008bba00 100644
--- a/shared/common-adapters/scroll-view.tsx
+++ b/shared/common-adapters/scroll-view.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as Styles from '@/styles'
-import {ScrollView as NativeScrollView} from 'react-native'
+import {RefreshControl, ScrollView as NativeScrollView} from 'react-native'
 import type {ScrollViewProps, RefreshControlProps, GestureResponderEvent} from 'react-native'
 import type {StylesCrossPlatform} from '@/styles'
 
@@ -43,6 +43,9 @@ type Props = {
   horizontal?: boolean
   snapToInterval?: number
   refreshControl?: React.ReactElement<RefreshControlProps>
+  // convenience for pull-to-refresh, mobile only. Ignored if refreshControl is passed
+  onRefresh?: () => void
+  refreshing?: boolean
   onTouchStart?: (e: GestureResponderEvent) => void
   onTouchEnd?: (e: GestureResponderEvent) => void
   testID?: string
@@ -54,7 +57,7 @@ type DivScrollable = {
 }
 
 function ScrollView(props: Props) {
-  const {ref: outerRef, ...rest} = props
+  const {ref: outerRef, onRefresh, refreshing, ...rest} = props
 
   const divRef = React.useRef<DivScrollable | null>(null)
   const innerRef = React.useRef<NativeScrollView | null>(null)
@@ -103,6 +106,9 @@ function ScrollView(props: Props) {
   }
 
   const nativeProps = rest as ScrollViewProps
+  const refreshControl =
+    nativeProps.refreshControl ??
+    (onRefresh ? <RefreshControl refreshing={!!refreshing} onRefresh={onRefresh} /> : undefined)
   const keyboardShouldPersistTaps = nativeProps.keyboardShouldPersistTaps ?? 'handled'
   const contentInsetAdjustmentBehavior =
     nativeProps.contentInsetAdjustmentBehavior ?? 'automatic'
@@ -110,6 +116,7 @@ function ScrollView(props: Props) {
     <NativeScrollView
       ref={innerRef}
       {...nativeProps}
+      refreshControl={refreshControl}
       contentInsetAdjustmentBehavior={contentInsetAdjustmentBehavior}
       keyboardShouldPersistTaps={keyboardShouldPersistTaps}
       overScrollMode="never"
diff --git a/shared/common-adapters/section-divider.tsx b/shared/common-adapters/section-divider.tsx
index ddbfafeceda4..3ae30a0c11c8 100644
--- a/shared/common-adapters/section-divider.tsx
+++ b/shared/common-adapters/section-divider.tsx
@@ -22,8 +22,15 @@ type Props = {
 
 const SectionDivider = (props: Props) => {
   const collapsible = props.collapsed === true || props.collapsed === false
+  const boxProps = {
+    alignItems: 'center',
+    direction: 'horizontal',
+    fullWidth: true,
+    gap: 'xtiny',
+    style: styles.container,
+  } as const
   const children = (
-    <Kb.Box2 direction="horizontal" gap="xtiny" alignItems="center" fullWidth={true} style={styles.container}>
+    <>
       {typeof props.label === 'string' ? (
         <Kb.Text type="BodySmallSemibold">{props.label}</Kb.Text>
       ) : (
@@ -37,14 +44,14 @@ const SectionDivider = (props: Props) => {
         />
       )}
       {props.showSpinner && <Kb.ProgressIndicator style={styles.progress} />}
-    </Kb.Box2>
+    </>
   )
   return collapsible ? (
-    <Kb.ClickableBox onClick={props.onToggleCollapsed} direction="horizontal" fullWidth={true}>
+    <Kb.ClickableBox {...boxProps} onClick={props.onToggleCollapsed}>
       {children}
     </Kb.ClickableBox>
   ) : (
-    children
+    <Kb.Box2 {...boxProps}>{children}</Kb.Box2>
   )
 }
 const height = isMobile ? 40 : 32
diff --git a/shared/common-adapters/section-list.tsx b/shared/common-adapters/section-list.tsx
index d0f2dc9bfbda..dcbf8f042f6a 100644
--- a/shared/common-adapters/section-list.tsx
+++ b/shared/common-adapters/section-list.tsx
@@ -96,7 +96,7 @@ interface SectionFooter {
 
 type ListElement = SectionHeader | Row | SectionFooter
 
-export interface Parameters<ItemT> {
+interface Parameters<ItemT> {
   getItemHeight: (rowData: ItemT | undefined, sectionIndex: number, rowIndex: number) => number
   getSeparatorHeight?: (sectionIndex: number, rowIndex: number) => number
   getSectionHeaderHeight?: (sectionIndex: number) => number
diff --git a/shared/common-adapters/swipeable-row.native.tsx b/shared/common-adapters/swipeable-row.native.tsx
index b7423669facc..cc4eff674e92 100644
--- a/shared/common-adapters/swipeable-row.native.tsx
+++ b/shared/common-adapters/swipeable-row.native.tsx
@@ -1,22 +1,8 @@
 import * as React from 'react'
 import * as Styles from '@/styles'
 import {Animated, PanResponder, View, type GestureResponderEvent, type PanResponderGestureState, type ViewStyle} from 'react-native'
-
-export type SwipeableMethods = {
-  close: () => void
-  reset: () => void
-}
-
-type Props = {
-  children?: React.ReactNode
-  renderRightActions?: (
-    progress: Animated.AnimatedDivision<number>,
-    translation: Animated.Value
-  ) => React.ReactNode
-  onSwipeableOpenStartDrag?: () => void
-  onSwipeableWillOpen?: (direction: 'left') => void
-  containerStyle?: ViewStyle
-}
+import type {Props, SwipeableMethods} from './swipeable-row.shared'
+export type {SwipeableMethods} from './swipeable-row.shared'
 
 const springConfig = {friction: 20, tension: 150, useNativeDriver: false} as const
 
diff --git a/shared/common-adapters/swipeable-row.shared.tsx b/shared/common-adapters/swipeable-row.shared.tsx
new file mode 100644
index 000000000000..844e4b662fd7
--- /dev/null
+++ b/shared/common-adapters/swipeable-row.shared.tsx
@@ -0,0 +1,18 @@
+import type * as React from 'react'
+import type {Animated, ViewStyle} from 'react-native'
+
+export type SwipeableMethods = {
+  close: () => void
+  reset: () => void
+}
+
+export type Props = {
+  children?: React.ReactNode
+  renderRightActions?: (
+    progress: Animated.AnimatedDivision<number>,
+    translation: Animated.Value
+  ) => React.ReactNode
+  onSwipeableOpenStartDrag?: () => void
+  onSwipeableWillOpen?: (direction: 'left') => void
+  containerStyle?: ViewStyle
+}
diff --git a/shared/common-adapters/swipeable-row.tsx b/shared/common-adapters/swipeable-row.tsx
index cda27dab3a88..0081e63998eb 100644
--- a/shared/common-adapters/swipeable-row.tsx
+++ b/shared/common-adapters/swipeable-row.tsx
@@ -1,21 +1,6 @@
 import type * as React from 'react'
-import type {Animated} from 'react-native'
-
-export type SwipeableMethods = {
-  close: () => void
-  reset: () => void
-}
-
-type Props = {
-  children?: React.ReactNode
-  renderRightActions?: (
-    progress: Animated.AnimatedDivision<number>,
-    translation: Animated.Value
-  ) => React.ReactNode
-  onSwipeableOpenStartDrag?: () => void
-  onSwipeableWillOpen?: (direction: 'left') => void
-  containerStyle?: object
-}
+import type {Props, SwipeableMethods} from './swipeable-row.shared'
+export type {SwipeableMethods} from './swipeable-row.shared'
 
 const SwipeableRow = (_p: Props & {ref?: React.Ref<SwipeableMethods>}) => null
 export default SwipeableRow
diff --git a/shared/common-adapters/switch.tsx b/shared/common-adapters/switch.tsx
index dad7d59fbc09..0cabff85362d 100644
--- a/shared/common-adapters/switch.tsx
+++ b/shared/common-adapters/switch.tsx
@@ -44,11 +44,13 @@ const LabelContainer = (props: Props) =>
       {props.children}
     </Kb.WithTooltip>
   ) : (
-    <Kb.Box2 direction="vertical" style={styles.labelContainer}>
-      <Kb.ClickableBox onClick={props.allowLabelClick ? props.onClick : undefined} direction="vertical">
-        {props.children}
-      </Kb.ClickableBox>
-    </Kb.Box2>
+    <Kb.ClickableBox
+      onClick={props.allowLabelClick ? props.onClick : undefined}
+      direction="vertical"
+      style={styles.labelContainer}
+    >
+      {props.children}
+    </Kb.ClickableBox>
   )
 
 const getStyle = (props: Props) =>
diff --git a/shared/common-adapters/tabs.tsx b/shared/common-adapters/tabs.tsx
index e6e4022e23e1..8b64c14824c1 100644
--- a/shared/common-adapters/tabs.tsx
+++ b/shared/common-adapters/tabs.tsx
@@ -79,6 +79,12 @@ const Tabs = <TitleT extends string>(props: Props<TitleT>) => (
   </Kb.Box2>
 )
 
+const dividerBase = {
+  ...Styles.globalStyles.flexBoxRow,
+  minHeight: 2,
+  width: '100%',
+} as const
+
 const styles = Styles.styleSheetCreate(() => ({
   badge: Styles.platformStyles({
     isElectron: {
@@ -94,16 +100,12 @@ const styles = Styles.styleSheetCreate(() => ({
     maxHeight: isMobile ? 48 : 40,
   },
   divider: {
-    ...Styles.globalStyles.flexBoxRow,
+    ...dividerBase,
     backgroundColor: Styles.globalColors.transparent,
-    minHeight: 2,
-    width: '100%',
   },
   dividerSelected: {
-    ...Styles.globalStyles.flexBoxRow,
+    ...dividerBase,
     backgroundColor: Styles.globalColors.blue,
-    minHeight: 2,
-    width: '100%',
   },
   icon: {
     alignSelf: 'center',
diff --git a/shared/common-adapters/text.shared.tsx b/shared/common-adapters/text.shared.tsx
index ffef9c45f6a2..68425c546993 100644
--- a/shared/common-adapters/text.shared.tsx
+++ b/shared/common-adapters/text.shared.tsx
@@ -36,7 +36,7 @@ const _allTextTypes = {
   BodyTinySemibold: 'BodyTinySemibold',
   BodyTinySemiboldItalic: 'BodyTinySemiboldItalic',
   BodyTinyBold: 'BodyTinyBold',
-  BodyTinyExtrabold: 'BodyTinyBold',
+  BodyTinyExtrabold: 'BodyTinyExtrabold',
   Header: 'Header',
   HeaderItalic: 'HeaderItalic',
   HeaderExtrabold: 'HeaderExtrabold',
diff --git a/shared/common-adapters/toast.tsx b/shared/common-adapters/toast.tsx
index 205f6cb7715c..d08c0372dbf7 100644
--- a/shared/common-adapters/toast.tsx
+++ b/shared/common-adapters/toast.tsx
@@ -142,7 +142,7 @@ const Toast = (props: Props) => {
 
   return shouldRender ? (
     <Kb.Popup>
-      <Kb.Box2 direction="vertical" pointerEvents="none" alignItems="center" justifyContent="center" style={nativeStyles.wrapper}>
+      <Kb.Box2 direction="vertical" pointerEvents="none" centerChildren={true} style={Styles.globalStyles.fillAbsolute}>
         <NativeAnimated.View
           style={[
             Styles.collapseStyles([
@@ -195,7 +195,4 @@ const nativeStyles = Styles.styleSheetCreate(() => ({
     overflow: 'hidden',
     ...Styles.padding(Styles.globalMargins.xtiny, Styles.globalMargins.tiny),
   },
-  wrapper: {
-    ...Styles.globalStyles.fillAbsolute,
-  },
 }))
diff --git a/shared/common-adapters/video.tsx b/shared/common-adapters/video.tsx
index 9e94191d4fa3..e15ac9bc4429 100644
--- a/shared/common-adapters/video.tsx
+++ b/shared/common-adapters/video.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as Styles from '@/styles'
+import {normalizeFilePathURL} from '@/util/file-url'
 import {Box2} from './box'
 import Text from './text'
 import {StatusBar} from 'react-native'
@@ -67,22 +68,6 @@ const useCheckURL = (children: React.ReactElement, url: string, allowFile?: bool
   )
 }
 
-// Desktop: normalize file paths to file:// URLs
-const normalizeURL = (url: string) => {
-  const isWindowsPath = /^[a-zA-Z]:[\\/]/.test(url)
-  if (url.startsWith('/') || isWindowsPath) {
-    let path = url.replace(/\\/g, '/')
-    if (isWindowsPath && !path.startsWith('/')) {
-      path = '/' + path
-    }
-    return encodeURI(`file://${path}`).replace(/#/g, '%23')
-  }
-  if (url.startsWith('file://') && (url.includes(' ') || url.includes('#'))) {
-    return encodeURI(url).replace(/#/g, '%23')
-  }
-  return url
-}
-
 // Stub type for desktop video element (avoids dom lib dependency in native tsconfig)
 type VideoElementRef = {
   paused?: boolean
@@ -120,7 +105,7 @@ const DesktopVideo = (props: Props) => {
     }
   }
 
-  const url = normalizeURL(props.url)
+  const url = normalizeFilePathURL(props.url)
   const content = (
     <div style={Styles.castStyleDesktop(Styles.collapseStyles([styles.container, props.style]))}>
       <video
diff --git a/shared/common-adapters/with-tooltip.tsx b/shared/common-adapters/with-tooltip.tsx
index 42cc23491850..d4722a67af9b 100644
--- a/shared/common-adapters/with-tooltip.tsx
+++ b/shared/common-adapters/with-tooltip.tsx
@@ -100,8 +100,7 @@ function WithTooltip(p: Props) {
         <Kb.Box2
           direction="vertical"
           alignSelf="stretch"
-          alignItems="center"
-          justifyContent="center"
+          centerChildren={true}
           style={containerStyle}
           ref={popupAnchor}
           onMouseOver={IGNORE_FOR_PROFILING ? undefined : onMouseEnter}
diff --git a/shared/common-adapters/zoomable-image.tsx b/shared/common-adapters/zoomable-image.tsx
index cc540469ec46..0440269e0106 100644
--- a/shared/common-adapters/zoomable-image.tsx
+++ b/shared/common-adapters/zoomable-image.tsx
@@ -1,5 +1,6 @@
 import * as Styles from '@/styles'
 import * as React from 'react'
+import {normalizeFilePathURL} from '@/util/file-url'
 
 type Props = {
   src: string
@@ -23,22 +24,6 @@ import {useSharedValue, runOnJS} from 'react-native-reanimated'
 import {fitContainer, ResumableZoom, useImageResolution} from '@/util/zoom-toolkit'
 import ImageNative from './image'
 
-// Desktop: normalize file paths to file:// URLs
-const normalizeSrc = (src: string) => {
-  const isWindowsPath = /^[a-zA-Z]:[\\/]/.test(src)
-  if (src.startsWith('/') || isWindowsPath) {
-    let path = src.replace(/\\/g, '/')
-    if (isWindowsPath && !path.startsWith('/')) {
-      path = '/' + path
-    }
-    return encodeURI(`file://${path}`).replace(/#/g, '%23')
-  }
-  if (src.startsWith('file://') && (src.includes(' ') || src.includes('#'))) {
-    return encodeURI(src).replace(/#/g, '%23')
-  }
-  return src
-}
-
 // Stub types to avoid DOM lib dependency in native tsconfig
 type DivRef = {
   getBoundingClientRect: () => {left: number; top: number; width: number; height: number}
@@ -185,7 +170,7 @@ const DesktopZoomableImage = (p: Props) => {
         onError={onError}
         className="fade-anim-enter fade-anim-enter-active"
         ref={imgRef as React.RefObject<HTMLImageElement>}
-        src={src ? normalizeSrc(src) : undefined}
+        src={src ? normalizeFilePathURL(src) : undefined}
         style={imgStyle}
       />
       <Toast visible={showToast} attachTo={containerRef as React.RefObject<never>}>
diff --git a/shared/constants/chat/message.tsx b/shared/constants/chat/message.tsx
index 62519a22807d..110f5ee6e86a 100644
--- a/shared/constants/chat/message.tsx
+++ b/shared/constants/chat/message.tsx
@@ -1213,6 +1213,33 @@ export const uiMessageToMessage = (
   }
 }
 
+export const parseUIMessagesJSON = (
+  conversationIDKey: T.Chat.ConversationIDKey,
+  threadJSON: string,
+  username: string,
+  devicename: string,
+  getLastOrdinal: () => T.Chat.Ordinal,
+  // called as each message is converted, before the next conversion; callers can use it to keep a
+  // running max feeding getLastOrdinal
+  onMessage?: (m: T.Chat.Message) => void
+): {messages: Array<T.Chat.Message>; pagination?: T.RPCChat.UIPagination} => {
+  try {
+    const uiMessages = JSON.parse(threadJSON) as T.RPCChat.UIMessages
+    const messages = (uiMessages.messages ?? []).reduce<Array<T.Chat.Message>>((arr, uiMessage) => {
+      const message = uiMessageToMessage(conversationIDKey, uiMessage, username, getLastOrdinal, devicename)
+      if (message) {
+        arr.push(message)
+        onMessage?.(message)
+      }
+      return arr
+    }, [])
+    return {messages, pagination: uiMessages.pagination ?? undefined}
+  } catch (error) {
+    logger.warn(`parseUIMessagesJSON: failed for ${conversationIDKey}: ${String(error)}`)
+    return {messages: []}
+  }
+}
+
 const assertNever = (_: never) => undefined
 
 function nextFractionalOrdinal(ord: T.Chat.Ordinal) {
diff --git a/shared/constants/chat/meta.test.tsx b/shared/constants/chat/meta.test.tsx
new file mode 100644
index 000000000000..2fc37a009402
--- /dev/null
+++ b/shared/constants/chat/meta.test.tsx
@@ -0,0 +1,208 @@
+/// <reference types="jest" />
+import * as T from '@/constants/types'
+import {
+  getEffectiveRetentionPolicy,
+  inboxUIItemToConversationMeta,
+  unverifiedInboxUIItemToConversationMeta,
+} from './meta'
+
+const commands = {typ: T.RPCChat.ConversationCommandGroupsTyp.none} as T.RPCChat.ConversationCommandGroups
+
+const makeTrustedFixture = (
+  overrides: Partial<T.RPCChat.InboxUIItem> = {}
+): T.RPCChat.InboxUIItem => ({
+  botAliases: {},
+  botCommands: commands,
+  channel: '',
+  commands,
+  convID: 'convIDTeam' as T.RPCChat.ConvIDStr,
+  convRetention: undefined,
+  draft: undefined,
+  finalizeInfo: undefined,
+  headline: 'the headline',
+  headlineDecorated: 'the headline decorated',
+  isDefaultConv: false,
+  isEmpty: false,
+  isPublic: false,
+  maxMsgID: 5 as T.RPCChat.MessageID,
+  maxVisibleMsgID: 5 as T.RPCChat.MessageID,
+  memberStatus: T.RPCChat.ConversationMemberStatus.active,
+  membersType: T.RPCChat.ConversationMembersType.team,
+  name: 'acme',
+  notifications: undefined,
+  participants: undefined,
+  pinnedMsg: undefined,
+  readMsgID: 5 as T.RPCChat.MessageID,
+  resetParticipants: undefined,
+  snippet: 'the snippet',
+  snippetDecorated: 'the snippet decorated',
+  snippetDecoration: T.RPCChat.SnippetDecoration.none,
+  status: T.RPCChat.ConversationStatus.unfiled,
+  supersededBy: undefined,
+  supersedes: undefined,
+  teamRetention: undefined,
+  teamType: T.RPCChat.TeamType.simple,
+  time: 12345,
+  tlfID: 'tlfIDTeam' as T.RPCChat.TLFIDStr,
+  topicType: T.RPCChat.TopicType.chat,
+  version: 1 as T.RPCChat.ConversationVers,
+  localVersion: 1 as T.RPCChat.LocalConversationVers,
+  visibility: T.RPCGen.TLFVisibility.private,
+  ...overrides,
+})
+
+const makeUnverifiedFixture = (
+  overrides: Partial<T.RPCChat.UnverifiedInboxUIItem> = {}
+): T.RPCChat.UnverifiedInboxUIItem => ({
+  commands,
+  convID: 'convIDAdhoc' as T.RPCChat.ConvIDStr,
+  convRetention: undefined,
+  draft: undefined,
+  finalizeInfo: undefined,
+  isDefaultConv: false,
+  isPublic: false,
+  localMetadata: {
+    channelName: '',
+    headline: '',
+    headlineDecorated: '',
+    resetParticipants: undefined,
+    snippet: 'unverified snippet',
+    snippetDecoration: T.RPCChat.SnippetDecoration.none,
+    writerNames: undefined,
+  },
+  maxMsgID: 3 as T.RPCChat.MessageID,
+  maxVisibleMsgID: 3 as T.RPCChat.MessageID,
+  memberStatus: T.RPCChat.ConversationMemberStatus.active,
+  membersType: T.RPCChat.ConversationMembersType.impteamnative,
+  name: 'testuser,testuser-mac',
+  notifications: undefined,
+  readMsgID: 3 as T.RPCChat.MessageID,
+  status: T.RPCChat.ConversationStatus.unfiled,
+  supersededBy: undefined,
+  supersedes: undefined,
+  teamRetention: undefined,
+  teamType: T.RPCChat.TeamType.none,
+  time: 6789,
+  tlfID: 'tlfIDAdhoc' as T.RPCChat.TLFIDStr,
+  topicType: T.RPCChat.TopicType.chat,
+  version: 2 as T.RPCChat.ConversationVers,
+  localVersion: 2 as T.RPCChat.LocalConversationVers,
+  visibility: T.RPCGen.TLFVisibility.private,
+  ...overrides,
+})
+
+describe('meta converters', () => {
+  it('trusted team item maps fields', () => {
+    const meta = inboxUIItemToConversationMeta(makeTrustedFixture())
+    expect(meta?.trustedState).toBe('trusted')
+    expect(meta?.snippet).toBe('the snippet')
+    expect(meta?.channelname).toBe('')
+    expect(meta?.teamname).toBe('acme')
+    expect(meta?.teamType).toBe('small')
+    expect(meta?.resetParticipants).toEqual(new Set())
+    expect(meta?.isMuted).toBe(false)
+    expect(meta?.notificationsDesktop).toBe('never')
+  })
+
+  it('trusted adhoc item with reset participants maps fields', () => {
+    const meta = inboxUIItemToConversationMeta(
+      makeTrustedFixture({
+        channel: 'general',
+        membersType: T.RPCChat.ConversationMembersType.impteamnative,
+        name: 'testuser,testuser-mac',
+        resetParticipants: ['testuser-mac'],
+        teamType: T.RPCChat.TeamType.none,
+      })
+    )
+    expect(meta?.trustedState).toBe('trusted')
+    expect(meta?.teamType).toBe('adhoc')
+    expect(meta?.teamname).toBe('')
+    expect(meta?.channelname).toBe('')
+    expect(meta?.resetParticipants).toEqual(new Set(['testuser-mac']))
+  })
+
+  it('trusted muted item with retention set maps fields', () => {
+    const meta = inboxUIItemToConversationMeta(
+      makeTrustedFixture({
+        convRetention: {retain: {}, typ: T.RPCChat.RetentionPolicyType.retain},
+        status: T.RPCChat.ConversationStatus.muted,
+      })
+    )
+    expect(meta?.isMuted).toBe(true)
+    expect(meta?.retentionPolicy.type).toBe('retain')
+    expect(getEffectiveRetentionPolicy(meta!).type).toBe('retain')
+  })
+
+  it('returns undefined for non-private trusted items', () => {
+    const meta = inboxUIItemToConversationMeta(
+      makeTrustedFixture({visibility: T.RPCGen.TLFVisibility.public})
+    )
+    expect(meta).toBeUndefined()
+  })
+
+  it('unverified item maps fields', () => {
+    const meta = unverifiedInboxUIItemToConversationMeta(makeUnverifiedFixture())
+    expect(meta?.trustedState).toBe('untrusted')
+    expect(meta?.snippet).toBe('unverified snippet')
+    expect(meta?.channelname).toBe('')
+    expect(meta?.teamname).toBe('')
+    expect(meta?.teamType).toBe('adhoc')
+    expect(meta?.resetParticipants).toEqual(new Set())
+    // fields the unverified path must NOT set (trusted-only fields stay defaults)
+    expect(meta?.botAliases).toEqual({})
+    expect(meta?.isEmpty).toBe(false)
+    expect(meta?.pinnedMsg).toBeUndefined()
+    expect(meta?.minWriterRole).toBe('reader')
+  })
+
+  it('unverified team item with reset participants and muted status maps fields', () => {
+    const meta = unverifiedInboxUIItemToConversationMeta(
+      makeUnverifiedFixture({
+        localMetadata: {
+          channelName: 'general',
+          headline: 'headline',
+          headlineDecorated: 'headline decorated',
+          resetParticipants: ['testuser-mac'],
+          snippet: 'team snippet',
+          snippetDecoration: T.RPCChat.SnippetDecoration.none,
+          writerNames: undefined,
+        },
+        membersType: T.RPCChat.ConversationMembersType.team,
+        name: 'acme',
+        status: T.RPCChat.ConversationStatus.muted,
+        teamType: T.RPCChat.TeamType.simple,
+      })
+    )
+    expect(meta?.trustedState).toBe('untrusted')
+    expect(meta?.teamname).toBe('acme')
+    expect(meta?.channelname).toBe('general')
+    expect(meta?.teamType).toBe('small')
+    expect(meta?.isMuted).toBe(true)
+    // team (not impteam) members type never populates resetParticipants
+    expect(meta?.resetParticipants).toEqual(new Set())
+  })
+
+  it('unverified adhoc item with reset participants maps fields', () => {
+    const meta = unverifiedInboxUIItemToConversationMeta(
+      makeUnverifiedFixture({
+        localMetadata: {
+          channelName: '',
+          headline: '',
+          headlineDecorated: '',
+          resetParticipants: ['testuser-mac'],
+          snippet: 'adhoc snippet',
+          snippetDecoration: T.RPCChat.SnippetDecoration.none,
+          writerNames: undefined,
+        },
+      })
+    )
+    expect(meta?.resetParticipants).toEqual(new Set(['testuser-mac']))
+  })
+
+  it('returns undefined for non-private unverified items', () => {
+    const meta = unverifiedInboxUIItemToConversationMeta(
+      makeUnverifiedFixture({visibility: T.RPCGen.TLFVisibility.public})
+    )
+    expect(meta).toBeUndefined()
+  })
+})
diff --git a/shared/constants/chat/meta.tsx b/shared/constants/chat/meta.tsx
index bb4032301d50..2cce8261e78a 100644
--- a/shared/constants/chat/meta.tsx
+++ b/shared/constants/chat/meta.tsx
@@ -6,7 +6,9 @@ import * as Message from './message'
 import {base64ToUint8Array, uint8ArrayToHex} from '@/util/uint8array'
 import {useCurrentUserState} from '@/stores/current-user'
 
-const conversationMemberStatusToMembershipType = (m: T.RPCChat.ConversationMemberStatus) => {
+const conversationMemberStatusToMembershipType = (
+  m: T.RPCChat.ConversationMemberStatus
+): T.Chat.MembershipType => {
   switch (m) {
     case T.RPCChat.ConversationMemberStatus.active:
       return 'active'
@@ -24,51 +26,36 @@ const supersededConversationIDToKey = (id: string | Uint8Array): string => {
   return typeof id === 'string' ? uint8ArrayToHex(base64ToUint8Array(id)) : uint8ArrayToHex(id)
 }
 
-export const unverifiedInboxUIItemToConversationMeta = (
-  i: T.RPCChat.UnverifiedInboxUIItem
-): T.Chat.ConversationMeta | undefined => {
-  // Private chats only
-  if (i.visibility !== T.RPCGen.TLFVisibility.private) {
-    return undefined
-  }
-
-  // Should be impossible
-  if (!i.convID) {
-    return undefined
-  }
+// We only treat implicit adhoc teams as having resetParticipants
+const isImpteamMembersType = (membersType: T.RPCChat.ConversationMembersType) =>
+  membersType === T.RPCChat.ConversationMembersType.impteamnative ||
+  membersType === T.RPCChat.ConversationMembersType.impteamupgrade
 
-  // We only treat implicit adhoc teams as having resetParticipants
+// Shared field mappings between InboxUIItem (trusted) and UnverifiedInboxUIItem.
+// `resetParticipants` is passed in explicitly since its source field differs
+// per type (`i.resetParticipants` vs `i.localMetadata?.resetParticipants`).
+const baseMetaFromUIItem = (
+  i: T.RPCChat.InboxUIItem | T.RPCChat.UnverifiedInboxUIItem,
+  isTeam: boolean,
+  resetParticipantsSource: ReadonlyArray<string> | null | undefined
+) => {
   const resetParticipants: Set<string> = new Set(
-    i.localMetadata &&
-      (i.membersType === T.RPCChat.ConversationMembersType.impteamnative ||
-        i.membersType === T.RPCChat.ConversationMembersType.impteamupgrade) &&
-      i.localMetadata.resetParticipants
-      ? i.localMetadata.resetParticipants
-      : []
+    isImpteamMembersType(i.membersType) && resetParticipantsSource ? resetParticipantsSource : []
   )
 
-  const isTeam = i.membersType === T.RPCChat.ConversationMembersType.team
-  const channelname = isTeam && i.localMetadata ? i.localMetadata.channelName : ''
-
   const supersededBy = conversationMetadataToMetaSupersedeInfo(i.supersededBy ?? undefined)
   const supersedes = conversationMetadataToMetaSupersedeInfo(i.supersedes ?? undefined)
-  const teamname = isTeam ? i.name : ''
   const {retentionPolicy, teamRetentionPolicy} = UIItemToRetentionPolicies(i, isTeam)
 
   const {notificationsDesktop, notificationsGlobalIgnoreMentions, notificationsMobile} =
     parseNotificationSettings(i.notifications ?? undefined)
 
   return {
-    ...makeConversationMeta(),
-    channelname,
     commands: i.commands,
     conversationIDKey: T.Chat.stringToConversationIDKey(i.convID),
-    description: i.localMetadata?.headline || '',
-    descriptionDecorated: i.localMetadata?.headlineDecorated || '',
     draft: i.draft || '',
     inboxLocalVersion: i.localVersion,
     inboxVersion: i.version,
-    isEmpty: false,
     isMuted: i.status === T.RPCChat.ConversationStatus.muted,
     maxMsgID: T.Chat.numberToMessageID(i.maxMsgID),
     maxVisibleMsgID: T.Chat.numberToMessageID(i.maxVisibleMsgID),
@@ -79,23 +66,50 @@ export const unverifiedInboxUIItemToConversationMeta = (
     readMsgID: T.Chat.numberToMessageID(i.readMsgID),
     resetParticipants,
     retentionPolicy,
-    snippet: i.localMetadata ? i.localMetadata.snippet : undefined,
-    snippetDecorated: undefined,
-    snippetDecoration: i.localMetadata ? i.localMetadata.snippetDecoration : T.RPCChat.SnippetDecoration.none,
     status: i.status,
     supersededBy: supersededBy ? T.Chat.stringToConversationIDKey(supersededBy) : T.Chat.noConversationIDKey,
     supersedes: supersedes ? T.Chat.stringToConversationIDKey(supersedes) : T.Chat.noConversationIDKey,
     teamID: i.tlfID,
     teamRetentionPolicy,
     teamType: getTeamType(i),
-    teamname,
     timestamp: i.time,
     tlfname: i.name,
-    trustedState: 'untrusted',
     wasFinalizedBy: i.finalizeInfo ? i.finalizeInfo.resetUser : '',
   }
 }
 
+export const unverifiedInboxUIItemToConversationMeta = (
+  i: T.RPCChat.UnverifiedInboxUIItem
+): T.Chat.ConversationMeta | undefined => {
+  // Private chats only
+  if (i.visibility !== T.RPCGen.TLFVisibility.private) {
+    return undefined
+  }
+
+  // Should be impossible
+  if (!i.convID) {
+    return undefined
+  }
+
+  const isTeam = i.membersType === T.RPCChat.ConversationMembersType.team
+  const channelname = isTeam && i.localMetadata ? i.localMetadata.channelName : ''
+  const teamname = isTeam ? i.name : ''
+
+  return {
+    ...makeConversationMeta(),
+    ...baseMetaFromUIItem(i, isTeam, i.localMetadata?.resetParticipants),
+    channelname,
+    description: i.localMetadata?.headline || '',
+    descriptionDecorated: i.localMetadata?.headlineDecorated || '',
+    isEmpty: false,
+    snippet: i.localMetadata ? i.localMetadata.snippet : undefined,
+    snippetDecorated: undefined,
+    snippetDecoration: i.localMetadata ? i.localMetadata.snippetDecoration : T.RPCChat.SnippetDecoration.none,
+    teamname,
+    trustedState: 'untrusted',
+  }
+}
+
 export const inboxUIItemErrorToConversationMetaAndParticipants = (
   error: T.RPCChat.InboxUIItemError,
   username: string,
@@ -285,23 +299,7 @@ export const inboxUIItemToConversationMeta = (
     return
   }
 
-  // We only treat implied adhoc teams as having resetParticipants
-  const resetParticipants = new Set(
-    (i.membersType === T.RPCChat.ConversationMembersType.impteamnative ||
-      i.membersType === T.RPCChat.ConversationMembersType.impteamupgrade) &&
-      i.resetParticipants
-      ? i.resetParticipants
-      : []
-  )
-
-  const supersededBy = conversationMetadataToMetaSupersedeInfo(i.supersededBy ?? undefined)
-  const supersedes = conversationMetadataToMetaSupersedeInfo(i.supersedes ?? undefined)
-
   const isTeam = i.membersType === T.RPCChat.ConversationMembersType.team
-  const {notificationsDesktop, notificationsGlobalIgnoreMentions, notificationsMobile} =
-    parseNotificationSettings(i.notifications ?? undefined)
-
-  const {retentionPolicy, teamRetentionPolicy} = UIItemToRetentionPolicies(i, isTeam)
 
   const minWriterRoleEnum = i.convSettings?.minWriterRoleInfo
     ? i.convSettings.minWriterRoleInfo.role
@@ -336,44 +334,21 @@ export const inboxUIItemToConversationMeta = (
 
   return {
     ...makeConversationMeta(),
+    ...baseMetaFromUIItem(i, isTeam, i.resetParticipants),
     botAliases: i.botAliases ?? {},
     botCommands: i.botCommands,
     cannotWrite,
     channelname: (isTeam && i.channel) || '',
-    commands: i.commands,
-    conversationIDKey,
     description: i.headline,
     descriptionDecorated: i.headlineDecorated,
-    draft: i.draft || '',
-    inboxLocalVersion: i.localVersion,
-    inboxVersion: i.version,
     isEmpty: i.isEmpty,
-    isMuted: i.status === T.RPCChat.ConversationStatus.muted,
-    maxMsgID: T.Chat.numberToMessageID(i.maxMsgID),
-    maxVisibleMsgID: T.Chat.numberToMessageID(i.maxVisibleMsgID),
-    membershipType: conversationMemberStatusToMembershipType(i.memberStatus),
     minWriterRole,
-    notificationsDesktop,
-    notificationsGlobalIgnoreMentions,
-    notificationsMobile,
     pinnedMsg,
-    readMsgID: T.Chat.numberToMessageID(i.readMsgID),
-    resetParticipants,
-    retentionPolicy,
     snippet: i.snippet,
     snippetDecorated: i.snippetDecorated,
     snippetDecoration: i.snippetDecoration,
-    status: i.status,
-    supersededBy: supersededBy ? T.Chat.stringToConversationIDKey(supersededBy) : T.Chat.noConversationIDKey,
-    supersedes: supersedes ? T.Chat.stringToConversationIDKey(supersedes) : T.Chat.noConversationIDKey,
-    teamID: i.tlfID,
-    teamRetentionPolicy,
-    teamType: getTeamType(i),
     teamname: (isTeam && i.name) || '',
-    timestamp: i.time,
-    tlfname: i.name,
     trustedState: 'trusted',
-    wasFinalizedBy: i.finalizeInfo ? i.finalizeInfo.resetUser : '',
   }
 }
 
diff --git a/shared/constants/init/push-listener.native.tsx b/shared/constants/init/push-listener.native.tsx
index b2dd8e0986d0..599670247142 100644
--- a/shared/constants/init/push-listener.native.tsx
+++ b/shared/constants/init/push-listener.native.tsx
@@ -5,7 +5,9 @@ import {emitDeepLink} from '@/router-v2/linking'
 import {
   getRegistrationToken,
   setApplicationIconBadgeNumber,
-  getNativeEmitter,
+  onPushNotification,
+  onPushToken,
+  onShareData,
   getInitialNotification,
   removeAllPendingNotificationRequests,
 } from 'react-native-kb'
@@ -297,8 +299,6 @@ export const initPushListener = () => {
   })
 
   const listenNative = async () => {
-    const RNEmitter = getNativeEmitter()
-
     // Set up listener immediately, before waiting for token
     // This ensures notifications aren't lost if they arrive before token is ready
     const onNotification = (n: object) => {
@@ -315,20 +315,17 @@ export const initPushListener = () => {
       // Unified push notification handling for both iOS and Android
       // Silent notifications (chat.newmessageSilent_2) are handled entirely natively
       // Other notification types are handled natively first, then emitted to JS via onPushNotification
-      RNEmitter.addListener('onPushNotification', onNotification)
+      onPushNotification(onNotification)
 
       if (isIOS) {
-        RNEmitter.addListener('onPushToken', (payload?: {token?: string}) => {
-          const token = payload?.token
-          if (token) {
-            logger.debug('[PushToken] received token via onPushToken event: ', token)
-            usePushState.getState().dispatch.setPushToken(token)
-          }
+        onPushToken(token => {
+          logger.debug('[PushToken] received token via onPushToken event: ', token)
+          usePushState.getState().dispatch.setPushToken(token)
         })
       }
 
       if (isAndroid) {
-        RNEmitter.addListener('onShareData', (evt: {text?: string; localPaths?: Array<string>}) => {
+        onShareData(evt => {
           const {setAndroidShare} = useConfigState.getState().dispatch
 
           const text = evt.text
diff --git a/shared/constants/init/shared.tsx b/shared/constants/init/shared.tsx
index c946979249da..74ffd817df41 100644
--- a/shared/constants/init/shared.tsx
+++ b/shared/constants/init/shared.tsx
@@ -44,8 +44,8 @@ import {
   onGetInboxUnverifiedConvs,
   onInboxLayoutChanged,
   onIncomingInboxUIItem,
-  syncBadgeState,
 } from '@/chat/inbox/metadata'
+import {syncInboxBadgeState} from '@/chat/inbox/badge-state'
 import {clearSignupEmail} from '@/people/signup-email'
 import {clearSignupDeviceNameDraft} from '@/signup/device-name-draft'
 import {clearNavBadges} from '@/teams/actions'
@@ -346,7 +346,7 @@ export const _onEngineIncoming = (action: EngineGen.Actions) => {
     case 'keybase.1.NotifyBadges.badgeState':
       {
         const {badgeState} = action.payload.params
-        syncBadgeState(badgeState)
+        syncInboxBadgeState(badgeState)
         const {useNotifState} = require('@/stores/notifications') as typeof UseNotificationsStateType
         useNotifState.getState().dispatch.onEngineIncomingImpl(action)
       }
diff --git a/shared/constants/remote-actions.tsx b/shared/constants/remote-actions.tsx
index 0e7128d1b3fa..176427d4368e 100644
--- a/shared/constants/remote-actions.tsx
+++ b/shared/constants/remote-actions.tsx
@@ -18,7 +18,6 @@ export const pinentryOnCancel = 'remote:pinentryOnCancel'
 export const pinentryOnSubmit = 'remote:pinentryOnSubmit'
 export const powerMonitorEvent = 'remote:powerMonitorEvent'
 export const previewConversation = 'remote:previewConversation'
-export const remoteWindowWantsProps = 'remote:remoteWindowWantsProps'
 export const saltpackFileOpen = 'remote:saltpackFileOpen'
 export const setCriticalUpdate = 'remote:setCriticalUpdate'
 export const showMain = 'remote:showMain'
@@ -53,11 +52,6 @@ export const createUpdateWindowState = (payload: {
     y: number
   }
 }) => ({payload, type: updateWindowState}) as const
-/**
- * remote electron window wants props sent
- */
-export const createRemoteWindowWantsProps = (payload: {readonly component: string; readonly param: string}) =>
-  ({payload, type: remoteWindowWantsProps}) as const
 export const createCloseUnlockFolders = (payload?: undefined) =>
   ({payload, type: closeUnlockFolders}) as const
 export const createDumpLogs = (payload: {readonly reason: 'quitting through menu'}) =>
@@ -124,7 +118,6 @@ export type PinentryOnCancelPayload = ReturnType<typeof createPinentryOnCancel>
 export type PinentryOnSubmitPayload = ReturnType<typeof createPinentryOnSubmit>
 export type PowerMonitorEventPayload = ReturnType<typeof createPowerMonitorEvent>
 export type PreviewConversationPayload = ReturnType<typeof createPreviewConversation>
-export type RemoteWindowWantsPropsPayload = ReturnType<typeof createRemoteWindowWantsProps>
 export type SaltpackFileOpenPayload = ReturnType<typeof createSaltpackFileOpen>
 export type SetCriticalUpdatePayload = ReturnType<typeof createSetCriticalUpdate>
 export type ShowMainPayload = ReturnType<typeof createShowMain>
@@ -156,7 +149,6 @@ export type Actions =
   | PinentryOnSubmitPayload
   | PowerMonitorEventPayload
   | PreviewConversationPayload
-  | RemoteWindowWantsPropsPayload
   | SaltpackFileOpenPayload
   | SetCriticalUpdatePayload
   | ShowMainPayload
diff --git a/shared/constants/router.tsx b/shared/constants/router.tsx
index e4ffcd43b477..4cdb3fede4a4 100644
--- a/shared/constants/router.tsx
+++ b/shared/constants/router.tsx
@@ -554,7 +554,7 @@ export const createConversation = (
       const participantInfo = uiParticipantsToParticipantInfo(uiConv.participants ?? [])
       if (participantInfo.all.length > 0) {
         const {participantInfoReceived} = require('@/chat/inbox/metadata') as typeof ChatInboxMetadataType
-        participantInfoReceived(conversationIDKey, participantInfo, meta)
+        participantInfoReceived(conversationIDKey, participantInfo)
       }
 
       navigateToThread(conversationIDKey, 'justCreated', highlightMessageID)
diff --git a/shared/crypto/sub-nav/index.tsx b/shared/crypto/sub-nav/index.tsx
index 3a7571d2a8d6..d7bc231e9215 100644
--- a/shared/crypto/sub-nav/index.tsx
+++ b/shared/crypto/sub-nav/index.tsx
@@ -5,15 +5,9 @@ import * as Kb from '@/common-adapters'
 import * as Common from '@/router-v2/common'
 import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import NavRow from './nav-row'
-import {
-  useNavigationBuilder,
-  TabRouter,
-  createNavigatorFactory,
-} from '@react-navigation/core'
-import type {TypedNavigator, NavigatorTypeBagBase} from '@react-navigation/native'
-import {routeMapToScreenElements} from '@/router-v2/routes'
+import {useNavigationBuilder, TabRouter, createNavigatorFactory} from '@react-navigation/core'
+import {routeMapToStaticScreens} from '@/router-v2/routes'
 import {makeLayout} from '@/router-v2/screen-layout'
-import type {RouteDef, GetOptionsParams} from '@/constants/types/router'
 import {defineRouteMap} from '@/constants/types/router'
 import LeftNav from './left-nav.desktop'
 
@@ -86,35 +80,19 @@ function LeftTabNavigator({
   )
 }
 
-type NavType = NavigatorTypeBagBase & {
-  ParamList: {
-    [key in keyof typeof cryptoSubRoutes]: {}
-  }
-}
+// The factory's static-config call signature is hidden by our custom-navigator typing, so
+// re-surface it with a cast. Screens come from the same route-map converter the root uses.
+const createLeftTabNavigator = createNavigatorFactory(LeftTabNavigator) as unknown as (config: {
+  backBehavior: 'none'
+  initialRouteName: string
+  screens: ReturnType<typeof routeMapToStaticScreens>
+}) => {getComponent: () => React.ComponentType}
 
-const createLeftTabNavigator = createNavigatorFactory(LeftTabNavigator) as unknown as () => TypedNavigator<NavType>
-const TabNavigator = createLeftTabNavigator()
-const makeOptions = (rd: RouteDef) => {
-  return ({route, navigation}: GetOptionsParams) => {
-    const no = rd.getOptions
-    const opt = typeof no === 'function' ? no({navigation, route}) : no
-    return {...opt}
-  }
-}
-const cryptoScreens = routeMapToScreenElements(
-  cryptoSubRoutes,
-  TabNavigator.Screen,
-  makeLayout,
-  makeOptions,
-  false,
-  false,
-  false
-)
-const DesktopCryptoSubNavigator = () => (
-  <TabNavigator.Navigator initialRouteName={Crypto.encryptTab} backBehavior="none">
-    {cryptoScreens}
-  </TabNavigator.Navigator>
-)
+const DesktopCryptoSubNavigator = createLeftTabNavigator({
+  backBehavior: 'none',
+  initialRouteName: Crypto.encryptTab,
+  screens: routeMapToStaticScreens(cryptoSubRoutes, makeLayout, false, false, false),
+}).getComponent()
 
 const NativeCryptoSubNav = () => {
   const {navigate} = C.useNav()
diff --git a/shared/desktop/app/ipc-handlers.desktop.tsx b/shared/desktop/app/ipc-handlers.desktop.tsx
index 0d94e66a83e0..969814e6b9c9 100644
--- a/shared/desktop/app/ipc-handlers.desktop.tsx
+++ b/shared/desktop/app/ipc-handlers.desktop.tsx
@@ -12,6 +12,12 @@ import {isDarwin, isLinux, isWindows, socketPath, fileUIName, dokanPath, windows
 import {ctlQuit} from './ctl.desktop'
 import logger from '@/logger'
 import {htmlURL, preloadPath} from './html-root.desktop'
+import {
+  cacheRemoteProps,
+  getCachedRemoteProps,
+  getRemoteWindow,
+  registerRemoteWindow,
+} from './remote-windows.desktop'
 import * as RPCTypes from '@/constants/rpc/rpc-gen'
 import {ensureError} from '@/util/errors'
 import type {Action} from '../app/ipctypes'
@@ -19,15 +25,7 @@ import type {Engine} from '@/engine'
 import {showDevTools, skipSecondaryDevtools, allowMultipleInstances} from '@/local-debug'
 
 const remoteURL = (windowComponent: string, windowParam: string) =>
-  htmlURL(windowComponent, `param=${windowParam}`)
-
-const findRemoteComponent = (windowComponent: string, windowParam: string) => {
-  const url = remoteURL(windowComponent, windowParam)
-  return Electron.BrowserWindow.getAllWindows().find(w => {
-    const wc = w.webContents
-    return wc.getURL() === url
-  })
-}
+  htmlURL('remote', `component=${windowComponent}&param=${windowParam}`)
 
 const winCheckRPCOwnership = async () => {
   const {env} = KB2.constants
@@ -172,11 +170,6 @@ const openInDefaultDirectory = async (openPath: string) => {
   }
 }
 
-const timeoutPromise = async (timeMs: number) =>
-  new Promise<void>(resolve => {
-    setTimeout(() => resolve(), timeMs)
-  })
-
 export const setupIPCHandlers = (deps: {
   getMainWindow: () => Electron.BrowserWindow | null
   markAppStartedUp: () => void
@@ -523,22 +516,18 @@ export const setupIPCHandlers = (deps: {
         break
       }
       case 'rendererNewProps': {
-        // this can be racy so we try a few
-        let count = 0
-        while (count < 5) {
-          const w = findRemoteComponent(action.payload.windowComponent, action.payload.windowParam)
-          if (w) {
-            w.webContents.send('KBprops', action.payload.propsStr)
-            break
-          } else {
-            await timeoutPromise(500)
-          }
-          ++count
-        }
+        const {windowComponent, windowParam, propsStr} = action.payload
+        // cache so a window that hasn't finished loading can pull these when it's ready
+        cacheRemoteProps(windowComponent, windowParam, propsStr)
+        getRemoteWindow(windowComponent, windowParam)?.webContents.send('KBprops', propsStr)
         break
       }
+      case 'getRemoteProps': {
+        const {windowComponent, windowParam} = action.payload
+        return getCachedRemoteProps(windowComponent, windowParam) ?? ''
+      }
       case 'closeRenderer': {
-        const w = findRemoteComponent(action.payload.windowComponent ?? '', action.payload.windowParam ?? '')
+        const w = getRemoteWindow(action.payload.windowComponent ?? '', action.payload.windowParam ?? '')
         w?.close()
         break
       }
@@ -559,6 +548,7 @@ export const setupIPCHandlers = (deps: {
         }
 
         const remoteWindow = new Electron.BrowserWindow(opts)
+        registerRemoteWindow(action.payload.windowComponent, action.payload.windowParam ?? '', remoteWindow)
 
         remoteWindow.on('show', () => {
           R.remoteDispatch(RemoteGen.createUpdateWindowShown({component: action.payload.windowComponent}))
diff --git a/shared/desktop/app/ipctypes.tsx b/shared/desktop/app/ipctypes.tsx
index 233fa8d77a19..933d7891c419 100644
--- a/shared/desktop/app/ipctypes.tsx
+++ b/shared/desktop/app/ipctypes.tsx
@@ -39,6 +39,13 @@ export type Action =
         windowParam: string
       }
     }
+  | {
+      type: 'getRemoteProps'
+      payload: {
+        windowComponent: string
+        windowParam: string
+      }
+    }
   | {type: 'showMainWindow'}
   | {type: 'showContextMenu'; payload: {url: string}}
   | {type: 'setupPreloadKB2'}
diff --git a/shared/desktop/app/menu-bar.desktop.tsx b/shared/desktop/app/menu-bar.desktop.tsx
index 4624eaeb344b..5a27684b543e 100644
--- a/shared/desktop/app/menu-bar.desktop.tsx
+++ b/shared/desktop/app/menu-bar.desktop.tsx
@@ -8,6 +8,7 @@ import {menubar} from 'menubar'
 import {showDevTools, skipSecondaryDevtools} from '@/local-debug'
 import {getMainWindow} from './main-window.desktop'
 import {htmlURL, preloadPath} from './html-root.desktop'
+import {registerRemoteWindow} from './remote-windows.desktop'
 import path from 'path'
 import type {BadgeType} from '@/stores/notifications'
 
@@ -40,7 +41,7 @@ const getIcons = (iconType: BadgeType, badges: number) => {
   }
 }
 
-const htmlFile = htmlURL('menubar', 'param=menubar')
+const htmlFile = htmlURL('remote', 'component=menubar&param=menubar')
 
 let badgeType: BadgeType = 'regular'
 let badges = 0
@@ -130,20 +131,15 @@ const MenuBar = () => {
   })
 
   mb.on('ready', () => {
+    if (mb.window) {
+      registerRemoteWindow('menubar', 'menubar', mb.window)
+    }
     mb.window?.setVisibleOnAllWorkspaces(true, {visibleOnFullScreen: true, skipTransformProcessType: true})
     mb.window
       ?.loadURL(htmlFile)
       .then(() => {})
       .catch(() => {})
 
-    // ask for an update in case we missed one
-    R.remoteDispatch(
-      RemoteGen.createRemoteWindowWantsProps({
-        component: 'menubar',
-        param: '',
-      })
-    )
-
     mb.tray.setIgnoreDoubleClickEvents(true)
 
     if (showDevTools && !skipSecondaryDevtools) {
diff --git a/shared/desktop/app/remote-windows.desktop.tsx b/shared/desktop/app/remote-windows.desktop.tsx
new file mode 100644
index 000000000000..3687b92bbeff
--- /dev/null
+++ b/shared/desktop/app/remote-windows.desktop.tsx
@@ -0,0 +1,35 @@
+// Registry of remote BrowserWindows and the last props sent to each.
+// The main process is the source of truth: the main window pushes props here,
+// and remote windows pull the cached value when they load (or reload), so no
+// handshake back to the main window is needed.
+import type * as Electron from 'electron'
+
+const windows = new Map<string, Electron.BrowserWindow>()
+const propsCache = new Map<string, string>()
+
+const windowKey = (windowComponent: string, windowParam: string) => `${windowComponent}:${windowParam}`
+
+export const registerRemoteWindow = (
+  windowComponent: string,
+  windowParam: string,
+  win: Electron.BrowserWindow
+) => {
+  const key = windowKey(windowComponent, windowParam)
+  windows.set(key, win)
+  win.on('closed', () => {
+    if (windows.get(key) === win) {
+      windows.delete(key)
+      propsCache.delete(key)
+    }
+  })
+}
+
+export const getRemoteWindow = (windowComponent: string, windowParam: string) =>
+  windows.get(windowKey(windowComponent, windowParam))
+
+export const cacheRemoteProps = (windowComponent: string, windowParam: string, propsStr: string) => {
+  propsCache.set(windowKey(windowComponent, windowParam), propsStr)
+}
+
+export const getCachedRemoteProps = (windowComponent: string, windowParam: string) =>
+  propsCache.get(windowKey(windowComponent, windowParam))
diff --git a/shared/desktop/package.desktop.mts b/shared/desktop/package.desktop.mts
index cce68d6d7a2c..15c99ab92c21 100644
--- a/shared/desktop/package.desktop.mts
+++ b/shared/desktop/package.desktop.mts
@@ -270,7 +270,7 @@ function postPack(appPaths: Array<string>, plat: string, arch: string) {
   }
   const subdir = plat === 'darwin' ? 'Keybase.app/Contents/Resources' : 'resources'
   const dir = path.join(appPaths[0]!, subdir, 'app/desktop/dist')
-  const modules = ['node', 'main', 'tracker', 'menubar', 'unlock-folders', 'pinentry']
+  const modules = ['node', 'main', 'remote']
   const files = [
     ...modules.map(p => p + '.bundle.js'),
     ...modules.filter(p => p !== 'node').map(p => p + '.html'),
diff --git a/shared/desktop/remote/component-loader.desktop.tsx b/shared/desktop/remote/component-loader.desktop.tsx
index 23e17aed8e73..3879a39f0d0a 100644
--- a/shared/desktop/remote/component-loader.desktop.tsx
+++ b/shared/desktop/remote/component-loader.desktop.tsx
@@ -9,7 +9,12 @@ import ErrorBoundary from '@/common-adapters/error-boundary'
 import KB2 from '@/util/electron'
 import {setServiceDecoration} from '@/common-adapters/markdown/react'
 import ServiceDecoration from '@/common-adapters/markdown/service-decoration'
-import {type RemoteComponentName, useRemotePropsReceiver} from './remote-component.desktop'
+import {
+  getRemoteComponentParam,
+  type RemoteComponentName,
+  useRemoteDarkModeSync,
+  useRemotePropsReceiver,
+} from './remote-component.desktop'
 
 setServiceDecoration(ServiceDecoration)
 
@@ -29,6 +34,7 @@ type Props<P> = {
 function RemoteComponentLoader<P>(p: Props<P>) {
   const {Component, component, param, showOnProps} = p
   const value = useRemotePropsReceiver<P>({component, param, showOnProps})
+  useRemoteDarkModeSync(value?.darkMode)
 
   if (!value) return null
 
@@ -66,7 +72,6 @@ const styles = Kb.Styles.styleSheetCreate(
 export default function loadRemoteComponent<P>(options: {
   Component: React.ComponentType<P>
   component: RemoteComponentName
-  param?: string
   style?: Kb.Styles.StylesCrossPlatform
   showOnProps?: boolean
 }) {
@@ -77,7 +82,7 @@ export default function loadRemoteComponent<P>(options: {
       <RemoteComponentLoader<P>
         Component={options.Component}
         component={options.component}
-        param={options.param ?? ''}
+        param={getRemoteComponentParam()}
         style={options.style}
         showOnProps={options.showOnProps ?? true}
       />
diff --git a/shared/desktop/remote/main.desktop.tsx b/shared/desktop/remote/main.desktop.tsx
new file mode 100644
index 000000000000..d51c4aa7f61f
--- /dev/null
+++ b/shared/desktop/remote/main.desktop.tsx
@@ -0,0 +1,32 @@
+// Entry point for all remote render windows. The window's URL says which
+// component to load: remote.html?component=<name>&param=<param>
+import '../renderer/globals.desktop'
+import {waitOnKB2Loaded} from '@/util/electron'
+
+waitOnKB2Loaded(() => {
+  const component = new URLSearchParams(window.location.search).get('component')
+  switch (component) {
+    case 'menubar':
+      import('@/menubar/main2.desktop')
+        .then(() => {})
+        .catch(() => {})
+      break
+    case 'pinentry':
+      import('@/pinentry/main2.desktop')
+        .then(() => {})
+        .catch(() => {})
+      break
+    case 'tracker':
+      import('@/tracker/main2.desktop')
+        .then(() => {})
+        .catch(() => {})
+      break
+    case 'unlock-folders':
+      import('@/unlock-folders/main2.desktop')
+        .then(() => {})
+        .catch(() => {})
+      break
+    default:
+      console.error('remote window loaded with unknown component', component)
+  }
+})
diff --git a/shared/desktop/remote/proxies.desktop.tsx b/shared/desktop/remote/proxies.desktop.tsx
index aab2df6a6134..6c2acc0e8a32 100644
--- a/shared/desktop/remote/proxies.desktop.tsx
+++ b/shared/desktop/remote/proxies.desktop.tsx
@@ -1,17 +1,15 @@
-import * as Kb from '@/common-adapters'
 import RemoteMenubar from '@/menubar/remote-proxy.desktop'
 import RemoteProfile from '@/tracker/remote-proxy.desktop'
 import RemotePinentry from '@/pinentry/remote-proxy.desktop'
 import RemoteUnlockFolders from '@/unlock-folders/remote-proxy.desktop'
 
 const RemoteProxies = () => (
-  <Kb.Box2 direction="vertical" style={style}>
+  <>
     <RemoteMenubar />
     <RemoteProfile />
     <RemotePinentry />
     <RemoteUnlockFolders />
-  </Kb.Box2>
+  </>
 )
 
-const style = {display: 'none' as const}
 export default RemoteProxies
diff --git a/shared/desktop/remote/remote-component.desktop.tsx b/shared/desktop/remote/remote-component.desktop.tsx
index 5104fac159af..938c434770de 100644
--- a/shared/desktop/remote/remote-component.desktop.tsx
+++ b/shared/desktop/remote/remote-component.desktop.tsx
@@ -1,11 +1,9 @@
 import * as React from 'react'
 import logger from '@/logger'
-import * as R from '@/constants/remote'
-import * as RemoteGen from '@/constants/remote-actions'
 import {useDarkModeState} from '@/stores/darkmode'
 import KB2 from '@/util/electron'
 
-const {ipcRendererOn, showInactive} = KB2.functions
+const {getRemoteProps, ipcRendererOn, showInactive} = KB2.functions
 
 export const remoteComponentNames = ['unlock-folders', 'menubar', 'pinentry', 'tracker'] as const
 export type RemoteComponentName = (typeof remoteComponentNames)[number]
@@ -16,56 +14,44 @@ type UseRemotePropsReceiverOptions = {
   showOnProps?: boolean
 }
 
-type RemotePropsReceiverState<P> = {
-  component: RemoteComponentName
-  param: string
-  value: P | null
-}
-
 export const getRemoteComponentParam = () => new URLSearchParams(window!.location.search).get('param') ?? ''
 
-export const useRemoteDarkModeSync = (darkMode: boolean) => {
+// darkMode rides along in the serialized props envelope; undefined until props arrive
+export const useRemoteDarkModeSync = (darkMode?: boolean) => {
   const setSystemDarkMode = useDarkModeState(s => s.dispatch.setSystemDarkMode)
 
   React.useEffect(() => {
-    setSystemDarkMode(darkMode)
+    if (darkMode !== undefined) {
+      setSystemDarkMode(darkMode)
+      // hidden/transparent remote windows don't reliably get prefers-color-scheme
+      // media query updates, so drive the CSS light-dark() resolution explicitly
+      document.documentElement.style.colorScheme = darkMode ? 'dark' : 'light'
+    }
   }, [darkMode, setSystemDarkMode])
 }
 
-export const RemoteDarkModeSync = (p: {children: React.ReactNode; darkMode: boolean}) => {
-  useRemoteDarkModeSync(p.darkMode)
-  return <>{p.children}</>
-}
-
 export const useRemotePropsReceiver = <P,>(options: UseRemotePropsReceiverOptions) => {
   const {component, param, showOnProps = true} = options
-  const [propsState, setPropsState] = React.useState<RemotePropsReceiverState<P>>(() => ({
-    component,
-    param,
-    value: null,
-  }))
-  const currentPropsState =
-    propsState.component === component && propsState.param === param
-      ? propsState
-      : {component, param, value: null}
-  if (currentPropsState !== propsState) {
-    setPropsState(currentPropsState)
-  }
-  const value = currentPropsState.value
+  const [value, setValue] = React.useState<(P & {darkMode: boolean}) | null>(null)
   const hasShownWindow = React.useRef(false)
 
   React.useEffect(() => {
-    hasShownWindow.current = false
-
-    const unsubscribe = ipcRendererOn?.('KBprops', (_event: unknown, raw: unknown) => {
+    const onProps = (raw: string) => {
+      if (!raw) return
       try {
-        setPropsState({component, param, value: JSON.parse(raw as string) as P})
+        setValue(JSON.parse(raw) as P & {darkMode: boolean})
       } catch (error) {
         logger.error('remote props parse failed', component, param, error)
       }
-    })
+    }
 
-    R.remoteDispatch(RemoteGen.createRemoteWindowWantsProps({component, param}))
+    // subscribe before pulling so an update can't slip between the two
+    const unsubscribe = ipcRendererOn?.('KBprops', (_event: unknown, raw: unknown) => {
+      onProps(raw as string)
+    })
+    getRemoteProps?.(component, param)
+      .then(onProps)
+      .catch(() => {})
 
     return () => unsubscribe?.()
   }, [component, param])
diff --git a/shared/desktop/remote/use-serialize-props.desktop.tsx b/shared/desktop/remote/use-serialize-props.desktop.tsx
index 3670bad2f9a5..65c623cb0966 100644
--- a/shared/desktop/remote/use-serialize-props.desktop.tsx
+++ b/shared/desktop/remote/use-serialize-props.desktop.tsx
@@ -1,46 +1,34 @@
-// This hook sends props to a remote window
-// Listens for requests from the main process (which proxies requests from other windows) to kick off an update
+// This hook sends props to a remote window. The main process caches the last
+// value sent per window, so a window that (re)loads pulls the cached props
+// itself and no handshake back to this window is needed.
 import * as React from 'react'
 import * as C from '@/constants'
 import KB2 from '@/util/electron'
-import {useConfigState} from '@/stores/config'
+import {useColorScheme} from 'react-native'
 import type {RemoteComponentName} from './remote-component.desktop'
 
 const {rendererNewProps} = KB2.functions
 
-// set this to true to see details of the serialization process
-const debugSerializer: boolean = __DEV__ && (false as boolean)
-if (debugSerializer) {
-  console.log('\n\n\n\n\n\nDEBUGGING REMOTE SERIALIZER')
-}
-
 export default function useSerializeProps<P extends object>(
   props: P,
   windowComponent: RemoteComponentName,
   windowParam: string
 ) {
   const lastSent = React.useRef('')
-  const lastForceUpdate = React.useRef(-1)
-  const currentForceUpdate = useConfigState(
-    s => s.remoteWindowNeedsProps.get(windowComponent)?.get(windowParam) ?? 0
-  )
-  const propsStr = JSON.stringify(props)
+  const darkMode = useColorScheme() === 'dark'
+  const propsStr = JSON.stringify({...props, darkMode})
 
   const throttledSend = C.useThrottledCallback(
-    (nextPropsStr: string, forceUpdateVersion: number) => {
-      if (nextPropsStr === lastSent.current && forceUpdateVersion === lastForceUpdate.current) return
-      if (debugSerializer) {
-        console.log('[useSerializeProps]: throttled send', nextPropsStr.length)
-      }
+    (nextPropsStr: string) => {
+      if (nextPropsStr === lastSent.current) return
       rendererNewProps?.({propsStr: nextPropsStr, windowComponent, windowParam})
       lastSent.current = nextPropsStr
-      lastForceUpdate.current = forceUpdateVersion
     },
     1000,
     {leading: true}
   )
 
   React.useEffect(() => {
-    throttledSend(propsStr, currentForceUpdate)
-  }, [currentForceUpdate, propsStr, throttledSend])
+    throttledSend(propsStr)
+  }, [propsStr, throttledSend])
 }
diff --git a/shared/desktop/renderer/preload.desktop.tsx b/shared/desktop/renderer/preload.desktop.tsx
index e76e48730c34..4746044e6915 100644
--- a/shared/desktop/renderer/preload.desktop.tsx
+++ b/shared/desktop/renderer/preload.desktop.tsx
@@ -82,6 +82,9 @@ if (isRenderer) {
         getPathForFile: (file: File) => {
           return Electron.webUtils.getPathForFile(file)
         },
+        getRemoteProps: async (windowComponent: string, windowParam: string) => {
+          return invoke<string>({payload: {windowComponent, windowParam}, type: 'getRemoteProps'})
+        },
         getPathType: async (path: string) => {
           return await invoke({
             payload: {path},
diff --git a/shared/desktop/renderer/remote-event-handler.desktop.test.tsx b/shared/desktop/renderer/remote-event-handler.desktop.test.tsx
index 9098035a878e..e2d6d9e53017 100644
--- a/shared/desktop/renderer/remote-event-handler.desktop.test.tsx
+++ b/shared/desktop/renderer/remote-event-handler.desktop.test.tsx
@@ -88,12 +88,13 @@ test('owner handlers stop after unregister', () => {
   expect(listener).not.toHaveBeenCalled()
 })
 
-test('resetAllStores clears registered owner handlers', () => {
+test('owner handlers survive store resets (proxies stay mounted across logout)', () => {
   const listener = jest.fn()
-  registerRemoteActionHandler('tracker', listener)
+  const unregister = registerRemoteActionHandler('tracker', listener)
 
   resetAllStores()
   eventFromRemoteWindows(RemoteGen.createTrackerIgnore({guiID: 'gui-2'}))
 
-  expect(listener).not.toHaveBeenCalled()
+  expect(listener).toHaveBeenCalledWith(RemoteGen.createTrackerIgnore({guiID: 'gui-2'}))
+  unregister()
 })
diff --git a/shared/desktop/renderer/remote-event-handler.desktop.tsx b/shared/desktop/renderer/remote-event-handler.desktop.tsx
index da90aebb720c..9d95fb2a45e1 100644
--- a/shared/desktop/renderer/remote-event-handler.desktop.tsx
+++ b/shared/desktop/renderer/remote-event-handler.desktop.tsx
@@ -18,7 +18,6 @@ import {makeUUID} from '@/util/uuid'
 import {dumpLogs, showMain} from '@/util/storeless-actions'
 import * as FSConstants from '@/constants/fs'
 import {openPathInSystemFileManagerDesktop} from '@/util/fs-storeless-actions'
-import * as Z from '@/util/zustand'
 
 type RemoteActionOwner = 'pinentry' | 'tracker'
 
@@ -31,57 +30,25 @@ type OwnerActionMap = {
     | RemoteGen.TrackerLoadPayload
 }
 
-type OwnerEntry = {
-  handler: (action: OwnerActionMap[RemoteActionOwner]) => void
-  token: number
-}
+type OwnerHandler = (action: OwnerActionMap[RemoteActionOwner]) => void
 
-type RemoteActionHandlerStore = {
-  dispatch: {
-    resetState: () => void
-  }
-  nextOwnerToken: number
-  ownerHandlers: Map<RemoteActionOwner, OwnerEntry>
-}
-
-const useRemoteActionHandlerState = Z.createZustand<RemoteActionHandlerStore>(
-  'desktop-remote-action-handlers',
-  set => {
-    const resetState = () => {
-      set(s => {
-        s.nextOwnerToken = 0
-        s.ownerHandlers = new Map()
-      })
-    }
-    return {
-      dispatch: {resetState},
-      nextOwnerToken: 0,
-      ownerHandlers: new Map(),
-    }
-  }
-)
+// module-level on purpose: these route actions to always-mounted proxy components,
+// so they must survive the store reset that happens at logout
+const ownerHandlers = new Map<RemoteActionOwner, OwnerHandler>()
 
 const dispatchRemoteActionToOwner = <K extends RemoteActionOwner>(owner: K, action: OwnerActionMap[K]) => {
-  const entry = useRemoteActionHandlerState.getState().ownerHandlers.get(owner)
-  ;(entry?.handler as ((action: OwnerActionMap[K]) => void) | undefined)?.(action)
+  ;(ownerHandlers.get(owner) as ((action: OwnerActionMap[K]) => void) | undefined)?.(action)
 }
 
 export const registerRemoteActionHandler = <K extends RemoteActionOwner>(
   owner: K,
   handler: (action: OwnerActionMap[K]) => void
 ) => {
-  let token = 0
-  useRemoteActionHandlerState.setState(s => {
-    s.nextOwnerToken += 1
-    token = s.nextOwnerToken
-    s.ownerHandlers.set(owner, {handler: handler as OwnerEntry['handler'], token})
-  })
+  ownerHandlers.set(owner, handler as OwnerHandler)
   return () => {
-    useRemoteActionHandlerState.setState(s => {
-      if (s.ownerHandlers.get(owner)?.token === token) {
-        s.ownerHandlers.delete(owner)
-      }
-    })
+    if (ownerHandlers.get(owner) === handler) {
+      ownerHandlers.delete(owner)
+    }
   }
 }
 
@@ -235,11 +202,6 @@ export const eventFromRemoteWindows = (action: RemoteGen.Actions) => {
     case RemoteGen.dumpLogs:
       ignorePromise(dumpLogs(action.payload.reason))
       break
-    case RemoteGen.remoteWindowWantsProps:
-      useConfigState
-        .getState()
-        .dispatch.remoteWindowNeedsProps(action.payload.component, action.payload.param)
-      break
     case RemoteGen.updateWindowMaxState:
       useShellState.getState().dispatch.setWindowMaximized(action.payload.max)
       break
diff --git a/shared/desktop/webpack.config.mts b/shared/desktop/webpack.config.mts
index 02f8fcb5f208..845e8d81a54d 100644
--- a/shared/desktop/webpack.config.mts
+++ b/shared/desktop/webpack.config.mts
@@ -45,10 +45,8 @@ const resourceAssetDirectories = [
   path.resolve(__dirname, '../images/illustrations'),
   path.resolve(__dirname, '../images/install'),
 ]
-const entryOverride: Record<string, string> = {main: 'desktop/renderer'}
-const viewEntries = debugUnusedChunks
-  ? ['main']
-  : ['main', 'menubar', 'pinentry', 'unlock-folders', 'tracker']
+const entryOverride: Record<string, string> = {main: 'desktop/renderer', remote: 'desktop/remote'}
+const viewEntries = debugUnusedChunks ? ['main'] : ['main', 'remote']
 
 type DesktopConfiguration = Configuration & {
   devServer?: WebpackDevServerConfiguration
diff --git a/shared/devices/add-device.tsx b/shared/devices/add-device.tsx
index a10c4e24c951..c076a7e70c47 100644
--- a/shared/devices/add-device.tsx
+++ b/shared/devices/add-device.tsx
@@ -1,37 +1,34 @@
 import * as C from '@/constants'
-import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import {startAddNewDevice} from '@/provision/flow'
 import * as T from '@/constants/types'
 import {getDeviceIconType} from './device-icon'
+import {useRPCLoad} from '@/util/use-rpc-load'
 
 type AddDeviceProps = {
   highlight?: Array<'computer' | 'phone' | 'paper key'>
 }
 const noHighlight = new Array<'computer' | 'phone' | 'paper key'>()
+const defaultIconNumbers = {
+  desktop: 1 as T.Devices.IconNumber,
+  mobile: 1 as T.Devices.IconNumber,
+} as const
 
 export default function AddDevice(ownProps: AddDeviceProps) {
   const highlight = ownProps.highlight ?? noHighlight
-  const [iconNumbers, setIconNumbers] = React.useState({
-    desktop: 1 as T.Devices.IconNumber,
-    mobile: 1 as T.Devices.IconNumber,
-  } as const)
-  const loadDeviceHistory = C.useRPC(T.RPCGen.deviceDeviceHistoryListRpcPromise)
-
-  C.useOnMountOnce(() => {
-    loadDeviceHistory(
-      [undefined, C.waitingKeyDevices],
-      results => {
-        const devices =
+  const {data: iconNumbers = defaultIconNumbers} = useRPCLoad(
+    T.RPCGen.deviceDeviceHistoryListRpcPromise,
+    [undefined, C.waitingKeyDevices],
+    {
+      map: results =>
+        T.Devices.nextDeviceIconNumbers(
           results?.map(result => ({
             deviceNumberOfType: result.device.deviceNumberOfType,
             type: T.Devices.stringToDeviceType(result.device.type),
           })) ?? []
-        setIconNumbers(T.Devices.nextDeviceIconNumbers(devices))
-      },
-      _ => {}
-    )
-  })
+        ),
+    }
+  )
 
   const onAddComputer = () => {
     startAddNewDevice('desktop')
@@ -39,15 +36,9 @@ export default function AddDevice(ownProps: AddDeviceProps) {
 
   const navigateAppend = C.Router2.navigateAppend
 
-  // don't allow multiple clicks to add paper key
-  const canAddPaperKeyRef = React.useRef(true)
   const onAddPaperKey = () => {
-    if (!canAddPaperKeyRef.current) return
-    canAddPaperKeyRef.current = false
+    // repeat taps are deduped by navigateAppend
     navigateAppend({name: 'devicePaperKey', params: {}})
-    setTimeout(() => {
-      canAddPaperKeyRef.current = true
-    }, 1000)
   }
 
   const onAddPhone = () => {
diff --git a/shared/devices/device-page.tsx b/shared/devices/device-page.tsx
index 70ede0708fa6..52d71bbe1f6f 100644
--- a/shared/devices/device-page.tsx
+++ b/shared/devices/device-page.tsx
@@ -105,7 +105,7 @@ const DevicePage = (ownProps: DevicePageProps) => {
   const metaOne = device.currentDevice ? (
     'Current device'
   ) : device.revokedAt ? (
-    <Kb.Meta title="revoked" style={styles.meta} backgroundColor={Kb.Styles.globalColors.red} />
+    <Kb.Meta variant="revoked" style={styles.meta} />
   ) : null
 
   const deviceType = device.type
@@ -168,10 +168,7 @@ const styles = Kb.Styles.styleSheetCreate(
         ...Kb.Styles.size(circleSize),
       },
       invisible: {opacity: 0},
-      meta: {
-        alignSelf: 'center',
-        marginTop: 4,
-      },
+      meta: {marginTop: 4},
       subDesc: {color: Kb.Styles.globalColors.black},
       timelineLineBottom: {
         backgroundColor: Kb.Styles.globalColors.grey,
diff --git a/shared/devices/device-revoke.tsx b/shared/devices/device-revoke.tsx
index 929ed87f228a..adbb629aa44f 100644
--- a/shared/devices/device-revoke.tsx
+++ b/shared/devices/device-revoke.tsx
@@ -7,6 +7,7 @@ import {settingsDevicesTab} from '@/constants/settings'
 import {useCurrentUserState} from '@/stores/current-user'
 import {rpcDeviceDetailToDevice} from './common'
 import {getDeviceRevokeIconType} from './device-icon'
+import {useRPCLoad} from '@/util/use-rpc-load'
 
 type DeviceRevokeProps = {device?: T.Devices.Device; deviceID?: T.Devices.DeviceID}
 
@@ -18,8 +19,8 @@ const renderTLFEntry = (index: number, tlf: string) => (
     </Kb.Text>
   </Kb.Box2>
 )
-const EndangeredTLFList = (props: {endangeredTLFs: Array<string>}) => {
-  if (!props.endangeredTLFs.length) return null
+const EndangeredTLFList = (props: {endangeredTLFs?: ReadonlyArray<string>}) => {
+  if (!props.endangeredTLFs?.length) return null
   return (
     <>
       <Kb.Text center={true} type="Body">
@@ -32,35 +33,6 @@ const EndangeredTLFList = (props: {endangeredTLFs: Array<string>}) => {
   )
 }
 
-const ActionButtons = ({onCancel, onSubmit}: {onCancel: () => void; onSubmit: () => void}) => (
-  <Kb.Box2 direction={isMobile ? 'vertical' : 'horizontalReverse'} fullWidth={isMobile} gap="tiny">
-    <Kb.WaitingButton
-      fullWidth={isMobile}
-      type="Danger"
-      label="Yes, delete it"
-      waitingKey={C.waitingKeyDevices}
-      onClick={onSubmit}
-    />
-    <Kb.Button fullWidth={isMobile} type="Dim" onClick={onCancel} label="Cancel" />
-  </Kb.Box2>
-)
-
-const loadEndangeredTLF = async (actingDevice: string, targetDevice: string) => {
-  if (!actingDevice || !targetDevice) {
-    return []
-  }
-  try {
-    const tlfs = await T.RPCGen.rekeyGetRevokeWarningRpcPromise(
-      {actingDevice, targetDevice},
-      C.waitingKeyDevices
-    )
-    return tlfs.endangeredTLFs?.map(t => t.name) ?? []
-  } catch (e) {
-    console.error(e)
-  }
-  return []
-}
-
 const revokeDevice = async (
   username: string,
   wasCurrentDevice: boolean,
@@ -95,40 +67,27 @@ const useRevoke = (device: T.Devices.Device) => {
 }
 
 const DeviceRevoke = (ownProps: DeviceRevokeProps) => {
-  const loadDeviceHistory = C.useRPC(T.RPCGen.deviceDeviceHistoryListRpcPromise)
   const navigateUp = C.Router2.navigateUp
   const selectedDeviceID = ownProps.device?.deviceID ?? ownProps.deviceID ?? T.Devices.stringToDeviceID('')
-  const [loadedDevice, setLoadedDevice] = React.useState<T.Devices.Device | undefined>()
-  const device = ownProps.device ?? (loadedDevice?.deviceID === selectedDeviceID ? loadedDevice : undefined)
-  const [endangeredTLFs, setEndangeredTLFs] = React.useState(new Array<string>())
+  const {data: loadedDevice, loaded} = useRPCLoad(
+    T.RPCGen.deviceDeviceHistoryListRpcPromise,
+    [undefined, C.waitingKeyDevices],
+    {
+      enabled: !ownProps.device && !!selectedDeviceID,
+      map: results => results?.map(rpcDeviceDetailToDevice).find(c => c.deviceID === selectedDeviceID),
+    }
+  )
+  const device = ownProps.device ?? loadedDevice
   const waiting = C.Waiting.useAnyWaiting(C.waitingKeyDevices)
   const onCancel = navigateUp
 
-  C.useOnMountOnce(() => {
-    if (device) {
-      return
-    }
-    if (!selectedDeviceID) {
+  // nothing to revoke: no id given, load failed, or device no longer exists
+  const missing = !device && (!selectedDeviceID || (loaded && !loadedDevice))
+  React.useEffect(() => {
+    if (missing) {
       navigateUp()
-      return
     }
-    loadDeviceHistory(
-      [undefined, C.waitingKeyDevices],
-      results => {
-        const hydratedDevice = results
-          ?.map(rpcDeviceDetailToDevice)
-          .find(candidate => candidate.deviceID === selectedDeviceID)
-        if (hydratedDevice) {
-          setLoadedDevice(hydratedDevice)
-        } else {
-          navigateUp()
-        }
-      },
-      _ => {
-        navigateUp()
-      }
-    )
-  })
+  }, [missing, navigateUp])
 
   const onSubmit = useRevoke(
     device ?? {
@@ -143,23 +102,17 @@ const DeviceRevoke = (ownProps: DeviceRevokeProps) => {
   )
 
   const actingDevice = useCurrentUserState(s => s.deviceID)
-  C.useOnMountOnce(() => {
-    if (!selectedDeviceID) {
-      return
-    }
-    const f = async () => {
-      const tlfs = await loadEndangeredTLF(actingDevice, selectedDeviceID)
-      setEndangeredTLFs(tlfs)
+  const {data: endangeredTLFs} = useRPCLoad(
+    T.RPCGen.rekeyGetRevokeWarningRpcPromise,
+    [{actingDevice, targetDevice: selectedDeviceID}, C.waitingKeyDevices],
+    {
+      enabled: !!actingDevice && !!selectedDeviceID,
+      map: tlfs => tlfs.endangeredTLFs?.map(t => t.name) ?? [],
     }
-    C.ignorePromise(f())
-  })
+  )
 
   if (!device) {
-    return (
-      <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} centerChildren={true} padding="small">
-        <Kb.ProgressIndicator />
-      </Kb.Box2>
-    )
+    return <Kb.LoadingScreen />
   }
 
   const type = device.type
@@ -194,7 +147,13 @@ const DeviceRevoke = (ownProps: DeviceRevokeProps) => {
       <Kb.Box2 direction="vertical" style={styles.endangeredTLFContainer} fullWidth={isMobile}>
         {!waiting && <EndangeredTLFList endangeredTLFs={endangeredTLFs} />}
       </Kb.Box2>
-      <ActionButtons onCancel={onCancel} onSubmit={onSubmit} />
+      <Kb.ConfirmButtons
+        waitingKey={C.waitingKeyDevices}
+        onCancel={onCancel}
+        onConfirm={onSubmit}
+        confirmLabel="Yes, delete it"
+        confirmType="Danger"
+      />
       {waiting && (
         <Kb.Text center={true} type="BodySmallItalic">
           Calculating any side effects...
diff --git a/shared/devices/index.tsx b/shared/devices/index.tsx
index 8ac184785ddb..0677fed054f3 100644
--- a/shared/devices/index.tsx
+++ b/shared/devices/index.tsx
@@ -2,12 +2,13 @@ import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import * as TestIDs from '@/tests/e2e/shared/test-ids'
-import DeviceRow, {BadgedDeviceIDsContext} from './row'
+import DeviceRow from './row'
 import partition from 'lodash/partition'
 import * as T from '@/constants/types'
 import {intersect} from '@/util/set'
 import {settingsDevicesTab} from '@/constants/settings'
-import {useLocalBadging} from '@/util/use-local-badging'
+import {NewItemsContext, useLocalBadging} from '@/util/use-local-badging'
+import {useRPCLoad} from '@/util/use-rpc-load'
 import {useNotifState} from '@/stores/notifications'
 import {useNavigation} from '@react-navigation/native'
 import {rpcDeviceDetailToDevice, HeaderTitle} from './common'
@@ -29,26 +30,23 @@ const splitAndSortDevices = (devices: ReadonlyArray<T.Devices.Device>) =>
   partition([...devices].sort(sortDevices), d => d.revokedAt)
 
 const itemHeight = {height: 48, type: 'fixed'} as const
+const noDevices = new Array<T.Devices.Device>()
 
 function ReloadableDevices() {
   // mounts as its own tab on desktop but under settings on mobile/tablet
   const navigation = useNavigation(isMobile ? settingsDevicesTab : 'devicesRoot')
-  const [devices, setDevices] = React.useState<Array<T.Devices.Device>>([])
   const waiting = C.Waiting.useAnyWaiting(C.waitingKeyDevices)
-  const loadDevicesRPC = C.useRPC(T.RPCGen.deviceDeviceHistoryListRpcPromise)
   const clearBadges = useNotifState(s => s.dispatch.clearDeviceBadges)
   const storeSet = useNotifState(s => s.deviceBadges)
   const {badged} = useLocalBadging(storeSet, clearBadges)
 
-  const loadDevices = React.useEffectEvent(() => {
-    loadDevicesRPC(
-      [undefined, C.waitingKeyDevices],
-      results => {
-        setDevices(results?.map(rpcDeviceDetailToDevice) ?? [])
-      },
-      _ => {}
-    )
-  })
+  // Reloadable's reloadOnMount drives the initial load
+  const {data, reload: loadDevices} = useRPCLoad(
+    T.RPCGen.deviceDeviceHistoryListRpcPromise,
+    [undefined, C.waitingKeyDevices],
+    {map: results => results?.map(rpcDeviceDetailToDevice) ?? [], when: 'manual'}
+  )
+  const devices = data ?? noDevices
 
   useEngineActionListener('keybase.1.NotifyDeviceHistory.deviceHistoryChanged', () => {
     loadDevices()
@@ -124,16 +122,12 @@ function ReloadableDevices() {
       reloadOnMount={true}
       title=""
     >
-      <BadgedDeviceIDsContext value={badged}>
+      <NewItemsContext value={badged}>
         <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} relative={true} testID={TestIDs.DEVICES_LIST}>
           {isMobile ? (
             <Kb.ClickableBox onClick={() => onAddDevice()} direction="horizontal" centerChildren={true} relative={true} style={styles.mobileAddHeader}>
               <Kb.Button label="Add a device or paper key" fullWidth={true} />
-              {waiting ? (
-                <Kb.Box2 direction="vertical" centerChildren={true} style={styles.progressContainer}>
-                  <Kb.ProgressIndicator />
-                </Kb.Box2>
-              ) : null}
+              <Kb.LoadingOverlay show={waiting} />
             </Kb.ClickableBox>
           ) : null}
           {showPaperKeyNudge ? <PaperKeyNudge onAddDevice={() => onAddDevice(['paper key'])} /> : null}
@@ -141,7 +135,7 @@ function ReloadableDevices() {
             <Kb.List bounces={false} items={items} renderItem={renderItem} itemHeight={itemHeight} keyProperty="key" />
           </Kb.BoxGrow2>
         </Kb.Box2>
-      </BadgedDeviceIDsContext>
+      </NewItemsContext>
     </Kb.Reloadable>
   )
 }
@@ -175,9 +169,6 @@ const styles = Kb.Styles.styleSheetCreate(
           maxWidth: 450,
         },
       }),
-      progressContainer: {
-        ...Kb.Styles.globalStyles.fillAbsolute,
-      },
       revokedNote: {
         padding: Kb.Styles.globalMargins.medium,
         width: '100%',
diff --git a/shared/devices/row.stories.tsx b/shared/devices/row.stories.tsx
index d5abe2f5a506..663cd447f56a 100644
--- a/shared/devices/row.stories.tsx
+++ b/shared/devices/row.stories.tsx
@@ -1,6 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import type * as T from '@/constants/types'
-import DeviceRow, {BadgedDeviceIDsContext} from './row'
+import DeviceRow from './row'
+import {NewItemsContext} from '@/util/use-local-badging'
 
 const now = Date.now()
 const weekAgo = now - 7 * 24 * 60 * 60 * 1000
@@ -68,9 +69,9 @@ export const Revoked: Story = {
 export const NewBadge: Story = {
   decorators: [
     Story => (
-      <BadgedDeviceIDsContext value={new Set(['device-new'])}>
+      <NewItemsContext value={new Set(['device-new'])}>
         <Story />
-      </BadgedDeviceIDsContext>
+      </NewItemsContext>
     ),
   ],
   args: {
diff --git a/shared/devices/row.tsx b/shared/devices/row.tsx
index c28d17785085..14528ff119f0 100644
--- a/shared/devices/row.tsx
+++ b/shared/devices/row.tsx
@@ -1,10 +1,10 @@
 import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
-import * as React from 'react'
 import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import DeviceIcon from './device-icon'
 import type * as T from '@/constants/types'
 import {formatTimeRelativeToNow} from '@/util/timestamp'
+import {useIsNew} from '@/util/use-local-badging'
 
 type OwnProps = {
   canRevoke: boolean
@@ -12,8 +12,6 @@ type OwnProps = {
   firstItem: boolean
 }
 
-export const BadgedDeviceIDsContext = React.createContext<ReadonlySet<string>>(new Set())
-
 function DeviceRow(ownProps: OwnProps) {
   const {canRevoke, device, firstItem} = ownProps
   const {deviceID} = device
@@ -22,7 +20,7 @@ function DeviceRow(ownProps: OwnProps) {
     navigateAppend({name: 'devicePage', params: {canRevoke, device}})
   }
 
-  const isNew = React.useContext(BadgedDeviceIDsContext).has(deviceID)
+  const isNew = useIsNew(deviceID)
   const {currentDevice, name, revokedAt, lastUsed} = device
   const isRevoked = !!device.revokedByName
 
@@ -46,9 +44,7 @@ function DeviceRow(ownProps: OwnProps) {
             <Kb.Text lineClamp={1} style={isRevoked ? styles.text : undefined} type="BodySemibold">
               {name} {currentDevice && <Kb.Text type="BodySmall">(Current device)</Kb.Text>}
             </Kb.Text>
-            {isNew && !currentDevice && (
-              <Kb.Meta title="new" style={styles.meta} backgroundColor={Kb.Styles.globalColors.orange} />
-            )}
+            {isNew && !currentDevice && <Kb.Meta variant="new" style={styles.meta} />}
           </Kb.Box2>
           <Kb.Text type="BodySmall">
             {isRevoked
@@ -68,7 +64,6 @@ const styles = Kb.Styles.styleSheetCreate(
     ({
       icon: {opacity: 0.3},
       meta: {
-        alignSelf: 'center',
         marginLeft: isMobile ? Kb.Styles.globalMargins.xxtiny : Kb.Styles.globalMargins.xtiny,
       },
       text: {
diff --git a/shared/engine/index-impl.tsx b/shared/engine/index-impl.tsx
deleted file mode 100644
index 9ca527945642..000000000000
--- a/shared/engine/index-impl.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-// Handles sending requests to the daemon
-import Session, {type CancelHandlerType} from './session'
-import engineListener from './listener'
-import logger from '@/logger'
-import throttle from 'lodash/throttle'
-import type {SessionIDKey, MethodKey} from './types'
-import {initEngine, initEngineListener} from './require'
-import {printOutstandingRPCs} from '@/local-debug'
-import {resetClient, createClient, rpcLog, type CreateClientType, type PayloadType} from './index.platform'
-import {type RPCError, convertToError} from '@/util/errors'
-import type * as EngineGen from '@/constants/rpc'
-import type {IncomingCallMapType, CustomResponseIncomingCallMapType} from '@/constants/rpc/rpc-all-gen'
-
-export type BatchParams = Array<{key: string | ReadonlyArray<string>; increment: boolean; error?: RPCError}>
-
-type WaitingKey = string | ReadonlyArray<string>
-
-class Engine {
-  _onConnectedCB: (c: boolean) => void
-  // Tracking outstanding sessions
-  _sessionsMap: {[K in SessionIDKey]: Session} = {}
-  // Helper we delegate actual calls to
-  _rpcClient: CreateClientType
-  // Set which actions we don't auto respond with so listeners can themselves
-  _customResponseAction: {[K in MethodKey]: true} = {
-    'keybase.1.rekeyUI.delegateRekeyUI': true,
-    'keybase.1.secretUi.getPassphrase': true,
-    ...(isMobile ? {'chat.1.chatUi.chatWatchPosition': true} : {'keybase.1.logsend.prepareLogsend': true}),
-  }
-  _backgroundSessionMethods: Partial<Record<MethodKey, true>> = {
-    'keybase.1.SimpleFS.simpleFSUserEditHistory': true,
-    'keybase.1.config.waitForClient': true,
-  }
-  // We generate sessionIDs monotonically
-  _nextSessionID: number = 123
-  // We call onDisconnect handlers only if we've actually disconnected (ie connected once)
-  _hasConnected: boolean = isMobile // mobile is always connected
-  // App tells us when the listeners are done loading so we can start emitting events
-  _listenersAreReady: boolean = false
-
-  _emitWaiting: (changes: BatchParams) => void
-  _onEngineIncoming?: (action: EngineGen.Actions) => void
-
-  _queuedChanges: Array<{error?: RPCError; increment: boolean; key: WaitingKey}> = []
-  dispatchWaitingAction = (key: WaitingKey, waiting: boolean, error?: RPCError) => {
-    this._queuedChanges.push({error, increment: waiting, key})
-    this._throttledDispatchWaitingAction()
-  }
-
-  _throttledDispatchWaitingAction = throttle(() => {
-    const changes = this._queuedChanges
-    this._queuedChanges = []
-    this._emitWaiting(changes)
-  }, 500)
-
-  constructor(
-    emitWaiting: (changes: BatchParams) => void,
-    onConnected: (c: boolean) => void,
-    onEngineIncoming?: (action: EngineGen.Actions) => void
-  ) {
-    this._onConnectedCB = onConnected
-    this._onEngineIncoming = onEngineIncoming
-    this._emitWaiting = emitWaiting
-    this._rpcClient = createClient(
-      payload => this._rpcIncoming(payload),
-      () => this._onConnected(),
-      () => this._onDisconnect()
-    )
-    this._setupDebugging()
-  }
-
-  rebindCallbacks(
-    emitWaiting: (changes: BatchParams) => void,
-    onConnected: (c: boolean) => void,
-    onEngineIncoming?: (action: EngineGen.Actions) => void
-  ) {
-    this._emitWaiting = emitWaiting
-    this._onConnectedCB = onConnected
-    this._onEngineIncoming = onEngineIncoming
-  }
-
-  _setupDebugging() {
-    if (!__DEV__) {
-      return
-    }
-
-    global.DEBUGEngine = this
-
-    // Print out any alive sessions periodically
-    if (printOutstandingRPCs) {
-      setInterval(() => {
-        if (Object.values(this._sessionsMap).some(session => !session.getDangling())) {
-          logger.localLog('outstandingSessionDebugger: ', this._sessionsMap)
-        }
-      }, 10 * 1000)
-    }
-  }
-
-  _sessionSummary() {
-    return Object.entries(this._sessionsMap)
-      .filter(([, session]) => !session.getDangling())
-      .map(([id, session]) => ({
-        id,
-        method: session._startMethod || 'unknown',
-      }))
-  }
-
-  _onDisconnect() {
-    logger.warn('Engine disconnected', {
-      hasConnected: this._hasConnected,
-      listenersAreReady: this._listenersAreReady,
-      sessions: this._sessionSummary(),
-    })
-    // tell renderer we're disconnected
-    this._onConnectedCB(false)
-  }
-
-  // We want to dispatch the connect action but only after listeners boot up
-  listenersAreReady = () => {
-    this._listenersAreReady = true
-    logger.info('Engine listenersAreReady', {
-      hasConnected: this._hasConnected,
-      sessions: this._sessionSummary(),
-    })
-    if (this._hasConnected) {
-      this._onConnectedCB(true)
-    }
-  }
-
-  // Called when we reconnect to the server. This only happens in node in the electron side.
-  // We proxy the stuff over the mainWindowDispatch
-  _onConnected() {
-    this._hasConnected = true
-    logger.info('Engine connected', {
-      listenersAreReady: this._listenersAreReady,
-      sessions: this._sessionSummary(),
-    })
-    this._onConnectedCB(true)
-  }
-
-  // Create and return the next unique session id
-  _generateSessionID() {
-    this._nextSessionID++
-    return this._nextSessionID
-  }
-
-  // Got a cancelled sequence id
-  _handleCancel(seqid: number) {
-    const cancelledSessionID = Object.keys(this._sessionsMap).find(key =>
-      this._sessionsMap[key]?.hasSeqID(seqid)
-    )
-    if (cancelledSessionID) {
-      const s = this._sessionsMap[cancelledSessionID]
-      rpcLog({
-        extra: {cancelledSessionID},
-        method: s?._startMethod || 'unknown',
-        reason: '[cancel]',
-        type: 'engineInternal',
-      })
-      s?.cancel()
-    } else {
-      rpcLog({
-        extra: {cancelledSessionID},
-        method: 'unknown',
-        reason: '[cancel?]',
-        type: 'engineInternal',
-      })
-    }
-  }
-
-  // An incoming rpc call
-  _rpcIncoming(payload: PayloadType) {
-    const {method, param: incomingParam, response} = payload
-    const param = incomingParam.length ? incomingParam[0] || {} : {}
-    const {seqid, cancelled} = response || {cancelled: false, seqid: 0}
-    const {sessionID} = param
-
-    if (cancelled) {
-      this._handleCancel(seqid)
-    } else {
-      const session = this._sessionsMap[String(sessionID)]
-      if (session?.incomingCall(method, param, response)) {
-        // Part of a session?
-      } else {
-        // Dispatch as an action
-        const extra: {response?: unknown} = {}
-        if (this._customResponseAction[method]) {
-          extra.response = response
-        } else {
-          // Not a custom response so we auto handle it
-          response?.result?.()
-        }
-        const act = {
-          payload: {params: param, ...extra},
-          type: method as EngineGen.ActionKey,
-        } as EngineGen.EngineActions
-        if (this._onEngineIncoming) {
-          this._onEngineIncoming(act)
-        }
-      }
-    }
-  }
-
-  // An outgoing call. ONLY called by the flow-type rpc helpers
-  _rpcOutgoing(p: {
-    method: string
-    params: object | undefined
-    callback: (...args: Array<any>) => void
-    incomingCallMap?: IncomingCallMapType
-    customResponseIncomingCallMap?: CustomResponseIncomingCallMapType
-    waitingKey?: WaitingKey
-  }) {
-    const {customResponseIncomingCallMap, incomingCallMap, waitingKey} = p
-    const {method, params, callback} = p
-    // Make a new session and start the request
-    const session = this.createSession({
-      customResponseIncomingCallMap,
-      dangling: !!this._backgroundSessionMethods[method as MethodKey],
-      incomingCallMap,
-      waitingKey,
-    })
-    session.start(method, params, callback)
-    return session.getId()
-  }
-
-  // Make a new session. If the session hangs around forever set dangling to true
-  createSession(p: {
-    incomingCallMap?: IncomingCallMapType
-    customResponseIncomingCallMap?: CustomResponseIncomingCallMapType
-    cancelHandler?: CancelHandlerType
-    dangling?: boolean
-    waitingKey?: WaitingKey
-  }): Session {
-    const {customResponseIncomingCallMap, incomingCallMap, cancelHandler, dangling = false, waitingKey} = p
-    const sessionID = this._generateSessionID()
-
-    const session = new Session({
-      cancelHandler,
-      customResponseIncomingCallMap,
-      dangling,
-      endHandler: session => this._sessionEnded(session),
-      incomingCallMap,
-      invoke: (method, param, cb) => {
-        const callback =
-          (method: string) =>
-          (...args: Array<unknown>) => {
-            // If first argument is set, convert it to an Error type
-            if (args.length > 0 && !!args[0]) {
-              args[0] = convertToError(args[0], method)
-            }
-            cb(args[0], args[1])
-          }
-        this._rpcClient.invoke(method, param, callback(method))
-      },
-      sessionID,
-      waitingKey,
-    })
-
-    this._sessionsMap[String(sessionID)] = session
-    return session
-  }
-
-  // Cleanup a session that ended
-  _sessionEnded(session: {getId: () => number; _startMethod?: string}) {
-    rpcLog({
-      extra: {
-        sessionID: session.getId(),
-      },
-      method: session._startMethod || 'unknown',
-      reason: '[-session]',
-      type: 'engineInternal',
-    })
-    delete this._sessionsMap[String(session.getId())] // eslint-disable-line
-  }
-
-  // Reset the engine
-  reset() {
-    if (isMobile) {
-      return
-    }
-    logger.warn('Engine reset requested', {
-      hasConnected: this._hasConnected,
-      listenersAreReady: this._listenersAreReady,
-      sessions: this._sessionSummary(),
-    })
-    this._sessionsMap = {}
-    this._queuedChanges = []
-    this._hasConnected = false
-    this._listenersAreReady = false
-    this._rpcClient = resetClient(
-      this._rpcClient,
-      payload => this._rpcIncoming(payload),
-      () => this._onConnected(),
-      () => this._onDisconnect()
-    )
-  }
-}
-
-// don't overwrite this on HMR
-let engine: Engine | undefined
-if (__DEV__) {
-  engine = global.DEBUGEngine as Engine
-}
-
-const makeEngine = (
-  emitWaiting: (b: BatchParams) => void,
-  onConnected: (c: boolean) => void,
-  onEngineIncoming?: (action: EngineGen.Actions) => void
-) => {
-  if (__DEV__ && engine) {
-    logger.warn('makeEngine called multiple times')
-  }
-
-  if (!engine) {
-    engine = new Engine(emitWaiting, onConnected, onEngineIncoming)
-  } else {
-    engine.rebindCallbacks(emitWaiting, onConnected, onEngineIncoming)
-  }
-  initEngine(engine)
-  initEngineListener(engineListener)
-  return engine
-}
-
-const getEngine = (): Engine => {
-  if (!engine) {
-    throw new Error('Engine needs to be initialized first')
-  }
-  return engine
-}
-
-export default getEngine
-export {getEngine, makeEngine, Engine}
-export type {IncomingCallMapType, CustomResponseIncomingCallMapType}
diff --git a/shared/engine/index.platform.tsx b/shared/engine/index.platform.tsx
index ae87d927c66e..1b8cee288d6a 100644
--- a/shared/engine/index.platform.tsx
+++ b/shared/engine/index.platform.tsx
@@ -1,26 +1,19 @@
 import logger from '@/logger'
 import {TransportShared, LocalTransport, sharedCreateClient, rpcLog} from './transport-shared'
-import type {RPCMessage} from './rpc-transport'
-import type {RPCTransport, InvokeType, PayloadType, ConnectDisconnectCB, IncomingRPCCallbackType} from '@/engine/rpc-transport'
+import {makeEOFError, type RPCMessage} from './rpc-transport'
+import type {InvokeType, PayloadType, ConnectDisconnectCB, IncomingRPCCallbackType} from '@/engine/rpc-transport'
 
 export type {PayloadType, ConnectDisconnectCB, IncomingRPCCallbackType, InvokeType}
 
 export type CreateClientType = {
-  transport: RPCTransport & {
-    needsConnect: boolean
-    reset: () => void
-    close?: () => void
-    send: (message: unknown) => boolean
-    packetizeData: (data: Uint8Array) => void
-    dispatchDecodedMessage: (message: unknown) => void
-  }
+  transport: TransportShared
   invoke: InvokeType
 }
 import KB2 from '@/util/electron'
 import type {Socket} from 'net'
 import {printRPCBytes} from '@/local-debug'
 import {socketPath} from '@/constants/platform'
-import {getNativeEmitter, notifyJSReady, engineReset} from 'react-native-kb'
+import {onMetaEvent, notifyJSReady} from 'react-native-kb'
 
 // used by node
 // Desktop transport — only instantiated when !isMobile
@@ -152,6 +145,11 @@ class ProxyNativeTransport extends LocalTransport {
     const {engineSend} = KB2.functions
     engineSend?.(message)
   }
+  // On account-switch reset fail outstanding invocations so pre-switch RPC
+  // callbacks can't fire later against post-switch state
+  override reset() {
+    this.failOutstanding(makeEOFError(), {})
+  }
 }
 
 // Mobile transport — only instantiated when isMobile
@@ -193,8 +191,7 @@ function createClient(
       }
     }
 
-    const RNEmitter = getNativeEmitter()
-    RNEmitter.addListener('kb-meta-engine-event', (payload: string) => {
+    onMetaEvent((payload: string) => {
       try {
         switch (payload) {
           case 'kb-engine-reset':
@@ -236,18 +233,13 @@ function createClient(
   }
 }
 
+// Desktop only; Engine.reset() is a no-op on mobile
 function resetClient(
   client: CreateClientType,
   incomingRPCCallback: IncomingRPCCallbackType,
   connectCallback: ConnectDisconnectCB,
   disconnectCallback: ConnectDisconnectCB
 ) {
-  if (isMobile) {
-    // Tell the RN bridge to reset itself
-    engineReset()
-    return client
-  }
-
   const {isRenderer} = KB2.constants
 
   if (isRenderer) {
diff --git a/shared/engine/index.tsx b/shared/engine/index.tsx
index 119d27a09943..4638c0f31da8 100644
--- a/shared/engine/index.tsx
+++ b/shared/engine/index.tsx
@@ -1 +1,337 @@
-export {default, getEngine, makeEngine, Engine} from './index-impl'
+// Handles sending requests to the daemon
+import Session, {type CancelHandlerType} from './session'
+import engineListener from './listener'
+import logger from '@/logger'
+import throttle from 'lodash/throttle'
+import type {SessionID, MethodKey, WaitingKey} from './types'
+import {initEngine, initEngineListener} from './require'
+import {printOutstandingRPCs, printRPC} from '@/local-debug'
+import {resetClient, createClient, rpcLog, type CreateClientType, type PayloadType} from './index.platform'
+import {type RPCError, convertToError} from '@/util/errors'
+import type * as EngineGen from '@/constants/rpc'
+import type {IncomingCallMapType, CustomResponseIncomingCallMapType} from '@/constants/rpc/rpc-all-gen'
+
+export type BatchParams = Array<{key: WaitingKey; increment: boolean; error?: RPCError}>
+
+class Engine {
+  _onConnectedCB: (c: boolean) => void
+  // Tracking outstanding sessions
+  _sessionsMap = new Map<SessionID, Session>()
+  // Helper we delegate actual calls to
+  _rpcClient: CreateClientType
+  // Set which actions we don't auto respond with so listeners can themselves
+  _customResponseAction: {[K in MethodKey]: true} = {
+    'keybase.1.rekeyUI.delegateRekeyUI': true,
+    'keybase.1.secretUi.getPassphrase': true,
+    ...(isMobile ? {'chat.1.chatUi.chatWatchPosition': true} : {'keybase.1.logsend.prepareLogsend': true}),
+  }
+  _backgroundSessionMethods: Partial<Record<MethodKey, true>> = {
+    'keybase.1.SimpleFS.simpleFSUserEditHistory': true,
+    'keybase.1.config.waitForClient': true,
+  }
+  // We generate sessionIDs monotonically
+  _nextSessionID: number = 123
+  // We call onDisconnect handlers only if we've actually disconnected (ie connected once)
+  _hasConnected: boolean = isMobile // mobile is always connected
+  // App tells us when the listeners are done loading so we can start emitting events
+  _listenersAreReady: boolean = false
+
+  _emitWaiting: (changes: BatchParams) => void
+  _onEngineIncoming?: (action: EngineGen.Actions) => void
+
+  _queuedChanges: Array<{error?: RPCError; increment: boolean; key: WaitingKey}> = []
+  dispatchWaitingAction = (key: WaitingKey, waiting: boolean, error?: RPCError) => {
+    this._queuedChanges.push({error, increment: waiting, key})
+    this._throttledDispatchWaitingAction()
+  }
+
+  _throttledDispatchWaitingAction = throttle(() => {
+    const changes = this._queuedChanges
+    this._queuedChanges = []
+    if (changes.length) {
+      this._emitWaiting(changes)
+    }
+  }, 500)
+
+  constructor(
+    emitWaiting: (changes: BatchParams) => void,
+    onConnected: (c: boolean) => void,
+    onEngineIncoming?: (action: EngineGen.Actions) => void
+  ) {
+    this._onConnectedCB = onConnected
+    this._onEngineIncoming = onEngineIncoming
+    this._emitWaiting = emitWaiting
+    this._rpcClient = createClient(
+      payload => this._rpcIncoming(payload),
+      () => this._onConnected(),
+      () => this._onDisconnect()
+    )
+    this._setupDebugging()
+  }
+
+  rebindCallbacks(
+    emitWaiting: (changes: BatchParams) => void,
+    onConnected: (c: boolean) => void,
+    onEngineIncoming?: (action: EngineGen.Actions) => void
+  ) {
+    this._emitWaiting = emitWaiting
+    this._onConnectedCB = onConnected
+    this._onEngineIncoming = onEngineIncoming
+  }
+
+  _setupDebugging() {
+    if (!__DEV__) {
+      return
+    }
+
+    global.DEBUGEngine = this
+
+    // Print out any alive sessions periodically
+    if (printOutstandingRPCs) {
+      setInterval(() => {
+        if ([...this._sessionsMap.values()].some(session => !session.getDangling())) {
+          logger.localLog('outstandingSessionDebugger: ', this._sessionsMap)
+        }
+      }, 10 * 1000)
+    }
+  }
+
+  _sessionSummary() {
+    return [...this._sessionsMap.values()]
+      .filter(session => !session.getDangling())
+      .map(session => ({
+        id: session.getId(),
+        method: session._startMethod || 'unknown',
+      }))
+  }
+
+  _onDisconnect() {
+    logger.warn('Engine disconnected', {
+      hasConnected: this._hasConnected,
+      listenersAreReady: this._listenersAreReady,
+      sessions: this._sessionSummary(),
+    })
+    // tell renderer we're disconnected
+    this._onConnectedCB(false)
+  }
+
+  // We want to dispatch the connect action but only after listeners boot up
+  listenersAreReady = () => {
+    this._listenersAreReady = true
+    logger.info('Engine listenersAreReady', {
+      hasConnected: this._hasConnected,
+      sessions: this._sessionSummary(),
+    })
+    if (this._hasConnected) {
+      this._onConnectedCB(true)
+    }
+  }
+
+  // Called when we reconnect to the server. This only happens in node in the electron side.
+  // We proxy the stuff over the mainWindowDispatch
+  _onConnected() {
+    this._hasConnected = true
+    logger.info('Engine connected', {
+      listenersAreReady: this._listenersAreReady,
+      sessions: this._sessionSummary(),
+    })
+    this._onConnectedCB(true)
+  }
+
+  // Create and return the next unique session id
+  _generateSessionID() {
+    this._nextSessionID++
+    return this._nextSessionID
+  }
+
+  // Got a cancelled sequence id
+  _handleCancel(seqid: number) {
+    let cancelled: Session | undefined
+    for (const s of this._sessionsMap.values()) {
+      if (s.hasSeqID(seqid)) {
+        cancelled = s
+        break
+      }
+    }
+    if (cancelled) {
+      if (printRPC) {
+        rpcLog({
+          extra: {cancelledSessionID: cancelled.getId()},
+          method: cancelled._startMethod || 'unknown',
+          reason: '[cancel]',
+          type: 'engineInternal',
+        })
+      }
+      cancelled.cancel()
+    } else if (printRPC) {
+      rpcLog({
+        extra: {seqid},
+        method: 'unknown',
+        reason: '[cancel?]',
+        type: 'engineInternal',
+      })
+    }
+  }
+
+  // An incoming rpc call
+  _rpcIncoming(payload: PayloadType) {
+    const {method, param: incomingParam, response} = payload
+    const param = incomingParam[0] || {}
+    const {seqid, cancelled} = response || {cancelled: false, seqid: 0}
+    const {sessionID} = param
+
+    if (cancelled) {
+      this._handleCancel(seqid)
+    } else {
+      const session = typeof sessionID === 'number' ? this._sessionsMap.get(sessionID) : undefined
+      if (session?.incomingCall(method, param, response)) {
+        // Part of a session?
+      } else {
+        // Dispatch as an action
+        const extra: {response?: unknown} = {}
+        if (this._customResponseAction[method]) {
+          extra.response = response
+        } else {
+          // Not a custom response so we auto handle it
+          response?.result?.()
+        }
+        const act = {
+          payload: {params: param, ...extra},
+          type: method as EngineGen.ActionKey,
+        } as EngineGen.EngineActions
+        if (this._onEngineIncoming) {
+          this._onEngineIncoming(act)
+        }
+      }
+    }
+  }
+
+  // An outgoing call. ONLY called by the flow-type rpc helpers
+  _rpcOutgoing(p: {
+    method: string
+    params: object | undefined
+    callback: (...args: Array<any>) => void
+    incomingCallMap?: IncomingCallMapType
+    customResponseIncomingCallMap?: CustomResponseIncomingCallMapType
+    waitingKey?: WaitingKey
+  }) {
+    const {customResponseIncomingCallMap, incomingCallMap, waitingKey} = p
+    const {method, params, callback} = p
+    // Make a new session and start the request
+    const session = this.createSession({
+      customResponseIncomingCallMap,
+      dangling: !!this._backgroundSessionMethods[method as MethodKey],
+      incomingCallMap,
+      waitingKey,
+    })
+    session.start(method, params, callback)
+    return session.getId()
+  }
+
+  // Make a new session. If the session hangs around forever set dangling to true
+  createSession(p: {
+    incomingCallMap?: IncomingCallMapType
+    customResponseIncomingCallMap?: CustomResponseIncomingCallMapType
+    cancelHandler?: CancelHandlerType
+    dangling?: boolean
+    waitingKey?: WaitingKey
+  }): Session {
+    const {customResponseIncomingCallMap, incomingCallMap, cancelHandler, dangling = false, waitingKey} = p
+    const sessionID = this._generateSessionID()
+
+    const session = new Session({
+      cancelHandler,
+      customResponseIncomingCallMap,
+      dangling,
+      endHandler: session => this._sessionEnded(session),
+      incomingCallMap,
+      invoke: (method, param, cb) => {
+        this._rpcClient.invoke(method, param, (...args: Array<unknown>) => {
+          // If first argument is set, convert it to an Error type
+          if (args.length > 0 && !!args[0]) {
+            args[0] = convertToError(args[0], method)
+          }
+          cb(args[0], args[1])
+        })
+      },
+      sessionID,
+      waitingKey,
+    })
+
+    this._sessionsMap.set(sessionID, session)
+    return session
+  }
+
+  // Cleanup a session that ended
+  _sessionEnded(session: {getId: () => number; _startMethod?: string}) {
+    if (printRPC) {
+      rpcLog({
+        extra: {
+          sessionID: session.getId(),
+        },
+        method: session._startMethod || 'unknown',
+        reason: '[-session]',
+        type: 'engineInternal',
+      })
+    }
+    this._sessionsMap.delete(session.getId())
+  }
+
+  // Reset the engine
+  reset() {
+    if (isMobile) {
+      return
+    }
+    logger.warn('Engine reset requested', {
+      hasConnected: this._hasConnected,
+      listenersAreReady: this._listenersAreReady,
+      sessions: this._sessionSummary(),
+    })
+    this._sessionsMap.clear()
+    this._queuedChanges = []
+    this._hasConnected = false
+    this._listenersAreReady = false
+    this._rpcClient = resetClient(
+      this._rpcClient,
+      payload => this._rpcIncoming(payload),
+      () => this._onConnected(),
+      () => this._onDisconnect()
+    )
+  }
+}
+
+// don't overwrite this on HMR
+let engine: Engine | undefined
+if (__DEV__) {
+  engine = global.DEBUGEngine as Engine
+}
+
+const makeEngine = (
+  emitWaiting: (b: BatchParams) => void,
+  onConnected: (c: boolean) => void,
+  onEngineIncoming?: (action: EngineGen.Actions) => void
+) => {
+  if (__DEV__ && engine) {
+    logger.warn('makeEngine called multiple times')
+  }
+
+  if (!engine) {
+    engine = new Engine(emitWaiting, onConnected, onEngineIncoming)
+  } else {
+    engine.rebindCallbacks(emitWaiting, onConnected, onEngineIncoming)
+  }
+  initEngine(engine)
+  initEngineListener(engineListener)
+  return engine
+}
+
+const getEngine = (): Engine => {
+  if (!engine) {
+    throw new Error('Engine needs to be initialized first')
+  }
+  return engine
+}
+
+export default getEngine
+export {getEngine, makeEngine, Engine}
+export type {IncomingCallMapType, CustomResponseIncomingCallMapType}
diff --git a/shared/engine/listener.tsx b/shared/engine/listener.tsx
index fb148beb6c7d..495e00777301 100644
--- a/shared/engine/listener.tsx
+++ b/shared/engine/listener.tsx
@@ -1,15 +1,12 @@
 import {getEngine} from './require'
 import {ensureError, RPCError} from '@/util/errors'
 import {printOutstandingRPCs} from '@/local-debug'
-import type {CommonResponseHandler} from './types'
+import type {CommonResponseHandler, WaitingKey} from './types'
 import {wrapErrors} from '@/util/debug'
 import type {ErrorType} from './rpc-transport'
 
-type WaitingKey = string | ReadonlyArray<string>
-
 // Wraps a response to update the waiting state
-const makeWaitingResponse = (_r?: Partial<CommonResponseHandler>, waitingKey?: WaitingKey) => {
-  const r = _r
+const makeWaitingResponse = (r?: Partial<CommonResponseHandler>, waitingKey?: WaitingKey) => {
   if (!r || !waitingKey) {
     return r
   }
@@ -19,9 +16,7 @@ const makeWaitingResponse = (_r?: Partial<CommonResponseHandler>, waitingKey?: W
   if (r.error) {
     response.error = (e: ErrorType) => {
       // Waiting on the server again
-      if (waitingKey) {
-        getEngine().dispatchWaitingAction(waitingKey, true)
-      }
+      getEngine().dispatchWaitingAction(waitingKey, true)
       r.error?.(e)
     }
   }
@@ -29,9 +24,7 @@ const makeWaitingResponse = (_r?: Partial<CommonResponseHandler>, waitingKey?: W
   if (r.result) {
     response.result = (...args: Array<unknown>) => {
       // Waiting on the server again
-      if (waitingKey) {
-        getEngine().dispatchWaitingAction(waitingKey, true)
-      }
+      getEngine().dispatchWaitingAction(waitingKey, true)
       r.result?.(...args)
     }
   }
@@ -53,19 +46,13 @@ async function listener(p: {
     const incomingCallMap = p.incomingCallMap || {}
     const customResponseIncomingCallMap = p.customResponseIncomingCallMap || {}
 
-    // custom and normal incomingCallMaps
-    const bothCallMaps = [
-      ...Object.keys(incomingCallMap).map(method => ({custom: false, method})),
-      ...Object.keys(customResponseIncomingCallMap).map(method => ({custom: true, method})),
-    ]
-
     // Waiting on the server
     if (waitingKey) {
       getEngine().dispatchWaitingAction(waitingKey, true)
     }
 
-    const callMap = bothCallMaps.reduce((map: {[key: string]: unknown}, {method, custom}) => {
-      map[method] = (params: unknown, _response: CommonResponseHandler) => {
+    const makeHandler = (method: string, custom: boolean) => {
+      return (params: unknown, _response: CommonResponseHandler) => {
         // No longer waiting on the server
         if (waitingKey) {
           getEngine().dispatchWaitingAction(waitingKey, false)
@@ -99,13 +86,18 @@ async function listener(p: {
             }
           }, method)
 
-          invokeAndDispatch()
-            .then(() => {})
-            .catch(() => {})
+          invokeAndDispatch().catch(() => {})
         }, 0)
       }
-      return map
-    }, {})
+    }
+
+    const callMap: {[key: string]: unknown} = {}
+    for (const method of Object.keys(incomingCallMap)) {
+      callMap[method] = makeHandler(method, false)
+    }
+    for (const method of Object.keys(customResponseIncomingCallMap)) {
+      callMap[method] = makeHandler(method, true)
+    }
 
     // Make the actual call
     let outstandingIntervalID: ReturnType<typeof setInterval>
diff --git a/shared/engine/local-console.tsx b/shared/engine/local-console.tsx
index f8691e273751..3df89fe45d3e 100644
--- a/shared/engine/local-console.tsx
+++ b/shared/engine/local-console.tsx
@@ -1,20 +1,19 @@
 const localLog = console.log.bind(console)
 
-const _base =
-  (messageObject: boolean, colors: Array<string>) =>
-  (shortLabel: string, longerMessage?: string, optionalSuffix?: string, ...rest: Array<unknown>) =>
-    localLog(
-      `%c%s%c${messageObject ? '%O' : '%s'}%c%s%c`,
-      `background-color: ${colors[0]}; color: #fff; padding: 2px 4px; font-weight: bold;`,
-      shortLabel || '',
-      messageObject ? '' : `background-color: ${colors[1]}; color: #000; padding: 2px 4px;`,
-      longerMessage || '',
-      optionalSuffix
-        ? `background-color: ${colors[0]}; color: #fff; padding: 2px 4px; font-weight: bold;`
-        : '',
-      optionalSuffix || '',
-      `background-color: white; color: black; padding: 2px 4px; font-weight: normal; font-style: italic;`,
-      ...rest
-    )
-
-export const green = _base(false, ['#388E3C', '#A5D6A7'])
+export const green = (
+  shortLabel: string,
+  longerMessage?: string,
+  optionalSuffix?: string,
+  ...rest: Array<unknown>
+) =>
+  localLog(
+    `%c%s%c%s%c%s%c`,
+    'background-color: #388E3C; color: #fff; padding: 2px 4px; font-weight: bold;',
+    shortLabel || '',
+    'background-color: #A5D6A7; color: #000; padding: 2px 4px;',
+    longerMessage || '',
+    optionalSuffix ? 'background-color: #388E3C; color: #fff; padding: 2px 4px; font-weight: bold;' : '',
+    optionalSuffix || '',
+    'background-color: white; color: black; padding: 2px 4px; font-weight: normal; font-style: italic;',
+    ...rest
+  )
diff --git a/shared/engine/request.tsx b/shared/engine/request.tsx
deleted file mode 100644
index c332bc19d124..000000000000
--- a/shared/engine/request.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-// Incoming and outgoing requests that are in a session
-import type {MethodKey, ResponseType} from './types'
-import type {InvokeType} from './index.platform'
-import type {RPCError} from '@/util/errors'
-
-type SimpleWaiting = (waiting: boolean, err?: RPCError) => void
-
-// Base class. Handles method and parameters. Waiting callback
-class Request {
-  // RPC call name
-  method: MethodKey
-  // RPC parameters
-  param: object
-  // Let others know our waiting state
-  _waitingHandler: SimpleWaiting
-
-  constructor(method: MethodKey, param: object, waitingHandler: SimpleWaiting) {
-    this.method = method
-    this.param = param
-    this._waitingHandler = waitingHandler
-  }
-
-  updateWaiting(waiting: boolean, err?: RPCError) {
-    this._waitingHandler(waiting, err)
-  }
-}
-
-class IncomingRequest extends Request {
-  // Callback in the incomingCallMap
-  _handler: (param: object | undefined, request: ResponseType) => void
-  _response: ResponseType | undefined
-
-  constructor(
-    method: MethodKey,
-    param: object,
-    response: ResponseType | undefined,
-    waitingHandler: SimpleWaiting,
-    handler: (param: object | undefined, request: ResponseType) => void
-  ) {
-    super(method, param, waitingHandler)
-
-    this._handler = handler
-    this._response = response
-  }
-
-  _cleanup() {
-    this.updateWaiting(true) // We just responded to the server so now we're waiting
-  }
-
-  result(...args: Array<unknown>) {
-    this._response?.result?.(...args)
-    this._cleanup()
-  }
-
-  error(...args: Array<unknown>) {
-    this._response?.error?.(...args)
-    this._cleanup()
-  }
-
-  handle() {
-    this.updateWaiting(false) // we just got a response from the server so we're no longer waiting
-
-    // Note we pass ourself to the handler and not the raw response. This allows us to clean up
-    return this._handler(this.param, this)
-  }
-}
-
-class OutgoingRequest extends Request {
-  // Callback when we've gotten a response
-  _callback: (err: RPCError | undefined, data: unknown) => void
-  // How we make calls
-  _invoke: InvokeType
-
-  constructor(
-    method: MethodKey,
-    param: object,
-    callback: (err: RPCError | undefined, data: unknown) => void,
-    waitingHandler: SimpleWaiting,
-    invoke: InvokeType
-  ) {
-    super(method, param, waitingHandler)
-    this._invoke = invoke
-    this._callback = callback
-  }
-
-  send() {
-    this.updateWaiting(true)
-    this._invoke(this.method, [this.param], (err: unknown, data: unknown) => {
-      this._sendCallback(err as RPCError | undefined, data)
-    })
-  }
-
-  _sendCallback(err: RPCError | undefined, data: unknown) {
-    this.updateWaiting(false, err)
-    this._callback(err, data)
-  }
-}
-
-export {IncomingRequest, OutgoingRequest}
diff --git a/shared/engine/rpc-transport.test.ts b/shared/engine/rpc-transport.test.ts
index a5f635b0ed5c..c12fef0bf0d2 100644
--- a/shared/engine/rpc-transport.test.ts
+++ b/shared/engine/rpc-transport.test.ts
@@ -87,10 +87,7 @@ test('disconnect fails outstanding invocations with EOF', () => {
   transport.invoke('keybase.1.test.hello', [{}], cb)
   transport.dropConnection()
 
-  expect(cb).toHaveBeenCalledWith(
-    expect.objectContaining({code: errors.EOF, desc: errors.msg[errors.EOF]}),
-    {}
-  )
+  expect(cb).toHaveBeenCalledWith(expect.objectContaining({code: errors.EOF, desc: 'EOF from server'}), {})
 })
 
 test('incoming invoke exposes response handlers', () => {
@@ -116,7 +113,7 @@ test('incoming invoke without handler returns unknown method error', () => {
   transport.dispatchDecodedMessage([0, 11, 'keybase.1.test.missing', [{}]])
 
   expect(transport.sent).toEqual([
-    [1, 11, {code: errors.UNKNOWN_METHOD, desc: errors.msg[errors.UNKNOWN_METHOD], name: 'UNKNOWN_METHOD'}, null],
+    [1, 11, {code: errors.UNKNOWN_METHOD, desc: 'No method available', name: 'UNKNOWN_METHOD'}, null],
   ])
 })
 
diff --git a/shared/engine/rpc-transport.tsx b/shared/engine/rpc-transport.tsx
index 8bad614fc886..6caea764c5a0 100644
--- a/shared/engine/rpc-transport.tsx
+++ b/shared/engine/rpc-transport.tsx
@@ -6,7 +6,6 @@ const MESSAGE_TYPE_NOTIFY = 2
 const MESSAGE_TYPE_CANCEL = 3
 
 type ErrorName = 'OK' | 'UNKNOWN_METHOD' | 'EOF'
-type ErrorCode = 0 | 100 | 101
 
 const errorMessages: Record<ErrorName, string> = {
   EOF: 'EOF from server',
@@ -14,37 +13,10 @@ const errorMessages: Record<ErrorName, string> = {
   UNKNOWN_METHOD: 'No method available',
 }
 
-const errorCodes: Record<ErrorName, ErrorCode> = {
+export const errors = {
   EOF: 101,
   OK: 0,
   UNKNOWN_METHOD: 100,
-}
-
-export const errors = {
-  EOF: errorCodes.EOF,
-  OK: errorCodes.OK,
-  UNKNOWN_METHOD: errorCodes.UNKNOWN_METHOD,
-  code: {
-    EOF: errorCodes.EOF,
-    OK: errorCodes.OK,
-    UNKNOWN_METHOD: errorCodes.UNKNOWN_METHOD,
-  },
-  msg: {
-    0: errorMessages.OK,
-    100: errorMessages.UNKNOWN_METHOD,
-    101: errorMessages.EOF,
-    EOF: errorMessages.EOF,
-    OK: errorMessages.OK,
-    UNKNOWN_METHOD: errorMessages.UNKNOWN_METHOD,
-  },
-  name: {
-    0: 'OK',
-    100: 'UNKNOWN_METHOD',
-    101: 'EOF',
-    EOF: 'EOF',
-    OK: 'OK',
-    UNKNOWN_METHOD: 'UNKNOWN_METHOD',
-  },
 } as const
 
 export type ErrorType = {
@@ -81,7 +53,7 @@ const maxFrameSize = 64 * 1024 * 1024 // 64 MB; rejects oversized frames before
 
 const makeTransportError = (name: ErrorName): ErrorType => ({
   code: errors[name],
-  desc: errors.msg[errors[name]],
+  desc: errorMessages[name],
   name,
 })
 
@@ -120,11 +92,108 @@ const encodeFrame = (message: RPCMessage) => {
 const isRPCMessage = (message: unknown): message is RPCMessage =>
   Array.isArray(message) && typeof message[0] === 'number'
 
-export abstract class RPCTransport {
-  needsConnect = false
+// Reassembles length-prefixed msgpack frames from an arbitrary byte-chunk
+// stream. Only byte-stream transports use this (desktop socket / renderer
+// IPC); mobile JSI hands over already-decoded messages.
+class FramePacketizer {
   private _bufferedBytes = 0
   private _chunks = new Array<Uint8Array>()
   private _chunkOffset = 0
+
+  get bufferedBytes() {
+    return this._bufferedBytes
+  }
+
+  reset() {
+    this._bufferedBytes = 0
+    this._chunks = []
+    this._chunkOffset = 0
+  }
+
+  append(data: Uint8Array) {
+    const chunk = toUint8Array(data)
+    if (!chunk.length) {
+      return
+    }
+    this._chunks.push(chunk)
+    this._bufferedBytes += chunk.length
+  }
+
+  peekByte() {
+    const firstChunk = this._chunks[0]
+    if (!firstChunk) {
+      return undefined
+    }
+    return firstChunk[this._chunkOffset]
+  }
+
+  // Read-only view (or copy when spanning chunks) of the next `length` bytes;
+  // does not consume. Views stay valid because chunks are never mutated in place.
+  peekBytes(length: number) {
+    if (length > this._bufferedBytes) {
+      return undefined
+    }
+
+    const firstChunk = this._chunks[0]
+    if (firstChunk) {
+      const available = firstChunk.length - this._chunkOffset
+      if (available >= length) {
+        return firstChunk.subarray(this._chunkOffset, this._chunkOffset + length)
+      }
+    }
+
+    const out = new Uint8Array(length)
+    let outOffset = 0
+    let remaining = length
+    let chunkIndex = 0
+    let chunkOffset = this._chunkOffset
+
+    while (remaining > 0) {
+      const chunk = this._chunks[chunkIndex]
+      if (!chunk) {
+        return undefined
+      }
+
+      const available = chunk.length - chunkOffset
+      const toCopy = Math.min(remaining, available)
+      out.set(chunk.subarray(chunkOffset, chunkOffset + toCopy), outOffset)
+      outOffset += toCopy
+      remaining -= toCopy
+      chunkIndex += 1
+      chunkOffset = 0
+    }
+
+    return out
+  }
+
+  consumeBytes(length: number) {
+    let remaining = length
+    while (remaining > 0) {
+      const chunk = this._chunks[0]
+      if (!chunk) {
+        this._chunkOffset = 0
+        this._bufferedBytes = 0
+        return
+      }
+
+      const available = chunk.length - this._chunkOffset
+      if (remaining < available) {
+        this._chunkOffset += remaining
+        this._bufferedBytes -= length
+        return
+      }
+
+      remaining -= available
+      this._chunks.shift()
+      this._chunkOffset = 0
+    }
+    this._bufferedBytes -= length
+  }
+}
+
+export abstract class RPCTransport {
+  needsConnect = false
+  private _packetizer = new FramePacketizer()
   private _explicitClose = false
   private _incomingRPCCallback?: IncomingRPCCallbackType
   private _connectCallback?: ConnectDisconnectCB
@@ -168,7 +237,7 @@ export abstract class RPCTransport {
   }
 
   protected onDisconnected() {
-    this.resetPacketizer()
+    this._packetizer.reset()
     this.failOutstanding(makeEOFError(), {})
     this._disconnectCallback?.()
   }
@@ -210,11 +279,12 @@ export abstract class RPCTransport {
   }
 
   packetizeData(data: Uint8Array) {
+    const p = this._packetizer
     try {
-      this.appendChunk(data)
+      p.append(data)
 
-      while (this._bufferedBytes > 0) {
-        const firstByte = this.peekByte()
+      while (p.bufferedBytes > 0) {
+        const firstByte = p.peekByte()
         if (firstByte === undefined) {
           return
         }
@@ -223,37 +293,43 @@ export abstract class RPCTransport {
         if (!headerLen) {
           throw new Error('Bad frame header received')
         }
-        if (this._bufferedBytes < headerLen) {
+        if (p.bufferedBytes < headerLen) {
           return
         }
 
-        const header = this.copyBufferedBytes(headerLen)
+        const header = p.peekBytes(headerLen)
         if (!header) {
           return
         }
 
-        const payloadLen = decode(header)
-        if (typeof payloadLen !== 'number' || payloadLen < 0) {
-          throw new Error('Bad frame length received')
+        // Frame length is a msgpack uint (fixint/uint8/uint16/uint32); read the
+        // big-endian bytes directly rather than paying a msgpack decode per frame
+        let payloadLen = 0
+        if (headerLen === 1) {
+          payloadLen = header[0] ?? 0
+        } else {
+          for (let i = 1; i < headerLen; i++) {
+            payloadLen = payloadLen * 256 + (header[i] ?? 0)
+          }
         }
         if (payloadLen > maxFrameSize) {
           throw new Error(`Frame too large: ${payloadLen} bytes`)
         }
-        if (this._bufferedBytes < headerLen + payloadLen) {
+        if (p.bufferedBytes < headerLen + payloadLen) {
           return
         }
 
-        this.consumeBufferedBytes(headerLen)
-        const payloadBytes = this.copyBufferedBytes(payloadLen)
+        p.consumeBytes(headerLen)
+        const payloadBytes = p.peekBytes(payloadLen)
         if (!payloadBytes) {
           return
         }
         const payload = decode(payloadBytes)
-        this.consumeBufferedBytes(payloadLen)
+        p.consumeBytes(payloadLen)
         this.dispatchDecodedMessage(payload)
       }
     } catch (err) {
-      this.resetPacketizer()
+      p.reset()
       this.onPacketizeError(err)
     }
   }
@@ -375,7 +451,7 @@ export abstract class RPCTransport {
   close() {
     this.markExplicitClose()
     this._pending = []
-    this.resetPacketizer()
+    this._packetizer.reset()
     this.failOutstanding(makeEOFError(), {})
   }
 
@@ -403,89 +479,6 @@ export abstract class RPCTransport {
     }
   }
 
-  private resetPacketizer() {
-    this._bufferedBytes = 0
-    this._chunks = []
-    this._chunkOffset = 0
-  }
-
-  private appendChunk(data: Uint8Array) {
-    const chunk = toUint8Array(data)
-    if (!chunk.length) {
-      return
-    }
-    this._chunks.push(chunk)
-    this._bufferedBytes += chunk.length
-  }
-
-  private peekByte() {
-    const firstChunk = this._chunks[0]
-    if (!firstChunk) {
-      return undefined
-    }
-    return firstChunk[this._chunkOffset]
-  }
-
-  private copyBufferedBytes(length: number) {
-    if (length > this._bufferedBytes) {
-      return undefined
-    }
-
-    const firstChunk = this._chunks[0]
-    if (firstChunk) {
-      const available = firstChunk.length - this._chunkOffset
-      if (available >= length) {
-        return firstChunk.slice(this._chunkOffset, this._chunkOffset + length)
-      }
-    }
-
-    const out = new Uint8Array(length)
-    let outOffset = 0
-    let remaining = length
-    let chunkIndex = 0
-    let chunkOffset = this._chunkOffset
-
-    while (remaining > 0) {
-      const chunk = this._chunks[chunkIndex]
-      if (!chunk) {
-        return undefined
-      }
-
-      const available = chunk.length - chunkOffset
-      const toCopy = Math.min(remaining, available)
-      out.set(chunk.subarray(chunkOffset, chunkOffset + toCopy), outOffset)
-      outOffset += toCopy
-      remaining -= toCopy
-      chunkIndex += 1
-      chunkOffset = 0
-    }
-
-    return out
-  }
-
-  private consumeBufferedBytes(length: number) {
-    let remaining = length
-    while (remaining > 0) {
-      const chunk = this._chunks[0]
-      if (!chunk) {
-        this._chunkOffset = 0
-        this._bufferedBytes = 0
-        return
-      }
-
-      const available = chunk.length - this._chunkOffset
-      if (remaining < available) {
-        this._chunkOffset += remaining
-        this._bufferedBytes -= length
-        return
-      }
-
-      remaining -= available
-      this._chunks.shift()
-      this._chunkOffset = 0
-    }
-    this._bufferedBytes -= length
-  }
 }
 
 export {encodeFrame, makeEOFError, makeTransportError}
diff --git a/shared/engine/session-impl.tsx b/shared/engine/session-impl.tsx
deleted file mode 100644
index dffd4ee1d10b..000000000000
--- a/shared/engine/session-impl.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import {
-  StatusCode,
-  type CustomResponseIncomingCallMap,
-  type IncomingCallMapType,
-} from '@/constants/rpc/rpc-gen'
-import {rpcLog, type InvokeType} from './index.platform'
-import {IncomingRequest, OutgoingRequest} from './request'
-import {RPCError} from '@/util/errors'
-import {getEngine} from './require'
-import type {SessionID, ResponseType, EndHandlerType, MethodKey} from './types'
-
-type WaitingKey = string | ReadonlyArray<string>
-
-// A session is a series of calls back and forth tied together with a single sessionID
-class Session {
-  // Our id
-  _id: SessionID
-  // Map of methods => callbacks
-  _incomingCallMap: IncomingCallMapType
-  // Map of methods => callbacks
-  _customResponseIncomingCallMap: CustomResponseIncomingCallMap
-  // Let the outside know we're waiting
-  _waitingKey: WaitingKey
-  // Tell engine we're done
-  _endHandler: EndHandlerType | undefined
-  // Sequence IDs we've seen. Value is true if we've responded (often we get cancel after we've replied)
-  _seqIDResponded: {[K in string]: boolean} = {}
-  // If you want to know about being cancelled
-  _cancelHandler: CancelHandlerType | undefined
-  // If true this session exists forever
-  _dangling: boolean
-  // Name of the start method, just to help debug
-  _startMethod: MethodKey | undefined
-  // Start callback so we can cancel our own callback
-  _startCallback: ((err?: RPCError, ...args: Array<unknown>) => void) | undefined
-
-  // Allow us to make calls
-  _invoke: InvokeType
-
-  // Outstanding requests
-  _outgoingRequests: Array<{method: string}> = []
-  _incomingRequests: Array<{method: string}> = []
-
-  constructor(p: {
-    sessionID: SessionID
-    incomingCallMap?: IncomingCallMapType
-    customResponseIncomingCallMap?: CustomResponseIncomingCallMap
-    waitingKey?: WaitingKey
-    invoke: InvokeType
-    endHandler: EndHandlerType
-    cancelHandler?: CancelHandlerType
-    dangling?: boolean
-  }) {
-    this._id = p.sessionID
-    this._incomingCallMap = p.incomingCallMap || {}
-    this._customResponseIncomingCallMap = p.customResponseIncomingCallMap || {}
-    this._waitingKey = p.waitingKey || ''
-    this._invoke = p.invoke
-    this._endHandler = p.endHandler
-    this._cancelHandler = p.cancelHandler
-    this._dangling = p.dangling || false
-  }
-
-  getId(): SessionID {
-    return this._id
-  }
-  getDangling(): boolean {
-    return this._dangling
-  }
-
-  // Make a waiting handler for the request. We add additional data before calling the parent waitingHandler
-  // and do internal bookkeeping if the request is done
-  _makeWaitingHandler(isOutgoing: boolean, method: MethodKey, seqid?: number) {
-    return (waiting: boolean, err: RPCError | undefined) => {
-      rpcLog({
-        extra: {
-          id: this.getId(),
-          seqid,
-          this: this,
-          waiting,
-        },
-        method,
-        reason: `[${waiting ? '+' : '-'}waiting]`,
-        type: 'engineInternal',
-      })
-      if (this._waitingKey) {
-        getEngine().dispatchWaitingAction(this._waitingKey, waiting, err)
-      }
-
-      // Request is finished, do cleanup
-      if (!waiting) {
-        const requests = isOutgoing ? this._outgoingRequests : this._incomingRequests
-        const idx = requests.findIndex(r => r.method === method)
-        if (idx !== -1) {
-          // Mark us as responded
-          if (seqid) {
-            this._seqIDResponded[String(seqid)] = true
-          }
-          // Remove from our list
-          requests.splice(idx, 1)
-        }
-      }
-    }
-  }
-
-  cancel() {
-    if (this._cancelHandler) {
-      this._cancelHandler(this)
-    } else if (this._startCallback) {
-      this._startCallback(new RPCError('Received RPC cancel for session', StatusCode.sccanceled))
-    }
-
-    this.end()
-  }
-
-  end() {
-    this._endHandler?.(this)
-  }
-
-  // Start the session normally. Tells engine we're done at the end
-  start(method: MethodKey, param: object | undefined, callback: (() => void) | undefined) {
-    this._startMethod = method
-    this._startCallback = callback
-
-    // When this request is done the session is done
-    const wrappedCallback = (err: RPCError | undefined, ...args: Array<unknown>) => {
-      this._startCallback?.(err, ...args)
-      this._startCallback = undefined
-      this.end()
-    }
-
-    const wrappedParam = {
-      ...(param ?? {}),
-      sessionID: this.getId(),
-    }
-
-    rpcLog({
-      extra: {id: this.getId(), this: this},
-      method,
-      reason: '[+session]',
-      type: 'engineInternal',
-    })
-
-    const outgoingRequest = new OutgoingRequest(
-      method,
-      wrappedParam,
-      wrappedCallback,
-      this._makeWaitingHandler(true, method),
-      this._invoke
-    )
-    this._outgoingRequests.push(outgoingRequest)
-    outgoingRequest.send()
-  }
-
-  // We have an incoming call tied to a sessionID, called only by engine
-  incomingCall(method: MethodKey, param: object, response?: ResponseType): boolean {
-    rpcLog({
-      extra: {
-        id: this.getId(),
-        response,
-        this: this,
-      },
-      method,
-      reason: '[-calling:session]',
-      type: 'engineInternal',
-    })
-
-    let handler = (this._incomingCallMap as {[key: string]: unknown})[method] as
-      | undefined
-      | ((param: object | undefined, request: ResponseType) => void)
-
-    if (!handler) {
-      const c = this._customResponseIncomingCallMap as {[key: string]: typeof handler}
-      handler = c[method]
-    }
-
-    if (!handler) {
-      return false
-    }
-
-    if (response?.seqid) {
-      this._seqIDResponded[String(response.seqid)] = false
-    }
-
-    const waitingHandler = this._makeWaitingHandler(false, method, response?.seqid)
-    const incomingRequest = new IncomingRequest(method, param, response, waitingHandler, handler)
-    this._incomingRequests.push(incomingRequest)
-    incomingRequest.handle()
-    return true
-  }
-
-  // Tell engine if we can handle the cancelled call
-  hasSeqID(seqID: number) {
-    // The server can cancel callback seqids after we have already responded.
-    // Only unresponded callback seqids should cancel the parent session.
-    return this._seqIDResponded[String(seqID)] === false
-  }
-}
-
-export type CancelHandlerType = (session: Session) => void
-export default Session
diff --git a/shared/engine/session.tsx b/shared/engine/session.tsx
index 1cc4a6451cef..173f46969d3b 100644
--- a/shared/engine/session.tsx
+++ b/shared/engine/session.tsx
@@ -1,2 +1,200 @@
-export {default} from './session-impl'
-export type {CancelHandlerType} from './session-impl'
+import {
+  StatusCode,
+  type CustomResponseIncomingCallMap,
+  type IncomingCallMapType,
+} from '@/constants/rpc/rpc-gen'
+import {printRPC} from '@/local-debug'
+import {rpcLog, type InvokeType} from './index.platform'
+import {RPCError} from '@/util/errors'
+import {getEngine} from './require'
+import type {SessionID, ResponseType, EndHandlerType, MethodKey, WaitingKey} from './types'
+
+// A session is a series of calls back and forth tied together with a single sessionID
+class Session {
+  // Our id
+  _id: SessionID
+  // Map of methods => callbacks
+  _incomingCallMap: IncomingCallMapType
+  // Map of methods => callbacks
+  _customResponseIncomingCallMap: CustomResponseIncomingCallMap
+  // Let the outside know we're waiting
+  _waitingKey: WaitingKey
+  // Tell engine we're done
+  _endHandler: EndHandlerType | undefined
+  // Sequence IDs awaiting a response; removed once we've responded (often we get cancel after we've replied)
+  _seqIDsAwaitingResponse = new Set<number>()
+  // If you want to know about being cancelled
+  _cancelHandler: CancelHandlerType | undefined
+  // If true this session exists forever
+  _dangling: boolean
+  // Name of the start method, just to help debug
+  _startMethod: MethodKey | undefined
+  // Start callback so we can cancel our own callback
+  _startCallback: ((err?: RPCError, ...args: Array<unknown>) => void) | undefined
+
+  // Allow us to make calls
+  _invoke: InvokeType
+
+  constructor(p: {
+    sessionID: SessionID
+    incomingCallMap?: IncomingCallMapType
+    customResponseIncomingCallMap?: CustomResponseIncomingCallMap
+    waitingKey?: WaitingKey
+    invoke: InvokeType
+    endHandler: EndHandlerType
+    cancelHandler?: CancelHandlerType
+    dangling?: boolean
+  }) {
+    this._id = p.sessionID
+    this._incomingCallMap = p.incomingCallMap || {}
+    this._customResponseIncomingCallMap = p.customResponseIncomingCallMap || {}
+    this._waitingKey = p.waitingKey || ''
+    this._invoke = p.invoke
+    this._endHandler = p.endHandler
+    this._cancelHandler = p.cancelHandler
+    this._dangling = p.dangling || false
+  }
+
+  getId(): SessionID {
+    return this._id
+  }
+  getDangling(): boolean {
+    return this._dangling
+  }
+
+  // Make a waiting handler for the request. We add additional data before calling the parent waitingHandler
+  // and do internal bookkeeping if the request is done
+  _makeWaitingHandler(method: MethodKey, seqid?: number) {
+    return (waiting: boolean, err?: RPCError) => {
+      if (printRPC) {
+        rpcLog({
+          extra: {
+            id: this.getId(),
+            seqid,
+            this: this,
+            waiting,
+          },
+          method,
+          reason: `[${waiting ? '+' : '-'}waiting]`,
+          type: 'engineInternal',
+        })
+      }
+      if (this._waitingKey) {
+        getEngine().dispatchWaitingAction(this._waitingKey, waiting, err)
+      }
+    }
+  }
+
+  cancel() {
+    if (this._cancelHandler) {
+      this._cancelHandler(this)
+    } else if (this._startCallback) {
+      this._startCallback(new RPCError('Received RPC cancel for session', StatusCode.sccanceled))
+    }
+
+    this.end()
+  }
+
+  end() {
+    this._endHandler?.(this)
+  }
+
+  // Start the session normally. Tells engine we're done at the end
+  start(method: MethodKey, param: object | undefined, callback: (() => void) | undefined) {
+    this._startMethod = method
+    this._startCallback = callback
+
+    // When this request is done the session is done
+    const wrappedCallback = (err: RPCError | undefined, ...args: Array<unknown>) => {
+      this._startCallback?.(err, ...args)
+      this._startCallback = undefined
+      this.end()
+    }
+
+    const wrappedParam = {
+      ...(param ?? {}),
+      sessionID: this.getId(),
+    }
+
+    if (printRPC) {
+      rpcLog({
+        extra: {id: this.getId(), this: this},
+        method,
+        reason: '[+session]',
+        type: 'engineInternal',
+      })
+    }
+
+    const updateWaiting = this._makeWaitingHandler(method)
+    updateWaiting(true)
+    this._invoke(method, [wrappedParam], (err: unknown, data: unknown) => {
+      updateWaiting(false, err as RPCError | undefined)
+      wrappedCallback(err as RPCError | undefined, data)
+    })
+  }
+
+  // We have an incoming call tied to a sessionID, called only by engine
+  incomingCall(method: MethodKey, param: object, response?: ResponseType): boolean {
+    if (printRPC) {
+      rpcLog({
+        extra: {
+          id: this.getId(),
+          response,
+          this: this,
+        },
+        method,
+        reason: '[-calling:session]',
+        type: 'engineInternal',
+      })
+    }
+
+    let handler = (this._incomingCallMap as {[key: string]: unknown})[method] as
+      | undefined
+      | ((param: object | undefined, request: ResponseType) => void)
+
+    if (!handler) {
+      const c = this._customResponseIncomingCallMap as {[key: string]: typeof handler}
+      handler = c[method]
+    }
+
+    if (!handler) {
+      return false
+    }
+
+    if (response?.seqid !== undefined) {
+      this._seqIDsAwaitingResponse.add(response.seqid)
+    }
+
+    const updateWaiting = this._makeWaitingHandler(method, response?.seqid)
+    updateWaiting(false) // got a call from the server so we're no longer waiting
+    // Responded; only unresponded seqids should cancel the session
+    const onResponded = () => {
+      if (response?.seqid !== undefined) {
+        this._seqIDsAwaitingResponse.delete(response.seqid)
+      }
+      updateWaiting(true) // after we respond to the server we're waiting on it again
+    }
+    const request: ResponseType = {
+      error: (...args: Array<unknown>) => {
+        response?.error?.(...args)
+        onResponded()
+      },
+      result: (...args: Array<unknown>) => {
+        response?.result?.(...args)
+        onResponded()
+      },
+    }
+    handler(param, request)
+    return true
+  }
+
+  // Tell engine if we can handle the cancelled call
+  hasSeqID(seqID: number) {
+    // The server can cancel callback seqids after we have already responded.
+    // Only unresponded callback seqids should cancel the parent session.
+    return this._seqIDsAwaitingResponse.has(seqID)
+  }
+}
+
+export type CancelHandlerType = (session: Session) => void
+export default Session
diff --git a/shared/engine/transport-shared.tsx b/shared/engine/transport-shared.tsx
index fe736c66162b..bd4f65c3b9d6 100644
--- a/shared/engine/transport-shared.tsx
+++ b/shared/engine/transport-shared.tsx
@@ -45,25 +45,23 @@ abstract class TransportShared extends RPCTransport {
     super({
       connectCallback,
       disconnectCallback,
-      incomingRPCCallback: incomingRPCCallback
-        ? payload => {
-            const {method} = payload
-            if (printRPC) {
-              const {param} = payload
+      // logging wrapper only when printRPC; avoids per-message overhead in prod
+      incomingRPCCallback:
+        incomingRPCCallback && printRPC
+          ? payload => {
+              const {method, param} = payload
               const extra = param[0]
               rpcLog({extra, method, reason: '[incoming]', type: 'serverToEngine'})
+              this.injectInstrumentedResponse(payload)
+              incomingRPCCallback(payload)
             }
-
-            this.injectInstrumentedResponse(payload)
-            incomingRPCCallback(payload)
-          }
-        : undefined,
+          : incomingRPCCallback,
     })
   }
 
   // add logging / multiple call checking
   injectInstrumentedResponse(payload: PayloadType) {
-    if (!payload.response) {
+    if (!printRPC || !payload.response) {
       return
     }
 
diff --git a/shared/engine/types.ts b/shared/engine/types.ts
index b93f033a44ed..d81ce38d2e6c 100644
--- a/shared/engine/types.ts
+++ b/shared/engine/types.ts
@@ -1,8 +1,7 @@
 import type {ErrorType} from '@/engine/rpc-transport'
 export type MethodKey = string
 export type SessionID = number
-export type SessionIDKey = string // used in our maps, really converted to a string key
-export type WaitingHandlerType = (waiting: boolean, method: string, sessionID: SessionID) => object
+export type WaitingKey = string | ReadonlyArray<string>
 export type EndHandlerType = (session: {getId: () => SessionID; _startMethod?: MethodKey}) => void
 export type ResponseType = {
   result?: (...args: Array<any>) => void
@@ -14,14 +13,3 @@ export type CommonResponseHandler = {
   error: RPCErrorHandler
   result: (...rest: Array<any>) => void
 }
-export type Bool = boolean
-export type Boolean = boolean
-export type Bytes = Uint8Array
-export type Double = number
-export type Int = number
-export type Int64 = number
-export type Long = number
-export type String = string
-export type Uint = number
-export type Uint64 = number
-export {RPCError} from '@/util/errors'
diff --git a/shared/fs/common/tlf-info-line.tsx b/shared/fs/common/tlf-info-line.tsx
index 5f6890cc3fab..90d611424910 100644
--- a/shared/fs/common/tlf-info-line.tsx
+++ b/shared/fs/common/tlf-info-line.tsx
@@ -32,15 +32,14 @@ const getOtherResetText = (names: ReadonlyArray<string>): string => {
 const newMetaMaybe = (props: Props) =>
   props.mode === 'row' && props.isNew ? (
     <Kb.Meta
-      title="new"
-      backgroundColor={Kb.Styles.globalColors.orange}
+      variant="new"
       style={Kb.Styles.collapseStyles([styles.meta, {marginRight: Kb.Styles.globalMargins.xtiny}])}
     />
   ) : null
 
 const resetMetaMaybe = (props: Props) =>
   props.mode === 'row' && props.reset === true ? (
-    <Kb.Meta title="reset" backgroundColor={Kb.Styles.globalColors.red} style={styles.meta} />
+    <Kb.Meta variant="reset" style={styles.meta} />
   ) : null
 
 const resetText = (props: Props) => {
@@ -150,7 +149,6 @@ const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
       meta: {
-        alignSelf: 'center',
         marginRight: Kb.Styles.globalMargins.xtiny,
       },
       textDefault: {
diff --git a/shared/git/delete-repo.tsx b/shared/git/delete-repo.tsx
index 06fb4db41864..e8b81c12e4d5 100644
--- a/shared/git/delete-repo.tsx
+++ b/shared/git/delete-repo.tsx
@@ -57,85 +57,57 @@ const DeleteRepo = (ownProps: OwnProps) => {
   }
   return (
     <Kb.ScrollView>
-      <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} fullHeight={true} flex={1} style={styles.container}>
-        {!!error && <Kb.Banner color="red">{error}</Kb.Banner>}
-        <Kb.Text center={true} type="Header" style={styles.headerText}>
+      <Kb.Box2 direction="vertical" alignItems="center" fullWidth={true} fullHeight={true} flex={1} gap="medium" style={styles.container}>
+        <Kb.ErrorBanner error={error} />
+        <Kb.Text center={true} type="Header">
           Are you sure you want to delete this {teamname ? 'team ' : ''}
           repository?
         </Kb.Text>
         <Kb.ImageIcon type={teamname ? 'icon-repo-team-delete-48' : 'icon-repo-personal-delete-48'} />
-        <Kb.Box2 direction="horizontal" alignItems="center" style={styles.avatarBox}>
-          {!!teamname && (
-            <Kb.Avatar
-              isTeam={true}
-              teamname={teamname}
-              size={16}
-              style={styles.teamAvatar}
-            />
-          )}
+        <Kb.Box2 direction="horizontal" alignItems="center" gap="xtiny">
+          {!!teamname && <Kb.Avatar isTeam={true} teamname={teamname} size={16} />}
           <Kb.Text type="BodySemibold" style={styles.repoName}>
             {teamname ? `${teamname}/${_name}` : _name}
           </Kb.Text>
         </Kb.Box2>
-        <Kb.Text center={true} type="Body" style={styles.warningText}>
+        <Kb.Text center={true} type="Body">
           {teamname
             ? 'This will permanently delete your remote files and history, and all members of the team will be notified.  This action cannot be undone.'
             : 'This will permanently delete your remote files and history. This action cannot be undone.'}
         </Kb.Text>
-        <Kb.Text style={styles.confirm} type="BodySemibold">
-          Enter the name of the repository to&nbsp;confirm:
-        </Kb.Text>
-        <Kb.Input3
-          autoFocus={true}
-          value={name}
-          onChangeText={setName}
-          onEnterKeyDown={onSubmit}
-          placeholder="Name of the repository"
-        />
-        {!!teamname && (
-          <Kb.Checkbox
-            label="Notify the team"
-            checked={notifyTeam}
-            onCheck={setNotifyTeam}
-            style={styles.checkbox}
-          />
-        )}
-        <Kb.ButtonBar fullWidth={true} style={styles.buttonBar}>
-          <Kb.WaitingButton
-            type="Dim"
-            onClick={navigateUp}
-            label="Cancel"
-            style={styles.cancelButton}
-            waitingKey={waitingKey}
-            onlyDisable={true}
+        <Kb.Box2 direction="vertical" fullWidth={true} gap="tiny">
+          <Kb.Text type="BodySemibold">Enter the name of the repository to&nbsp;confirm:</Kb.Text>
+          <Kb.Input3
+            autoFocus={true}
+            value={name}
+            onChangeText={setName}
+            onEnterKeyDown={onSubmit}
+            placeholder="Name of the repository"
           />
-          <Kb.WaitingButton
-            type="Danger"
-            onClick={onSubmit}
-            label={isMobile ? 'Delete' : 'Delete this repository'}
-            disabled={!matchesName()}
-            waitingKey={waitingKey}
-          />
-        </Kb.ButtonBar>
+          {!!teamname && (
+            <Kb.Checkbox
+              label="Notify the team"
+              checked={notifyTeam}
+              onCheck={setNotifyTeam}
+              style={styles.checkbox}
+            />
+          )}
+        </Kb.Box2>
+        <Kb.ConfirmButtons
+          waitingKey={waitingKey}
+          onCancel={navigateUp}
+          onConfirm={onSubmit}
+          confirmLabel={isMobile ? 'Delete' : 'Delete this repository'}
+          confirmType="Danger"
+          confirmDisabled={!matchesName()}
+        />
       </Kb.Box2>
     </Kb.ScrollView>
   )
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
-  avatarBox: {
-    marginBottom: Kb.Styles.globalMargins.medium,
-  },
-  buttonBar: {alignItems: 'center'},
-  cancelButton: {marginRight: Kb.Styles.globalMargins.tiny},
-  checkbox: {
-    alignSelf: 'flex-start',
-    ...Kb.Styles.marginV(Kb.Styles.globalMargins.tiny),
-  },
-  confirm: {
-    alignSelf: 'flex-start',
-    marginBottom: Kb.Styles.globalMargins.tiny,
-  },
+  checkbox: {alignSelf: 'flex-start'},
   container: Kb.Styles.platformStyles({
     isElectron: {
       maxHeight: 560,
@@ -147,10 +119,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
       padding: Kb.Styles.globalMargins.small,
     },
   }),
-  headerText: {marginBottom: 27},
   repoName: {color: Kb.Styles.globalColors.redDark, textDecorationLine: 'line-through'},
-  teamAvatar: {marginRight: Kb.Styles.globalMargins.xtiny},
-  warningText: {marginBottom: Kb.Styles.globalMargins.medium},
 }))
 
 export default DeleteRepo
diff --git a/shared/git/index.tsx b/shared/git/index.tsx
index 6f7860f0f920..a5441c6f5c4e 100644
--- a/shared/git/index.tsx
+++ b/shared/git/index.tsx
@@ -2,10 +2,11 @@ import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import * as TestIDs from '@/tests/e2e/shared/test-ids'
-import Row, {NewContext} from './row'
+import Row from './row'
 import sortBy from 'lodash/sortBy'
 import * as T from '@/constants/types'
-import {useLocalBadging} from '@/util/use-local-badging'
+import {NewItemsContext, useLocalBadging} from '@/util/use-local-badging'
+import {useRPCLoad} from '@/util/use-rpc-load'
 import {useConfigState} from '@/stores/config'
 import * as dateFns from 'date-fns'
 
@@ -92,15 +93,13 @@ type ExpandedState = {
   expandedSet: Set<string>
 }
 
+const noRepos = new Map<string, T.Git.GitInfo>()
+
 const GitRoot = (ownProps: OwnProps) => {
   const loading = C.Waiting.useAnyWaiting(C.waitingKeyGitLoading)
-  const loadGit = C.useRPC(T.RPCGen.gitGetAllGitMetadataRpcPromise)
   const clearGitBadges = C.useRPC(T.RPCGen.gregorDismissCategoryRpcPromise)
-  const [error, setError] = React.useState<Error | undefined>()
-  const [idToInfo, setIDToInfo] = React.useState(new Map<string, T.Git.GitInfo>())
-  // Bumped on every (re)load so expanded rows refetch their lazily-loaded
-  // channel name (e.g. after returning from the channel selector).
-  const [refreshToken, setRefreshToken] = React.useState(0)
+  // errors from row actions (toggling chat), load errors come from the hook
+  const [rowError, setRowError] = React.useState<Error | undefined>()
   const isNew = useConfigState(s => s.badgeState?.newGitRepoGlobalUniqueIDs)
   const {badged} = useLocalBadging(new Set(isNew ?? []), () => {
     clearGitBadges(
@@ -109,31 +108,28 @@ const GitRoot = (ownProps: OwnProps) => {
       () => {}
     )
   })
+  const {
+    data,
+    error: loadError,
+    // bumped on every (re)load so expanded rows refetch their lazily-loaded
+    // channel name (e.g. after returning from the channel selector)
+    loadCount: refreshToken,
+    reload: load,
+  } = useRPCLoad(T.RPCGen.gitGetAllGitMetadataRpcPromise, [undefined, C.waitingKeyGitLoading], {
+    map: results => parseRepos(results || []),
+    onResult: ({errors}) => {
+      setRowError(undefined)
+      const {setGlobalError} = useConfigState.getState().dispatch
+      errors.forEach(e => setGlobalError(e))
+    },
+    when: 'focus',
+  })
+  const idToInfo = data?.repos ?? noRepos
   const {personals, teams} = getRepos(idToInfo)
   const navigateAppend = C.Router2.navigateAppend
   const onShowDelete = (git: T.Git.GitInfo) => {
     navigateAppend({name: 'gitDeleteRepo', params: {name: git.name, teamname: git.teamname}})
   }
-  const load = () => {
-    loadGit(
-      [undefined, C.waitingKeyGitLoading],
-      results => {
-        const {errors, repos} = parseRepos(results || [])
-        const {setGlobalError} = useConfigState.getState().dispatch
-        errors.forEach(e => setGlobalError(e))
-        setIDToInfo(repos)
-        setRefreshToken(t => t + 1)
-        setError(undefined)
-      },
-      err => {
-        setError(err)
-      }
-    )
-  }
-
-  C.Router2.useSafeFocusEffect(() => {
-    load()
-  })
 
   const [expandedState, setExpandedState] = React.useState<ExpandedState>(() => ({
     appliedRouteKey: '',
@@ -166,11 +162,11 @@ const GitRoot = (ownProps: OwnProps) => {
 
   const makePopup = (p: Kb.Popup2Parms) => {
     const onNewPersonalRepo = () => {
-      setError(undefined)
+      setRowError(undefined)
       navigateAppend({name: 'gitNewRepo', params: {isTeam: false}})
     }
     const onNewTeamRepo = () => {
-      setError(undefined)
+      setRowError(undefined)
       navigateAppend({name: 'gitNewRepo', params: {isTeam: true}})
     }
     const {attachTo, hidePopup} = p
@@ -195,19 +191,14 @@ const GitRoot = (ownProps: OwnProps) => {
   return (
     <Kb.Reloadable waitingKeys={C.waitingKeyGitLoading} onBack={undefined} onReload={load}>
       <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} relative={true} testID={TestIDs.GIT_REPO_LIST}>
-        {!!error && <Kb.Banner color="red">{error.message}</Kb.Banner>}
+        <Kb.ErrorBanner error={rowError ?? loadError} />
         {isMobile && (
-          <Kb.ClickableBox ref={popupAnchor} direction="horizontal" centerChildren={true} noShrink={true} style={styles.header} onClick={showPopup}>
-            <Kb.Icon
-              type="iconfont-new"
-              style={styles.newIcon}
-              color={Kb.Styles.globalColors.blue}
-              fontSize={20}
-            />
+          <Kb.ClickableBox ref={popupAnchor} direction="horizontal" centerChildren={true} noShrink={true} gap="tiny" style={styles.header} onClick={showPopup}>
+            <Kb.Icon type="iconfont-new" color={Kb.Styles.globalColors.blue} fontSize={20} />
             <Kb.Text type="BodyBigLink">New encrypted git repository...</Kb.Text>
           </Kb.ClickableBox>
         )}
-        <NewContext value={badged}>
+        <NewItemsContext value={badged}>
           <Kb.SectionList
             keyExtractor={item => item}
             extraData={expandedSet}
@@ -219,7 +210,7 @@ const GitRoot = (ownProps: OwnProps) => {
                 onShowDelete={onShowDelete}
                 reload={load}
                 refreshToken={refreshToken}
-                setError={setError}
+                setError={setRowError}
                 onToggleExpand={toggleExpand}
               />
             )}
@@ -231,7 +222,7 @@ const GitRoot = (ownProps: OwnProps) => {
               {data: teams, loading: loading, title: 'Team'},
             ]}
           />
-        </NewContext>
+        </NewItemsContext>
         {popup}
       </Kb.Box2>
     </Kb.Reloadable>
@@ -244,7 +235,6 @@ const styles = Kb.Styles.styleSheetCreate(
       header: {
         height: 48,
       },
-      newIcon: {marginRight: Kb.Styles.globalMargins.tiny},
     }) as const
 )
 
diff --git a/shared/git/new-repo.tsx b/shared/git/new-repo.tsx
index f3623593a904..05afcaeb91d3 100644
--- a/shared/git/new-repo.tsx
+++ b/shared/git/new-repo.tsx
@@ -22,13 +22,8 @@ const NewTeamItem = () => (
 )
 
 const TeamItem = (p: {teamname: string}) => (
-  <Kb.Box2 direction="horizontal" alignItems="center" style={styles.avatarBox}>
-    <Kb.Avatar
-      isTeam={true}
-      teamname={p.teamname}
-      size={16}
-      style={styles.teamAvatar}
-    />
+  <Kb.Box2 direction="horizontal" alignItems="center" gap="tiny" style={styles.avatarBox}>
+    <Kb.Avatar isTeam={true} teamname={p.teamname} size={16} />
     <Kb.Text type="Header" style={styles.teamName}>
       {p.teamname}
     </Kb.Text>
@@ -103,16 +98,11 @@ const NewRepo = (ownProps: OwnProps) => {
   }
   return (
     <Kb.ScrollView>
-      <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} flex={1} alignItems="center" style={styles.container}>
-        {!!error && <Kb.Banner color="red">{error}</Kb.Banner>}
-        <Kb.Text type="Header" style={styles.marginBottom27}>
-          New {isTeam ? 'team' : 'personal'} git repository
-        </Kb.Text>
-        <Kb.IconAuto
-          type={isTeam ? 'icon-repo-team-add-48' : 'icon-repo-personal-add-48'}
-          style={styles.marginBottom27}
-        />
-        <Kb.Text type="Body" style={styles.marginBottom27}>
+      <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} flex={1} alignItems="center" gap="medium" style={styles.container}>
+        <Kb.ErrorBanner error={error} />
+        <Kb.Text type="Header">New {isTeam ? 'team' : 'personal'} git repository</Kb.Text>
+        <Kb.IconAuto type={isTeam ? 'icon-repo-team-add-48' : 'icon-repo-personal-add-48'} />
+        <Kb.Text type="Body">
           {isTeam
             ? 'Your repository will be end-to-end encrypted and accessible by all members in the team.'
             : 'Your repository will be encrypted and only accessible by you.'}
@@ -140,21 +130,13 @@ const NewRepo = (ownProps: OwnProps) => {
             style={styles.checkbox}
           />
         )}
-        <Kb.ButtonBar fullWidth={true} style={styles.buttonBar}>
-          <Kb.WaitingButton
-            type="Dim"
-            onClick={navigateUp}
-            label="Cancel"
-            waitingKey={C.waitingKeyGitLoading}
-            onlyDisable={true}
-          />
-          <Kb.WaitingButton
-            onClick={onSubmit}
-            label="Create"
-            disabled={!canSubmit()}
-            waitingKey={C.waitingKeyGitLoading}
-          />
-        </Kb.ButtonBar>
+        <Kb.ConfirmButtons
+          waitingKey={C.waitingKeyGitLoading}
+          onCancel={navigateUp}
+          onConfirm={onSubmit}
+          confirmLabel="Create"
+          confirmDisabled={!canSubmit()}
+        />
       </Kb.Box2>
     </Kb.ScrollView>
   )
@@ -168,11 +150,7 @@ const styles = Kb.Styles.styleSheetCreate(
         paddingRight: Kb.Styles.globalMargins.small,
         width: '100%',
       },
-      buttonBar: {alignItems: 'center'},
-      checkbox: {
-        alignSelf: 'flex-start',
-        marginTop: Kb.Styles.globalMargins.tiny,
-      },
+      checkbox: {alignSelf: 'flex-start'},
       container: Kb.Styles.platformStyles({
         common: {
           padding: isMobile ? Kb.Styles.globalMargins.tiny : Kb.Styles.globalMargins.large,
@@ -184,13 +162,8 @@ const styles = Kb.Styles.styleSheetCreate(
           width: 500,
         },
       }),
-      dropdown: {
-        marginBottom: Kb.Styles.globalMargins.small,
-        width: '100%',
-      },
-      marginBottom27: {marginBottom: 27},
+      dropdown: {width: '100%'},
       newTeamItem: {paddingLeft: Kb.Styles.globalMargins.small},
-      teamAvatar: {marginRight: Kb.Styles.globalMargins.tiny},
       teamName: Kb.Styles.platformStyles({
         common: {
           overflow: 'hidden',
diff --git a/shared/git/row.tsx b/shared/git/row.tsx
index b69f2f29dc29..e9246edc372f 100644
--- a/shared/git/row.tsx
+++ b/shared/git/row.tsx
@@ -8,8 +8,8 @@ import * as FS from '@/constants/fs'
 import {useCurrentUserState} from '@/stores/current-user'
 import {navToProfile} from '@/constants/router'
 import {useTeamsListNameToIDMap} from '@/teams/use-teams-list'
-
-export const NewContext = React.createContext<ReadonlySet<string>>(new Set())
+import {useIsNew} from '@/util/use-local-badging'
+import {useRPCLoad} from '@/util/use-rpc-load'
 
 type OwnProps = {
   expanded: boolean
@@ -197,10 +197,9 @@ function ConnectedRow(ownProps: OwnProps) {
   const {id} = git
   const teamNameToID = useTeamsListNameToIDMap()
   const teamID = git.teamname ? teamNameToID.get(git.teamname) : undefined
-  const isNew = React.useContext(NewContext).has(id)
+  const isNew = useIsNew(id)
   const you = useCurrentUserState(s => s.username)
   const setTeamRepoSettings = C.useRPC(T.RPCGen.gitSetTeamRepoSettingsRpcPromise)
-  const getTeamRepoSettings = C.useRPC(T.RPCGen.gitGetTeamRepoSettingsRpcPromise)
   const _onBrowseGitRepo = FS.navToPath
   const navigateAppend = C.Router2.navigateAppend
 
@@ -209,31 +208,24 @@ function ConnectedRow(ownProps: OwnProps) {
 
   // The channel name is resolved lazily (it requires a per-repo chat lookup on
   // the service), so we only fetch it once the row is expanded and chat is
-  // enabled. getAllGitMetadata no longer returns it. `channelLoaded` stays true
+  // enabled. getAllGitMetadata no longer returns it. `loaded` stays true
   // across background refetches so we only show the spinner on the first load,
   // not on every reload.
-  const [channelName, setChannelName] = React.useState<string | undefined>(undefined)
-  const [channelLoaded, setChannelLoaded] = React.useState(false)
+  const {
+    data: channelName,
+    loaded: channelLoaded,
+    reload: loadChannel,
+  } = useRPCLoad(
+    T.RPCGen.gitGetTeamRepoSettingsRpcPromise,
+    [{folder: {created: false, folderType: T.RPCGen.FolderType.team, name: teamname ?? ''}, repoID}],
+    {map: res => res.channelName ?? undefined, when: 'manual'}
+  )
   React.useEffect(() => {
     if (!expanded || !teamname || chatDisabled) {
       return
     }
-    getTeamRepoSettings(
-      [
-        {
-          folder: {created: false, folderType: T.RPCGen.FolderType.team, name: teamname},
-          repoID,
-        },
-      ],
-      res => {
-        setChannelName(res.channelName ?? undefined)
-        setChannelLoaded(true)
-      },
-      () => {
-        setChannelLoaded(true)
-      }
-    )
-  }, [getTeamRepoSettings, expanded, teamname, chatDisabled, repoID, refreshToken])
+    loadChannel()
+  }, [loadChannel, expanded, teamname, chatDisabled, repoID, refreshToken])
   const channelLoading = !!teamname && !chatDisabled && expanded && !channelLoaded
 
   const onArchiveGitRepo = () => {
@@ -323,6 +315,7 @@ function ConnectedRow(ownProps: OwnProps) {
             direction="horizontal"
             fullWidth={true}
             alignItems="center"
+            gap="tiny"
             style={Kb.Styles.collapseStyles([
               expanded ? styles.rowClickExpanded : styles.rowClick,
               styles.rowTop,
@@ -338,14 +331,11 @@ function ConnectedRow(ownProps: OwnProps) {
               isTeam={!!teamname}
               teamname={teamname}
               username={teamname ? undefined : you}
-              style={styles.iconTiny}
             />
             <Kb.Text lineClamp={1} type="BodySemibold" style={styles.repoName}>
               {teamname ? `${teamname}/${name}` : name}
             </Kb.Text>
-            {isNew && (
-              <Kb.Meta title="new" style={styles.meta} backgroundColor={Kb.Styles.globalColors.orange} />
-            )}
+            {isNew && <Kb.Meta variant="new" />}
           </Kb.ClickableBox>
           {expanded && (
             <Kb.Box2 direction="vertical" fullWidth={true} style={styles.rowBottom}>
@@ -428,12 +418,7 @@ const styles = Kb.Styles.styleSheetCreate(
         },
         isElectron: {display: 'inline-block'},
       }),
-      iconTiny: {marginRight: Kb.Styles.globalMargins.tiny},
       iconXtiny: {marginRight: Kb.Styles.globalMargins.xtiny},
-      meta: {
-        alignSelf: 'center',
-        marginLeft: 6,
-      },
       rowBottom: {
         paddingBottom: Kb.Styles.globalMargins.tiny,
         paddingLeft: Kb.Styles.globalMargins.medium,
diff --git a/shared/git/select-channel.tsx b/shared/git/select-channel.tsx
index 6f2c5b388fe7..07b37eada1ce 100644
--- a/shared/git/select-channel.tsx
+++ b/shared/git/select-channel.tsx
@@ -57,7 +57,7 @@ const SelectChannel = (ownProps: OwnProps) => {
       <Kb.ScrollView contentContainerStyle={styles.scrollContainer}>
         <Kb.Box2 direction="vertical" fullWidth={true} style={styles.innerContainer} gap="tiny">
           <Kb.Text type="Header">Select a channel</Kb.Text>
-          {!!error && <Kb.Banner color="red">{error}</Kb.Banner>}
+          <Kb.ErrorBanner error={error} />
           {channelNames.map(name => (
             <Kb.Box2 key={name} direction="horizontal" fullWidth={true} style={styles.row}>
               <Kb.RadioButton
diff --git a/shared/globals.native.d.ts b/shared/globals.native.d.ts
index bb7c3f2c3983..2ed969ddf254 100644
--- a/shared/globals.native.d.ts
+++ b/shared/globals.native.d.ts
@@ -128,4 +128,5 @@ declare var document: {
   }
   createElement(tag: string): DOMElement
   createTextNode(text: string): DOMTextNode
+  documentElement: {style: {colorScheme: string}}
 }
diff --git a/shared/incoming-share/index.tsx b/shared/incoming-share/index.tsx
index 673d684e8a1f..337a948350dc 100644
--- a/shared/incoming-share/index.tsx
+++ b/shared/incoming-share/index.tsx
@@ -8,6 +8,7 @@ import {settingsFeedbackTab} from '@/constants/settings'
 import * as FS from '@/constants/fs'
 import {useConfigState} from '@/stores/config'
 import {ensureError} from '@/util/errors'
+import {useRPCLoad} from '@/util/use-rpc-load'
 import {getInboxConversationMeta} from '@/chat/inbox/metadata'
 import {IncomingShareHeaderTitle} from './routes'
 
@@ -266,24 +267,14 @@ const IncomingShareError = () => {
   )
 }
 
-const useIncomingShareItems = () => {
-  const [incomingShareItems, setIncomingShareItems] = React.useState<
-    ReadonlyArray<T.RPCGen.IncomingShareItem>
-  >([])
-  const [incomingShareError, setIncomingShareError] = React.useState<unknown>(undefined)
-
-  const rpc = C.useRPC(T.RPCGen.incomingShareGetIncomingShareItemsRpcPromise)
-  React.useEffect(() => {
-    if (!isIOS) {
-      return
-    }
+const noShareItems = new Array<T.RPCGen.IncomingShareItem>()
 
-    rpc(
-      [undefined],
-      items => setIncomingShareItems(items || []),
-      err => setIncomingShareError(err)
-    )
-  }, [rpc, setIncomingShareError, setIncomingShareItems])
+const useIncomingShareItems = () => {
+  const {data: incomingShareItems = noShareItems, error: incomingShareError} = useRPCLoad(
+    T.RPCGen.incomingShareGetIncomingShareItemsRpcPromise,
+    [undefined],
+    {enabled: isIOS, map: items => items || noShareItems}
+  )
 
   const androidShare = useConfigState(s => s.androidShare)
   const androidShareItems =
@@ -307,11 +298,7 @@ const useIncomingShareItems = () => {
   return {incomingShareError, incomingShareItems: androidShareItems ?? incomingShareItems}
 }
 
-const LoadingSpinner = () => (
-  <Kb.Box2 direction="vertical" centerChildren={true} fullHeight={true}>
-    <Kb.ProgressIndicator type="Large" />
-  </Kb.Box2>
-)
+const LoadingSpinner = () => <Kb.LoadingScreen type="Large" />
 
 const IncomingShareMain = (props: SelectedConversationProps) => {
   const {incomingShareError, incomingShareItems} = useIncomingShareItems()
diff --git a/shared/login/common.tsx b/shared/login/common.tsx
new file mode 100644
index 000000000000..e2bd3c9abba0
--- /dev/null
+++ b/shared/login/common.tsx
@@ -0,0 +1,39 @@
+import * as Kb from '@/common-adapters'
+import type * as React from 'react'
+
+// Question screens in reset/ and recover-password/ hug the top on mobile instead of centering
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  topGap: Kb.Styles.platformStyles({
+    isMobile: {
+      justifyContent: 'flex-start',
+      marginTop: '20%',
+    },
+  }),
+}))
+
+type QuestionBodyProps = {
+  centered?: boolean // vertically center content on desktop
+  children: React.ReactNode
+  gap?: 'small' | 'medium'
+  icon: React.ReactNode
+  topGap?: boolean
+}
+
+// icon-over-text body shared by the reset / recover-password question screens
+export const QuestionBody = (p: QuestionBodyProps) => {
+  const {centered = true, children, gap = 'medium', icon, topGap = true} = p
+  return (
+    <Kb.Box2
+      direction="vertical"
+      fullWidth={true}
+      fullHeight={true}
+      gap={gap}
+      alignItems="center"
+      centerChildren={centered}
+      style={topGap ? styles.topGap : undefined}
+    >
+      {icon}
+      {children}
+    </Kb.Box2>
+  )
+}
diff --git a/shared/login/index.tsx b/shared/login/index.tsx
index b60405d72e14..2b7479c62b12 100644
--- a/shared/login/index.tsx
+++ b/shared/login/index.tsx
@@ -14,24 +14,10 @@ const RootLogin = () => {
   // routing should switch us away so lets not draw anything to speed things up
   if (isLoggedIn) return null
 
-  if (showLoading) {
-    return (
-      <React.Suspense>
-        <Loading />
-      </React.Suspense>
-    )
-  }
-  if (showRelogin) {
-    return (
-      <React.Suspense>
-        <Relogin />
-      </React.Suspense>
-    )
-  }
-
+  const Screen = showLoading ? Loading : showRelogin ? Relogin : JoinOrLogin
   return (
     <React.Suspense>
-      <JoinOrLogin />
+      <Screen />
     </React.Suspense>
   )
 }
diff --git a/shared/login/loading.stories.tsx b/shared/login/loading.stories.tsx
index 2bdb264ff5c4..255afe10e076 100644
--- a/shared/login/loading.stories.tsx
+++ b/shared/login/loading.stories.tsx
@@ -32,7 +32,6 @@ export const Failed: Story = {
 
 export const FailedWithFeedback: Story = {
   args: {
-    allowFeedback: true,
     failed: 'connection refused',
     status: '',
     onRetry: () => {},
diff --git a/shared/login/loading.tsx b/shared/login/loading.tsx
index 37293f1fa2db..bac0b0886a50 100644
--- a/shared/login/loading.tsx
+++ b/shared/login/loading.tsx
@@ -50,7 +50,7 @@ export const Splash = (p: SplashProps) => {
   }, [])
 
   return (
-    <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} justifyContent="center" alignItems="center" gap="small">
+    <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} centerChildren={true} gap="small">
       <Kb.ImageIcon type={onRetry ? 'icon-keybase-logo-logged-out-80' : 'icon-keybase-logo-80'} />
       <Kb.ImageIcon type="icon-keybase-wordmark-128-48" />
       {!!status && <Kb.Text type="BodySmall">{status}</Kb.Text>}
diff --git a/shared/login/recover-password/error-modal.tsx b/shared/login/recover-password/error-modal.tsx
index 44fa934c26fe..eff6597f00d9 100644
--- a/shared/login/recover-password/error-modal.tsx
+++ b/shared/login/recover-password/error-modal.tsx
@@ -4,7 +4,7 @@ import {useConfigState} from '@/stores/config'
 
 type Props = {route: {params: {error: string}}}
 
-const ConnectedErrorModal = ({route}: Props) => {
+const ErrorModal = ({route}: Props) => {
   const loggedIn = useConfigState(s => s.loggedIn)
   const {error} = route.params
   const onBack = () => {
@@ -28,4 +28,4 @@ const ConnectedErrorModal = ({route}: Props) => {
     </>
   )
 }
-export default ConnectedErrorModal
+export default ErrorModal
diff --git a/shared/login/recover-password/error.stories.tsx b/shared/login/recover-password/error.stories.tsx
index ff4258e4b700..cb9e49fe063b 100644
--- a/shared/login/recover-password/error.stories.tsx
+++ b/shared/login/recover-password/error.stories.tsx
@@ -1,12 +1,12 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import ConnectedError from './error'
+import RecoverPasswordError from './error'
 
-const meta: Meta<typeof ConnectedError> = {
-  component: ConnectedError,
+const meta: Meta<typeof RecoverPasswordError> = {
+  component: RecoverPasswordError,
   title: 'Login/RecoverPasswordError',
 }
 export default meta
-type Story = StoryObj<typeof ConnectedError>
+type Story = StoryObj<typeof RecoverPasswordError>
 
 export const GenericError: Story = {
   args: {
diff --git a/shared/login/recover-password/error.tsx b/shared/login/recover-password/error.tsx
index 1ff1548c9f58..bf1f3945f5fb 100644
--- a/shared/login/recover-password/error.tsx
+++ b/shared/login/recover-password/error.tsx
@@ -4,7 +4,7 @@ import {useConfigState} from '@/stores/config'
 
 type Props = {route: {params: {error: string}}}
 
-const ConnectedError = ({route}: Props) => {
+const RecoverPasswordError = ({route}: Props) => {
   const loggedIn = useConfigState(s => s.loggedIn)
   const {error} = route.params
   const onBack = () => {
@@ -24,4 +24,4 @@ const ConnectedError = ({route}: Props) => {
   )
 }
 
-export default ConnectedError
+export default RecoverPasswordError
diff --git a/shared/login/recover-password/explain-device.tsx b/shared/login/recover-password/explain-device.tsx
index b93a45ce4f62..99275aac80fe 100644
--- a/shared/login/recover-password/explain-device.tsx
+++ b/shared/login/recover-password/explain-device.tsx
@@ -3,11 +3,12 @@ import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import type {ButtonType} from '@/common-adapters/button'
 import {SignupScreen} from '@/signup/common'
+import {QuestionBody} from '../common'
 import {startRecoverPassword} from './flow'
 
 type Props = {route: {params: {deviceName: string; deviceType: T.RPCGen.DeviceType; username: string}}}
 
-const ConnectedExplainDevice = ({route}: Props) => {
+const ExplainDevice = ({route}: Props) => {
   const {deviceName, deviceType, username} = route.params
   const onBack = () => {
     startRecoverPassword({
@@ -34,8 +35,12 @@ const ConnectedExplainDevice = ({route}: Props) => {
       onBack={onBack}
       title="Recover password"
     >
-      <Kb.Box2 alignItems="center" direction="vertical" fullHeight={true} fullWidth={true} gap="small">
-        <Kb.ImageIcon type={explainingMobile ? 'icon-phone-96' : 'icon-computer-96'} />
+      <QuestionBody
+        centered={false}
+        gap="small"
+        topGap={false}
+        icon={<Kb.ImageIcon type={explainingMobile ? 'icon-phone-96' : 'icon-computer-96'} />}
+      >
         <Kb.Box2 alignItems="center" direction="vertical">
           <Kb.Text type="Body">
             On <Kb.Text type="BodySemiboldItalic">{deviceName}</Kb.Text>, go to
@@ -50,9 +55,9 @@ const ConnectedExplainDevice = ({route}: Props) => {
           </Kb.Box2>
           <Kb.Text type="Body">password.</Kb.Text>
         </Kb.Box2>
-      </Kb.Box2>
+      </QuestionBody>
     </SignupScreen>
   )
 }
 
-export default ConnectedExplainDevice
+export default ExplainDevice
diff --git a/shared/login/recover-password/paper-key.tsx b/shared/login/recover-password/paper-key.tsx
index 9e20e0752902..6c00a6351e92 100644
--- a/shared/login/recover-password/paper-key.tsx
+++ b/shared/login/recover-password/paper-key.tsx
@@ -42,9 +42,7 @@ const PaperKey = ({route}: Props) => {
           centerChildren={!isAndroid /* android keyboardAvoiding doesnt work well */}
           gap={isMobile ? 'tiny' : 'medium'}
         >
-          <Kb.Box2 direction="vertical" gap="tiny" centerChildren={true} gapEnd={true}>
-            <Kb.ImageIcon type="icon-paper-key-96" />
-          </Kb.Box2>
+          <Kb.ImageIcon type="icon-paper-key-96" style={styles.icon} />
           <Kb.Input3
             autoFocus={true}
             multiline={true}
@@ -68,6 +66,11 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   contents: {
     maxWidth: isMobile ? '100%' : 460,
   },
+  icon: {
+    // parent Box2 is alignItems stretch on android (centerChildren off there)
+    alignSelf: 'center',
+    marginBottom: Kb.Styles.globalMargins.tiny,
+  },
   inputContainer2: {
     marginTop: 10,
   },
diff --git a/shared/login/recover-password/prompt-reset-shared.tsx b/shared/login/recover-password/prompt-reset-shared.tsx
index e2a377c0c245..fbf954017615 100644
--- a/shared/login/recover-password/prompt-reset-shared.tsx
+++ b/shared/login/recover-password/prompt-reset-shared.tsx
@@ -3,7 +3,8 @@ import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import {useSafeNavigation} from '@/util/safe-navigation'
 import * as T from '@/constants/types'
-import {SignupScreen} from '@/signup/common'
+import {SignupScreen, errorBanner} from '@/signup/common'
+import {QuestionBody} from '../common'
 import type {ButtonType} from '@/common-adapters/button'
 import {enterResetPipeline} from '@/login/reset/account-reset'
 import {startRecoverPassword, submitRecoverPasswordReset} from './flow'
@@ -53,26 +54,15 @@ const PromptReset = (props: Props) => {
           waitingKey: C.waitingKeyAutoresetEnterPipeline,
         },
       ]}
-      banners={
-        error ? (
-          <Kb.Banner color="red">
-            <Kb.BannerParagraph bannerColor="red" content={error} />
-          </Kb.Banner>
-        ) : null
-      }
+      banners={errorBanner(error)}
       onBack={onBack}
       noBackground={true}
       title={title}
     >
-      <Kb.Box2
-        alignItems="center"
-        direction="vertical"
-        fullHeight={true}
-        fullWidth={true}
-        gap="medium"
-        style={styles.topGap}
+      <QuestionBody
+        centered={false}
+        icon={<Kb.Icon type="iconfont-skull" sizeType="Big" color={Kb.Styles.globalColors.black} />}
       >
-        <Kb.Icon type="iconfont-skull" sizeType="Big" color={Kb.Styles.globalColors.black} />
         {props.resetPassword ? (
           <Kb.Text type="Body" center={true} style={styles.main}>
             If you have forgotten your password you can reset it here. You will keep your username, but{' '}
@@ -96,7 +86,7 @@ const PromptReset = (props: Props) => {
             </Kb.Text>
           </>
         )}
-      </Kb.Box2>
+      </QuestionBody>
     </SignupScreen>
   )
 }
@@ -106,12 +96,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     ...Kb.Styles.padding(0, Kb.Styles.globalMargins.medium, Kb.Styles.globalMargins.small),
     maxWidth: 500,
   },
-  topGap: Kb.Styles.platformStyles({
-    isMobile: {
-      justifyContent: 'flex-start',
-      marginTop: '20%',
-    },
-  }),
 }))
 
 export default PromptReset
diff --git a/shared/login/relogin/dropdown.native.tsx b/shared/login/relogin/dropdown.native.tsx
index eaa7f41ce09f..948d12e777ca 100644
--- a/shared/login/relogin/dropdown.native.tsx
+++ b/shared/login/relogin/dropdown.native.tsx
@@ -109,7 +109,7 @@ const Dropdown = (props: Props) => {
           >
             <Kb.Box2 direction="vertical" fullWidth={true} justifyContent="flex-end" flex={1} style={styles.pickerContainer}>
               <TouchableWithoutFeedback onPress={() => showModal(false)}>
-                <View style={{flex: 1}} />
+                <View style={Kb.Styles.globalStyles.flexOne} />
               </TouchableWithoutFeedback>
               {picker}
             </Kb.Box2>
diff --git a/shared/login/relogin/index.tsx b/shared/login/relogin/index.tsx
index ed4561e04ac2..e355428b27ac 100644
--- a/shared/login/relogin/index.tsx
+++ b/shared/login/relogin/index.tsx
@@ -3,6 +3,7 @@ import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import type * as T from '@/constants/types'
 import UserCard from '../user-card'
+import {produce} from 'immer'
 import sortBy from 'lodash/sortBy'
 import {errorBanner, SignupScreen} from '@/signup/common'
 import {isAndroidNewerThanM} from '@/constants/platform'
@@ -33,7 +34,13 @@ type Props = {
 const other = 'Someone else...'
 
 const UserRow = ({user, hasStoredSecret}: {user: string; hasStoredSecret: boolean}) => (
-  <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={desktopStyles.userRow} gap="xtiny">
+  <Kb.Box2
+    direction="horizontal"
+    fullWidth={true}
+    alignItems="center"
+    style={desktopStyles.userRow}
+    gap="xtiny"
+  >
     <Kb.Text type="Header" style={user === other ? desktopStyles.other : desktopStyles.provisioned}>
       {user}
     </Kb.Text>
@@ -63,8 +70,20 @@ const DesktopLogin = (props: Props) => {
   const selectedIdx = props.users.findIndex(u => u.username === props.selectedUser)
   return (
     <SignupScreen banners={errorBanner(props.error)} hideDesktopHeader={!isMobile}>
-      <Kb.Box2 direction="vertical" fullHeight={true} fullWidth={true} flex={1} alignSelf="center" padding="small" style={desktopStyles.contentBox}>
-        <UserCard username={props.selectedUser} outerStyle={desktopStyles.container} style={desktopStyles.userContainer}>
+      <Kb.Box2
+        direction="vertical"
+        fullHeight={true}
+        fullWidth={true}
+        flex={1}
+        alignSelf="center"
+        padding="small"
+        style={desktopStyles.contentBox}
+      >
+        <UserCard
+          username={props.selectedUser}
+          outerStyle={desktopStyles.container}
+          style={desktopStyles.userContainer}
+        >
           <Kb.Dropdown
             onChangedIdx={_onClickUserIdx}
             selected={userRows[selectedIdx]}
@@ -95,13 +114,7 @@ const DesktopLogin = (props: Props) => {
               Forgot password?
             </Kb.Text>
           </Kb.Box2>
-          <Kb.Box2
-            direction="vertical"
-            fullWidth={true}
-            fullHeight={true}
-            justifyContent="flex-end"
-            flex={1}
-          >
+          <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} justifyContent="flex-end" flex={1}>
             <Kb.WaitingButton
               disabled={props.needPassword && !props.password}
               fullWidth={true}
@@ -135,7 +148,6 @@ const desktopStyles = Kb.Styles.styleSheetCreate(
         marginTop: Kb.Styles.globalMargins.tiny,
       },
       loginSubmitButton: {
-        marginTop: 0,
         maxHeight: 32,
       },
       other: {color: Kb.Styles.globalColors.black},
@@ -173,7 +185,13 @@ const NativeLoginRender = (props: Props) => {
   } as const
 
   return (
-    <Kb.Box2 direction="vertical" fullWidth={true} alignItems="center" flex={1} style={nativeStyles.container}>
+    <Kb.Box2
+      direction="vertical"
+      fullWidth={true}
+      alignItems="center"
+      flex={1}
+      style={nativeStyles.container}
+    >
       {isAndroid && !C.isDeviceSecureAndroid && !isAndroidNewerThanM && (
         <Kb.Box2 direction="vertical" fullWidth={true} style={nativeStyles.deviceNotSecureContainer}>
           <Kb.Text center={true} type="Body" negative={true} style={nativeStyles.deviceNotSecureText}>
@@ -181,7 +199,7 @@ const NativeLoginRender = (props: Props) => {
           </Kb.Text>
         </Kb.Box2>
       )}
-      {!!props.error && <Kb.Banner color="red">{props.error}</Kb.Banner>}
+      <Kb.ErrorBanner error={props.error} />
       <UserCard username={props.selectedUser} outerStyle={nativeStyles.card} style={nativeStyles.cardInner}>
         <Dropdown
           type="Username"
@@ -204,7 +222,7 @@ const NativeLoginRender = (props: Props) => {
         <Kb.WaitingButton
           disabled={props.needPassword && !props.password}
           waitingKey={C.waitingKeyConfigLogin}
-          style={{marginTop: props.needPassword ? 0 : Kb.Styles.globalMargins.small}}
+          style={props.needPassword ? undefined : nativeStyles.loginButtonGap}
           fullWidth={true}
           label="Log in"
           onClick={props.onSubmit}
@@ -213,10 +231,7 @@ const NativeLoginRender = (props: Props) => {
           type="BodySmallSecondaryLink"
           center={true}
           onClick={props.onForgotPassword}
-          style={{
-            marginBottom: Kb.Styles.globalMargins.tiny,
-            marginTop: Kb.Styles.globalMargins.medium,
-          }}
+          style={nativeStyles.forgotPassword}
         >
           Forgot password?
         </Kb.Text>
@@ -231,7 +246,7 @@ const NativeLoginRender = (props: Props) => {
           label="Create account"
           mode="Secondary"
           onClick={props.onSignup}
-          style={{flexGrow: 0}}
+          style={nativeStyles.createAccountButton}
         />
       </Kb.Box2>
     </Kb.Box2>
@@ -251,21 +266,26 @@ const nativeStyles = Kb.Styles.styleSheetCreate(
       container: {
         backgroundColor: Kb.Styles.globalColors.blueGrey,
       },
+      createAccountButton: {flexGrow: 0},
       createAccountContainer: Kb.Styles.platformStyles({
         common: {padding: Kb.Styles.globalMargins.medium},
         isTablet: {maxWidth: 410, padding: Kb.Styles.globalMargins.small},
       }),
       deviceNotSecureContainer: {
-        alignSelf: 'stretch',
         backgroundColor: Kb.Styles.globalColors.yellow,
         ...Kb.Styles.paddingV(Kb.Styles.globalMargins.tiny),
       },
       deviceNotSecureText: {
         color: Kb.Styles.globalColors.brown_75,
       },
+      forgotPassword: {
+        marginBottom: Kb.Styles.globalMargins.tiny,
+        marginTop: Kb.Styles.globalMargins.medium,
+      },
       formElements: {
         marginBottom: Kb.Styles.globalMargins.tiny,
       },
+      loginButtonGap: {marginTop: Kb.Styles.globalMargins.small},
     }) as const
 )
 
@@ -285,7 +305,9 @@ const ReloginContainer = () => {
   const onSignup = () => requestAutoInvite('')
   const onSomeoneElse = () => startProvision()
   const error = perror?.desc || ''
-  const loggedInMap = new Map<string, boolean>(_users.map(account => [account.username, account.hasStoredSecret]))
+  const loggedInMap = new Map<string, boolean>(
+    _users.map(account => [account.username, account.hasStoredSecret])
+  )
   const users = sortBy(_users, 'username')
 
   const [password, setPassword] = React.useState('')
@@ -321,7 +343,12 @@ const ReloginContainer = () => {
 
   const selectedUser =
     selectedUserState.defaultUsername === pselectedUser ? selectedUserState.username : pselectedUser
-  const setSelectedUser = (username: string) => setSelectedUserState(state => ({...state, username}))
+  const setSelectedUser = (username: string) =>
+    setSelectedUserState(
+      produce(draft => {
+        draft.username = username
+      })
+    )
 
   if (!gotNeedPasswordError && error === needPasswordError) {
     setGotNeedPasswordError(true)
diff --git a/shared/login/reset/modal.tsx b/shared/login/reset/modal.tsx
index d0011ea55f8a..5471717bb5b8 100644
--- a/shared/login/reset/modal.tsx
+++ b/shared/login/reset/modal.tsx
@@ -59,19 +59,10 @@ const ResetModalImpl = ({endTime}: {endTime: number}) => {
 
   const content = (
     <>
-      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.header}>
-        <Kb.Box2
-          direction="horizontal"
-          alignItems="center"
-          fullHeight={true}
-          flex={1}
-        >
-          <Kb.Box2 direction="horizontal" flex={1} />
-          <Kb.Text type={isMobile ? 'BodyBig' : 'Header'} lineClamp={1} center={true}>
-            Account reset initiated
-          </Kb.Text>
-          <Kb.Box2 direction="horizontal" flex={1} />
-        </Kb.Box2>
+      <Kb.Box2 direction="horizontal" fullWidth={true} centerChildren={true} style={styles.header}>
+        <Kb.Text type={isMobile ? 'BodyBig' : 'Header'} lineClamp={1} center={true}>
+          Account reset initiated
+        </Kb.Text>
       </Kb.Box2>
       {error ? (
         <Kb.Banner color="red" key="errors">
diff --git a/shared/login/reset/password-enter.tsx b/shared/login/reset/password-enter.tsx
index ec498f81b5e7..a44e9591e64a 100644
--- a/shared/login/reset/password-enter.tsx
+++ b/shared/login/reset/password-enter.tsx
@@ -1,7 +1,7 @@
 import * as C from '@/constants'
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
-import {SignupScreen} from '@/signup/common'
+import {SignupScreen, errorBanner} from '@/signup/common'
 import {useConfigState} from '@/stores/config'
 import {useSafeNavigation} from '@/util/safe-navigation'
 import {enterResetPipeline} from './account-reset'
@@ -29,13 +29,7 @@ const EnterPassword = ({route}: Props) => {
     <SignupScreen
       title={title}
       onBack={onBack}
-      banners={
-        error ? (
-          <Kb.Banner color="red">
-            <Kb.BannerParagraph bannerColor="red" content={error} />
-          </Kb.Banner>
-        ) : null
-      }
+      banners={errorBanner(error)}
       buttons={[{label: 'Continue', onClick: onContinue, waiting}]}
     >
       <Kb.Input3
diff --git a/shared/login/reset/password-known.tsx b/shared/login/reset/password-known.tsx
index 487af8bbfddb..c0cc0a5a46d4 100644
--- a/shared/login/reset/password-known.tsx
+++ b/shared/login/reset/password-known.tsx
@@ -1,7 +1,8 @@
 import * as C from '@/constants'
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
-import {SignupScreen} from '@/signup/common'
+import {SignupScreen, errorBanner} from '@/signup/common'
+import {QuestionBody} from '../common'
 import {useSafeNavigation} from '@/util/safe-navigation'
 import {enterResetPipeline} from './account-reset'
 
@@ -20,27 +21,13 @@ const KnowPassword = ({route}: Props) => {
       title="Account reset"
       noBackground={true}
       onBack={onCancel}
-      banners={
-        error ? (
-          <Kb.Banner color="red">
-            <Kb.BannerParagraph bannerColor="red" content={error} />
-          </Kb.Banner>
-        ) : null
-      }
+      banners={errorBanner(error)}
       buttons={[
         {label: 'Yes', onClick: onYes, type: 'Success'},
         {label: 'No', onClick: onNo, type: 'Dim', waiting},
       ]}
     >
-      <Kb.Box2
-        direction="vertical"
-        gap="medium"
-        fullWidth={true}
-        fullHeight={true}
-        centerChildren={true}
-        style={styles.topGap}
-      >
-        <Kb.Icon type="iconfont-password" color={Kb.Styles.globalColors.black} fontSize={24} />
+      <QuestionBody icon={<Kb.Icon type="iconfont-password" color={Kb.Styles.globalColors.black} fontSize={24} />}>
         <Kb.Box2 direction="vertical" centerChildren={true}>
           <Kb.Text type="Header" center={true}>
             Do you know your
@@ -49,18 +36,9 @@ const KnowPassword = ({route}: Props) => {
             password?
           </Kb.Text>
         </Kb.Box2>
-      </Kb.Box2>
+      </QuestionBody>
     </SignupScreen>
   )
 }
 
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  topGap: Kb.Styles.platformStyles({
-    isMobile: {
-      justifyContent: 'flex-start',
-      marginTop: '20%',
-    },
-  }),
-}))
-
 export default KnowPassword
diff --git a/shared/login/reset/waiting.tsx b/shared/login/reset/waiting.tsx
index b932f503b016..454f9337f26c 100644
--- a/shared/login/reset/waiting.tsx
+++ b/shared/login/reset/waiting.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import {SignupScreen} from '@/signup/common'
+import {QuestionBody} from '../common'
 import {addTicker, removeTicker} from '@/util/second-timer'
 import * as C from '@/constants'
 import {useConfigState} from '@/stores/config'
@@ -70,30 +71,24 @@ const Waiting = ({endTime: routeEndTime, pipelineStarted, username}: Props) => {
       }
       buttons={[{label: 'Close', onClick: onClose, type: 'Dim'}]}
     >
-      <Kb.Box2
-        direction="vertical"
-        gap="medium"
-        fullWidth={true}
-        fullHeight={true}
-        centerChildren={true}
-        style={styles.topGap}
+      <QuestionBody
+        icon={
+          <Kb.Icon
+            type={pipelineStarted ? 'iconfont-wave-2' : 'iconfont-mailbox'}
+            color={Kb.Styles.globalColors.black}
+            fontSize={24}
+          />
+        }
       >
-        <Kb.Icon
-          type={pipelineStarted ? 'iconfont-wave-2' : 'iconfont-mailbox'}
-          color={Kb.Styles.globalColors.black}
-          fontSize={24}
-        />
         <Kb.Box2 direction="vertical" centerChildren={true} gap="small">
           <Kb.Text type="Header" center={true}>
             {pipelineStarted ? `Check back in ${formattedTime}` : 'Check your email or phone.'}
           </Kb.Text>
           {pipelineStarted ? (
-            <Kb.Box2 direction="vertical" centerChildren={true}>
-              <Kb.Text type="Body" style={styles.mainText} center={true}>
-                The reset has been initiated. For security reasons, nothing will happen in the next{' '}
-                {formattedTime}. We will notify you once you can proceed with the reset.
-              </Kb.Text>
-            </Kb.Box2>
+            <Kb.Text type="Body" style={styles.mainText} center={true}>
+              The reset has been initiated. For security reasons, nothing will happen in the next{' '}
+              {formattedTime}. We will notify you once you can proceed with the reset.
+            </Kb.Text>
           ) : (
             <Kb.Box2 direction="vertical" centerChildren={true}>
               <Kb.Text type="Body" style={styles.mainText} center={true}>
@@ -112,7 +107,7 @@ const Waiting = ({endTime: routeEndTime, pipelineStarted, username}: Props) => {
             </Kb.Box2>
           )}
         </Kb.Box2>
-      </Kb.Box2>
+      </QuestionBody>
     </SignupScreen>
   )
 }
@@ -128,10 +123,4 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     ...Kb.Styles.globalStyles.fillAbsolute,
     backgroundColor: Kb.Styles.globalColors.white_40OrBlack_60,
   },
-  topGap: Kb.Styles.platformStyles({
-    isMobile: {
-      justifyContent: 'flex-start',
-      marginTop: '20%',
-    },
-  }),
 }))
diff --git a/shared/login/routes.tsx b/shared/login/routes.tsx
index 8bf880ab5bf4..c6f29e048271 100644
--- a/shared/login/routes.tsx
+++ b/shared/login/routes.tsx
@@ -31,7 +31,7 @@ const LoginHeaderRight = () => {
   const requestAutoInvite = useRequestAutoInvite()
   if (!showRelogin) return null
   return (
-    <Kb.Box2 direction="horizontal" style={loginHeaderStyles.createAccount}>
+    <Kb.Box2 direction="horizontal" style={styles.createAccount}>
       <Kb.Text type="BodyBigLink" onClick={() => requestAutoInvite('')}>
         Create account
       </Kb.Text>
@@ -39,12 +39,6 @@ const LoginHeaderRight = () => {
   )
 }
 
-const loginHeaderStyles = Kb.Styles.styleSheetCreate(() => ({
-  createAccount: Kb.Styles.platformStyles({
-    isElectron: {paddingRight: Kb.Styles.globalMargins.small},
-  }),
-}))
-
 // Recover-password back affordances must run the flow's back/cancel logic (not a plain pop), so they
 // are wired as the React Navigation headerLeft. They read the current route's params via useRoute.
 const RecoverCancelLeft = () => (
@@ -81,12 +75,15 @@ const PromptResetAccountLeft = () => {
   )
 }
 
-const recoverPasswordStyles = Kb.Styles.styleSheetCreate(() => ({
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  createAccount: Kb.Styles.platformStyles({
+    isElectron: {paddingRight: Kb.Styles.globalMargins.small},
+  }),
   questionBox: Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.tiny, 0),
 }))
 
 const headerRightActions = () => (
-  <Kb.Box2 direction="horizontal" style={recoverPasswordStyles.questionBox}>
+  <Kb.Box2 direction="horizontal" style={styles.questionBox}>
     <InfoIcon />
   </Kb.Box2>
 )
diff --git a/shared/login/signup/error.stories.tsx b/shared/login/signup/error.stories.tsx
index d0a2ab7eff82..d31d0a6a0cfb 100644
--- a/shared/login/signup/error.stories.tsx
+++ b/shared/login/signup/error.stories.tsx
@@ -1,12 +1,12 @@
 import type {Meta, StoryObj} from '@storybook/react'
-import ConnectedSignupError from './error'
+import SignupError from './error'
 
-const meta: Meta<typeof ConnectedSignupError> = {
-  component: ConnectedSignupError,
+const meta: Meta<typeof SignupError> = {
+  component: SignupError,
   title: 'Login/SignupError',
 }
 export default meta
-type Story = StoryObj<typeof ConnectedSignupError>
+type Story = StoryObj<typeof SignupError>
 
 export const GenericError: Story = {
   args: {
diff --git a/shared/login/signup/error.tsx b/shared/login/signup/error.tsx
index 06aaf109532c..53cece8c43f5 100644
--- a/shared/login/signup/error.tsx
+++ b/shared/login/signup/error.tsx
@@ -4,7 +4,7 @@ import type {StaticScreenProps} from '@react-navigation/core'
 
 type Props = StaticScreenProps<{errorCode?: number; errorMessage?: string}>
 
-const ConnectedSignupError = (p: Props) => {
+const SignupError = (p: Props) => {
   const errorCode = p.route.params.errorCode
   const errorMessage = p.route.params.errorMessage ?? ''
   let heading = 'Ah Shoot! Something went wrong, try again?'
@@ -16,4 +16,4 @@ const ConnectedSignupError = (p: Props) => {
   return <SimpleErrorScreen heading={heading} message={message} onBack={C.Router2.navigateUp} />
 }
 
-export default ConnectedSignupError
+export default SignupError
diff --git a/shared/login/user-card/index.tsx b/shared/login/user-card/index.tsx
index 15780ff8304d..6299ff08e6cb 100644
--- a/shared/login/user-card/index.tsx
+++ b/shared/login/user-card/index.tsx
@@ -44,7 +44,7 @@ const UserCard = (p: Props) => {
       fullWidth={true}
       style={Kb.Styles.collapseStyles([styles.container, outerStyle])}
     >
-      <Kb.Box2 direction="vertical" alignItems="center" alignSelf="stretch" style={styles.avatar}>
+      <Kb.Box2 direction="vertical" alignItems="center" alignSelf="stretch">
         <Kb.Box2
           direction="vertical"
           style={Kb.Styles.collapseStyles([
@@ -67,9 +67,6 @@ const UserCard = (p: Props) => {
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
-  avatar: {
-    marginTop: 0,
-  },
   avatarBackground: {
     left: 0,
     position: 'absolute',
diff --git a/shared/menubar/index.desktop.tsx b/shared/menubar/index.desktop.tsx
index dc521e3e78f7..fedb5dd0c05a 100644
--- a/shared/menubar/index.desktop.tsx
+++ b/shared/menubar/index.desktop.tsx
@@ -15,7 +15,7 @@ import {Loading} from '@/fs/simple-screens'
 import {isLinux, isDarwin} from '@/constants/platform'
 import {type _InnerMenuItem} from '@/common-adapters/floating-menu/menu-layout'
 import {useUploadCountdown} from '@/fs/footer/use-upload-countdown'
-import {useColorScheme} from 'react-native'
+import {useDarkModeState} from '@/stores/darkmode'
 
 const {hideWindow, ctlQuit} = KB2.functions
 
@@ -63,7 +63,6 @@ export type Props = {
   showingDiskSpaceBanner: boolean
   totalSyncingBytes: number
   username: string
-  darkMode: boolean
 }
 
 // Simple avatar via httpSrv
@@ -75,7 +74,7 @@ const HttpAvatar = (p: {
   httpSrvToken: string
   style?: React.CSSProperties
 }) => {
-  const isDarkMode = useColorScheme() === 'dark'
+  const isDarkMode = useDarkModeState(s => s.isDarkMode())
   const typ = p.isTeam ? 'team' : 'user'
   const src = `http://${p.httpSrvAddress}/av?typ=${typ}&name=${p.name}&format=square_192&mode=${isDarkMode ? 'dark' : 'light'}&token=${p.httpSrvToken}&count=0`
   return <img src={src} width={p.size} height={p.size} style={{...avatarStyle, ...p.style}} loading="lazy" />
@@ -83,7 +82,7 @@ const HttpAvatar = (p: {
 const avatarStyle = {borderRadius: '50%', flexShrink: 0} satisfies React.CSSProperties
 
 const ArrowTick = () => {
-  const isDarkMode = useColorScheme() === 'dark'
+  const isDarkMode = useDarkModeState(s => s.isDarkMode())
   return (
     <Kb.Box2
       direction="vertical"
@@ -413,7 +412,7 @@ const IconBar = (p: Props & {showBadges?: boolean}) => {
   const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup)
 
   const badgeCountInMenu = badgesInMenu.reduce((acc, val) => (navBadges[val] ?? 0) + acc, 0)
-  const isDarkMode = useColorScheme() === 'dark'
+  const isDarkMode = useDarkModeState(s => s.isDarkMode())
   return (
     <Kb.Box2
       direction="horizontal"
@@ -585,7 +584,7 @@ const BadgeIcon = (p: {tab: Tabs; countMap: {[tab: string]: number}; openApp: (t
   const {tab, countMap, openApp} = p
   const count = countMap[tab]
   const iconType = iconMap[tab]
-  const isDarkMode = useColorScheme() === 'dark'
+  const isDarkMode = useDarkModeState(s => s.isDarkMode())
 
   if ((tab === C.Tabs.devicesTab && !count) || !iconType) {
     return null
diff --git a/shared/menubar/main.desktop.tsx b/shared/menubar/main.desktop.tsx
deleted file mode 100644
index aac114683bf5..000000000000
--- a/shared/menubar/main.desktop.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-// Entry point for the menubar render window
-import '../desktop/renderer/globals.desktop'
-import {waitOnKB2Loaded} from '@/util/electron'
-waitOnKB2Loaded(() => {
-  import('./main2.desktop').then(() => {}).catch(() => {})
-})
diff --git a/shared/menubar/main2.desktop.tsx b/shared/menubar/main2.desktop.tsx
index 783998e6ee85..0c9b2c0fb11c 100644
--- a/shared/menubar/main2.desktop.tsx
+++ b/shared/menubar/main2.desktop.tsx
@@ -1,14 +1,7 @@
 import Menubar from './index.desktop'
 import loadRemoteComponent from '../desktop/remote/component-loader.desktop'
-import {RemoteDarkModeSync} from '../desktop/remote/remote-component.desktop'
 import type {Props} from './index.desktop'
 
-const RemoteMenubar = (p: Props) => (
-  <RemoteDarkModeSync darkMode={p.darkMode}>
-    <Menubar {...p} />
-  </RemoteDarkModeSync>
-)
-
 // This is to keep that arrow and gap on top w/ transparency
 const style = {
   borderTopLeftRadius: 4,
@@ -21,7 +14,7 @@ const style = {
 } as const
 
 loadRemoteComponent<Props>({
-  Component: RemoteMenubar,
+  Component: Menubar,
   component: 'menubar',
   showOnProps: false,
   style,
diff --git a/shared/menubar/remote-proxy.desktop.tsx b/shared/menubar/remote-proxy.desktop.tsx
index 69e10e464049..04989dfbc818 100644
--- a/shared/menubar/remote-proxy.desktop.tsx
+++ b/shared/menubar/remote-proxy.desktop.tsx
@@ -8,7 +8,6 @@ import * as React from 'react'
 import KB2 from '@/util/electron'
 import useSerializeProps from '../desktop/remote/use-serialize-props.desktop'
 import type {Props, Conversation, RemoteTlfUpdates} from './index.desktop'
-import {useColorScheme} from 'react-native'
 import {useFsErrorActionOrThrow} from '@/fs/common/error-state'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useFollowerState} from '@/stores/followers'
@@ -359,7 +358,6 @@ function useMenubarRemoteProps(): Props {
   )
   useEnsureWidgetData(loggedIn, inboxHasLoaded, widgetList, inboxRefresh)
   const conversationsToSend = useWidgetConversationList(widgetList, badgeState)
-  const isDarkMode = useColorScheme() === 'dark'
   const {diskSpaceStatus, showingBanner} = overallSyncStatus
   const menuWindowShownCount = windowShownCount.get('menu') ?? 0
   const kbfsEnabled = useMenubarSfmiEnabled(
@@ -398,7 +396,6 @@ function useMenubarRemoteProps(): Props {
     ...upDown,
     conversationsToSend,
     daemonHandshakeState,
-    darkMode: isDarkMode,
     diskSpaceStatus,
     following,
     httpSrvAddress: httpSrv.address,
diff --git a/shared/patches/expo+57.0.1.patch b/shared/patches/expo+57.0.1.patch
new file mode 100644
index 000000000000..4ff3438daa88
--- /dev/null
+++ b/shared/patches/expo+57.0.1.patch
@@ -0,0 +1,22 @@
+diff --git a/node_modules/expo/src/async-require/hmr.ts b/node_modules/expo/src/async-require/hmr.ts
+index bd226af..78b755a 100644
+--- a/node_modules/expo/src/async-require/hmr.ts
++++ b/node_modules/expo/src/async-require/hmr.ts
+@@ -16,6 +16,7 @@ import {
+   getFullBundlerUrl,
+   handleCompileError,
+   hideLoading,
++  reload,
+   resetErrorOverlay,
+   showLoading,
+ } from './hmrUtils';
+@@ -317,7 +318,8 @@ function setHMRUnavailableReason(reason: string) {
+ function registerBundleEntryPoints(client: MetroHMRClient | null) {
+   if (hmrUnavailableReason != null) {
+     // "Bundle Splitting – Metro disconnected"
+-    window.location.reload();
++    // Use the platform-aware helper: window.location is undefined on native.
++    reload();
+     return;
+   }
+ 
diff --git a/shared/people/index.tsx b/shared/people/index.tsx
index cec604bb1746..b8014c6768f5 100644
--- a/shared/people/index.tsx
+++ b/shared/people/index.tsx
@@ -8,7 +8,6 @@ import FollowNotification from './follow-notification'
 import FollowSuggestions from './follow-suggestions'
 import Todo from './todo'
 import {clearSignupEmail} from './signup-email'
-import {RefreshControl} from 'react-native'
 
 type Props = {
   dismissAnnouncement: (id: T.RPCGen.HomeScreenAnnouncementID) => void
@@ -150,11 +149,8 @@ function People(props: WrapProps) {
   return (
     <Kb.ScrollView
       style={styles.container}
-      refreshControl={
-        isMobile
-          ? <RefreshControl refreshing={waiting} onRefresh={() => props.getData(false, true)} />
-          : undefined
-      }
+      refreshing={waiting}
+      onRefresh={() => props.getData(false, true)}
     >
       {!isMobile && waiting && <Kb.ProgressIndicator style={styles.progress} />}
       <PeoplePageList {...rest} />
diff --git a/shared/people/routes.tsx b/shared/people/routes.tsx
index 5173c5bfb1fb..d9648b05b701 100644
--- a/shared/people/routes.tsx
+++ b/shared/people/routes.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import peopleTeamBuilder from '../team-building/page'
 import ProfileSearch from '../profile/search'
 import {useCurrentUserState} from '@/stores/current-user'
@@ -11,7 +12,7 @@ const HeaderAvatar = () => {
   const myUsername = useCurrentUserState(s => s.username)
   const navigateAppend = C.Router2.navigateAppend
   const onClick = () => navigateAppend({name: 'accountSwitcher', params: {}})
-  return <Kb.Avatar size={32} username={myUsername} onClick={onClick} />
+  return <Kb.Avatar size={32} username={myUsername} onClick={onClick} testID={TestIDs.PEOPLE_HEADER_AVATAR} />
 }
 
 export const newRoutes = defineRouteMap({
diff --git a/shared/pinentry/main.desktop.tsx b/shared/pinentry/main.desktop.tsx
deleted file mode 100644
index 946161bd056c..000000000000
--- a/shared/pinentry/main.desktop.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-// Entry point for the pinentry render window
-import '../desktop/renderer/globals.desktop'
-import {waitOnKB2Loaded} from '@/util/electron'
-waitOnKB2Loaded(() => require('./main2.desktop') as () => void)
diff --git a/shared/pinentry/main2.desktop.tsx b/shared/pinentry/main2.desktop.tsx
index 1daefa0231cd..76c087186a5a 100644
--- a/shared/pinentry/main2.desktop.tsx
+++ b/shared/pinentry/main2.desktop.tsx
@@ -3,11 +3,9 @@ import * as RemoteGen from '@/constants/remote-actions'
 import type * as T from '@/constants/types'
 import Pinentry from './index.desktop'
 import loadRemoteComponent from '../desktop/remote/component-loader.desktop'
-import {getRemoteComponentParam, RemoteDarkModeSync} from '../desktop/remote/remote-component.desktop'
 
 export type ProxyProps = {
   cancelLabel?: string
-  darkMode: boolean
   prompt: string
   retryLabel?: string
   showTyping?: T.RPCGen.Feature
@@ -16,21 +14,15 @@ export type ProxyProps = {
   windowTitle: string
 }
 
-const RemotePinentry = (p: ProxyProps) => {
-  const {darkMode, ...rest} = p
-  return (
-    <RemoteDarkModeSync darkMode={darkMode}>
-      <Pinentry
-        {...rest}
-        onCancel={() => R.remoteDispatch(RemoteGen.createPinentryOnCancel())}
-        onSubmit={(password: string) => R.remoteDispatch(RemoteGen.createPinentryOnSubmit({password}))}
-      />
-    </RemoteDarkModeSync>
-  )
-}
+const RemotePinentry = (p: ProxyProps) => (
+  <Pinentry
+    {...p}
+    onCancel={() => R.remoteDispatch(RemoteGen.createPinentryOnCancel())}
+    onSubmit={(password: string) => R.remoteDispatch(RemoteGen.createPinentryOnSubmit({password}))}
+  />
+)
 
 loadRemoteComponent<ProxyProps>({
   Component: RemotePinentry,
   component: 'pinentry',
-  param: getRemoteComponentParam(),
 })
diff --git a/shared/pinentry/remote-proxy.desktop.tsx b/shared/pinentry/remote-proxy.desktop.tsx
index 9ce692699d75..4029ed1f6b25 100644
--- a/shared/pinentry/remote-proxy.desktop.tsx
+++ b/shared/pinentry/remote-proxy.desktop.tsx
@@ -7,7 +7,6 @@ import {useEngineActionListener} from '@/engine/action-listener'
 import logger from '@/logger'
 import useBrowserWindow from '../desktop/remote/use-browser-window.desktop'
 import useSerializeProps from '../desktop/remote/use-serialize-props.desktop'
-import {useColorScheme} from 'react-native'
 import * as React from 'react'
 import {useConfigState} from '@/stores/config'
 import type {ProxyProps} from './main2.desktop'
@@ -117,12 +116,10 @@ const PinentryProxy = () => {
   }
   const {cancelLabel, prompt, retryLabel, showTyping, submitLabel, type, windowTitle} = currentPopupState
   const show = type !== T.RPCGen.PassphraseType.none
-  const darkMode = useColorScheme() === 'dark'
   if (show) {
     return (
       <Pinentry
         cancelLabel={cancelLabel}
-        darkMode={darkMode}
         prompt={prompt}
         retryLabel={retryLabel}
         showTyping={showTyping}
diff --git a/shared/profile/add-to-team.tsx b/shared/profile/add-to-team.tsx
index 44b0d7d4ecf9..24cb3ef21b32 100644
--- a/shared/profile/add-to-team.tsx
+++ b/shared/profile/add-to-team.tsx
@@ -6,7 +6,8 @@ import {FloatingRolePicker, sendNotificationFooter} from '@/teams/role-picker'
 import * as Kb from '@/common-adapters'
 import {InlineDropdown} from '@/common-adapters/dropdown'
 import logger from '@/logger'
-import {useTeamsList} from '@/teams/use-teams-list'
+import {useRPCLoad} from '@/util/use-rpc-load'
+import {useTeamsList, useTeamsListNameToIDMap} from '@/teams/use-teams-list'
 
 const getOwnerDisabledReason = (
   selected: Set<string>,
@@ -53,10 +54,12 @@ const makeAddUserToTeamsResult = (
 
 type OwnProps = {username: string}
 
+const noTeamList = new Array<T.Teams.TeamProfileAddList>()
+
 const AddToTeam = (ownProps: OwnProps) => {
   const {username: them} = ownProps
   const {teams} = useTeamsList()
-  const teamNameToID = React.useMemo(() => new Map(teams.map(team => [team.teamname, team.id] as const)), [teams])
+  const teamNameToID = useTeamsListNameToIDMap()
   const teamNameToRole = React.useMemo(
     () => new Map(teams.map(team => [team.teamname, team.role] as const)),
     [teams]
@@ -64,49 +67,36 @@ const AddToTeam = (ownProps: OwnProps) => {
   const waiting = C.Waiting.useAnyWaiting(C.waitingKeyTeamsProfileAddList)
   const clearModals = C.Router2.clearModals
   const navigateUp = C.Router2.navigateUp
-  const loadTeamProfileAddList = C.useRPC(T.RPCGen.teamsTeamProfileAddListRpcPromise)
   const addUserToTeam = C.useRPC(T.RPCGen.teamsTeamAddMemberRpcPromise)
-  const [teamProfileAddList, setTeamProfileAddList] = React.useState<ReadonlyArray<T.Teams.TeamProfileAddList>>([])
   const [addUserToTeamsResults, setAddUserToTeamsResults] = React.useState('')
   const [addUserToTeamsState, setAddUserToTeamsState] =
     React.useState<T.Teams.AddUserToTeamsState>('notStarted')
-  const teamListRequestID = React.useRef(0)
   const submitRequestID = React.useRef(0)
 
-  // TODO Y2K-1086 use team ID given in teamProfileAddList to avoid this mapping
-  const [selectedTeams, setSelectedTeams] = React.useState(new Set<string>())
-  const [rolePickerOpen, setRolePickerOpen] = React.useState(false)
-  const [selectedRole, setSelectedRole] = React.useState<T.Teams.TeamRoleType>('writer')
-  const [sendNotification, setSendNotification] = React.useState(true)
-
-  const ownerDisabledReason = getOwnerDisabledReason(selectedTeams, teamNameToRole)
-
-  const loadTeamList = React.useEffectEvent(() => {
-    const requestID = teamListRequestID.current + 1
-    teamListRequestID.current = requestID
-    loadTeamProfileAddList(
-      [{username: them}, C.waitingKeyTeamsProfileAddList],
-      result => {
-        if (teamListRequestID.current !== requestID) {
-          return
-        }
+  const {data: teamProfileAddList = noTeamList, reload: loadTeamList} = useRPCLoad(
+    T.RPCGen.teamsTeamProfileAddListRpcPromise,
+    [{username: them}, C.waitingKeyTeamsProfileAddList],
+    {
+      map: result => {
         const teamlist = (result ?? []).map(team => ({
           disabledReason: team.disabledReason,
           open: team.open,
           teamName: team.teamName.parts ? team.teamName.parts.join('.') : '',
         }))
         teamlist.sort((a, b) => a.teamName.localeCompare(b.teamName))
-        setTeamProfileAddList(teamlist)
+        return teamlist
       },
-      error => {
-        if (teamListRequestID.current !== requestID) {
-          return
-        }
-        logger.info(`Failed to load profile add-to-team list for ${them}: ${error.message}`)
-        setTeamProfileAddList([])
-      }
-    )
-  })
+      onError: error => logger.info(`Failed to load profile add-to-team list for ${them}: ${error.message}`),
+    }
+  )
+
+  // TODO Y2K-1086 use team ID given in teamProfileAddList to avoid this mapping
+  const [selectedTeams, setSelectedTeams] = React.useState(new Set<string>())
+  const [rolePickerOpen, setRolePickerOpen] = React.useState(false)
+  const [selectedRole, setSelectedRole] = React.useState<T.Teams.TeamRoleType>('writer')
+  const [sendNotification, setSendNotification] = React.useState(true)
+
+  const ownerDisabledReason = getOwnerDisabledReason(selectedTeams, teamNameToRole)
 
   const onAddToTeams = React.useEffectEvent(
     async (role: T.Teams.TeamRoleType, teams: Array<string>, sendChatNotification: boolean) => {
@@ -172,9 +162,7 @@ const AddToTeam = (ownProps: OwnProps) => {
   )
 
   React.useEffect(() => {
-    loadTeamList()
     return () => {
-      teamListRequestID.current += 1
       submitRequestID.current += 1
     }
   }, [])
@@ -281,7 +269,6 @@ const AddToTeam = (ownProps: OwnProps) => {
           </Kb.Text>
           <FloatingRolePicker
             presetRole={selectedRole}
-
             footerComponent={footerComponent}
             onConfirm={onConfirmRolePicker}
             onCancel={onCancelRolePicker}
@@ -340,7 +327,7 @@ const TeamRow = (props: RowProps) => {
               {props.name}
             </Kb.Text>
             {props.isOpen && (
-              <Kb.Meta title="open" style={styles.meta} backgroundColor={Kb.Styles.globalColors.green} />
+              <Kb.Meta variant="open" style={styles.meta} />
             )}
           </Kb.Box2>
           <Kb.Text type="BodySmall">{props.disabledReason}</Kb.Text>
@@ -402,7 +389,6 @@ const styles = Kb.Styles.styleSheetCreate(
         isMobile: {marginLeft: Kb.Styles.globalMargins.xxtiny, marginRight: Kb.Styles.globalMargins.tiny},
       }),
       meta: {
-        alignSelf: 'center',
         marginLeft: Kb.Styles.globalMargins.xtiny,
         marginTop: 2,
       },
diff --git a/shared/profile/edit-avatar/hooks.tsx b/shared/profile/edit-avatar/hooks.tsx
index af2c3201cc6d..a1597cca3e12 100644
--- a/shared/profile/edit-avatar/hooks.tsx
+++ b/shared/profile/edit-avatar/hooks.tsx
@@ -2,37 +2,40 @@ import * as React from 'react'
 import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
-import type {Props} from './index.shared'
 import type {ImageInfo} from '@/util/expo-image-picker'
 import {fixCrop} from '@/util/crop'
 import {getNextRouteAfterAvatar} from '@/teams/new-team/wizard/state'
 import {useLoadedTeam} from '@/teams/team/use-loaded-team'
 import {uploadTeamAvatar} from '@/teams/actions'
 
+export type Props = {
+  image?: ImageInfo
+  sendChatNotification?: boolean
+  showBack?: boolean
+  teamID?: string
+  createdTeam?: boolean
+  wizard?: boolean
+  newTeamWizard?: T.Teams.NewTeamWizardState
+}
+
 type TeamProps = {
   createdTeam?: boolean
-  showBack?: boolean
   teamID: T.Teams.TeamID
   teamname: string
   type: 'team'
   wizard: boolean
-  onSkip: () => void
 }
 type ProfileProps = {
   createdTeam?: false
-  onSkip?: undefined
   teamname?: string
   teamID?: T.Teams.TeamID
   type: 'profile'
-  showBack?: false
   wizard?: false
 }
 
 type Ret = {
   error: string
   image?: ImageInfo
-  onBack: () => void
-  onClose: () => void
   onSave: (
     filename: string,
     crop?: T.RPCGen.ImageCropRect,
@@ -40,18 +43,15 @@ type Ret = {
     offsetLeft?: number,
     offsetTop?: number
   ) => void
-  sendChatNotification?: boolean
-  submitting: boolean
   waitingKey: string
 } & (TeamProps | ProfileProps)
 
-export default (ownProps: Props): Ret => {
+const useEditAvatar = (ownProps: Props): Ret => {
   const teamID = ownProps.teamID
   const createdTeam = ownProps.createdTeam ?? false
   const image = ownProps.image
   const sperror = C.Waiting.useAnyErrors(C.waitingKeyProfileUploadAvatar)
   const sendChatNotification = ownProps.sendChatNotification ?? false
-  const submitting = C.Waiting.useAnyWaiting(C.waitingKeyProfileUploadAvatar)
   const {teamMeta} = useLoadedTeam(teamID ?? T.Teams.noTeamID, !!teamID)
   const teamname = teamMeta.teamname
   const parentTeamID = ownProps.newTeamWizard?.parentTeamID ?? T.Teams.noTeamID
@@ -63,15 +63,6 @@ export default (ownProps: Props): Ret => {
   }, [dispatchClearWaiting])
   const navigateUp = C.Router2.navigateUp
   const navigateAppend = C.Router2.navigateAppend
-  const onBack = () => {
-    dispatchClearWaiting(C.waitingKeyProfileUploadAvatar)
-    navigateUp()
-  }
-  const clearModals = C.Router2.clearModals
-  const onClose = () => {
-    dispatchClearWaiting(C.waitingKeyProfileUploadAvatar)
-    clearModals()
-  }
   const onSaveTeamAvatar = (
     _filename: string,
     teamname: string,
@@ -108,20 +99,6 @@ export default (ownProps: Props): Ret => {
     )
     navigateAppend(getNextRouteAfterAvatar(wizard, parentTeamMemberCount))
   }
-  const onSkip = () => {
-    const wizard = ownProps.newTeamWizard
-    if (!wizard) {
-      return
-    }
-    navigateAppend(
-      {
-        name: 'profileEditAvatar',
-        params: {...ownProps, newTeamWizard: wizard},
-      },
-      true
-    )
-    navigateAppend(getNextRouteAfterAvatar(wizard, parentTeamMemberCount))
-  }
 
   let error = ''
   if (sperror) {
@@ -136,10 +113,6 @@ export default (ownProps: Props): Ret => {
   const bothProps = {
     error,
     image,
-    onBack,
-    onClose,
-    sendChatNotification,
-    submitting,
     waitingKey: C.waitingKeyProfileUploadAvatar,
   }
   return teamID
@@ -159,8 +132,6 @@ export default (ownProps: Props): Ret => {
             onSaveTeamAvatar(filename, teamname, sendChatNotification, crop)
           }
         },
-        onSkip,
-        showBack: ownProps.showBack ?? false,
         teamID,
         teamname,
         type: 'team' as const,
@@ -172,3 +143,5 @@ export default (ownProps: Props): Ret => {
         type: 'profile' as const,
       }
 }
+
+export default useEditAvatar
diff --git a/shared/profile/edit-avatar/index.shared.tsx b/shared/profile/edit-avatar/index.shared.tsx
deleted file mode 100644
index a82dfff6e438..000000000000
--- a/shared/profile/edit-avatar/index.shared.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import type * as React from 'react'
-import type {ImageInfo} from '@/util/expo-image-picker'
-import type * as T from '@/constants/types'
-
-export type Props = {
-  image?: ImageInfo
-  sendChatNotification?: boolean
-  showBack?: boolean
-  teamID?: string
-  createdTeam?: boolean
-  wizard?: boolean
-  newTeamWizard?: T.Teams.NewTeamWizardState
-}
-
-declare const EditAvatar: (p: Props) => React.ReactNode
-export default EditAvatar
diff --git a/shared/profile/edit-avatar/index.tsx b/shared/profile/edit-avatar/index.tsx
index 9353be83b04e..df885c8d97ae 100644
--- a/shared/profile/edit-avatar/index.tsx
+++ b/shared/profile/edit-avatar/index.tsx
@@ -1,11 +1,10 @@
 import * as C from '@/constants'
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
-import type {Props} from './index.shared'
+import useEditAvatar, {type Props} from './hooks'
 import {useNavigation} from '@react-navigation/native'
 import {useSafeNavigation} from '@/util/safe-navigation'
 import {ModalTitle} from '@/teams/common'
-import useHooks from './hooks'
 import './edit-avatar.css'
 import KB2 from '@/util/electron'
 import {launchImageLibraryAsync} from '@/util/expo-image-picker'
@@ -67,7 +66,7 @@ const getCropCoordinates = (c: Crop) => {
 // Desktop implementation
 type Loading = undefined | 'loading' | 'loaded'
 const DesktopEditAvatar = (_p: Props) => {
-  const p = useHooks(_p)
+  const p = useEditAvatar(_p)
   const {wizard, type, error, createdTeam, teamname} = p
   const [serror, setSerror] = React.useState(false)
   const [dropping, setDropping] = React.useState(false)
@@ -123,11 +122,7 @@ const DesktopEditAvatar = (_p: Props) => {
 
   return (
     <>
-      {error ? (
-        <Kb.Banner color="red" key="propsError">
-          {error}
-        </Kb.Banner>
-      ) : null}
+      <Kb.ErrorBanner error={error} />
       {serror ? (
         <Kb.Banner color="red" key="stateError">
           The image you uploaded could not be read. Try again with a valid PNG, JPG or GIF.
@@ -235,7 +230,7 @@ const chooseAvatar = async (
 
 const NativeAvatarUploadWrapper = (p: Props) => {
   const {newTeamWizard} = p
-  const props = useHooks(p)
+  const props = useEditAvatar(p)
   const {image, error: _error, onSave: _onSave, teamID, type, wizard, waitingKey} = props
   const [selectedImage, setSelectedImage] = React.useState(image)
   const [imageError, setImageError] = React.useState('')
diff --git a/shared/profile/generic/proofs-list.tsx b/shared/profile/generic/proofs-list.tsx
index a7a0d21af6cf..e74f21e8cdc7 100644
--- a/shared/profile/generic/proofs-list.tsx
+++ b/shared/profile/generic/proofs-list.tsx
@@ -4,9 +4,10 @@ import PlatformIcon from '../platform-icon'
 import * as React from 'react'
 import * as T from '@/constants/types'
 import {makeInsertMatcher} from '@/util/string'
+import {produce} from 'immer'
 import {useColorScheme} from 'react-native'
 import Modal from '../modal'
-import {SiteIcon} from './shared'
+import {SiteIcon} from './site-icon'
 import {normalizeProofUsername} from '../proof-utils'
 import {openURL as openUrl} from '@/util/misc'
 import {subtitle} from '@/util/platforms'
@@ -38,7 +39,6 @@ const makeProveGenericParams = (): ProveGenericParams => ({
 })
 
 const toProveGenericParams = (p: T.RPCGen.ProveParameters): ProveGenericParams => ({
-  ...makeProveGenericParams(),
   buttonLabel: p.buttonLabel,
   logoBlack: p.logoBlack || [],
   logoFull: p.logoFull || [],
@@ -275,10 +275,6 @@ const runProofFlow = async (p: {
               platform: service,
               username: currentUsernameRef.current,
             })
-            cancelCurrentRef.current = () => {
-              canceled = true
-              response.error(inputCancelError)
-            }
           } else if (genericService && parameters) {
             currentGenericParamsRef.current = toProveGenericParams(parameters)
             setStepSafe({
@@ -350,7 +346,7 @@ const runProofFlow = async (p: {
   }
 }
 
-const Container = ({platform, reason = 'profile'}: Props) => {
+const ProofsList = ({platform, reason = 'profile'}: Props) => {
   const currentUsername = useCurrentUserState(s => s.username)
   const {proofSuggestions} = useProofSuggestions()
   const {loadProfile} = useTrackerProfile(currentUsername)
@@ -469,7 +465,12 @@ const Container = ({platform, reason = 'profile'}: Props) => {
 
     if (proofPlatform === 'btc') {
       if (!valid) {
-        setStepSafe({error: 'Invalid address format', kind: 'enterUsername', platform: proofPlatform, username: input})
+        setStepSafe({
+          error: 'Invalid address format',
+          kind: 'enterUsername',
+          platform: proofPlatform,
+          username: input,
+        })
         return
       }
       registerCryptoAddress(
@@ -556,7 +557,9 @@ const Container = ({platform, reason = 'profile'}: Props) => {
                   body={
                     <Kb.Box2 direction="vertical" fullWidth={true}>
                       <Kb.Text type="BodyBigLink">Host a TXT file</Kb.Text>
-                      <Kb.Text type="Body">Host a text file on your site, such as yoursite.com/keybase.txt.</Kb.Text>
+                      <Kb.Text type="Body">
+                        Host a text file on your site, such as yoursite.com/keybase.txt.
+                      </Kb.Text>
                     </Kb.Box2>
                   }
                   onClick={() => startProof('web', 'profile')}
@@ -638,7 +641,13 @@ const Container = ({platform, reason = 'profile'}: Props) => {
       case 'genericResult':
         return <GenericResult onClose={closeToProfile} step={step} />
       case 'pick':
-        return <ProviderPicker onCancel={closeModal} onSelect={key => startProof(key, 'profile')} providers={providers} />
+        return (
+          <ProviderPicker
+            onCancel={closeModal}
+            onSelect={key => startProof(key, 'profile')}
+            providers={providers}
+          />
+        )
     }
   })()
 
@@ -664,7 +673,7 @@ const ProviderPicker = ({
 }) => {
   const [filter, setFilter] = React.useState('')
   const itemHeight = {
-    height: isMobile ? 56 : 48,
+    height: rowHeight,
     type: 'fixed',
   } as const
   const filterRegexp = makeInsertMatcher(filter)
@@ -719,7 +728,11 @@ const ProviderPicker = ({
                     {(provider.new || !!provider.desc) && (
                       <Kb.Box2 direction="horizontal" alignItems="flex-start" fullWidth={true}>
                         {provider.new && (
-                          <Kb.Meta title="NEW" backgroundColor={Kb.Styles.globalColors.blue} style={styles.new} />
+                          <Kb.Meta
+                            title="NEW"
+                            backgroundColor={Kb.Styles.globalColors.blue}
+                            style={styles.new}
+                          />
                         )}
                         <Kb.Text type="BodySmall" style={styles.description}>
                           {provider.desc}
@@ -777,9 +790,19 @@ const EnterUsername = ({
 
   const username =
     usernameState.initialUsername === initialUsername ? usernameState.username : initialUsername
-  const setUsername = (username: string) => setUsernameState(state => ({...state, username}))
+  const setUsername = (username: string) =>
+    setUsernameState(
+      produce(draft => {
+        draft.username = username
+      })
+    )
   const errorText = errorState.error === error ? errorState.errorText : normalizedError
-  const setErrorText = (errorText: string) => setErrorState(state => ({...state, errorText}))
+  const setErrorText = (errorText: string) =>
+    setErrorState(
+      produce(draft => {
+        draft.errorText = errorText
+      })
+    )
   const canSubmit = !!username.length
   const submit = () => {
     if (!canSubmit) {
@@ -817,21 +840,13 @@ const EnterUsername = ({
           value={username}
         />
         <UsernameTips platform={platform} />
-        <Kb.Box2 direction="horizontal" gap="small">
-          <Kb.WaitingButton
-            waitingKey={C.waitingKeyProfile}
-            onlyDisable={true}
-            type="Dim"
-            onClick={onCancel}
-            label="Cancel"
-          />
-          <Kb.WaitingButton
-            waitingKey={C.waitingKeyProfile}
-            disabled={!canSubmit}
-            onClick={submit}
-            label="Continue"
-          />
-        </Kb.Box2>
+        <Kb.ConfirmButtons
+          waitingKey={C.waitingKeyProfile}
+          onCancel={onCancel}
+          onConfirm={submit}
+          confirmLabel="Continue"
+          confirmDisabled={!canSubmit}
+        />
       </Kb.Box2>
     </Modal>
   )
@@ -856,7 +871,12 @@ const GenericEnterUsername = ({
   }
 
   const username = usernameState.stepUsername === step.username ? usernameState.username : step.username
-  const setUsername = (username: string) => setUsernameState(state => ({...state, username}))
+  const setUsername = (username: string) =>
+    setUsernameState(
+      produce(draft => {
+        draft.username = username
+      })
+    )
   const unreachable = !!step.proofUrl
   return (
     <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} style={styles.container}>
@@ -908,9 +928,7 @@ const GenericEnterUsername = ({
               error={!!step.error}
               onChangeText={setUsername}
               onEnterKeyDown={() => onSubmit(username)}
-              placeholder={
-                step.genericParams.suffix === '@theqrl.org' ? 'Your QRL address' : 'Your username'
-              }
+              placeholder={step.genericParams.suffix === '@theqrl.org' ? 'Your QRL address' : 'Your username'}
               value={username}
             />
           </Kb.Box2>
@@ -1042,11 +1060,7 @@ const PostProof = ({
           <Kb.Box2 direction={isMobile ? 'verticalReverse' : 'horizontal'} gap="small">
             <Kb.Button type="Dim" onClick={onCancel} label="Cancel" />
             {showSubmit ? (
-              <Kb.WaitingButton
-                onClick={onSubmit}
-                label={onCompleteText}
-                waitingKey={C.waitingKeyProfile}
-              />
+              <Kb.WaitingButton onClick={onSubmit} label={onCompleteText} waitingKey={C.waitingKeyProfile} />
             ) : (
               <Kb.Button
                 onClick={() => {
@@ -1065,13 +1079,7 @@ const PostProof = ({
   )
 }
 
-const ConfirmOrPending = ({
-  onClose,
-  step,
-}: {
-  onClose: () => void
-  step: ConfirmOrPendingStep
-}) => {
+const ConfirmOrPending = ({onClose, step}: {onClose: () => void; step: ConfirmOrPendingStep}) => {
   const isGood = step.proofFound && step.proofStatus === T.RPCGen.ProofStatus.ok
   const isPending =
     !isGood &&
@@ -1115,8 +1123,8 @@ const ConfirmOrPending = ({
         </Kb.Text>
         {step.platform === 'http' && (
           <Kb.Text center={true} type="BodySmall">
-            Note: {step.username} doesn&apos;t load over https. If you get a real SSL certificate
-            (not self-signed) in the future, please replace this proof with a fresh one.
+            Note: {step.username} doesn&apos;t load over https. If you get a real SSL certificate (not
+            self-signed) in the future, please replace this proof with a fresh one.
           </Kb.Text>
         )}
         <Kb.Button onClick={onClose} label="Reload profile" />
@@ -1125,13 +1133,7 @@ const ConfirmOrPending = ({
   )
 }
 
-const GenericResult = ({
-  onClose,
-  step,
-}: {
-  onClose: () => void
-  step: GenericResultStep
-}) => {
+const GenericResult = ({onClose, step}: {onClose: () => void; step: GenericResultStep}) => {
   const proofUsername = step.username + step.genericParams.suffix
   const success = !step.error
   const iconType = success ? 'icon-proof-success' : 'icon-proof-broken'
@@ -1272,16 +1274,11 @@ const WebDescription = ({platformUserName}: {platformUserName: string}) => {
         type="BodyPrimaryLink"
         center={true}
         {...rootUrlProps}
-        style={{color: Kb.Styles.globalColors.blueDark, marginTop: Kb.Styles.globalMargins.tiny}}
+        style={Kb.Styles.collapseStyles([styles.webLink, styles.webLinkFirst])}
       >
         {root}
       </Kb.Text>
-      <Kb.Text
-        type="BodyPrimaryLink"
-        center={true}
-        {...wellKnownUrlProps}
-        style={{color: Kb.Styles.globalColors.blueDark}}
-      >
+      <Kb.Text type="BodyPrimaryLink" center={true} {...wellKnownUrlProps} style={styles.webLink}>
         {wellKnown}
       </Kb.Text>
     </Kb.Box2>
@@ -1295,7 +1292,8 @@ const descriptionMap: Partial<
 > = {
   dns: () => (
     <Kb.Text center={true} type="BodySemibold">
-      Enter the following as a TXT entry in your DNS zone, <Kb.Text type="BodySemibold">exactly as it appears</Kb.Text>
+      Enter the following as a TXT entry in your DNS zone,{' '}
+      <Kb.Text type="BodySemibold">exactly as it appears</Kb.Text>
       {'. If you need a "name" for your entry, give it "@".'}
     </Kb.Text>
   ),
@@ -1308,7 +1306,10 @@ const descriptionMap: Partial<
   ),
   hackernews: () => (
     <Kb.Text center={true} type="BodySemibold">
-      Please add the below text <Kb.Text type="BodySemibold" style={Kb.Styles.globalStyles.italic}>exactly as it appears</Kb.Text>{' '}
+      Please add the below text{' '}
+      <Kb.Text type="BodySemibold" style={Kb.Styles.globalStyles.italic}>
+        exactly as it appears
+      </Kb.Text>{' '}
       to your profile.
     </Kb.Text>
   ),
@@ -1316,7 +1317,8 @@ const descriptionMap: Partial<
   https: WebDescription,
   reddit: () => (
     <Kb.Text center={true} type="BodySemibold">
-      Click the button below and post the form in the subreddit <Kb.Text type="BodySemiboldItalic">KeybaseProofs</Kb.Text>.
+      Click the button below and post the form in the subreddit{' '}
+      <Kb.Text type="BodySemiboldItalic">KeybaseProofs</Kb.Text>.
     </Kb.Text>
   ),
   rooter: () => null,
@@ -1342,11 +1344,7 @@ const normalizeForFiltering = (input: string) => input.toLowerCase().replace(/[.
 const filterProvider = (p: Provider, filter: RegExp) =>
   normalizeForFiltering(p.name).search(filter) !== -1 || normalizeForFiltering(p.desc).search(filter) !== -1
 
-const rightColumnStyle = Kb.Styles.platformStyles({
-  isElectron: {
-    ...Kb.Styles.textEllipsis,
-  },
-})
+const rowHeight = isMobile ? 56 : 48
 
 const styles = Kb.Styles.styleSheetCreate(
   () =>
@@ -1381,9 +1379,9 @@ const styles = Kb.Styles.styleSheetCreate(
         },
       }),
       containerBox: {
-        height: isMobile ? 56 : 48,
+        height: rowHeight,
       },
-      description: {...rightColumnStyle},
+      description: Kb.Styles.platformStyles({isElectron: {...Kb.Styles.textEllipsis}}),
       error: {
         backgroundColor: Kb.Styles.globalColors.red,
         borderRadius: Kb.Styles.borderRadius,
@@ -1456,10 +1454,10 @@ const styles = Kb.Styles.styleSheetCreate(
         color: Kb.Styles.globalColors.black_50,
         marginRight: Kb.Styles.globalMargins.tiny,
       },
-      title: {
-        ...rightColumnStyle,
-        color: Kb.Styles.globalColors.black,
-      },
+      title: Kb.Styles.platformStyles({
+        common: {color: Kb.Styles.globalColors.black},
+        isElectron: {...Kb.Styles.textEllipsis},
+      }),
       topContainer: {flex: 1},
       unreachableBox: {
         backgroundColor: Kb.Styles.globalColors.black_05,
@@ -1474,7 +1472,9 @@ const styles = Kb.Styles.styleSheetCreate(
       warningText: {
         ...Kb.Styles.padding(Kb.Styles.globalMargins.small, Kb.Styles.globalMargins.medium, 0),
       },
+      webLink: {color: Kb.Styles.globalColors.blueDark},
+      webLinkFirst: {marginTop: Kb.Styles.globalMargins.tiny},
     }) as const
 )
 
-export default Container
+export default ProofsList
diff --git a/shared/profile/generic/shared.tsx b/shared/profile/generic/site-icon.tsx
similarity index 100%
rename from shared/profile/generic/shared.tsx
rename to shared/profile/generic/site-icon.tsx
diff --git a/shared/profile/pgp/choice/index.tsx b/shared/profile/pgp/choice.tsx
similarity index 91%
rename from shared/profile/pgp/choice/index.tsx
rename to shared/profile/pgp/choice.tsx
index 2b6a09776840..9185f515ef99 100644
--- a/shared/profile/pgp/choice/index.tsx
+++ b/shared/profile/pgp/choice.tsx
@@ -4,9 +4,10 @@ import * as C from '@/constants'
 import * as React from 'react'
 import * as T from '@/constants/types'
 import {ignorePromise} from '@/constants/utils'
+import {produce} from 'immer'
 import {RPCError} from '@/util/errors'
 import Modal from '@/profile/modal'
-import {validatePgpInfo} from '../validation'
+import * as Validators from '@/util/simple-validators'
 
 type GeneratePgpArgs = {
   pgpEmail1: string
@@ -15,6 +16,20 @@ type GeneratePgpArgs = {
   pgpFullName: string
 }
 
+export const validatePgpInfo = (info: GeneratePgpArgs) => {
+  const email1Error = Validators.isValidEmail(info.pgpEmail1)
+  const email2Error = info.pgpEmail2 ? Validators.isValidEmail(info.pgpEmail2) : ''
+  const email3Error = info.pgpEmail3 ? Validators.isValidEmail(info.pgpEmail3) : ''
+  const nameError = Validators.isValidName(info.pgpFullName)
+
+  return {
+    pgpErrorEmail1: !!email1Error,
+    pgpErrorEmail2: !!email2Error,
+    pgpErrorEmail3: !!email3Error,
+    pgpErrorText: nameError || email1Error || email2Error || email3Error,
+  }
+}
+
 type Step =
   | {kind: 'choice'}
   | {kind: 'info'}
@@ -150,7 +165,11 @@ export default function Choice() {
   }
 
   const onUpdate = (next: Partial<GeneratePgpArgs>) => {
-    setForm(s => ({...s, ...next}))
+    setForm(
+      produce(draft => {
+        Object.assign(draft, next)
+      })
+    )
   }
 
   const data = {...form, ...validatePgpInfo(form)}
@@ -180,7 +199,9 @@ export default function Choice() {
                 body={
                   <Kb.Box2 direction="vertical" fullWidth={true}>
                     <Kb.Text type="BodyBigLink">Get a new PGP key</Kb.Text>
-                    <Kb.Text type="Body">Keybase will generate a new PGP key and add it to your profile.</Kb.Text>
+                    <Kb.Text type="Body">
+                      Keybase will generate a new PGP key and add it to your profile.
+                    </Kb.Text>
                   </Kb.Box2>
                 }
                 onClick={onShowGetNew}
@@ -299,10 +320,16 @@ const Finished = (props: {
       <PlatformIcon platform="pgp" overlay="icon-proof-success" />
       <Kb.Text type="Header">Here is your unique public key!</Kb.Text>
       <Kb.Text type="Body">
-        {'Your private key has been written to Keybase\'s local keychain. You can learn to use it with `keybase pgp help` from your terminal. If you have GPG installed, it has also been written to GPG\'s keychain.'}
+        {
+          "Your private key has been written to Keybase's local keychain. You can learn to use it with `keybase pgp help` from your terminal. If you have GPG installed, it has also been written to GPG's keychain."
+        }
       </Kb.Text>
       {isMobile ? null : (
-        <textarea style={Kb.Styles.castStyleDesktop(styles.pgpKeyString)} readOnly={true} value={props.pgpKeyString} />
+        <textarea
+          style={Kb.Styles.castStyleDesktop(styles.pgpKeyString)}
+          readOnly={true}
+          value={props.pgpKeyString}
+        />
       )}
       {props.promptShouldStoreKeyOnServer && (
         <Kb.Box2 direction="vertical">
diff --git a/shared/profile/pgp/import/index.tsx b/shared/profile/pgp/import.tsx
similarity index 97%
rename from shared/profile/pgp/import/index.tsx
rename to shared/profile/pgp/import.tsx
index 67117701b895..0fb482e3b4da 100644
--- a/shared/profile/pgp/import/index.tsx
+++ b/shared/profile/pgp/import.tsx
@@ -1,7 +1,7 @@
 import * as Kb from '@/common-adapters'
 import * as C from '@/constants'
 import Modal from '@/profile/modal'
-import {PgpMobileUnsupported} from '../choice'
+import {PgpMobileUnsupported} from './choice'
 
 export default function Import() {
   const navigateUp = C.Router2.navigateUp
diff --git a/shared/profile/pgp/validation.tsx b/shared/profile/pgp/validation.tsx
deleted file mode 100644
index e569325861de..000000000000
--- a/shared/profile/pgp/validation.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as Validators from '@/util/simple-validators'
-
-export type PGPInfo = {
-  pgpEmail1: string
-  pgpEmail2: string
-  pgpEmail3: string
-  pgpFullName: string
-}
-
-export const validatePgpInfo = (info: PGPInfo) => {
-  const email1Error = Validators.isValidEmail(info.pgpEmail1)
-  const email2Error = info.pgpEmail2 ? Validators.isValidEmail(info.pgpEmail2) : ''
-  const email3Error = info.pgpEmail3 ? Validators.isValidEmail(info.pgpEmail3) : ''
-  const nameError = Validators.isValidName(info.pgpFullName)
-
-  return {
-    pgpErrorEmail1: !!email1Error,
-    pgpErrorEmail2: !!email2Error,
-    pgpErrorEmail3: !!email3Error,
-    pgpErrorText: nameError || email1Error || email2Error || email3Error,
-  }
-}
diff --git a/shared/profile/prove-website-choice.tsx b/shared/profile/prove-website-choice.tsx
deleted file mode 100644
index 1908933c0738..000000000000
--- a/shared/profile/prove-website-choice.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as C from '@/constants'
-import * as Kb from '@/common-adapters'
-import Modal from './modal'
-
-const ProveWebsiteChoice = () => {
-  const navigateAppend = C.Router2.navigateAppend
-  const navigateUp = C.Router2.navigateUp
-  const onCancel = () => {
-    navigateUp()
-  }
-  const onDNS = () => {
-    navigateAppend({name: 'profileProofsList', params: {platform: 'dns'}})
-  }
-  const onFile = () => {
-    navigateAppend({name: 'profileProofsList', params: {platform: 'web'}})
-  }
-
-  return (
-    <Modal onCancel={onCancel}>
-      <Kb.Box2 direction="vertical" fullWidth={true}>
-        <Kb.Text center={true} type="Header">
-          Prove your website in two ways:
-        </Kb.Text>
-        <Kb.Box2 direction="vertical" gap="small" fullWidth={true}>
-          <Kb.ListItem
-            type="Card"
-            firstItem={true}
-            icon={<Kb.IconAuto type="icon-file-txt-48" />}
-            body={
-              <Kb.Box2 direction="vertical" fullWidth={true}>
-                <Kb.Text type="BodyBigLink">Host a TXT file</Kb.Text>
-                <Kb.Text type="Body">Host a text file on your site, such as yoursite.com/keybase.txt.</Kb.Text>
-              </Kb.Box2>
-            }
-            onClick={onFile}
-          />
-          <Kb.ListItem
-            type="Card"
-            firstItem={true}
-            icon={<Kb.IconAuto type="icon-dns-48" />}
-            body={
-              <Kb.Box2 direction="vertical" fullWidth={true}>
-                <Kb.Text type="BodyBigLink">Set a DNS</Kb.Text>
-                <Kb.Text type="Body">Place a Keybase proof in your DNS records.</Kb.Text>
-              </Kb.Box2>
-            }
-            onClick={onDNS}
-          />
-        </Kb.Box2>
-      </Kb.Box2>
-    </Modal>
-  )
-}
-
-export default ProveWebsiteChoice
diff --git a/shared/profile/revoke.tsx b/shared/profile/revoke.tsx
index 62cb9f493087..9b8cf8f8108c 100644
--- a/shared/profile/revoke.tsx
+++ b/shared/profile/revoke.tsx
@@ -3,7 +3,7 @@ import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import capitalize from 'lodash/capitalize'
 import {subtitle as platformSubtitle} from '@/util/platforms'
-import {SiteIcon} from './generic/shared'
+import {SiteIcon} from './generic/site-icon'
 import * as T from '@/constants/types'
 import Modal from './modal'
 import {useCurrentUserState} from '@/stores/current-user'
@@ -86,15 +86,13 @@ const RevokeProof = (ownProps: OwnProps) => {
         <Kb.Text center={!isMobile} style={styles.reminderText} type="Body">
           You can add it again later, if you change your mind.
         </Kb.Text>
-        <Kb.ButtonBar>
-          <Kb.WaitingButton type="Dim" onClick={onCancel} label="Cancel" waitingKey={C.waitingKeyProfile} />
-          <Kb.WaitingButton
-            type="Danger"
-            onClick={onRevoke}
-            label={platform === 'pgp' ? 'Yes, drop it' : 'Yes, revoke it'}
-            waitingKey={C.waitingKeyProfile}
-          />
-        </Kb.ButtonBar>
+        <Kb.ConfirmButtons
+          waitingKey={C.waitingKeyProfile}
+          onCancel={onCancel}
+          onConfirm={onRevoke}
+          confirmLabel={platform === 'pgp' ? 'Yes, drop it' : 'Yes, revoke it'}
+          confirmType="Danger"
+        />
       </Kb.Box2>
     </Modal>
   )
diff --git a/shared/profile/routes.tsx b/shared/profile/routes.tsx
index cad41905e049..d00e4839eaeb 100644
--- a/shared/profile/routes.tsx
+++ b/shared/profile/routes.tsx
@@ -142,9 +142,6 @@ export const newModalRoutes = defineRouteMap({
   profileProofsList: C.makeScreen(React.lazy(async () => import('./generic/proofs-list')), {
     getOptions: {modalSize: 'wide', title: 'Prove your...'},
   }),
-  profileProveWebsiteChoice: C.makeScreen(React.lazy(async () => import('./prove-website-choice')), {
-    getOptions: {...Kb.doneModalOptions(''), modalSize: 'wide'},
-  }),
   profileRevoke: C.makeScreen(React.lazy(async () => import('./revoke')), {
     getOptions: {modalSize: 'wide'},
   }),
diff --git a/shared/profile/showcase-team-offer.tsx b/shared/profile/showcase-team-offer.tsx
index cdf97b2f411d..103685dcdec0 100644
--- a/shared/profile/showcase-team-offer.tsx
+++ b/shared/profile/showcase-team-offer.tsx
@@ -69,7 +69,7 @@ const TeamRow = (p: RowProps) => {
               {name}
             </Kb.Text>
             {isOpen && (
-              <Kb.Meta title="open" style={styles.meta} backgroundColor={Kb.Styles.globalColors.green} />
+              <Kb.Meta variant="open" style={styles.meta} />
             )}
           </Kb.Box2>
           <Kb.Text type="BodySmall">{String(membercount) + ' member' + (membercount !== 1 ? 's' : '')}</Kb.Text>
@@ -126,7 +126,6 @@ const styles = Kb.Styles.styleSheetCreate(
         isMobile: {textAlign: 'center'},
       }),
       meta: {
-        alignSelf: 'center',
         marginLeft: Kb.Styles.globalMargins.xtiny,
         marginTop: 2,
       },
@@ -141,7 +140,7 @@ const styles = Kb.Styles.styleSheetCreate(
         common: {
           ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small),
         },
-        isMobile: {minHeight: isMobile ? 64 : 48},
+        isMobile: {minHeight: 64},
       }),
     }) as const
 )
diff --git a/shared/profile/user/actions/follow-button.tsx b/shared/profile/user/actions/follow-button.tsx
index 62dfff4b0ad6..2d9b0943371f 100644
--- a/shared/profile/user/actions/follow-button.tsx
+++ b/shared/profile/user/actions/follow-button.tsx
@@ -32,12 +32,13 @@ const FollowButton = (props: Props) => {
       return button
     }
     return (
-      <div
+      <Kb.Box2
+        direction="vertical"
         onMouseEnter={() => setMouseover(true)}
         onMouseLeave={() => setMouseover(false)}
       >
         {button}
-      </div>
+      </Kb.Box2>
     )
   } else {
     return (
diff --git a/shared/profile/user/friend.tsx b/shared/profile/user/friend.tsx
index 3f6114e21200..45fb909749b1 100644
--- a/shared/profile/user/friend.tsx
+++ b/shared/profile/user/friend.tsx
@@ -8,21 +8,22 @@ type OwnProps = {
   width: number
 }
 
-const followSizeToStyle = {
-  64: {bottom: 0, left: 44, position: 'absolute'} as const,
-}
+const followIconStyle = {bottom: 0, left: 44, position: 'absolute'} as const
 
 const Friend = (ownProps: OwnProps) => {
-  const {username: _username, width} = ownProps
-  const _fullname = useUsersState(s => s.infoMap.get(ownProps.username)?.fullname ?? '')
-  const fullname = _fullname || ''
+  const {username, width} = ownProps
+  const fullname = useUsersState(s => s.infoMap.get(ownProps.username)?.fullname ?? '')
   const onClick = () => navToProfile(username)
-  const username = _username
-  const following = useFollowerState(s => (username ? s.following.has(username) : false))
-  const followsYou = useFollowerState(s => (username ? s.followers.has(username) : false))
-  const followIconType = followsYou === following
-    ? (followsYou ? ('icon-mutual-follow-21' as const) : undefined)
-    : followsYou ? ('icon-follow-me-21' as const) : ('icon-following-21' as const)
+  const following = useFollowerState(s => s.following.has(username))
+  const followsYou = useFollowerState(s => s.followers.has(username))
+  const followIconType =
+    followsYou && following
+      ? ('icon-mutual-follow-21' as const)
+      : followsYou
+        ? ('icon-follow-me-21' as const)
+        : following
+          ? ('icon-following-21' as const)
+          : undefined
 
   return (
     <Kb.ClickableBox
@@ -33,7 +34,7 @@ const Friend = (ownProps: OwnProps) => {
       onClick={onClick}
     >
         <Kb.Avatar size={64} username={username} style={styles.avatar}>
-          {!!followIconType && <Kb.ImageIcon type={followIconType} style={followSizeToStyle[64]} />}
+          {!!followIconType && <Kb.ImageIcon type={followIconType} style={followIconStyle} />}
         </Kb.Avatar>
         <Kb.ConnectedUsernames
           type={isMobile ? 'BodySmallBold' : 'BodyBold'}
diff --git a/shared/profile/user/hooks.tsx b/shared/profile/user/hooks.tsx
index 3617713aab99..602dd6eb1d54 100644
--- a/shared/profile/user/hooks.tsx
+++ b/shared/profile/user/hooks.tsx
@@ -104,7 +104,6 @@ const useUserData = (username: string) => {
     guiID: d.guiID,
     hidFromFollowers: d.hidFromFollowers,
     location: undefined,
-    myName,
     name: '',
     reason: d.reason,
     sbsDescription: undefined,
diff --git a/shared/profile/user/index.tsx b/shared/profile/user/index.tsx
index b9ddac343202..6a0f2989d7e4 100644
--- a/shared/profile/user/index.tsx
+++ b/shared/profile/user/index.tsx
@@ -11,7 +11,7 @@ import chunk from 'lodash/chunk'
 import * as T from '@/constants/types'
 import type {RPCError} from '@/util/errors'
 import upperFirst from 'lodash/upperFirst'
-import {SiteIcon} from '../generic/shared'
+import {SiteIcon} from '../generic/site-icon'
 import useUserData from './hooks'
 import {LoadedTeamsListProvider} from '@/teams/use-teams-list'
 import * as TestIDs from '@/tests/e2e/shared/test-ids'
@@ -26,42 +26,6 @@ type Item =
 
 type Section = Kb.SectionType<Item>
 
-export type Props = {
-  assertions?: ReadonlyArray<T.Tracker.Assertion>
-  bio?: string
-  backgroundColorType: BackgroundColorType
-  blocked: boolean
-  followThem: boolean
-  followers?: ReadonlyArray<string>
-  followersCount?: number
-  following?: ReadonlyArray<string>
-  followingCount?: number
-  followsYou: boolean
-  guiID: string
-  hidFromFollowers: boolean
-  location?: string
-  notAUser: boolean
-  onAddIdentity?: () => void
-  onBack: () => void
-  onReload: () => void
-  onEditAvatar?: (e?: React.BaseSyntheticEvent) => void
-  reason: string
-  sbsAvatarUrl?: string
-  sbsDescription?: string
-  state: T.Tracker.DetailsState
-  stellarHidden: boolean
-  sharedTeams?: ReadonlyArray<T.RPCChat.SharedTeam>
-  suggestions?: ReadonlyArray<T.Tracker.Assertion>
-  teamShowcase?: ReadonlyArray<T.Tracker.TeamShowcase>
-  userIsYou: boolean
-  username: string
-  name: string
-  service: string
-  serviceIcon?: ReadonlyArray<T.Tracker.SiteIcon>
-  fullName?: string
-  title: string
-}
-
 const colorTypeToStyle = (type: 'red' | 'green' | 'blue') => {
   switch (type) {
     case 'red':
@@ -285,7 +249,6 @@ export type BioTeamProofsProps = {
   bio?: string
   blocked: boolean
   followThem: boolean
-  followers?: ReadonlyArray<string>
   followersCount?: number
   followsYou: boolean
   followingCount?: number
@@ -489,7 +452,6 @@ const User = (props: {username: string}) => {
               bio={p.bio}
               blocked={p.blocked}
               followThem={p.followThem}
-              followers={p.followers}
               followersCount={p.followersCount}
               followsYou={p.followsYou}
               followingCount={p.followingCount}
@@ -540,7 +502,6 @@ const User = (props: {username: string}) => {
       p.bio,
       p.blocked,
       p.followThem,
-      p.followers,
       p.followersCount,
       p.followsYou,
       p.followingCount,
@@ -662,12 +623,8 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   followTabSelected: {
     borderBottomColor: Kb.Styles.globalColors.blue,
   },
-  followTabText: Kb.Styles.platformStyles({
-    common: {color: Kb.Styles.globalColors.black_50},
-  }),
-  followTabTextSelected: Kb.Styles.platformStyles({
-    common: {color: Kb.Styles.globalColors.black},
-  }),
+  followTabText: {color: Kb.Styles.globalColors.black_50},
+  followTabTextSelected: {color: Kb.Styles.globalColors.black},
   friendRow: Kb.Styles.platformStyles({
     common: {
       maxWidth: '100%',
diff --git a/shared/profile/user/shared-teams.tsx b/shared/profile/user/shared-teams.tsx
index 8df244d1c426..2b33e5e783b5 100644
--- a/shared/profile/user/shared-teams.tsx
+++ b/shared/profile/user/shared-teams.tsx
@@ -42,7 +42,7 @@ const SharedTeams = ({sharedTeams, username}: Props) => {
   if (sharedTeams === undefined && loading) {
     return (
       <TeamSection title="Teams in common">
-        <Kb.Box2 direction="horizontal" style={styles['loadingRow']} gap="tiny">
+        <Kb.Box2 direction="horizontal" style={styles.loadingRow} gap="tiny">
           <Kb.ProgressIndicator />
         </Kb.Box2>
       </TeamSection>
diff --git a/shared/profile/user/teams/index.tsx b/shared/profile/user/teams/index.tsx
index c245d8923c83..544ee5de25ea 100644
--- a/shared/profile/user/teams/index.tsx
+++ b/shared/profile/user/teams/index.tsx
@@ -1,9 +1,8 @@
-import * as React from 'react'
 import * as C from '@/constants'
 import type * as T from '@/constants/types'
 import * as Kb from '@/common-adapters'
 import {useCurrentUserState} from '@/stores/current-user'
-import {useTeamsList} from '@/teams/use-teams-list'
+import {useTeamsList, useTeamsListNameToIDMap} from '@/teams/use-teams-list'
 import {showTeamByName} from '@/teams/team-page-actions'
 import TeamRow from './team-row'
 import TeamSection from './team-section'
@@ -19,8 +18,7 @@ const noTeams = new Array<T.Tracker.TeamShowcase>()
 const Teams = (ownProps: OwnProps) => {
   const isYou = useCurrentUserState(s => s.username === ownProps.username)
   const {teams} = useTeamsList()
-  const teamNameToID = React.useMemo(() => new Map(teams.map(team => [team.teamname, team.id] as const)), [teams])
-  const teamNames = React.useMemo(() => new Set(teams.map(team => team.teamname)), [teams])
+  const teamNameToID = useTeamsListNameToIDMap()
   const youAreInTeams = teams.length > 0
   const teamShowcase = ownProps.teamShowcase || noTeams
   const {clearModals, navigateAppend} = C.Router2
@@ -49,7 +47,7 @@ const Teams = (ownProps: OwnProps) => {
           {...t}
           onJoinTeam={onJoinTeam}
           onViewTeam={() => onViewTeam(t.name)}
-          inTeam={teamNames.has(t.name)}
+          inTeam={teamNameToID.has(t.name)}
         />
       ))}
     </TeamSection>
diff --git a/shared/profile/user/teams/openmeta.tsx b/shared/profile/user/teams/openmeta.tsx
index a266eb80df85..5e83fe1cf8e6 100644
--- a/shared/profile/user/teams/openmeta.tsx
+++ b/shared/profile/user/teams/openmeta.tsx
@@ -1,7 +1,7 @@
 import * as Kb from '@/common-adapters'
 
 const OpenMeta = ({isOpen}: {isOpen: boolean}) =>
-  isOpen ? <Kb.Meta backgroundColor={Kb.Styles.globalColors.green} title="open" style={styles.meta} /> : null
+  isOpen ? <Kb.Meta variant="open" style={styles.meta} /> : null
 
 const styles = Kb.Styles.styleSheetCreate(
   () =>
diff --git a/shared/provision/code-page/container.tsx b/shared/provision/code-page/container.tsx
index 0384493e1f41..508080aebec6 100644
--- a/shared/provision/code-page/container.tsx
+++ b/shared/provision/code-page/container.tsx
@@ -3,6 +3,7 @@ import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import QRImage from './qr-image'
 import QRScan from './qr-scan'
+import {produce} from 'immer'
 import Troubleshooting from '../troubleshooting'
 import * as T from '@/constants/types'
 import {useCurrentUserState} from '@/stores/current-user'
@@ -73,7 +74,12 @@ const CodePageContainer = (op: OwnProps) => {
   }
 
   const tab = tabState.defaultTab === defaultTab ? tabState.tab : defaultTab
-  const setTab = (tab: Tab) => setTabState(state => ({...state, tab}))
+  const setTab = (tab: Tab) =>
+    setTabState(
+      produce(draft => {
+        draft.tab = tab
+      })
+    )
   const tabBackground = tab === 'QR' ? Kb.Styles.globalColors.blueLight : Kb.Styles.globalColors.green
   const buttonType = tab === 'QR' ? ('Default' as const) : ('Success' as const)
   const buttonLabelStyle = tab === 'QR' ? styles.primaryOnBlueLabel : styles.primaryOnGreenLabel
@@ -136,10 +142,16 @@ const CodePageContainer = (op: OwnProps) => {
             <Kb.Divider />
           </>
         )}
-        {!!error && <Kb.Banner color="red">{error}</Kb.Banner>}
+        <Kb.ErrorBanner error={error} />
         <Kb.Box2 direction="vertical" fullWidth={true} flex={1} relative={true}>
           <Kb.Box2 direction="vertical" fullHeight={true} style={Kb.Styles.globalStyles.flexGrow}>
-            <Kb.Box2 direction="vertical" style={styles.container} fullWidth={true} gap="tiny" justifyContent="space-between">
+            <Kb.Box2
+              direction="vertical"
+              style={styles.container}
+              fullWidth={true}
+              gap="tiny"
+              justifyContent="space-between"
+            >
               <Instructions
                 currentDeviceAlreadyProvisioned={currentDeviceAlreadyProvisioned}
                 currentDevice={currentDevice}
@@ -282,9 +294,7 @@ const SwitchTab = (props: {
   if (props.selected === 'QR') {
     label = 'Type secret instead'
     if (currentDeviceType === 'mobile' && props.otherDevice.type === 'mobile') {
-      tab = (props.currentDeviceAlreadyProvisioned ? isMobile : !isMobile)
-        ? 'viewText'
-        : 'enterText'
+      tab = (props.currentDeviceAlreadyProvisioned ? isMobile : !isMobile) ? 'viewText' : 'enterText'
     } else if (currentDeviceType === 'mobile') {
       tab = 'viewText'
     } else {
@@ -344,7 +354,12 @@ const EnterText = (props: {
     }
   }
   return (
-    <Kb.Box2 direction="vertical" alignItems={isMobile ? 'stretch' : 'center'} alignSelf="stretch" gap="small">
+    <Kb.Box2
+      direction="vertical"
+      alignItems={isMobile ? 'stretch' : 'center'}
+      alignSelf="stretch"
+      gap="small"
+    >
       <Kb.Input3
         autoFocus={true}
         multiline={true}
diff --git a/shared/router-v2/account-switcher/index.tsx b/shared/router-v2/account-switcher/index.tsx
index 672ac49d6c36..36a75f6c82d4 100644
--- a/shared/router-v2/account-switcher/index.tsx
+++ b/shared/router-v2/account-switcher/index.tsx
@@ -4,27 +4,18 @@ import {useConfigState} from '@/stores/config'
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
 import type * as T from '@/constants/types'
-import {settingsLogOutTab} from '@/constants/settings'
 import {useUsersState} from '@/stores/users'
 import {useCurrentUserState} from '@/stores/current-user'
 import {navToProfile} from '@/constants/router'
 
-const prepareAccountRows = <T extends {username: string; hasStoredSecret: boolean}>(
-  accountRows: ReadonlyArray<T>,
-  myUsername: string
-): Array<T> => accountRows.filter(account => account.username !== myUsername)
-
-const AccountSwitcher = () => {
+const AccountSwitcher = (p: {onSelected?: () => void}) => {
+  const {onSelected} = p
   const _fullnames = useUsersState(s => s.infoMap)
   const _accountRows = useConfigState(s => s.configuredAccounts)
   const you = useCurrentUserState(s => s.username)
   const fullname = _fullnames.get(you)?.fullname ?? ''
   const waiting = C.Waiting.useAnyWaiting(C.waitingKeyConfigLogin)
   const onLoginAsAnotherUser = useConfigState(s => s.dispatch.logoutToLoggedOutFlow)
-  const navigateUp = C.Router2.navigateUp
-  const onCancel = () => {
-    navigateUp()
-  }
 
   const setUserSwitching = useConfigState(s => s.dispatch.setUserSwitching)
   const login = useConfigState(s => s.dispatch.login)
@@ -33,48 +24,41 @@ const AccountSwitcher = () => {
     login(username, '')
   }
   const onSelectAccountLoggedOut = useConfigState(s => s.dispatch.logoutAndTryToLogInAs)
-  const navigateAppend = C.Router2.navigateAppend
-  const onSignOut = () => {
-    navigateAppend({name: settingsLogOutTab, params: {}})
-  }
 
-  const accountRows = prepareAccountRows(_accountRows, you)
+  const accountRows = _accountRows.filter(account => account.username !== you)
   const props = {
     accountRows: accountRows.map(account => ({
       account: account,
       fullName: (_fullnames.get(account.username) || {fullname: ''}).fullname || '',
     })),
     fullname,
-    onCancel,
     onLoginAsAnotherUser,
     onProfileClick: () => navToProfile(you),
     onSelectAccount: (username: string) => {
+      onSelected?.()
       const rows = accountRows.filter(account => account.username === username)
       const loggedIn = (rows.length && rows[0]?.hasStoredSecret) ?? false
       return loggedIn ? onSelectAccountLoggedIn(username) : onSelectAccountLoggedOut(username)
     },
-    onSignOut,
     username: you,
     waiting,
   }
 
   return (
-    <>
-      <Kb.ScrollView alwaysBounceVertical={false}>
-        <Kb.Box2 direction="vertical" fullWidth={true} centerChildren={true}>
-          {isMobile && <MobileHeader {...props} />}
-          <Kb.Divider style={styles.divider} />
-          {isMobile ? (
+    <Kb.ScrollView alwaysBounceVertical={false}>
+      <Kb.Box2 direction="vertical" fullWidth={true} centerChildren={true}>
+        {isMobile && <MobileHeader {...props} />}
+        <Kb.Divider style={styles.divider} />
+        {isMobile ? (
+          <AccountsRows {...props} />
+        ) : (
+          <Kb.ScrollView style={styles.desktopScrollview} className="accountSwitcherScrollView">
             <AccountsRows {...props} />
-          ) : (
-            <Kb.ScrollView style={styles.desktopScrollview} className="accountSwitcherScrollView">
-              <AccountsRows {...props} />
-            </Kb.ScrollView>
-          )}
-          {props.accountRows.length > 0 && !isMobile && <Kb.Divider style={styles.divider} />}
-        </Kb.Box2>
-      </Kb.ScrollView>
-    </>
+          </Kb.ScrollView>
+        )}
+        {props.accountRows.length > 0 && !isMobile && <Kb.Divider style={styles.divider} />}
+      </Kb.Box2>
+    </Kb.ScrollView>
   )
 }
 
@@ -87,10 +71,8 @@ type Props = {
   accountRows: Array<AccountRowItem>
   fullname: string
   onLoginAsAnotherUser: () => void
-  onCancel: () => void
   onProfileClick: () => void
   onSelectAccount: (username: string) => void
-  onSignOut: () => void
   username: string
   waiting: boolean
 }
diff --git a/shared/router-v2/common.tsx b/shared/router-v2/common.tsx
index 189cfff59108..ae8d6b37338a 100644
--- a/shared/router-v2/common.tsx
+++ b/shared/router-v2/common.tsx
@@ -1,11 +1,14 @@
-import type * as React from 'react'
+import * as React from 'react'
 import * as Kb from '@/common-adapters'
+import * as Tabs from '@/constants/tabs'
+import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import {TabActions, type NavigationContainerRef} from '@react-navigation/core'
 import type {ParamListBase} from '@react-navigation/native'
 import type {HeaderOptions} from '@react-navigation/elements'
 import type {NativeStackHeaderProps} from '@react-navigation/native-stack'
 import {HeaderLeftButton} from '@/common-adapters/header-buttons'
 import type {NavState} from '@/constants/router'
+import {useCurrentUserState} from '@/stores/current-user'
 import Header from './header/index'
 
 export const headerDefaultStyle = isMobile
@@ -26,6 +29,33 @@ export const tabBarStyle = {
 export const tabBarBlurEffect = isMobile ? ('systemDefault' as const) : undefined
 export const tabBarMinimizeBehavior = undefined
 
+export const tabToTestID = new Map<Tabs.Tab, string>([
+  [Tabs.peopleTab, TestIDs.NAV_TAB_PEOPLE],
+  [Tabs.chatTab, TestIDs.NAV_TAB_CHAT],
+  [Tabs.fsTab, TestIDs.NAV_TAB_FILES],
+  [Tabs.cryptoTab, TestIDs.NAV_TAB_CRYPTO],
+  [Tabs.teamsTab, TestIDs.NAV_TAB_TEAMS],
+  [Tabs.gitTab, TestIDs.NAV_TAB_GIT],
+  [Tabs.devicesTab, TestIDs.NAV_TAB_DEVICES],
+  [Tabs.settingsTab, TestIDs.NAV_TAB_SETTINGS],
+])
+
+// Remount the navigator when switching between two logged-in users.
+// Ignore '' → username (initial login) so in-flight unbox requests aren't interrupted.
+export const useUserSwitchNavKey = () => {
+  const username = useCurrentUserState(s => s.username)
+  const [navKey, setNavKey] = React.useState('')
+  const prevUsernameRef = React.useRef(username)
+  React.useEffect(() => {
+    const prev = prevUsernameRef.current
+    prevUsernameRef.current = username
+    if (prev && username && prev !== username) {
+      setNavKey(username)
+    }
+  }, [username])
+  return navKey
+}
+
 const actionWidth = 64
 const DEBUGCOLORS = __DEV__ && (false as boolean)
 
@@ -119,43 +149,14 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
 type SubnavNavigation = Pick<NavigationContainerRef<ParamListBase>, 'dispatch' | 'emit'>
 
 export const useSubnavTabAction = (navigation: SubnavNavigation, state: NavState) => {
-  if (!isMobile) {
-    const routesRef = {current: state?.routes}
-    const stateKeyRef = {current: state?.key}
-    const navRef = {current: navigation}
-
-    const onSelectTab = (tab: string) => {
-      const r = routesRef.current?.find((r: {name?: string; key?: string}) => {
-        return r.name === tab
-      })
-
-      const key = r?.key ?? ''
-      const event = key
-        ? navRef.current.emit({
-            canPreventDefault: true,
-            target: key,
-            // @ts-expect-error tabPress is valid but not in the emit type
-            type: 'tabPress',
-          })
-        : {defaultPrevented: false}
-
-      if (!event.defaultPrevented) {
-        navRef.current.dispatch({
-          ...TabActions.jumpTo(tab),
-          target: stateKeyRef.current,
-        })
-      }
-    }
-    return onSelectTab
-  }
-
   const onSelectTab = (tab: string) => {
     const routes = state && 'routes' in state ? state.routes : undefined
     const route = routes?.find((r: {name?: string; key?: string}) => r.name === tab)
-    const event = route
+    const key = route?.key
+    const event = key
       ? navigation.emit({
           canPreventDefault: true,
-          target: route.key,
+          target: key,
           // @ts-expect-error tabPress is valid but not in the emit type
           type: 'tabPress',
         })
diff --git a/shared/router-v2/header/index.desktop.tsx b/shared/router-v2/header/index.desktop.tsx
index 6078db9c9510..44564715d8f8 100644
--- a/shared/router-v2/header/index.desktop.tsx
+++ b/shared/router-v2/header/index.desktop.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import type * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as Platform from '@/constants/platform'
 import SyncingFolders from './syncing-folders'
@@ -29,18 +29,11 @@ type RawOptions = {
   headerStyle?: Kb.Styles.CollapsibleStyle
 }
 
-type Options = {
-  headerMode?: string
-  title?: React.ReactNode
+// Same as RawOptions but with the component-constructor variants already rendered to nodes
+type Options = Omit<RawOptions, 'headerTitle' | 'headerRightActions' | 'subHeader'> & {
   headerTitle?: React.ReactNode
-  headerLeft?: React.ReactNode | ((props: HeaderBackButtonProps) => React.ReactNode)
-  headerRight?: React.ReactNode | ((p: {tintColor?: string}) => React.ReactNode)
   headerRightActions?: React.ReactNode
   subHeader?: React.ReactNode
-  headerTransparent?: boolean
-  headerShadowVisible?: boolean
-  headerBottomStyle?: Kb.Styles.StylesCrossPlatform
-  headerStyle?: Kb.Styles.CollapsibleStyle
 }
 
 // A mobile-like header for desktop
@@ -52,7 +45,6 @@ type Props = {
   back?: boolean
   style?: Kb.Styles._StylesCrossPlatform
   useNativeFrame: boolean
-  params?: unknown
   isMaximized: boolean
   navigation: {
     pop: () => void
@@ -170,8 +162,6 @@ function DesktopHeader(p: Props) {
       ? Kb.Styles.globalColors.black_10
       : Kb.Styles.globalColors.transparent
 
-  const popupAnchor = React.createRef<Kb.MeasureRef | null>()
-
   const defaultBackButton = (
     <Kb.ClickableBox
       className={Kb.Styles.classNames('hover_container', {
@@ -279,7 +269,6 @@ function DesktopHeader(p: Props) {
           fullWidth={true}
           style={styles.headerBack}
           alignItems="center"
-          ref={popupAnchor}
         >
           {/* TODO have headerLeft be the back button */}
           {backButton}
@@ -396,6 +385,7 @@ const styles = Kb.Styles.styleSheetCreate(
 type HeaderProps = Omit<Props, 'back' | 'loggedIn' | 'useNativeFrame' | 'isMaximized'> & {
   back?: NativeStackHeaderProps['back']
   options: RawOptions
+  params?: unknown
 }
 
 function DesktopHeaderWrapper(p: HeaderProps) {
@@ -446,7 +436,6 @@ function DesktopHeaderWrapper(p: HeaderProps) {
       options={options}
       back={!!back /* not a bool upstream */}
       style={style}
-      params={params}
       navigation={navigation}
     />
   )
diff --git a/shared/router-v2/header/syncing-folders.tsx b/shared/router-v2/header/syncing-folders.tsx
index 798e5658c896..ceb440a07535 100644
--- a/shared/router-v2/header/syncing-folders.tsx
+++ b/shared/router-v2/header/syncing-folders.tsx
@@ -16,10 +16,10 @@ type Props = {
 
 const SyncingFolders = (props: Props) =>
   props.show && props.progress !== 1.0 ? (
-    <Kb.WithTooltip tooltip={props.tooltip} containerStyle={{alignSelf: 'center'}}>
+    <Kb.WithTooltip tooltip={props.tooltip} containerStyle={styles.tooltipContainer}>
       <Kb.Box2 direction="horizontal" alignItems="center">
         <PieSlice degrees={props.progress * 360} animated={true} negative={props.negative} />
-        <Kb.Text type="BodyTiny" negative={props.negative} style={{marginLeft: 5}}>
+        <Kb.Text type="BodyTiny" negative={props.negative} style={styles.text}>
           Syncing folders...
         </Kb.Text>
       </Kb.Box2>
@@ -32,7 +32,7 @@ const SyncFolders = (op: OwnProps) => {
   const {negative} = op
 
   if (syncingFoldersProgress.bytesTotal === 0) {
-    return <SyncingFolders progress={0} show={false} tooltip="" />
+    return null
   }
 
   const progress = syncingFoldersProgress.bytesFetched / syncingFoldersProgress.bytesTotal
@@ -42,4 +42,10 @@ const SyncFolders = (op: OwnProps) => {
   )
   return <SyncingFolders negative={negative} show={online} tooltip={tooltip} progress={progress} />
 }
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  text: {marginLeft: 5},
+  tooltipContainer: {alignSelf: 'center'},
+}))
+
 export default SyncFolders
diff --git a/shared/router-v2/hooks.native.tsx b/shared/router-v2/hooks.native.tsx
deleted file mode 100644
index e86b7b8389a6..000000000000
--- a/shared/router-v2/hooks.native.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import {useColorScheme} from 'react-native'
-import {useCurrentUserState} from '@/stores/current-user'
-
-// Rerender everything on user switch, and on Android also on dark mode changes.
-// Only switch on transitions between two non-empty usernames — not on initial login.
-export const useRootKey = () => {
-  const isDarkMode = useColorScheme() === 'dark'
-  const username = useCurrentUserState(s => s.username)
-  const [navKey, setNavKey] = React.useState('')
-  const prevUsernameRef = React.useRef(username)
-  React.useEffect(() => {
-    const prev = prevUsernameRef.current
-    prevUsernameRef.current = username
-    if (prev && username && prev !== username) {
-      setNavKey(username)
-    }
-  }, [username])
-  const darkSuffix = isAndroid ? (isDarkMode ? '-dark' : '-light') : ''
-  return navKey ? `${navKey}${darkSuffix}` : ''
-}
diff --git a/shared/router-v2/router.tsx b/shared/router-v2/router.tsx
index c76bcd5a0138..4053768a1374 100644
--- a/shared/router-v2/router.tsx
+++ b/shared/router-v2/router.tsx
@@ -18,13 +18,10 @@ import {useDaemonState} from '@/stores/daemon'
 import {LoadedTeamsListProvider} from '@/teams/use-teams-list'
 import {makeLayout} from './screen-layout'
 import {createNativeStackNavigator} from '@react-navigation/native-stack'
-import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import type {NativeStackNavigationOptions} from '@react-navigation/native-stack'
 import type {SFSymbol} from 'sf-symbols-typescript'
 import type {NavigationProp} from '@react-navigation/native'
 import type {RootParamList} from './route-params'
-import {useCurrentUserState} from '@/stores/current-user'
-import * as Constants from '@/constants/router'
 import {useNotifState} from '@/stores/notifications'
 import {usePushState} from '@/stores/push'
 import {colors, darkColors} from '@/styles/colors'
@@ -37,7 +34,7 @@ const isIOS17Plus = isIOS && parseInt(Platform.Version as string, 10) >= 17
 
 // Tell the router constants which root-stack routes are modals (vs genuinely-visible
 // pushed screens like chatConversation). modalRoutes is the single source of truth.
-Constants.setModalRouteNames(Object.keys(modalRoutes))
+C.Router2.setModalRouteNames(Object.keys(modalRoutes))
 
 function SimpleLoading() {
   return (
@@ -52,39 +49,37 @@ function SimpleLoading() {
   )
 }
 
-const darkTheme: Theme = {
+const makeTheme = (palette: {white: string; black: string; black_10: string}, dark: boolean): Theme => ({
   colors: {
-    background: darkColors.white,
-    border: darkColors.black_10,
-    card: darkColors.white,
-    notification: darkColors.black,
-    primary: darkColors.black,
-    text: darkColors.black,
+    background: palette.white,
+    border: palette.black_10,
+    card: palette.white,
+    notification: palette.black,
+    primary: palette.black,
+    text: palette.black,
   },
-  dark: true,
+  dark,
   fonts: {
     bold: Kb.Styles.globalStyles.fontBold,
     heavy: Kb.Styles.globalStyles.fontExtrabold,
     medium: Kb.Styles.globalStyles.fontSemibold,
     regular: Kb.Styles.globalStyles.fontRegular,
   },
+})
+const darkTheme = makeTheme(darkColors, true)
+const lightTheme = makeTheme(colors, false)
+
+// Shared NavigationContainer plumbing (identical on both platforms)
+const onUnhandledAction = (a: Readonly<{type: string}>) => {
+  logger.info(`[NAV] Unhandled action: ${a.type}`, a, C.Router2.logState())
 }
-const lightTheme: Theme = {
-  colors: {
-    background: colors.white,
-    border: colors.black_10,
-    card: colors.white,
-    notification: colors.black,
-    primary: colors.black,
-    text: colors.black,
-  },
-  dark: false,
-  fonts: {
-    bold: Kb.Styles.globalStyles.fontBold,
-    heavy: Kb.Styles.globalStyles.fontExtrabold,
-    medium: Kb.Styles.globalStyles.fontSemibold,
-    regular: Kb.Styles.globalStyles.fontRegular,
-  },
+const onStateChange = () => {
+  C.useRouterState.getState().dispatch.setNavState(C.Router2.getRootState())
+}
+const setNavRef = (ref: typeof C.Router2.navigationRef.current) => {
+  if (ref) {
+    C.Router2.navigationRef.current = ref
+  }
 }
 
 // ─── Desktop ──────────────────────────────────────────────────────────────────
@@ -110,25 +105,24 @@ type LeftTabNavigatorType = {
 
 // Sticky: once the handshake finishes we never go back to the splash, even if it
 // restarts later (engine reconnect); the disconnected overlay covers that case.
+// Module-level so it survives the navigator remount on user switch (a ref would
+// reset and flash the splash while the post-switch handshake is still running).
+let handshakeEverDone = false
 const useHandshakeEverDone = () => {
-  const everDoneRef = React.useRef(false)
   return useDaemonState(s => {
-    const done = everDoneRef.current || s.handshakeState === 'done'
-    everDoneRef.current = done
-    return done
+    handshakeEverDone = handshakeEverDone || s.handshakeState === 'done'
+    return handshakeEverDone
   })
 }
 
-let desktopTab: LeftTabNavigatorType | undefined
-const desktopTabComponents: Record<string, React.ComponentType> = {}
 let DesktopRootComponent: React.ComponentType
-let LoggedOutDesktop: React.ComponentType
 
 if (!isMobile) {
   const {createLeftTabNavigator} = require('./left-tab-navigator.desktop') as {
     createLeftTabNavigator: () => LeftTabNavigatorType
   }
-  desktopTab = createLeftTabNavigator()
+  const desktopTab = createLeftTabNavigator()
+  const desktopTabComponents: Record<string, React.ComponentType> = {}
 
   const desktopTabScreensConfig = routeMapToStaticScreens(routes, makeLayout, false, false, true)
 
@@ -152,27 +146,28 @@ if (!isMobile) {
     desktopTabComponents[tab] = nav.getComponent()
   }
 
-  // Keep appTabsInnerOptions stable (defined above before the loop)
-  const capturedOptions = appTabsInnerOptions
-  const capturedTab = desktopTab
-
-  function AppTabsInnerDesktop() {
+  function AppTabsDesktop() {
     return (
-      <capturedTab.Navigator backBehavior="none" screenOptions={capturedOptions}>
+      <desktopTab.Navigator backBehavior="none" screenOptions={appTabsInnerOptions}>
         {Tabs.desktopTabs.map(tab => (
-          <capturedTab.Screen key={tab} name={tab} component={desktopTabComponents[tab]!} />
+          <desktopTab.Screen key={tab} name={tab} component={desktopTabComponents[tab]!} />
         ))}
-      </capturedTab.Navigator>
+      </desktopTab.Navigator>
     )
   }
-  const AppTabsDesktop = () => <AppTabsInnerDesktop />
 
   type DesktopHeaderProps = Record<string, unknown> & {options: Record<string, unknown>}
   const DesktopHeaderComponent = (
     require('./header/index.desktop') as {default: React.ComponentType<DesktopHeaderProps>}
   ).default
 
-  const desktopLoggedOutScreensConfig = routeMapToStaticScreens(loggedOutRoutes, makeLayout, false, true, false)
+  const desktopLoggedOutScreensConfig = routeMapToStaticScreens(
+    loggedOutRoutes,
+    makeLayout,
+    false,
+    true,
+    false
+  )
   const desktopLoggedOutOptions = {
     header: (p: Record<string, unknown>) => {
       const options = {
@@ -189,7 +184,7 @@ if (!isMobile) {
     screenOptions: desktopLoggedOutOptions,
     screens: desktopLoggedOutScreensConfig,
   })
-  LoggedOutDesktop = loggedOutNav.getComponent()
+  const LoggedOutDesktop = loggedOutNav.getComponent()
 
   const desktopRootScreenOptions = {
     headerLeft: () => <HeaderLeftButton mode="cancel" />,
@@ -200,15 +195,17 @@ if (!isMobile) {
 
   const useIsLoadingDesktop = () => !useHandshakeEverDone()
 
+  // During an account switch loggedIn flaps false between the service's loggedOut and
+  // loggedIn notifications; keep the app (and its left nav) mounted through that gap.
   const useIsLoggedInDesktop = () => {
     const loaded = useHandshakeEverDone()
-    const loggedIn = useConfigState(s => s.loggedIn)
+    const loggedIn = useConfigState(s => s.loggedIn || s.userSwitching)
     return loaded && loggedIn
   }
 
   const useIsLoggedOutDesktop = () => {
     const loaded = useHandshakeEverDone()
-    const loggedIn = useConfigState(s => s.loggedIn)
+    const loggedIn = useConfigState(s => s.loggedIn || s.userSwitching)
     return loaded && !loggedIn
   }
 
@@ -272,35 +269,8 @@ const useConnectNavToState = () => {
 function DesktopRouter() {
   useConnectNavToState()
 
-  const onUnhandledAction = (a: Readonly<{type: string}>) => {
-    logger.info(`[NAV] Unhandled action: ${a.type}`, a, C.Router2.logState())
-  }
-
-  const setNavState = C.useRouterState(s => s.dispatch.setNavState)
-  const onStateChange = () => {
-    const ns = C.Router2.getRootState()
-    setNavState(ns)
-  }
-
-  const navRef = (ref: typeof C.Router2.navigationRef.current) => {
-    if (ref) {
-      C.Router2.navigationRef.current = ref
-    }
-  }
-
   const isDarkMode = useDarkModeState(s => s.isDarkMode())
-  const username = useCurrentUserState(s => s.username)
-  // Only remount the navigator when switching between logged-in users.
-  // Ignore '' → username (initial login) so in-flight unbox requests aren't interrupted.
-  const [navKey, setNavKey] = React.useState('')
-  const prevUsernameRef = React.useRef(username)
-  React.useEffect(() => {
-    const prev = prevUsernameRef.current
-    prevUsernameRef.current = username
-    if (prev && username && prev !== username) {
-      setNavKey(username)
-    }
-  }, [username])
+  const navKey = Common.useUserSwitchNavKey()
 
   const documentTitle = {
     formatter: () => {
@@ -317,7 +287,7 @@ function DesktopRouter() {
       documentTitle={documentTitle}
       onStateChange={onStateChange}
       onUnhandledAction={onUnhandledAction}
-      ref={navRef}
+      ref={setNavRef}
       theme={isDarkMode ? darkTheme : lightTheme}
     >
       <LoadedTeamsListProvider>
@@ -329,10 +299,9 @@ function DesktopRouter() {
 
 // ─── Native ───────────────────────────────────────────────────────────────────
 
-if (isMobile) {
-  if (module.hot) {
-    module.hot.accept('', () => {})
-  }
+// Self-accept HMR so an edit here doesn't bubble up and reload the whole app
+if (isMobile && module.hot) {
+  module.hot.accept()
 }
 
 const tabToLabel = new Map<string, string>([
@@ -343,14 +312,6 @@ const tabToLabel = new Map<string, string>([
   [Tabs.settingsTab, 'More'],
 ])
 
-const tabToTestID = new Map<string, string>([
-  [Tabs.chatTab, TestIDs.NAV_TAB_CHAT],
-  [Tabs.fsTab, TestIDs.NAV_TAB_FILES],
-  [Tabs.teamsTab, TestIDs.NAV_TAB_TEAMS],
-  [Tabs.peopleTab, TestIDs.NAV_TAB_PEOPLE],
-  [Tabs.settingsTab, TestIDs.NAV_TAB_SETTINGS],
-])
-
 // just to get badge rollups
 const nativeTabs = C.isTablet ? Tabs.tabletTabs : Tabs.phoneTabs
 const settingsTabChildren = [Tabs.gitTab, Tabs.devicesTab, Tabs.settingsTab] as const
@@ -377,32 +338,29 @@ const phoneRootRoutes = Object.fromEntries(
 const nativeTabComponents: Record<string, React.ComponentType> = {}
 
 if (isMobile) {
-  const nativeTabScreensConfig = routeMapToStaticScreens(routes, makeLayout, false, false, true)
+  // Tablet tab stacks hold every route; phone tab stacks hold only their root screen
+  // (everything else lives in the root stack so it renders above the tab bar).
+  const tabletScreensConfig = C.isTablet
+    ? routeMapToStaticScreens(routes, makeLayout, false, false, true)
+    : undefined
 
   for (const tab of nativeTabs) {
-    if (C.isTablet) {
-      const nav = createNativeStackNavigator({
-        initialRouteName: tabRoots[tab],
-        screenOptions: tabStackOptions,
-        screens: nativeTabScreensConfig,
-      })
-      nativeTabComponents[tab] = nav.getComponent()
-    } else {
-      const rootName = tabRoots[tab]
-      const rootScreenConfig = routeMapToStaticScreens(
+    const rootName = tabRoots[tab]
+    const screens =
+      tabletScreensConfig ??
+      routeMapToStaticScreens(
         {[rootName]: routes[rootName as keyof typeof routes]} as typeof routes,
         makeLayout,
         false,
         false,
         true
       )
-      const nav = createNativeStackNavigator({
-        initialRouteName: rootName,
-        screenOptions: tabStackOptions,
-        screens: rootScreenConfig,
-      })
-      nativeTabComponents[tab] = nav.getComponent()
-    }
+    const nav = createNativeStackNavigator({
+      initialRouteName: rootName,
+      screenOptions: tabStackOptions,
+      screens,
+    })
+    nativeTabComponents[tab] = nav.getComponent()
   }
 }
 
@@ -497,48 +455,53 @@ const appTabsScreenOptions = (
         }),
     tabBarIcon: getNativeTabIcon(routeName),
     tabBarLabel: tabToLabel.get(routeName) ?? routeName,
-    tabBarTestID: tabToTestID.get(routeName),
+    tabBarTestID: Common.tabToTestID.get(routeName),
     tabBarLabelVisibilityMode: 'labeled' as const,
     tabBarStyle: {backgroundColor: isDarkMode ? colors.greyDarkest : colors.blueDark},
     title: tabToLabel.get(routeName) ?? routeName,
   }
 }
 
-function AppTabsNative() {
-  const Tab = React.useMemo(() => createBottomTabNavigator(), [])
-  const navBadges = useNotifState(s => s.navBadges)
-  const hasPermissions = usePushState(s => s.hasPermissions)
-  const isDarkMode = useDarkModeState(s => s.isDarkMode())
-
-  return (
-    <Tab.Navigator backBehavior="none">
-      {nativeTabs.map(tab => (
-        <Tab.Screen
-          key={tab}
-          name={tab}
-          component={nativeTabComponents[tab]!}
-          options={appTabsScreenOptions(tab, navBadges, hasPermissions, isDarkMode)}
-        />
-      ))}
-    </Tab.Navigator>
-  )
-}
-
-let NativeLoggedOut: React.ComponentType
 let NativeRootComponent: React.ComponentType
 
 if (isMobile) {
-  const nativeLoggedOutScreensConfig = routeMapToStaticScreens(loggedOutRoutes, makeLayout, false, true, false)
-  const nativeLoggedOutScreenOptions = {
-    ...Common.defaultNavigationOptions,
-  } as NativeStackNavigationOptions
+  // Created inside the isMobile guard: on desktop @react-navigation/bottom-tabs is
+  // aliased to the null module, so calling it at module scope would crash startup.
+  const NativeTab = createBottomTabNavigator()
+
+  function AppTabsNative() {
+    const navBadges = useNotifState(s => s.navBadges)
+    const hasPermissions = usePushState(s => s.hasPermissions)
+    const isDarkMode = useDarkModeState(s => s.isDarkMode())
+
+    return (
+      <NativeTab.Navigator backBehavior="none">
+        {nativeTabs.map(tab => (
+          <NativeTab.Screen
+            key={tab}
+            name={tab}
+            component={nativeTabComponents[tab]!}
+            options={appTabsScreenOptions(tab, navBadges, hasPermissions, isDarkMode)}
+          />
+        ))}
+      </NativeTab.Navigator>
+    )
+  }
+
+  const nativeLoggedOutScreensConfig = routeMapToStaticScreens(
+    loggedOutRoutes,
+    makeLayout,
+    false,
+    true,
+    false
+  )
 
   const loggedOutNav = createNativeStackNavigator({
     initialRouteName: 'login',
-    screenOptions: nativeLoggedOutScreenOptions,
+    screenOptions: Common.defaultNavigationOptions as NativeStackNavigationOptions,
     screens: nativeLoggedOutScreensConfig,
   })
-  NativeLoggedOut = loggedOutNav.getComponent()
+  const NativeLoggedOut = loggedOutNav.getComponent()
 
   const rootStackScreenOptions = {
     headerBackButtonDisplayMode: 'minimal',
@@ -617,25 +580,6 @@ function NativeRouter() {
   const {loggedIn, startupLoaded} = useConfigState(
     C.useShallow(s => ({loggedIn: s.loggedIn, startupLoaded: s.startup.loaded}))
   )
-  const setNavState = C.useRouterState(s => s.dispatch.setNavState)
-  const onStateChange = () => {
-    const ns = C.Router2.getRootState()
-    setNavState(ns)
-  }
-  // Sync the initial state from the linking config into the router store.
-  // onStateChange doesn't fire for the initial state, so this ensures
-  // onRouteChanged runs and conversation data gets loaded on startup.
-  const onReady = onStateChange
-
-  const onUnhandledAction = (a: Readonly<{type: string}>) => {
-    logger.info(`[NAV] Unhandled action: ${a.type}`, a, C.Router2.logState())
-  }
-
-  const navRef = (ref: typeof Constants.navigationRef.current) => {
-    if (ref) {
-      Constants.navigationRef.current = ref
-    }
-  }
 
   const {barStyle, isDarkMode} = useDarkModeState(
     C.useShallow(s => {
@@ -650,20 +594,11 @@ function NativeRouter() {
     })
   )
   const bar = barStyle === 'default' ? null : <StatusBar barStyle={barStyle} />
-  // Inline useRootKey (from hooks.native.tsx — can't require *.native files from shared code)
+  // Android also remounts on dark mode changes
   const nativeIsDarkMode = useColorScheme() === 'dark'
-  const nativeUsername = useCurrentUserState(s => s.username)
-  const [nativeNavKey, setNativeNavKey] = React.useState('')
-  const nativePrevUsernameRef = React.useRef(nativeUsername)
-  React.useEffect(() => {
-    const prev = nativePrevUsernameRef.current
-    nativePrevUsernameRef.current = nativeUsername
-    if (prev && nativeUsername && prev !== nativeUsername) {
-      setNativeNavKey(nativeUsername)
-    }
-  }, [nativeUsername])
+  const navKey = Common.useUserSwitchNavKey()
   const nativeDarkSuffix = isAndroid ? (nativeIsDarkMode ? '-dark' : '-light') : ''
-  const rootKey = nativeNavKey ? `${nativeNavKey}${nativeDarkSuffix}` : ''
+  const rootKey = navKey ? `${navKey}${nativeDarkSuffix}` : ''
 
   if (!loggedInLoaded || (loggedIn && !startupLoaded)) {
     return (
@@ -679,10 +614,13 @@ function NativeRouter() {
       <NavigationContainer
         fallback={<View style={{backgroundColor: Kb.Styles.globalColors.white, flex: 1}} />}
         linking={loggedIn ? nativeLinkingConfig : undefined}
-        onReady={onReady}
+        // Sync the initial state from the linking config into the router store.
+        // onStateChange doesn't fire for the initial state, so this ensures
+        // onRouteChanged runs and conversation data gets loaded on startup.
+        onReady={onStateChange}
         onStateChange={onStateChange}
         onUnhandledAction={onUnhandledAction}
-        ref={navRef}
+        ref={setNavRef}
         theme={isDarkMode ? darkTheme : lightTheme}
       >
         <LoadedTeamsListProvider>
diff --git a/shared/router-v2/routes.tsx b/shared/router-v2/routes.tsx
index d2b85612aa81..d98138659679 100644
--- a/shared/router-v2/routes.tsx
+++ b/shared/router-v2/routes.tsx
@@ -17,6 +17,17 @@ import {defineRouteMap} from '@/constants/types/router'
 import type {GetOptions, GetOptionsParams, GetOptionsRet, RouteDef} from '@/constants/types/router'
 import type {NativeStackNavigationOptions} from '@react-navigation/native-stack'
 
+// The spread silently keeps the last route on a name collision, so assert uniqueness in dev
+const assertNoDuplicateRouteNames = (...maps: Array<Record<string, unknown>>) => {
+  const seen = new Set<string>()
+  for (const m of maps) {
+    for (const k of Object.keys(m)) {
+      if (seen.has(k)) throw new Error('Duplicate route name: ' + k)
+      seen.add(k)
+    }
+  }
+}
+
 // We have normal routes, modal routes, and logged out routes.
 // We also end up using existence of a nameToTab value for a route as a test
 // of whether we're on a loggedIn route: loggedOut routes have no selected tab.
@@ -33,22 +44,17 @@ export const routes = defineRouteMap({
 })
 
 if (__DEV__) {
-  const allRouteKeys = [
-    ...Object.keys(deviceNewRoutes),
-    ...Object.keys(chatNewRoutes),
-    ...Object.keys(cryptoNewRoutes),
-    ...Object.keys(peopleNewRoutes),
-    ...Object.keys(profileNewRoutes),
-    ...Object.keys(fsNewRoutes),
-    ...Object.keys(settingsNewRoutes),
-    ...Object.keys(teamsNewRoutes),
-    ...Object.keys(gitNewRoutes),
-  ]
-  const seen = new Set<string>()
-  for (const k of allRouteKeys) {
-    if (seen.has(k)) throw new Error('Duplicate route name: ' + k)
-    seen.add(k)
-  }
+  assertNoDuplicateRouteNames(
+    deviceNewRoutes,
+    chatNewRoutes,
+    cryptoNewRoutes,
+    peopleNewRoutes,
+    profileNewRoutes,
+    fsNewRoutes,
+    settingsNewRoutes,
+    teamsNewRoutes,
+    gitNewRoutes
+  )
 }
 
 export const tabRoots = {
@@ -82,26 +88,21 @@ export const modalRoutes = defineRouteMap({
 })
 
 if (__DEV__) {
-  const allModalKeys = [
-    ...Object.keys(chatNewModalRoutes),
-    ...Object.keys(cryptoNewModalRoutes),
-    ...Object.keys(deviceNewModalRoutes),
-    ...Object.keys(fsNewModalRoutes),
-    ...Object.keys(gitNewModalRoutes),
-    ...Object.keys(loginNewModalRoutes),
-    ...Object.keys(peopleNewModalRoutes),
-    ...Object.keys(profileNewModalRoutes),
-    ...Object.keys(settingsNewModalRoutes),
-    ...Object.keys(signupNewModalRoutes),
-    ...Object.keys(teamsNewModalRoutes),
-    ...Object.keys(walletsNewModalRoutes),
-    ...Object.keys(incomingShareNewModalRoutes),
-  ]
-  const seen = new Set<string>()
-  for (const k of allModalKeys) {
-    if (seen.has(k)) throw new Error('Duplicate modal route name: ' + k)
-    seen.add(k)
-  }
+  assertNoDuplicateRouteNames(
+    chatNewModalRoutes,
+    cryptoNewModalRoutes,
+    deviceNewModalRoutes,
+    fsNewModalRoutes,
+    gitNewModalRoutes,
+    loginNewModalRoutes,
+    peopleNewModalRoutes,
+    profileNewModalRoutes,
+    settingsNewModalRoutes,
+    signupNewModalRoutes,
+    teamsNewModalRoutes,
+    walletsNewModalRoutes,
+    incomingShareNewModalRoutes
+  )
 }
 
 export const loggedOutRoutes = defineRouteMap({..._loggedOutRoutes, ...signupNewRoutes})
@@ -117,7 +118,6 @@ type MakeLayoutFn = (
   isTabScreen: boolean,
   getOptions?: GetOptions
 ) => LayoutFn
-type MakeOptionsFn = (rd: RouteDef) => (params: GetOptionsParams) => GetOptionsRet
 type CheckedRouteEntry<Routes extends Record<string, RouteDef>> = Routes[keyof Routes]
 
 function toNavOptions(opts: GetOptionsRet): NativeStackNavigationOptions {
@@ -157,27 +157,3 @@ export function routeMapToStaticScreens<const RS extends Record<string, RouteDef
   }
   return result
 }
-
-export function routeMapToScreenElements<const RS extends Record<string, RouteDef>>(
-  rs: RS,
-  Screen: React.ComponentType<any>,
-  makeLayoutFn: MakeLayoutFn,
-  makeOptionsFn: MakeOptionsFn,
-  isModal: boolean,
-  isLoggedOut: boolean,
-  isTabScreen: boolean
-) {
-  return (Object.keys(rs) as Array<keyof RS & string>).flatMap(name => {
-    const rd = rs[name] as CheckedRouteEntry<RS>
-    return [
-      <Screen
-        key={name}
-        name={name}
-        component={rd.screen}
-        {...(rd.initialParams === undefined ? {} : {initialParams: rd.initialParams})}
-        layout={makeLayoutFn(isModal, isLoggedOut, isTabScreen, rd.getOptions)}
-        options={makeOptionsFn(rd)}
-      />,
-    ]
-  })
-}
diff --git a/shared/router-v2/screen-layout.tsx b/shared/router-v2/screen-layout.tsx
index 68f70ffba01a..3ae8c4b023b3 100644
--- a/shared/router-v2/screen-layout.tsx
+++ b/shared/router-v2/screen-layout.tsx
@@ -23,24 +23,10 @@ type LayoutProps = {
 
 // Native-only wrapper components
 
-const TabScreenWrapper = ({children}: {children: React.ReactNode}) => {
-  if (isAndroid) {
-    return (
-      <RNScreensSafeAreaView edges={{bottom: true}} style={styles.tabScreen}>
-        {children}
-      </RNScreensSafeAreaView>
-    )
-  }
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.tabScreen}>
-      {children}
-    </Kb.Box2>
-  )
-}
-
-const StackScreenWrapper = ({children}: {children: React.ReactNode}) => {
-  // Android targets SDK 35+ which enforces edge-to-edge, so content draws under
-  // the system nav bar unless we apply the bottom inset ourselves.
+// Wraps both tab-root and pushed stack screens. Android targets SDK 35+ which enforces
+// edge-to-edge, so content draws under the system nav bar unless we apply the bottom
+// inset ourselves.
+const ScreenWrapper = ({children}: {children: React.ReactNode}) => {
   if (isAndroid) {
     return (
       <RNScreensSafeAreaView edges={{bottom: true}} style={styles.tabScreen}>
@@ -123,7 +109,7 @@ const desktopMakeLayout = (
 const nativeMakeLayout = (
   isModal: boolean,
   isLoggedOut: boolean,
-  isTabScreen: boolean,
+  _isTabScreen: boolean,
   getOptions?: GetOptions
 ) => {
   const modalOffset = isIOS ? 40 : 0
@@ -132,11 +118,8 @@ const nativeMakeLayout = (
 
     const wrappedContent = <React.Suspense>{children}</React.Suspense>
 
-    if (!isModal && !isLoggedOut && isTabScreen) {
-      return <TabScreenWrapper>{wrappedContent}</TabScreenWrapper>
-    }
     if (!isModal && !isLoggedOut) {
-      return <StackScreenWrapper>{wrappedContent}</StackScreenWrapper>
+      return <ScreenWrapper>{wrappedContent}</ScreenWrapper>
     }
     if (!isModal && isLoggedOut) {
       return <LoggedOutScreenWrapper>{wrappedContent}</LoggedOutScreenWrapper>
diff --git a/shared/router-v2/tab-bar.desktop.tsx b/shared/router-v2/tab-bar.desktop.tsx
index 70841e86893f..9973bc2cbd19 100644
--- a/shared/router-v2/tab-bar.desktop.tsx
+++ b/shared/router-v2/tab-bar.desktop.tsx
@@ -6,7 +6,6 @@ import * as Platforms from '@/constants/platform'
 import * as T from '@/constants/types'
 import * as React from 'react'
 import * as Tabs from '@/constants/tabs'
-import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import * as Common from './common'
 import {CommonActions} from '@react-navigation/core'
 import AccountSwitcher from './account-switcher'
@@ -105,7 +104,7 @@ const Header = () => {
           small={true}
           style={styles.button}
         />
-        <AccountSwitcher />
+        <AccountSwitcher onSelected={hidePopup} />
       </Kb.Box2>
     )
 
@@ -124,10 +123,11 @@ const Header = () => {
   }
   const {togglePopup, popup, popupAnchor} = Kb.usePopup2(makePopup)
 
+  // mid account-switch we have no user info yet; keep the bar but suppress the dropdown
   return (
     <>
       <Kb.ClickableBox
-        onClick={togglePopup}
+        onClick={username ? togglePopup : undefined}
         direction="horizontal"
         gap="tiny"
         centerChildren={true}
@@ -141,34 +141,25 @@ const Header = () => {
           username={username}
           style={Kb.Styles.collapseStyles([styles.avatar, styles.avatarBorder])}
         />
-        <>
-          <Kb.Text className="username" lineClamp={1} type="BodyTinySemibold" style={styles.username}>
-            Hi {username}!
-          </Kb.Text>
-          <Kb.Icon
-            type="iconfont-arrow-down"
-            color={Kb.Styles.globalColors.blueLighter}
-            fontSize={12}
-            style={styles.caret}
-          />
-        </>
+        {!!username && (
+          <>
+            <Kb.Text className="username" lineClamp={1} type="BodyTinySemibold" style={styles.username}>
+              Hi {username}!
+            </Kb.Text>
+            <Kb.Icon
+              type="iconfont-arrow-down"
+              color={Kb.Styles.globalColors.blueLighter}
+              fontSize={12}
+              style={styles.caret}
+            />
+          </>
+        )}
       </Kb.ClickableBox>
       {popup}
     </>
   )
 }
 
-const tabTestIDs = new Map<Tabs.AppTab, string>([
-  [Tabs.peopleTab, TestIDs.NAV_TAB_PEOPLE],
-  [Tabs.chatTab, TestIDs.NAV_TAB_CHAT],
-  [Tabs.fsTab, TestIDs.NAV_TAB_FILES],
-  [Tabs.cryptoTab, TestIDs.NAV_TAB_CRYPTO],
-  [Tabs.teamsTab, TestIDs.NAV_TAB_TEAMS],
-  [Tabs.gitTab, TestIDs.NAV_TAB_GIT],
-  [Tabs.devicesTab, TestIDs.NAV_TAB_DEVICES],
-  [Tabs.settingsTab, TestIDs.NAV_TAB_SETTINGS],
-])
-
 const keysMap = Tabs.desktopTabs.reduce<{[key: string]: (typeof Tabs.desktopTabs)[number]}>(
   (map, tab, index) => {
     map[`mod+${index + 1}`] = tab
@@ -180,7 +171,6 @@ const hotKeys = Object.keys(keysMap)
 
 function TabBar(props: Props) {
   const {navigation, state} = props
-  const username = useCurrentUserState(s => s.username)
   const onHotKey = (cmd: string) => {
     navigation.dispatch(CommonActions.navigate(keysMap[cmd] as Tabs.Tab))
   }
@@ -189,7 +179,9 @@ function TabBar(props: Props) {
   const onSelectTab = Common.useSubnavTabAction(navigation, state)
   const forceSmallNav = useShellState(s => s.forceSmallNav)
 
-  return username ? (
+  // always render the bar; mid account-switch username is briefly empty and the
+  // header degrades to a placeholder instead of dropping the whole nav
+  return (
     <Kb.Box2
       className={Kb.Styles.classNames('tab-container', {forceSmallNav})}
       direction="vertical"
@@ -211,7 +203,7 @@ function TabBar(props: Props) {
       ))}
       <RuntimeStats />
     </Kb.Box2>
-  ) : null
+  )
 }
 
 type TabProps = {
@@ -287,7 +279,7 @@ function Tab(props: TabProps) {
       onMouseLeave={onMouseLeave}
       direction="horizontal"
       fullWidth={true}
-      testID={tabTestIDs.get(tab)}
+      testID={Common.tabToTestID.get(tab)}
       className={Kb.Styles.classNames(
         isSelected ? 'tab-selected' : 'tab',
         'tab-tooltip',
diff --git a/shared/settings/account/add-modals.tsx b/shared/settings/account/add-modals.tsx
index a20c087415a5..cc8702ae39b1 100644
--- a/shared/settings/account/add-modals.tsx
+++ b/shared/settings/account/add-modals.tsx
@@ -78,18 +78,14 @@ export const Email = () => {
         />
       </Kb.Box2>
       <Kb.ModalFooter style={styles.footer}>
-        <Kb.ButtonBar style={styles.buttonBar} fullWidth={true}>
-          {!isMobile && (
-            <Kb.Button type="Dim" label="Cancel" fullWidth={true} onClick={onClose} disabled={waiting} />
-          )}
-          <Kb.Button
-            label="Continue"
-            fullWidth={true}
-            onClick={onContinue}
-            disabled={disabled}
-            waiting={waiting}
-          />
-        </Kb.ButtonBar>
+        <Kb.ConfirmButtons
+          split={true}
+          waiting={waiting}
+          onCancel={onClose}
+          onConfirm={onContinue}
+          confirmLabel="Continue"
+          confirmDisabled={disabled}
+        />
       </Kb.ModalFooter>
     </>
   )
@@ -161,18 +157,14 @@ export const Phone = () => {
         />
       </Kb.Box2>
       <Kb.ModalFooter style={styles.footer}>
-        <Kb.ButtonBar style={styles.buttonBar} fullWidth={true}>
-          {!isMobile && (
-            <Kb.Button type="Dim" label="Cancel" fullWidth={true} onClick={onClose} disabled={waiting} />
-          )}
-          <Kb.Button
-            label="Continue"
-            fullWidth={true}
-            onClick={onContinue}
-            disabled={disabled}
-            waiting={waiting}
-          />
-        </Kb.ButtonBar>
+        <Kb.ConfirmButtons
+          split={true}
+          waiting={waiting}
+          onCancel={onClose}
+          onConfirm={onContinue}
+          confirmLabel="Continue"
+          confirmDisabled={disabled}
+        />
       </Kb.ModalFooter>
     </>
   )
diff --git a/shared/settings/account/index.tsx b/shared/settings/account/index.tsx
index 25a543b47f81..46a20a63fd10 100644
--- a/shared/settings/account/index.tsx
+++ b/shared/settings/account/index.tsx
@@ -4,6 +4,7 @@ import * as React from 'react'
 import * as T from '@/constants/types'
 import EmailPhoneRow from './email-phone-row'
 import logger from '@/logger'
+import {produce} from 'immer'
 import {openURL} from '@/util/misc'
 import {loadSettings} from '../load-settings'
 import {useNavigation} from '@react-navigation/native'
@@ -248,9 +249,24 @@ const AccountSettings = ({route}: Props) => {
     }
     navigation.setParams({addedPhoneBanner: undefined})
   }, [addedPhoneFromRoute, navigation])
-  const onEmailVerificationSuccess = (email: string) => setAddedBannerState(s => ({...s, email}))
-  const onClearAddedEmail = () => setAddedBannerState(s => ({...s, email: ''}))
-  const onClearAddedPhone = () => setAddedBannerState(s => ({...s, phone: false}))
+  const onEmailVerificationSuccess = (email: string) =>
+    setAddedBannerState(
+      produce(draft => {
+        draft.email = email
+      })
+    )
+  const onClearAddedEmail = () =>
+    setAddedBannerState(
+      produce(draft => {
+        draft.email = ''
+      })
+    )
+  const onClearAddedPhone = () =>
+    setAddedBannerState(
+      produce(draft => {
+        draft.phone = false
+      })
+    )
   const onReload = () => {
     loadSettings()
     reloadRandomPW()
@@ -258,7 +274,11 @@ const AccountSettings = ({route}: Props) => {
   const onStartPhoneConversation = () => {
     switchTab(C.Tabs.chatTab)
     navigateAppend({name: 'chatNewChat', params: {namespace: 'chat'}})
-    setAddedBannerState(s => ({...s, phone: false}))
+    setAddedBannerState(
+      produce(draft => {
+        draft.phone = false
+      })
+    )
   }
   const _supersededPhoneNumber = phones && [...phones.values()].find(p => p.superseded)
   const supersededKey = _supersededPhoneNumber?.e164
diff --git a/shared/settings/advanced.tsx b/shared/settings/advanced.tsx
index f7db69871843..3c5cb10b1d63 100644
--- a/shared/settings/advanced.tsx
+++ b/shared/settings/advanced.tsx
@@ -12,6 +12,7 @@ import {pprofDir} from '@/constants/platform'
 import {clearLocalLogs} from '@/util/misc'
 import {useWaitingState} from '@/stores/waiting'
 import {useRandomPWState} from './use-random-pw'
+import {useRPCLoad} from '@/util/use-rpc-load'
 
 let initialUseNativeFrame: boolean | undefined
 
@@ -140,7 +141,13 @@ const LockdownCheckbox = (p: {
   )
 }
 
+// app-launch value, module level so a remount keeps showing "(restart required)"
 let disableSpellCheckInitialValue: boolean | undefined
+const stampDisableSpellCheckInitialValue = (value: boolean) => {
+  if (disableSpellCheckInitialValue === undefined) {
+    disableSpellCheckInitialValue = value
+  }
+}
 
 const Advanced = () => {
   const settingLockdownMode = C.Waiting.useAnyWaiting(C.waitingKeySettingsSetLockdownMode)
@@ -154,48 +161,32 @@ const Advanced = () => {
   )
   const {loadLockdownMode, lockdownModeEnabled, setLockdownMode} = useLockdownMode()
   const setLockdownModeError = C.Waiting.useAnyErrors(C.waitingKeySettingsSetLockdownMode)?.message || ''
-  const [rememberPassword, setRememberPassword] = React.useState<boolean | undefined>(undefined)
-
-  const [disableSpellCheck, setDisableSpellcheck] = React.useState<boolean | undefined>(undefined)
-  const loadDisableSpellcheck = C.useRPC(T.RPCGen.configGuiGetValueRpcPromise)
-  const loadRememberPassword = C.useRPC(T.RPCGen.configGetRememberPassphraseRpcPromise)
   const submitRememberPassword = C.useRPC(T.RPCGen.configSetRememberPassphraseRpcPromise)
 
-  // load it
-  React.useEffect(() => {
-    if (disableSpellCheck === undefined) {
-      loadDisableSpellcheck(
-        [{path: 'ui.disableSpellCheck'}],
-        result => {
-          const res = result.b ?? false
-          setDisableSpellcheck(res)
-          if (disableSpellCheckInitialValue === undefined) {
-            disableSpellCheckInitialValue = res
-          }
-        },
-        () => {
-          setDisableSpellcheck(false)
-          if (disableSpellCheckInitialValue === undefined) {
-            disableSpellCheckInitialValue = false
-          }
-        }
-      )
+  const {data: disableSpellCheck, setData: setDisableSpellcheck} = useRPCLoad(
+    T.RPCGen.configGuiGetValueRpcPromise,
+    [{path: 'ui.disableSpellCheck'}],
+    {
+      map: result => {
+        const res = result.b ?? false
+        stampDisableSpellCheckInitialValue(res)
+        return res
+      },
+      onError: () => {
+        stampDisableSpellCheckInitialValue(false)
+        setDisableSpellcheck(false)
+      },
     }
-  }, [disableSpellCheck, loadDisableSpellcheck])
+  )
 
-  React.useEffect(() => {
-    if (rememberPassword === undefined) {
-      loadRememberPassword(
-        [undefined],
-        remember => {
-          setRememberPassword(remember)
-        },
-        () => {
-          setRememberPassword(true)
-        }
-      )
+  const {data: rememberPassword, setData: setRememberPassword} = useRPCLoad(
+    T.RPCGen.configGetRememberPassphraseRpcPromise,
+    [undefined],
+    {
+      map: remember => remember,
+      onError: () => setRememberPassword(true),
     }
-  }, [loadRememberPassword, rememberPassword])
+  )
 
   const submitDisableSpellcheck = C.useRPC(T.RPCGen.configGuiSetValueRpcPromise)
   const onChangeRememberPassword = (remember: boolean) => {
diff --git a/shared/settings/chat.tsx b/shared/settings/chat.tsx
index 43fbc52102b6..56f9f4564ac8 100644
--- a/shared/settings/chat.tsx
+++ b/shared/settings/chat.tsx
@@ -6,8 +6,10 @@ import * as TestIDs from '@/tests/e2e/shared/test-ids'
 import Group from './group'
 import SettingsSectionTitle from './section-title'
 import {loadSettings} from './load-settings'
+import {produce} from 'immer'
 import useNotificationSettings from './notifications/use-notification-settings'
 import {useConfigState} from '@/stores/config'
+import {useRPCLoad} from '@/util/use-rpc-load'
 import {useShellState} from '@/stores/shell'
 import {useTeamsList} from '@/teams/use-teams-list'
 
@@ -17,26 +19,21 @@ type ContactSettingsTeamsList = {[k in T.RPCGen.TeamID]: boolean}
 type NotificationSettingsState = ReturnType<typeof useNotificationSettings>
 
 const useContactSettings = () => {
-  const loadContactSettingsRPC = C.useRPC(T.RPCGen.accountUserGetContactSettingsRpcPromise)
   const saveContactSettingsRPC = C.useRPC(T.RPCGen.accountUserSetContactSettingsRpcPromise)
   const [error, setError] = React.useState('')
-  const [settings, setSettings] = React.useState<T.RPCGen.ContactSettings>()
+  const {data: settings, reload} = useRPCLoad(T.RPCGen.accountUserGetContactSettingsRpcPromise, [undefined], {
+    map: s => s,
+    onError: () => setError('Unable to load contact settings, please try again.'),
+    onResult: () => setError(''),
+    when: 'manual',
+  })
 
   const contactSettingsRefresh = React.useCallback(() => {
     if (!useConfigState.getState().loggedIn) {
       return
     }
-    loadContactSettingsRPC(
-      [undefined],
-      nextSettings => {
-        setError('')
-        setSettings(nextSettings)
-      },
-      () => {
-        setError('Unable to load contact settings, please try again.')
-      }
-    )
-  }, [loadContactSettingsRPC])
+    reload()
+  }, [reload])
 
   const contactSettingsSaved = React.useCallback(
     (
@@ -79,34 +76,33 @@ const useContactSettings = () => {
 }
 
 const useUnfurlSettings = () => {
-  const loadUnfurlSettingsRPC = C.useRPC(T.RPCChat.localGetUnfurlSettingsRpcPromise)
   const saveUnfurlSettingsRPC = C.useRPC(T.RPCChat.localSaveUnfurlSettingsRpcPromise)
   const [error, setError] = React.useState('')
-  const [mode, setMode] = React.useState<T.RPCChat.UnfurlMode>()
-  const [whitelist, setWhitelist] = React.useState<ReadonlyArray<string>>(emptyList)
+  const {data, reload, setData} = useRPCLoad(
+    T.RPCChat.localGetUnfurlSettingsRpcPromise,
+    [undefined, C.waitingKeySettingsChatUnfurl],
+    {
+      map: result => ({mode: result.mode, whitelist: result.whitelist ?? emptyList}),
+      onError: () => setError('Unable to load link preview settings, please try again.'),
+      onResult: () => setError(''),
+      when: 'manual',
+    }
+  )
+  const mode = data?.mode
+  const whitelist = data?.whitelist ?? emptyList
 
   const unfurlSettingsRefresh = React.useCallback(() => {
     if (!useConfigState.getState().loggedIn) {
       return
     }
-    loadUnfurlSettingsRPC(
-      [undefined, C.waitingKeySettingsChatUnfurl],
-      result => {
-        setError('')
-        setMode(result.mode)
-        setWhitelist(result.whitelist ?? emptyList)
-      },
-      () => {
-        setError('Unable to load link preview settings, please try again.')
-      }
-    )
-  }, [loadUnfurlSettingsRPC])
+    reload()
+  }, [reload])
 
   const unfurlSettingsSaved = React.useCallback(
     (unfurlMode: T.RPCChat.UnfurlMode, unfurlWhitelist: ReadonlyArray<string>) => {
       setError('')
-      setMode(unfurlMode)
-      setWhitelist(unfurlWhitelist)
+      // optimistic, the post-save refresh has the final say
+      setData({mode: unfurlMode, whitelist: unfurlWhitelist})
       if (!useConfigState.getState().loggedIn) {
         return
       }
@@ -120,7 +116,7 @@ const useUnfurlSettings = () => {
         }
       )
     },
-    [saveUnfurlSettingsRPC, unfurlSettingsRefresh]
+    [saveUnfurlSettingsRPC, setData, unfurlSettingsRefresh]
   )
 
   return {error, mode, unfurlSettingsRefresh, unfurlSettingsSaved, whitelist}
@@ -264,10 +260,11 @@ const Security = ({allowEdit, groups, refresh, toggle}: NotificationSettingsStat
                       isOpen={teamMeta.isOpen}
                       name={teamMeta.teamname}
                       onCheck={(checked: boolean) =>
-                        setContactSettingsSelectedTeams(s => ({
-                          ...s,
-                          [teamMeta.id]: checked,
-                        }))
+                        setContactSettingsSelectedTeams(
+                          produce(draft => {
+                            draft[teamMeta.id] = checked
+                          })
+                        )
                       }
                     />
                   ))}
@@ -317,10 +314,11 @@ const Links = () => {
   }
 
   const toggleUnfurlWhitelist = (domain: string) => {
-    setUnfurlWhitelistRemoved(prev => ({
-      ...prev,
-      [domain]: !prev[domain],
-    }))
+    setUnfurlWhitelistRemoved(
+      produce(draft => {
+        draft[domain] = !draft[domain]
+      })
+    )
   }
 
   React.useEffect(() => {
@@ -388,10 +386,7 @@ const Links = () => {
                       </Kb.Text>
                     ) : (
                       <Kb.WithTooltip tooltip="Remove">
-                        <Kb.Icon
-                          onClick={() => toggleUnfurlWhitelist(w)}
-                          type="iconfont-trash"
-                        />
+                        <Kb.Icon onClick={() => toggleUnfurlWhitelist(w)} type="iconfont-trash" />
                       </Kb.WithTooltip>
                     )}
                   </Kb.Box2>
@@ -407,12 +402,7 @@ const Links = () => {
           selected={selected === T.RPCChat.UnfurlMode.never}
         />
       </Kb.Box2>
-      <Kb.Box2
-        direction="vertical"
-        gap="tiny"
-        alignSelf="flex-start"
-        style={styles.innerContainer}
-      >
+      <Kb.Box2 direction="vertical" gap="tiny" alignSelf="flex-start" style={styles.innerContainer}>
         <Kb.WaitingButton
           onClick={onSave}
           label="Save"
@@ -510,9 +500,7 @@ const TeamRow = (p: {checked: boolean; isOpen: boolean; name: string; onCheck: (
         <Kb.Text type="BodySemibold" lineClamp={1}>
           {name}
         </Kb.Text>
-        {isOpen && (
-          <Kb.Meta title="open" style={styles.teamMeta} backgroundColor={Kb.Styles.globalColors.green} />
-        )}
+        {isOpen && <Kb.Meta variant="open" style={styles.teamMeta} />}
       </Kb.Box2>
     </Kb.Box2>
   )
@@ -546,7 +534,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     isMobile: {marginRight: Kb.Styles.globalMargins.medium},
   }),
   teamMeta: {
-    alignSelf: 'center',
     marginLeft: Kb.Styles.globalMargins.xtiny,
     marginTop: 2,
   },
@@ -556,7 +543,12 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     marginRight: Kb.Styles.globalMargins.small,
   },
   teamRowContainer: {
-    ...Kb.Styles.padding(Kb.Styles.globalMargins.xtiny, Kb.Styles.globalMargins.small, Kb.Styles.globalMargins.xtiny, isMobile ? Kb.Styles.globalMargins.large : 48),
+    ...Kb.Styles.padding(
+      Kb.Styles.globalMargins.xtiny,
+      Kb.Styles.globalMargins.small,
+      Kb.Styles.globalMargins.xtiny,
+      isMobile ? Kb.Styles.globalMargins.large : 48
+    ),
   },
   whitelist: Kb.Styles.platformStyles({
     common: {
diff --git a/shared/settings/files/hooks.tsx b/shared/settings/files/hooks.tsx
index 6cd5c2ba3cda..5d0a78597bd0 100644
--- a/shared/settings/files/hooks.tsx
+++ b/shared/settings/files/hooks.tsx
@@ -3,6 +3,7 @@ import * as React from 'react'
 import * as T from '@/constants/types'
 import {useEngineActionListener} from '@/engine/action-listener'
 import {clientID as fsClientID} from '@/fs/common/client'
+import {produce} from 'immer'
 
 export const allowedNotificationThresholds = [100 * 1024 ** 2, 1024 ** 3, 3 * 1024 ** 3, 10 * 1024 ** 3]
 export const defaultNotificationThreshold = 100 * 1024 ** 2
@@ -22,7 +23,11 @@ const useFiles = () => {
   const readSettings = React.useCallback(async () => T.RPCGen.SimpleFSSimpleFSSettingsRpcPromise(), [])
   const loadSettings = React.useEffectEvent(async (showLoading: boolean) => {
     if (showLoading) {
-      setSettings(s => ({...s, isLoading: true}))
+      setSettings(
+        produce(draft => {
+          draft.isLoading = true
+        })
+      )
     }
     try {
       const next = await readSettings()
@@ -32,7 +37,11 @@ const useFiles = () => {
         syncOnCellular: next.syncOnCellular,
       })
     } catch {
-      setSettings(s => ({...s, isLoading: false}))
+      setSettings(
+        produce(draft => {
+          draft.isLoading = false
+        })
+      )
     }
   })
   React.useEffect(() => {
@@ -49,7 +58,11 @@ const useFiles = () => {
         }
       } catch {
         if (!canceled) {
-          setSettings(s => ({...s, isLoading: false}))
+          setSettings(
+            produce(draft => {
+              draft.isLoading = false
+            })
+          )
         }
       }
     }
@@ -68,12 +81,20 @@ const useFiles = () => {
 
   const setSpaceAvailableNotificationThreshold = (threshold: number) => {
     const f = async () => {
-      setSettings(s => ({...s, isLoading: true}))
+      setSettings(
+        produce(draft => {
+          draft.isLoading = true
+        })
+      )
       try {
         await T.RPCGen.SimpleFSSimpleFSSetNotificationThresholdRpcPromise({threshold})
         await loadSettings(true)
       } catch {
-        setSettings(s => ({...s, isLoading: false}))
+        setSettings(
+          produce(draft => {
+            draft.isLoading = false
+          })
+        )
       }
     }
     C.ignorePromise(f())
diff --git a/shared/settings/password.tsx b/shared/settings/password.tsx
index 98cc057bfdb1..d1a42ce14ea7 100644
--- a/shared/settings/password.tsx
+++ b/shared/settings/password.tsx
@@ -5,6 +5,7 @@ import * as T from '@/constants/types'
 import {useNavigation} from '@react-navigation/native'
 import {useRequestLogout} from './use-request-logout'
 import {useRandomPWState} from './use-random-pw'
+import {useRPCLoad} from '@/util/use-rpc-load'
 
 type Props = {
   error: string
@@ -206,17 +207,9 @@ const Container = () => {
     navigation.setOptions({title})
   }, [navigation, title])
 
-  const [hasPGPKeyOnServer, setHasPGPKeyOnServer] = React.useState<boolean | undefined>(undefined)
-  const loadPgpSettings = C.useRPC(T.RPCGen.accountHasServerKeysRpcPromise)
-  React.useEffect(() => {
-    loadPgpSettings(
-      [undefined],
-      ({hasServerKeys}) => {
-        setHasPGPKeyOnServer(hasServerKeys)
-      },
-      () => {}
-    )
-  }, [loadPgpSettings])
+  const {data: hasPGPKeyOnServer} = useRPCLoad(T.RPCGen.accountHasServerKeysRpcPromise, [undefined], {
+    map: ({hasServerKeys}) => hasServerKeys,
+  })
 
   const props = {
     error,
diff --git a/shared/settings/proxy.tsx b/shared/settings/proxy.tsx
index 5f46ad4d4f3a..762cc266d541 100644
--- a/shared/settings/proxy.tsx
+++ b/shared/settings/proxy.tsx
@@ -3,6 +3,7 @@ import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import logger from '@/logger'
+import {produce} from 'immer'
 import type {RPCError} from '@/util/errors'
 
 const useConnect = () => {
@@ -161,7 +162,11 @@ const ProxySettingsComponent = (props: Props) => {
   }
 
   const proxyTypeSelected = (newProxyType: ProxyType) => {
-    setProxyForm(s => ({...s, proxyType: newProxyType}))
+    setProxyForm(
+      produce(draft => {
+        draft.proxyType = newProxyType
+      })
+    )
     if (newProxyType === 'noProxy') {
       saveProxySettings(newProxyType)
     }
@@ -212,13 +217,25 @@ const ProxySettingsComponent = (props: Props) => {
           <Kb.Text type="BodySmall">Proxy Address</Kb.Text>
           <Kb.Input3
             placeholder="127.0.0.1"
-            onChangeText={address => setProxyForm(s => ({...s, address}))}
+            onChangeText={address =>
+              setProxyForm(
+                produce(draft => {
+                  draft.address = address
+                })
+              )
+            }
             value={address}
           />
           <Kb.Text type="BodySmall">Proxy Port</Kb.Text>
           <Kb.Input3
             placeholder="8080"
-            onChangeText={port => setProxyForm(s => ({...s, port}))}
+            onChangeText={port =>
+              setProxyForm(
+                produce(draft => {
+                  draft.port = port
+                })
+              )
+            }
             value={port}
           />
         </>
diff --git a/shared/settings/root-desktop-tablet.tsx b/shared/settings/root-desktop-tablet.tsx
index 66e92cfd1ab9..63f7cf50fb92 100644
--- a/shared/settings/root-desktop-tablet.tsx
+++ b/shared/settings/root-desktop-tablet.tsx
@@ -1,15 +1,12 @@
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as Common from '@/router-v2/common'
-import {routeMapToScreenElements} from '@/router-v2/routes'
+import {routeMapToStaticScreens} from '@/router-v2/routes'
 import {makeLayout} from '@/router-v2/screen-layout'
-import type {RouteDef, GetOptionsParams} from '@/constants/types/router'
 import LeftNav from './sub-nav/left-nav'
 import {useNavigationBuilder, TabRouter, createNavigatorFactory} from '@react-navigation/core'
-import type {TypedNavigator, NavigatorTypeBagBase} from '@react-navigation/native'
 import {settingsDesktopTabRoutes} from './routes'
 import {settingsAccountTab} from '@/constants/settings'
-import type {SettingsAccountRouteParams} from './routes'
 
 function LeftTabNavigator({
   initialRouteName,
@@ -72,40 +69,21 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   nav: {width: Kb.Styles.isTablet ? 200 : 180},
 }))
 
-type NavType = NavigatorTypeBagBase & {
-  ParamList: {
-    [K in keyof typeof settingsDesktopTabRoutes]: K extends typeof settingsAccountTab
-      ? SettingsAccountRouteParams | undefined
-      : undefined
-  }
-}
-
-export const createLeftTabNavigator = createNavigatorFactory(LeftTabNavigator) as unknown as () => TypedNavigator<NavType>
-const TabNavigator = createLeftTabNavigator()
-const makeOptions = (rd: RouteDef) => {
-  return ({route, navigation}: GetOptionsParams) => {
-    const no = rd.getOptions
-    const opt = typeof no === 'function' ? no({navigation, route}) : no
-    return {...opt}
-  }
-}
-const settingsScreens = routeMapToScreenElements(
-  settingsDesktopTabRoutes,
-  TabNavigator.Screen,
-  makeLayout,
-  makeOptions,
-  false,
-  false,
-  false
-)
+// The factory's static-config call signature is hidden by our custom-navigator typing, so
+// re-surface it with a cast. Screens come from the same route-map converter the root uses.
+const createLeftTabNavigator = createNavigatorFactory(LeftTabNavigator) as unknown as (config: {
+  backBehavior: 'none'
+  initialRouteName: string
+  screens: ReturnType<typeof routeMapToStaticScreens>
+}) => {getComponent: () => React.ComponentType}
 
 // TODO on ipad this doesn't have a stack navigator so when you go into crypto you get
 // a push from the parent stack. If we care just make a generic left nav / right stack
 // that the global app / etc could use and put it here also. not worth it now
-const SettingsSubNavigator = () => (
-  <TabNavigator.Navigator initialRouteName={settingsAccountTab} backBehavior="none">
-    {settingsScreens}
-  </TabNavigator.Navigator>
-)
+const SettingsSubNavigator = createLeftTabNavigator({
+  backBehavior: 'none',
+  initialRouteName: settingsAccountTab,
+  screens: routeMapToStaticScreens(settingsDesktopTabRoutes, makeLayout, false, false, false),
+}).getComponent()
 
 export default SettingsSubNavigator
diff --git a/shared/stores/config.tsx b/shared/stores/config.tsx
index d563271d541b..93c70bf25e8c 100644
--- a/shared/stores/config.tsx
+++ b/shared/stores/config.tsx
@@ -38,7 +38,6 @@ type Store = T.Immutable<{
   justRevokedSelf: string
   loggedIn: boolean
   outOfDate: T.Config.OutOfDate
-  remoteWindowNeedsProps: Map<string, Map<string, number>>
   revokedTrigger: number
   runtimeStats?: T.RPCGen.RuntimeStats
   startup: {
@@ -83,7 +82,6 @@ const initialStore: Store = {
     outOfDate: false,
     updating: false,
   },
-  remoteWindowNeedsProps: new Map(),
   revokedTrigger: 0,
   startup: {
     conversation: noConversationIDKey,
@@ -109,7 +107,6 @@ export type State = Store & {
     onEngineIncoming: (action: EngineGen.Actions) => void
     powerMonitorEvent: (event: string) => void
     resetState: (isDebug?: boolean) => void
-    remoteWindowNeedsProps: (component: string, params: string) => void
     resetRevokedSelf: () => void
     revoke: (deviceName: string, wasCurrentDevice: boolean) => void
     refreshAccounts: () => Promise<void>
@@ -324,6 +321,9 @@ export const useConfigState = Z.createZustand<State>('config', (set, get) => {
       ignorePromise(f())
     },
     onEngineConnected: () => {
+      // An engine reset drops in-flight RPCs without settling their promises; a refresh
+      // caught by that would poison the dedupe cache forever
+      inflightRefreshAccounts = undefined
       // The startReachability RPC call both starts and returns the current
       // reachability state. Then we'll get updates of changes from this state via reachabilityChanged.
       // This should be run on app start and service re-connect in case the service somehow crashed or was restarted manually.
@@ -440,20 +440,16 @@ export const useConfigState = Z.createZustand<State>('config', (set, get) => {
         }
         setAccounts(nextConfiguredAccounts)
       }
-      inflightRefreshAccounts = f()
+      const p = f()
+      inflightRefreshAccounts = p
       try {
-        await inflightRefreshAccounts
+        await p
       } finally {
-        inflightRefreshAccounts = undefined
+        if (inflightRefreshAccounts === p) {
+          inflightRefreshAccounts = undefined
+        }
       }
     },
-    remoteWindowNeedsProps: (component, params) => {
-      set(s => {
-        const map = s.remoteWindowNeedsProps.get(component) ?? new Map<string, number>()
-        map.set(params, (map.get(params) ?? 0) + 1)
-        s.remoteWindowNeedsProps.set(component, map)
-      })
-    },
     resetRevokedSelf: () => {
       set(s => {
         s.justRevokedSelf = ''
diff --git a/shared/stores/daemon.tsx b/shared/stores/daemon.tsx
index fee4687b7013..32356e955c08 100644
--- a/shared/stores/daemon.tsx
+++ b/shared/stores/daemon.tsx
@@ -68,11 +68,14 @@ export const useDaemonState = Z.createZustand<State>('daemon', (set, get) => {
           s.bootstrapStatus = T.castDraft(bs)
         })
       }
-      inflightBootstrapStatus = f()
+      const p = f()
+      inflightBootstrapStatus = p
       try {
-        await inflightBootstrapStatus
+        await p
       } finally {
-        inflightBootstrapStatus = undefined
+        if (inflightBootstrapStatus === p) {
+          inflightBootstrapStatus = undefined
+        }
       }
     },
     resetState: () => {
@@ -93,6 +96,9 @@ export const useDaemonState = Z.createZustand<State>('daemon', (set, get) => {
     },
     startHandshake: () => {
       const gen = ++generation
+      // startHandshake follows an engine reset, which drops in-flight RPCs without settling
+      // their promises; reusing one here would stall the handshake forever
+      inflightBootstrapStatus = undefined
       set(s => {
         s.error = undefined
         s.handshakeFailedReason = ''
diff --git a/shared/stores/tests/config.test.ts b/shared/stores/tests/config.test.ts
index 4130ba253f39..1df0b762284f 100644
--- a/shared/stores/tests/config.test.ts
+++ b/shared/stores/tests/config.test.ts
@@ -14,7 +14,6 @@ const resetConfigState = () => {
       outOfDate: false,
       updating: false,
     },
-    remoteWindowNeedsProps: new Map(),
     startup: {
       conversation: noConversationIDKey,
       followUser: '',
@@ -34,18 +33,6 @@ afterEach(() => {
   resetConfigState()
 })
 
-test('remoteWindowNeedsProps counts requests per component and params', () => {
-  const {dispatch} = useConfigState.getState()
-
-  dispatch.remoteWindowNeedsProps('remote-profile', '{"username":"alice"}')
-  dispatch.remoteWindowNeedsProps('remote-profile', '{"username":"alice"}')
-  dispatch.remoteWindowNeedsProps('remote-profile', '{"username":"bob"}')
-
-  const counts = useConfigState.getState().remoteWindowNeedsProps.get('remote-profile')
-  expect(counts?.get('{"username":"alice"}')).toBe(2)
-  expect(counts?.get('{"username":"bob"}')).toBe(1)
-})
-
 test('setStartupDetails only records the first startup payload', () => {
   const {dispatch} = useConfigState.getState()
 
diff --git a/shared/stores/tests/daemon.test.ts b/shared/stores/tests/daemon.test.ts
index 229dca4c4c03..dbb1ad951b0d 100644
--- a/shared/stores/tests/daemon.test.ts
+++ b/shared/stores/tests/daemon.test.ts
@@ -1,5 +1,6 @@
 /// <reference types="jest" />
 import * as T from '@/constants/types'
+import {ignorePromise} from '@/constants/utils'
 import {maxHandshakeTries} from '@/constants/values'
 import {resetAllStores} from '@/util/zustand'
 import {FatalHandshakeError, useDaemonState} from '../daemon'
@@ -104,6 +105,27 @@ describe('daemon store', () => {
     expect(store.getState().bootstrapStatus?.uid).toBe('u1')
   })
 
+  test('startHandshake does not reuse a load orphaned by an engine reset', async () => {
+    // engine.reset() drops in-flight RPCs without settling their promises (user switch does
+    // this twice); a later handshake must start a fresh load instead of awaiting the dead one
+    const spy = jest
+      .spyOn(T.RPCGen, 'configGetBootstrapStatusRpcPromise')
+      .mockImplementationOnce(async () => new Promise<never>(() => {}))
+      .mockResolvedValue(bootstrapStatus)
+    const store = useDaemonState
+    store.getState().dispatch.initBootstrapSteps([])
+
+    ignorePromise(store.getState().dispatch.loadDaemonBootstrapStatus())
+    await jest.advanceTimersByTimeAsync(0)
+
+    store.getState().dispatch.startHandshake()
+    await jest.advanceTimersByTimeAsync(0)
+
+    expect(spy).toHaveBeenCalledTimes(2)
+    expect(store.getState().handshakeState).toBe('done')
+    expect(store.getState().bootstrapStatus?.username).toBe('testuser')
+  })
+
   test('resetState preserves the handshake state but clears transient values', () => {
     const store = useDaemonState
     store.setState(
diff --git a/shared/stores/tests/profile.test.ts b/shared/stores/tests/profile.test.ts
index 3298b1b682e2..f186c9de1ca0 100644
--- a/shared/stores/tests/profile.test.ts
+++ b/shared/stores/tests/profile.test.ts
@@ -1,5 +1,5 @@
 /// <reference types="jest" />
-import {validatePgpInfo} from '@/profile/pgp/validation'
+import {validatePgpInfo} from '@/profile/pgp/choice'
 import {normalizeProofUsername} from '@/profile/proof-utils'
 import {resetAllStores} from '@/util/zustand'
 
diff --git a/shared/styles/index.tsx b/shared/styles/index.tsx
index 727aebf243fc..dd4a1571af40 100644
--- a/shared/styles/index.tsx
+++ b/shared/styles/index.tsx
@@ -61,6 +61,7 @@ export const backgroundModeToTextColor = (backgroundMode: Background) => {
 const flexCommon = isMobile ? {} : ({display: 'flex'} as const)
 const utilBase = {
   fillAbsolute: {inset: 0, position: 'absolute'},
+  largeWidthPercent: '70%',
   flexBoxCenter: {...flexCommon, alignItems: 'center', justifyContent: 'center'},
   flexBoxColumn: {...flexCommon, flexDirection: 'column'},
   flexBoxColumnReverse: {...flexCommon, flexDirection: 'column-reverse'},
@@ -242,29 +243,14 @@ const font = isMobile ? (isIOS ? fontNativeIOS : fontNativeAndroid) : fontDeskto
 
 const utilDesktop = {
   ...utilBase,
-  largeWidthPercent: '70%' as const,
-  loadingTextStyle: {
-    // this won't really work with dark mode
-    backgroundColor: colors.greyLight,
-    height: 16,
-    marginBottom: globalMargins.tiny,
-    marginTop: globalMargins.tiny,
-  },
   mediumSubNavWidth: 260,
   mediumWidth: 400,
-  shortSubNavWidth: 160,
 }
 
 const utilNative = {
   ...utilBase,
-  largeWidthPercent: '70%' as const,
-  loadingTextStyle: {
-    backgroundColor: colors.greyLight,
-    height: 16,
-  },
   mediumSubNavWidth: (isTablet ? 270 : '100%') as CSS.DimensionValue,
   mediumWidth: (isTablet ? 460 : '100%') as CSS.DimensionValue,
-  shortSubNavWidth: (isTablet ? 162 : '100%') as CSS.DimensionValue,
 }
 
 const util = isMobile ? utilNative : utilDesktop
@@ -276,13 +262,10 @@ export const globalStyles = {
 
 // ─── Platform-specific style collections ──────────────────────────────────────
 
-export const mobileStyles = {}
 export const desktopStyles = isMobile
   ? {
       boxShadow: {},
       clickable: {},
-      editable: {},
-      fadeOpacity: {},
       noSelect: {},
       scrollable: {},
       windowDragging: {},
@@ -293,8 +276,6 @@ export const desktopStyles = isMobile
         return {boxShadow: `0 2px 5px 0 ${themed.black_20OrBlack}`}
       },
       clickable: {cursor: 'pointer' as const},
-      editable: {cursor: 'text' as const},
-      fadeOpacity: {transition: 'opacity .25s ease-in-out' as const},
       noSelect: {userSelect: 'none' as const},
       scrollable: {overflowY: 'auto' as const},
       windowDragging: {
@@ -312,8 +293,6 @@ export const desktopStyles = isMobile
 export const transition = (...properties: Array<string>) =>
   isMobile ? {} : {transition: properties.map(p => `${p} 0.1s ease-out`).join(', ')}
 
-export const transitionColor = () => (isMobile ? {} : {transition: 'background 0.2s linear'})
-
 // ─── Desktop initializer (DOM manipulation — desktop only) ────────────────────
 
 export const initDesktopStyles = () => {
@@ -408,6 +387,27 @@ export function styleSheetCreate(styles: () => NamedStyles): NamedStyles {
 
 // ─── collapseStyles ───────────────────────────────────────────────────────────
 
+// Always returns a plain merged object (also used directly with DOM style props on desktop).
+// Fast path for a single style that passes. Often we do stuff like
+// collapseStyle([styles.myStyle, this.props.something && {backgroundColor: 'red'}]), so in the false
+// case we can just take styles.myStyle and not render thrash
+export const collapseStylesDesktop = (styles: ReadonlyArray<unknown>): object | undefined => {
+  const valid = styles.filter(s => {
+    return !!s && Object.keys(s).length
+  })
+  if (valid.length === 0) {
+    return undefined
+  }
+  if (valid.length === 1) {
+    const s = valid[0]
+    if (typeof s === 'object') {
+      return s as object
+    }
+  }
+  const s = Object.assign({}, ...styles.flat()) as object
+  return Object.keys(s).length ? s : undefined
+}
+
 export const collapseStyles = isMobile
   ? (styles: ReadonlyArray<unknown>): CSS.StylesCrossPlatform => {
       const nonNull = styles.filter(s => {
@@ -430,52 +430,14 @@ export const collapseStyles = isMobile
       }
       return styles as CSS.StylesCrossPlatform
     }
-  : (styles: ReadonlyArray<unknown>): CSS.StylesCrossPlatform => {
-      // fast path for a single style that passes. Often we do stuff like
-      // collapseStyle([styles.myStyle, this.props.something && {backgroundColor: 'red'}]), so in the false
-      // case we can just take styles.myStyle and not render thrash
-      const valid = styles.filter(s => {
-        return !!s && Object.keys(s).length
-      })
-      if (valid.length === 0) {
-        return undefined
-      }
-      if (valid.length === 1) {
-        const s = valid[0]
-        if (typeof s === 'object') {
-          return s as CSS.StylesCrossPlatform
-        }
-      }
-
-      // jenkins doesn't support flat yet
-      const s = Object.assign({}, ...styles.flat()) as CSS.StylesCrossPlatform
-      return s && Object.keys(s).length ? s : undefined
-    }
-
-// Desktop-specific version that always returns a plain object (for use with DOM style props).
-export const collapseStylesDesktop = (styles: ReadonlyArray<unknown>): object | undefined => {
-  const valid = styles.filter(s => {
-    return !!s && Object.keys(s).length
-  })
-  if (valid.length === 0) {
-    return undefined
-  }
-  if (valid.length === 1) {
-    const s = valid[0]
-    if (typeof s === 'object') {
-      return s as object
-    }
-  }
-  const s = Object.assign({}, ...styles.flat()) as object
-  return Object.keys(s).length ? s : undefined
-}
+  : (styles: ReadonlyArray<unknown>): CSS.StylesCrossPlatform =>
+      collapseStylesDesktop(styles) as CSS.StylesCrossPlatform
 
 // ─── Platform constants ───────────────────────────────────────────────────────
 
 export const borderRadius = isMobile ? 6 : 4
 export const dimensionWidth = isMobile ? Dimensions.get('window').width : 0
 export const dimensionHeight = isMobile ? Dimensions.get('window').height : 0
-export const headerExtraHeight = isMobile ? (isTablet ? 16 : 0) : 0
 
 // ─── Path utilities ───────────────────────────────────────────────────────────
 
diff --git a/shared/styles/keyboard-state.tsx b/shared/styles/keyboard-state.tsx
deleted file mode 100644
index 12ded7264343..000000000000
--- a/shared/styles/keyboard-state.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-// Keep track of keyboard state, ran by the StateHelper in main app
-// Keyboard.isVisible() internal bookkeeping is actually racy and can't be trusted
-let _up = false
-
-export const setKeyboardUp = (up: boolean) => {
-  _up = up
-}
-export const getKeyboardUp = () => _up
diff --git a/shared/styles/shared.tsx b/shared/styles/shared.tsx
deleted file mode 100644
index 19b43ac4ab01..000000000000
--- a/shared/styles/shared.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import {themed as globalColors} from './colors'
-import {isTablet, isPhone} from '@/constants/platform'
-import type {_StylesCrossPlatform, _StylesMobile, _StylesDesktop} from './css'
-import type {Background} from '@/common-adapters/text.shared'
-
- 
-export const globalMargins = {
-  xxtiny: 2,
-  xtiny: 4,
-  tiny: 8,
-  xsmall: 12,
-  small: 16,
-  medium: 24,
-  mediumLarge: 32,
-  large: 40,
-  xlarge: 64,
-} as const
- 
-
-export const backgroundModeToColor = {
-  get Announcements() {
-    return globalColors.blue
-  },
-  get Documentation() {
-    return globalColors.blueDarker
-  },
-  get HighRisk() {
-    return globalColors.red
-  },
-  get Information() {
-    return globalColors.yellow
-  },
-  get Normal() {
-    return globalColors.white
-  },
-  get Success() {
-    return globalColors.green
-  },
-  get Terminal() {
-    return globalColors.blueDarker2
-  },
-}
-
-export const backgroundModeToTextColor = (backgroundMode: Background) => {
-  switch (backgroundMode) {
-    case 'Information':
-      return globalColors.brown_75
-    case 'Normal':
-      return globalColors.black
-    case 'Terminal':
-      return globalColors.blueLighter
-    default:
-      return globalColors.white
-  }
-}
-
-const flexCommon = isMobile ? {} : ({display: 'flex'} as const)
-export const util = {
-  fillAbsolute: {inset: 0, position: 'absolute'},
-  flexBoxCenter: {...flexCommon, alignItems: 'center', justifyContent: 'center'},
-  flexBoxColumn: {...flexCommon, flexDirection: 'column'},
-  flexBoxColumnReverse: {...flexCommon, flexDirection: 'column-reverse'},
-  flexBoxRow: {...flexCommon, flexDirection: 'row'},
-  flexBoxRowReverse: {...flexCommon, flexDirection: 'row-reverse'},
-  flexGrow: {flexGrow: 1},
-  flexOne: {flex: 1},
-  flexWrap: {flexWrap: 'wrap'},
-  fullHeight: {height: '100%'},
-  fullWidth: {width: '100%'},
-  opacity0: {opacity: 0},
-  positionRelative: {position: 'relative'},
-  rounded: {borderRadius: 3},
-} as const
-
-// Take common styles and make them work on both. Deals with special cases in lineHeight and etc
-type Unified<T> = {
-  [P in keyof T]: P extends 'lineHeight' ? _StylesCrossPlatform[P] : T[P]
-}
-function unifyStyles<T extends {[key: string]: unknown}>(s: T): Unified<T> {
-  // only mutate this if we need to
-  if (!isMobile && Object.hasOwn(s, 'lineHeight') && typeof s['lineHeight'] === 'number') {
-    return {
-      ...s,
-      lineHeight: s['lineHeight'] === 0 ? '0' : `${s['lineHeight']}px`,
-    } as Unified<T>
-  }
-  return s as Unified<T>
-}
-
-// This is a better literal to literal inferrer but is too slow
-// type Both<X, Y> = {
-//   [P in keyof X | keyof Y]: P extends keyof X
-//     ? P extends keyof Y
-//       ? X[P] | Y[P] // both
-//       : X[P]
-//     : P extends keyof Y
-//     ? Y[P]
-//     : undefined
-// }
-// type AsObj<T> = T extends object ? T : never
-
-// export function platformStyles<
-//   T extends {
-//     common: any
-//     isMobile?: any
-//     isPhone?: any
-//     isTablet?: any
-//     isIOS?: any
-//     isAndroid?: any
-//     isElectron?: any
-//   },
-//   C = T extends {common: infer J} ? J : never,
-//   M = T extends {isMobile: infer J} ? J : never,
-//   P = T extends {isPhone: infer J} ? J : never,
-//   Tab = T extends {isTablet: infer J} ? J : never,
-//   A = T extends {isAndroid: infer J} ? J : never,
-//   I = T extends {isIOS: infer J} ? J : never,
-//   E = T extends {isElectron: infer J} ? J : never,
-//   Elec = Util.Assign<AsObj<C>, AsObj<E>>,
-//   Mob = Util.Assign<
-//     Util.Assign<Util.Assign<Util.Assign<Util.Assign<AsObj<C>, AsObj<I>>, AsObj<M>>, AsObj<P>>, AsObj<Tab>>,
-//     AsObj<A>
-//   >,
-//   OUT = Both<Elec, Mob>
-// >(o: T): OUT {
-//   return {
-//     ...(o.common ? unifyStyles(o.common) : {}),
-//     ...(isMobile && o.isMobile ? o.isMobile : {}),
-//     ...(isIOS && o.isIOS ? o.isIOS : {}),
-//     ...(isAndroid && o.isAndroid ? o.isAndroid : {}),
-//     ...(isPhone && o.isPhone ? o.isPhone : {}),
-//     ...(isTablet && o.isTablet ? o.isTablet : {}),
-//     ...(isElectron && o.isElectron ? unifyStyles(o.isElectron) : {}),
-//   } as OUT
-// }
-
-const nostyle = {} as const
-export function platformStyles<
-  T extends {
-    common?: _StylesCrossPlatform
-    isMobile?: _StylesMobile
-    isPhone?: _StylesMobile
-    isTablet?: _StylesMobile
-    isIOS?: _StylesMobile
-    isAndroid?: _StylesMobile
-    isElectron?: _StylesDesktop
-  },
-  OUT = _StylesCrossPlatform,
->(o: T): OUT {
-  const ss = [
-    ...(o.common ? [unifyStyles(o.common)] : []),
-    ...(isMobile && o.isMobile ? [o.isMobile] : []),
-    ...(isIOS && o.isIOS ? [o.isIOS] : []),
-    ...(isAndroid && o.isAndroid ? [o.isAndroid] : []),
-    ...(isPhone && o.isPhone ? [o.isPhone] : []),
-    ...(isTablet && o.isTablet ? [o.isTablet] : []),
-    ...(isElectron && o.isElectron ? [unifyStyles(o.isElectron)] : []),
-  ]
-  const fss = ss.filter(Boolean)
-  if (fss.length === 0) {
-    return nostyle as OUT
-  }
-  // special common case for just per platform styles
-  if (fss.length === 1) {
-    const out = fss[0] as OUT
-    return out
-  }
-
-  const out = Object.assign({}, ...fss) as OUT
-  return out
-}
-
- 
-export const padding = (top: number, right?: number, bottom?: number, left?: number) => ({
-  paddingTop: top,
-  paddingRight: right !== undefined ? right : top,
-  paddingBottom: bottom !== undefined ? bottom : top,
-  paddingLeft: left !== undefined ? left : right !== undefined ? right : top,
-})
diff --git a/shared/team-building/index.tsx b/shared/team-building/index.tsx
index 75aabcfa989c..163a6e6a9c67 100644
--- a/shared/team-building/index.tsx
+++ b/shared/team-building/index.tsx
@@ -314,7 +314,7 @@ const TeamBuilding = ({
     />
   )
 
-  const errorBanner = !!error && <Kb.Banner color="red">{error}</Kb.Banner>
+  const errorBanner = <Kb.ErrorBanner error={error} />
   const showContactsBanner = shouldShowContactsBanner(filterServices)
 
   return (
diff --git a/shared/teams/actions.tsx b/shared/teams/actions.tsx
index e810e4351879..187cdbd9acde 100644
--- a/shared/teams/actions.tsx
+++ b/shared/teams/actions.tsx
@@ -1,21 +1,42 @@
 import * as S from '@/constants/strings'
 import * as T from '@/constants/types'
 import {ignorePromise} from '@/constants/utils'
-import {
-  clearModals,
-  navigateAppend,
-  navigateUp,
-  navToProfile,
-  navUpToScreen,
-} from '@/constants/router'
+import {clearModals, navigateAppend, navigateUp, navUpToScreen} from '@/constants/router'
 import logger from '@/logger'
 import {RPCError, logError} from '@/util/errors'
 import {fixCrop} from '@/util/crop'
-import {useConfigState} from '@/stores/config'
 
 const newRequestsGregorPrefix = 'team.request_access:'
 const newRequestsGregorKey = (teamID: T.Teams.TeamID) => `${newRequestsGregorPrefix}${teamID}`
 
+// navigate to the contactRestricted screen for members skipped by an add-members RPC
+export const handleNotAdded = (notAdded?: ReadonlyArray<{username: string}>) => {
+  const usernames = notAdded?.map(elem => elem.username) ?? []
+  if (usernames.length) {
+    navigateAppend({
+      name: 'contactRestricted',
+      params: {source: 'teamAddSomeFailed', usernames},
+    })
+  }
+}
+
+// returns true (after navigating) when an add-members RPC failed because of the
+// targets' contact settings; other errors are the caller's to handle
+export const handleContactSettingsBlock = (error: RPCError) => {
+  if (error.code !== T.RPCGen.StatusCode.scteamcontactsettingsblock) {
+    return false
+  }
+  const users = (error.fields as Array<{key?: string; value?: string} | undefined> | undefined)
+    ?.filter(elem => elem?.key === 'usernames')
+    .map(elem => elem?.value)
+  const usernames = users?.[0]?.split(',') ?? []
+  navigateAppend({
+    name: 'contactRestricted',
+    params: {source: 'teamAddAllFailed', usernames},
+  })
+  return true
+}
+
 export const addToTeam = (
   teamID: T.Teams.TeamID,
   users: Array<{assertion: string; role: T.Teams.TeamRoleType}>,
@@ -37,29 +58,14 @@ export const addToTeam = (
           S.waitingKeyTeamsAddMember(teamID, ...users.map(({assertion}) => assertion)),
         ]
       )
-      if (res.notAdded && res.notAdded.length > 0) {
-        const usernames = res.notAdded.map(elem => elem.username)
-        navigateAppend({
-          name: 'contactRestricted',
-          params: {source: 'teamAddSomeFailed', usernames},
-        })
-      }
+      handleNotAdded(res.notAdded ?? undefined)
     } catch (error) {
       if (!(error instanceof RPCError)) {
         return
       }
-      if (error.code === T.RPCGen.StatusCode.scteamcontactsettingsblock) {
-        const users = (error.fields as Array<{key?: string; value?: string} | undefined> | undefined)
-          ?.filter(elem => elem?.key === 'usernames')
-          .map(elem => elem?.value)
-        const usernames = users?.[0]?.split(',') ?? []
-        navigateAppend({
-          name: 'contactRestricted',
-          params: {source: 'teamAddAllFailed', usernames},
-        })
+      if (handleContactSettingsBlock(error)) {
         return
       }
-
       logger.error(`addToTeam failed for ${teamID}: ${error.desc}`)
     }
   }
@@ -128,22 +134,6 @@ export const leaveTeam = (teamname: string, permanent: boolean, context: 'teams'
   ignorePromise(f())
 }
 
-export const reAddToTeam = (teamID: T.Teams.TeamID, username: string) => {
-  const f = async () => {
-    try {
-      await T.RPCGen.teamsTeamReAddMemberAfterResetRpcPromise(
-        {id: teamID, username},
-        S.waitingKeyTeamsAddMember(teamID, username)
-      )
-    } catch (error) {
-      if (error instanceof RPCError && error.code === T.RPCGen.StatusCode.scidentifysummaryerror) {
-        navToProfile(username)
-      }
-    }
-  }
-  ignorePromise(f())
-}
-
 export const removeMember = (teamID: T.Teams.TeamID, username: string) => {
   const f = async () => {
     try {
@@ -192,38 +182,6 @@ export const renameTeam = (oldName: string, newNameString: string) => {
   ignorePromise(f())
 }
 
-export const saveChannelMembership = (
-  teamID: T.Teams.TeamID,
-  oldChannelState: T.Teams.ChannelMembershipState,
-  newChannelState: T.Teams.ChannelMembershipState
-) => {
-  const f = async () => {
-    const waitingKey = S.waitingKeyTeamsTeam(teamID)
-    for (const convIDKeyStr in newChannelState) {
-      const conversationIDKey = T.Chat.stringToConversationIDKey(convIDKeyStr)
-      if (oldChannelState[conversationIDKey] === newChannelState[conversationIDKey]) {
-        continue
-      }
-      if (newChannelState[conversationIDKey]) {
-        try {
-          const convID = T.Chat.keyToConversationID(conversationIDKey)
-          await T.RPCChat.localJoinConversationByIDLocalRpcPromise({convID}, waitingKey)
-        } catch (error) {
-          useConfigState.getState().dispatch.setGlobalError(error)
-        }
-      } else {
-        try {
-          const convID = T.Chat.keyToConversationID(conversationIDKey)
-          await T.RPCChat.localLeaveConversationLocalRpcPromise({convID}, waitingKey)
-        } catch (error) {
-          useConfigState.getState().dispatch.setGlobalError(error)
-        }
-      }
-    }
-  }
-  ignorePromise(f())
-}
-
 export const setMemberPublicity = (teamID: T.Teams.TeamID, showcase: boolean) => {
   const f = async () => {
     try {
diff --git a/shared/teams/add-members-wizard/add-contacts.tsx b/shared/teams/add-members-wizard/add-contacts.tsx
index 09f5c88428ff..5152835c3ca0 100644
--- a/shared/teams/add-members-wizard/add-contacts.tsx
+++ b/shared/teams/add-members-wizard/add-contacts.tsx
@@ -4,16 +4,8 @@ import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import {pluralize} from '@/util/string'
 import {useModalHeaderState} from '@/stores/modal-header'
-import {addMembersToWizard, type AddMembersWizard} from './state'
-
-type Contact = {
-  id: string
-  name: string
-  pictureUri?: string
-  type: 'phone' | 'email'
-  value: string
-  valueFormatted?: string
-}
+import {addMembersToWizardAndNav, searchResultsToMembers, type AddMembersWizard} from './state'
+import type {Contact} from '../common/use-contacts.native'
 
 type ContactsListProps = {
   onSelect: (contact: Contact, checked: boolean) => void
@@ -39,19 +31,6 @@ const {
   EnableContactsPopup,
 } = (isMobile ? require('../common/contacts-list.native') : {}) as ContactsModule
 
-const addPreparedMembersToWizard = async (
-  wizard: AddMembersWizard,
-  members: Parameters<typeof addMembersToWizard>[1],
-  onError: (message: string) => void
-) => {
-  try {
-    const nextWizard = await addMembersToWizard(wizard, members)
-    C.Router2.navUpToScreen({name: 'teamAddToTeamConfirm', params: {wizard: nextWizard}}, true)
-  } catch (err) {
-    onError(err instanceof Error ? err.message : String(err))
-  }
-}
-
 const AddContactsMobile = ({wizard}: {wizard: AddMembersWizard}) => {
   const onBack = C.Router2.navigateUp
   const [search, setSearch] = React.useState('')
@@ -95,12 +74,8 @@ const AddContactsMobile = ({wizard}: {wizard: AddMembersWizard}) => {
         [{emails: [...selectedEmails].join(','), phoneNumbers: [...selectedPhones]}],
         r => {
           if (r?.length) {
-            const members = r.map(m => ({
-              ...(m.foundUser ? {assertion: m.username, resolvedFrom: m.assertion} : {assertion: m.assertion}),
-              role: 'writer' as const,
-            }))
             C.ignorePromise(
-              addPreparedMembersToWizard(wizard, members, message => {
+              addMembersToWizardAndNav(wizard, searchResultsToMembers(r), message => {
                 setWaiting(false)
                 setError(message)
               })
@@ -129,11 +104,7 @@ const AddContactsMobile = ({wizard}: {wizard: AddMembersWizard}) => {
 
   return (
     <>
-      {error ? (
-        <Kb.Banner color="red" key="err">
-          {error}
-        </Kb.Banner>
-      ) : null}
+      <Kb.ErrorBanner error={error} />
       <Kb.SearchFilter
         size="small"
         onChange={setSearch}
diff --git a/shared/teams/add-members-wizard/add-email.tsx b/shared/teams/add-members-wizard/add-email.tsx
index 57a8c35f9b50..5d3a77aff644 100644
--- a/shared/teams/add-members-wizard/add-email.tsx
+++ b/shared/teams/add-members-wizard/add-email.tsx
@@ -2,7 +2,7 @@ import * as C from '@/constants'
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
-import {addMembersToWizard, type AddMembersWizard} from './state'
+import {addMembersToWizardAndNav, searchResultsToMembers, type AddMembersWizard} from './state'
 
 type Props = {
   wizard: AddMembersWizard
@@ -16,7 +16,6 @@ const AddEmail = (props: Props) => {
   const [error, setError] = React.useState('')
   const disabled = invitees.length < 1
   const waiting = C.Waiting.useAnyWaiting(waitingKey)
-  const navUpToScreen = C.Router2.navUpToScreen
 
   const emailsToAssertionsRPC = C.useRPC(T.RPCGen.userSearchBulkEmailOrPhoneSearchRpcPromise)
   const onContinue = () => {
@@ -28,21 +27,7 @@ const AddEmail = (props: Props) => {
           setError('You must enter at least one valid email address.')
           return
         }
-        const f = async () => {
-          try {
-            const wizard = await addMembersToWizard(
-              props.wizard,
-              r.map(m => ({
-                ...(m.foundUser ? {assertion: m.username, resolvedFrom: m.assertion} : {assertion: m.assertion}),
-                role: 'writer',
-              }))
-            )
-            navUpToScreen({name: 'teamAddToTeamConfirm', params: {wizard}}, true)
-          } catch (err) {
-            setError(err instanceof Error ? err.message : String(err))
-          }
-        }
-        C.ignorePromise(f())
+        C.ignorePromise(addMembersToWizardAndNav(props.wizard, searchResultsToMembers(r), setError))
       },
       err => setError(err.message)
     )
@@ -56,11 +41,7 @@ const AddEmail = (props: Props) => {
 
   return (
     <>
-      {error ? (
-        <Kb.Banner color="red" key="err">
-          {error}
-        </Kb.Banner>
-      ) : null}
+      <Kb.ErrorBanner error={error} />
       <Kb.Box2
         direction="vertical"
         fullWidth={true}
diff --git a/shared/teams/add-members-wizard/add-from-where.tsx b/shared/teams/add-members-wizard/add-from-where.tsx
index f70b951dad3d..0fff470df4e6 100644
--- a/shared/teams/add-members-wizard/add-from-where.tsx
+++ b/shared/teams/add-members-wizard/add-from-where.tsx
@@ -2,6 +2,7 @@ import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import {type AddMembersWizard} from './state'
+import CardChoice from '../common/card-choice'
 import {useSafeNavigation} from '@/util/safe-navigation'
 
 type Props = {
@@ -31,11 +32,7 @@ const AddFromWhere = ({wizard}: Props) => {
 
   return (
     <>
-      {createTeamError ? (
-        <Kb.Banner color="red" key="err">
-          {createTeamError}
-        </Kb.Banner>
-      ) : null}
+      <Kb.ErrorBanner error={createTeamError} />
       <Kb.Box2
         direction="vertical"
         gap={isMobile ? 'tiny' : 'xsmall'}
@@ -45,54 +42,30 @@ const AddFromWhere = ({wizard}: Props) => {
         <Kb.Text type="Body">
           {isNewTeam ? 'Where will your first team members come from?' : 'How would you like to add people?'}
         </Kb.Text>
-        <Kb.ListItem
-          type="Card"
-          firstItem={true}
-          icon={<Kb.IconAuto type="icon-teams-add-search-64" />}
-          body={
-            <Kb.Box2 direction="vertical" fullWidth={true}>
-              <Kb.Text type="BodySemibold">From Keybase</Kb.Text>
-              <Kb.Text type="BodySmall">Search users by username.</Kb.Text>
-            </Kb.Box2>
-          }
+        <CardChoice
+          icon="icon-teams-add-search-64"
+          title="From Keybase"
+          subtitle="Search users by username."
           onClick={onContinueKeybase}
         />
-        <Kb.ListItem
-          type="Card"
-          firstItem={true}
-          icon={<Kb.IconAuto type="icon-teams-add-email-list-64" />}
-          body={
-            <Kb.Box2 direction="vertical" fullWidth={true}>
-              <Kb.Text type="BodySemibold">A list of email addresses</Kb.Text>
-              <Kb.Text type="BodySmall">Enter one or multiple email addresses.</Kb.Text>
-            </Kb.Box2>
-          }
+        <CardChoice
+          icon="icon-teams-add-email-list-64"
+          title="A list of email addresses"
+          subtitle="Enter one or multiple email addresses."
           onClick={onContinueEmail}
         />
         {isMobile && (
-          <Kb.ListItem
-            type="Card"
-            firstItem={true}
-            icon={<Kb.IconAuto type="icon-teams-add-phone-contacts-64" />}
-            body={
-              <Kb.Box2 direction="vertical" fullWidth={true}>
-                <Kb.Text type="BodySemibold">From your contacts</Kb.Text>
-                <Kb.Text type="BodySmall">Add your friends, family, or colleagues.</Kb.Text>
-              </Kb.Box2>
-            }
+          <CardChoice
+            icon="icon-teams-add-phone-contacts-64"
+            title="From your contacts"
+            subtitle="Add your friends, family, or colleagues."
             onClick={onContinueContacts}
           />
         )}
-        <Kb.ListItem
-          type="Card"
-          firstItem={true}
-          icon={<Kb.IconAuto type="icon-teams-add-number-list-64" />}
-          body={
-            <Kb.Box2 direction="vertical" fullWidth={true}>
-              <Kb.Text type="BodySemibold">A list of phone numbers</Kb.Text>
-              <Kb.Text type="BodySmall">Enter one or multiple phone numbers</Kb.Text>
-            </Kb.Box2>
-          }
+        <CardChoice
+          icon="icon-teams-add-number-list-64"
+          title="A list of phone numbers"
+          subtitle="Enter one or multiple phone numbers"
           onClick={onContinuePhone}
         />
       </Kb.Box2>
diff --git a/shared/teams/add-members-wizard/add-phone.tsx b/shared/teams/add-members-wizard/add-phone.tsx
index bea463f1c0e9..5b9a7ceae88e 100644
--- a/shared/teams/add-members-wizard/add-phone.tsx
+++ b/shared/teams/add-members-wizard/add-phone.tsx
@@ -4,7 +4,7 @@ import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import {usePhoneNumberList} from '../common'
 import {useDefaultPhoneCountry} from '@/util/phone-numbers'
-import {addMembersToWizard, type AddMembersWizard} from './state'
+import {addMembersToWizardAndNav, searchResultsToMembers, type AddMembersWizard} from './state'
 
 const waitingKey = 'phoneLookup'
 
@@ -18,7 +18,6 @@ const AddPhone = ({wizard}: {wizard: AddMembersWizard}) => {
   const defaultCountry = useDefaultPhoneCountry()
 
   const emailsToAssertionsRPC = C.useRPC(T.RPCGen.userSearchBulkEmailOrPhoneSearchRpcPromise)
-  const navUpToScreen = C.Router2.navUpToScreen
   const onContinue = () => {
     setError('')
     emailsToAssertionsRPC(
@@ -28,21 +27,7 @@ const AddPhone = ({wizard}: {wizard: AddMembersWizard}) => {
           setError('You must enter at least one valid phone number.')
           return
         }
-        const f = async () => {
-          try {
-            const nextWizard = await addMembersToWizard(
-              wizard,
-              r.map(m => ({
-                ...(m.foundUser ? {assertion: m.username, resolvedFrom: m.assertion} : {assertion: m.assertion}),
-                role: 'writer',
-              }))
-            )
-            navUpToScreen({name: 'teamAddToTeamConfirm', params: {wizard: nextWizard}}, true)
-          } catch (err) {
-            setError(err instanceof Error ? err.message : String(err))
-          }
-        }
-        C.ignorePromise(f())
+        C.ignorePromise(addMembersToWizardAndNav(wizard, searchResultsToMembers(r), setError))
       },
       err => setError(err.message)
     )
@@ -56,11 +41,7 @@ const AddPhone = ({wizard}: {wizard: AddMembersWizard}) => {
 
   return (
     <>
-      {error ? (
-        <Kb.Banner color="red" key="err">
-          {error}
-        </Kb.Banner>
-      ) : null}
+      <Kb.ErrorBanner error={error} />
       <Kb.Box2 direction="vertical" fullWidth={true} style={styles.body} gap="tiny">
         <Kb.Text type="Body">Enter one or multiple phone numbers:</Kb.Text>
         <Kb.Box2 direction="vertical" gap="medium" fullWidth={true} alignItems="flex-start">
diff --git a/shared/teams/add-members-wizard/adding-members.tsx b/shared/teams/add-members-wizard/adding-members.tsx
new file mode 100644
index 000000000000..6fdc32b73f10
--- /dev/null
+++ b/shared/teams/add-members-wizard/adding-members.tsx
@@ -0,0 +1,197 @@
+import * as C from '@/constants'
+import * as React from 'react'
+import * as Kb from '@/common-adapters'
+import type * as T from '@/constants/types'
+import {assertionToDisplay} from '@/common-adapters/usernames'
+import capitalize from 'lodash/capitalize'
+import {FloatingRolePicker} from '../role-picker'
+import {removeWizardMember, setWizardIndividualRole, type AddMembersWizard} from './state'
+
+export type DisabledRoles = React.ComponentProps<typeof FloatingRolePicker>['disabledRoles']
+
+const disabledRolesForPhoneEmailIndividual = {
+  admin: 'Only Keybase users can be added as admins.',
+}
+
+// the collapsible pill list of everyone about to be added
+const AddingMembers = ({
+  disabledRoles,
+  updateWizard,
+  wizard,
+}: {
+  disabledRoles: DisabledRoles
+  updateWizard: (wizard: AddMembersWizard) => void
+  wizard: AddMembersWizard
+}) => {
+  const {addingMembers} = wizard
+  const [expanded, setExpanded] = React.useState(false)
+  const showDivider = isMobile && addingMembers.length > 4
+  const aboveDivider = isMobile ? addingMembers.slice(0, 4) : addingMembers
+  const belowDivider = isMobile && expanded ? addingMembers.slice(4) : []
+  const toggleExpanded = () => {
+    if (isMobile) {
+      Kb.LayoutAnimation.configureNext(Kb.LayoutAnimation.Presets.easeInEaseOut)
+    }
+    setExpanded(!expanded)
+  }
+  const content = (
+    <Kb.Box2
+      direction="vertical"
+      fullWidth={true}
+      gap={isMobile ? 'tiny' : 'xtiny'}
+      style={isMobile ? styles.addingMembers : undefined}
+    >
+      {aboveDivider.map(toAdd => (
+        <AddingMember
+          key={toAdd.assertion}
+          {...toAdd}
+          lastMember={addingMembers.length === 1}
+          disabledRoles={disabledRoles}
+          updateWizard={updateWizard}
+          wizard={wizard}
+        />
+      ))}
+      {showDivider && (
+        <Kb.ClickableBox onClick={toggleExpanded} direction="horizontal" alignSelf="stretch" style={styles.addingMemberDivider} centerChildren={true}>
+          <Kb.Text type="BodySemibold" negative={true}>
+            {expanded ? 'Show less' : `+${addingMembers.length - 4} more`}
+          </Kb.Text>
+        </Kb.ClickableBox>
+      )}
+      {expanded &&
+        belowDivider.map(toAdd => (
+          <AddingMember
+            key={toAdd.assertion}
+            {...toAdd}
+            disabledRoles={disabledRoles}
+            updateWizard={updateWizard}
+            wizard={wizard}
+          />
+        ))}
+    </Kb.Box2>
+  )
+  if (isMobile) {
+    return content
+  }
+  return <Kb.ScrollView style={styles.addingMembers}>{content}</Kb.ScrollView>
+}
+
+const AddingMember = (
+  props: T.Teams.AddingMember & {
+    disabledRoles: DisabledRoles
+    lastMember?: boolean
+    updateWizard: (wizard: AddMembersWizard) => void
+    wizard: AddMembersWizard
+  }
+) => {
+  const {wizard, updateWizard} = props
+  const role = wizard.role
+  const individualRole =
+    wizard.addingMembers.find(member => member.assertion === props.assertion)?.role ??
+    (role === 'setIndividually' ? 'writer' : role)
+  const onRemove = () => {
+    const nextWizard = removeWizardMember(wizard, props.assertion)
+    if (props.lastMember) {
+      C.Router2.navUpToScreen({name: 'teamAddToTeamFromWhere', params: {wizard: nextWizard}}, true)
+      return
+    }
+    updateWizard(nextWizard)
+  }
+  const isPhoneEmail = props.assertion.endsWith('@phone') || props.assertion.endsWith('@email')
+  const showDropdown = role === 'setIndividually'
+  const [showingMenu, setShowingMenu] = React.useState(false)
+  const [rolePickerRole, setRole] = React.useState(individualRole)
+  const onOpenRolePicker = () => {
+    setRole(individualRole)
+    setShowingMenu(true)
+  }
+
+  const onConfirmRole = (newRole: typeof rolePickerRole) => {
+    setRole(newRole)
+    setShowingMenu(false)
+    updateWizard(setWizardIndividualRole(wizard, props.assertion, newRole))
+  }
+  return (
+    <Kb.Box2 direction="horizontal" alignSelf="stretch" alignItems="center" style={styles.addingMember} justifyContent="space-between">
+      <Kb.Box2 direction="horizontal" alignItems="center" gap="tiny" flex={1} style={styles.memberPill}>
+        <Kb.Avatar size={16} username={props.assertion} />
+        <Kb.ConnectedUsernames
+          type="BodyBold"
+          inline={true}
+          lineClamp={1}
+          usernames={[props.assertion]}
+          colorFollowing={true}
+          containerStyle={styles.flexShrink}
+          style={styles.flexShrink}
+        />
+        {props.resolvedFrom && (
+          <Kb.Text lineClamp={1} type="BodySemibold" style={styles.flexDefinitelyShrink}>
+            ({assertionToDisplay(props.resolvedFrom)})
+          </Kb.Text>
+        )}
+      </Kb.Box2>
+      <Kb.Box2 direction="horizontal" alignItems="center" gap="tiny">
+        {showDropdown && (
+          <FloatingRolePicker
+            open={showingMenu}
+            presetRole={individualRole}
+            onCancel={individualRole === rolePickerRole ? () => setShowingMenu(false) : undefined}
+            onConfirm={onConfirmRole}
+            disabledRoles={isPhoneEmail ? disabledRolesForPhoneEmailIndividual : props.disabledRoles}
+          >
+            <Kb.InlineDropdown
+              textWrapperType="BodySmallSemibold"
+              onPress={onOpenRolePicker}
+              label={capitalize(individualRole)}
+            />
+          </FloatingRolePicker>
+        )}
+        <Kb.Icon type="iconfont-remove" sizeType="Small" onClick={onRemove} />
+      </Kb.Box2>
+    </Kb.Box2>
+  )
+}
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  addingMember: Kb.Styles.platformStyles({
+    common: {
+      backgroundColor: Kb.Styles.globalColors.white,
+      borderRadius: Kb.Styles.borderRadius,
+    },
+    isElectron: {
+      height: 32,
+      ...Kb.Styles.paddingH(Kb.Styles.globalMargins.tiny),
+    },
+    isMobile: {
+      height: 40,
+      paddingLeft: Kb.Styles.globalMargins.tiny,
+      paddingRight: Kb.Styles.globalMargins.xsmall,
+    },
+  }),
+  addingMemberDivider: {
+    backgroundColor: Kb.Styles.globalColors.black_20,
+    borderRadius: Kb.Styles.borderRadius,
+    height: 40,
+  },
+  addingMembers: Kb.Styles.platformStyles({
+    common: {
+      backgroundColor: Kb.Styles.globalColors.blueGreyDark,
+      borderRadius: Kb.Styles.borderRadius,
+    },
+    isElectron: {
+      ...Kb.Styles.padding(
+        Kb.Styles.globalMargins.tiny,
+        Kb.Styles.globalMargins.small,
+        Kb.Styles.globalMargins.tiny,
+        Kb.Styles.globalMargins.tiny
+      ),
+      maxHeight: 168,
+    },
+    isMobile: {padding: Kb.Styles.globalMargins.tiny},
+  }),
+  flexDefinitelyShrink: {flexShrink: 100},
+  flexShrink: {flexShrink: 1},
+  memberPill: {width: 0},
+}))
+
+export default AddingMembers
diff --git a/shared/teams/add-members-wizard/confirm.tsx b/shared/teams/add-members-wizard/confirm.tsx
index 373df8ee7e78..a65e1b9d7ec6 100644
--- a/shared/teams/add-members-wizard/confirm.tsx
+++ b/shared/teams/add-members-wizard/confirm.tsx
@@ -6,31 +6,21 @@ import * as T from '@/constants/types'
 import {assertionToDisplay} from '@/common-adapters/usernames'
 import capitalize from 'lodash/capitalize'
 import {FloatingRolePicker} from '../role-picker'
-import {useDefaultChannels} from '../team/settings-tab/default-channels'
-import {ChannelsWidget} from '../common'
 import {pluralize} from '@/util/string'
 import logger from '@/logger'
 import {useSafeNavigation} from '@/util/safe-navigation'
 import {createNewTeamFromWizard} from '../new-team/wizard/state'
-import {onTeamCreated} from '../create-team-effects'
+import {invalidateLoadedTeams} from '../use-teams-list'
 import {RPCError} from '@/util/errors'
 import {useNavigation} from '@react-navigation/native'
 import {useLoadedTeam} from '../team/use-loaded-team'
-import {
-  removeWizardMember,
-  setWizardDefaultChannels,
-  setWizardIndividualRole,
-  setWizardRole,
-  type AddMembersWizard,
-} from './state'
+import AddingMembers, {type DisabledRoles} from './adding-members'
+import DefaultChannels from './default-channels'
+import {setWizardRole, type AddMembersWizard} from './state'
 
-type DisabledRoles = React.ComponentProps<typeof FloatingRolePicker>['disabledRoles']
 const disabledRolesForNonKeybasePlural = {
   admin: 'Some invitees cannot be added as admins. Only Keybase users can be added as admins.',
 }
-const disabledRolesForPhoneEmailIndividual = {
-  admin: 'Only Keybase users can be added as admins.',
-}
 const disabledRolesSubteam = {
   owner: 'Subteams cannot have owners.',
 }
@@ -95,7 +85,7 @@ const AddMembersConfirm = ({wizard: initialWizard}: Props) => {
         const f = async () => {
           try {
             const teamID = await createNewTeamFromWizard({...newTeamWizard, error: undefined}, addingMembers)
-            onTeamCreated(teamID)
+            invalidateLoadedTeams()
             C.Router2.navigateAppend({name: 'team', params: {justFinishedAddWizard: true, teamID}})
             C.Router2.clearModals()
           } catch (err) {
@@ -325,250 +315,11 @@ const RoleSelector = ({disabledRoles, memberCount, updateWizard, wizard}: RoleSe
   )
 }
 
-const AddingMembers = ({
-  disabledRoles,
-  updateWizard,
-  wizard,
-}: {
-  disabledRoles: DisabledRoles
-  updateWizard: (wizard: AddMembersWizard) => void
-  wizard: AddMembersWizard
-}) => {
-  const {addingMembers} = wizard
-  const [expanded, setExpanded] = React.useState(false)
-  const showDivider = isMobile && addingMembers.length > 4
-  const aboveDivider = isMobile ? addingMembers.slice(0, 4) : addingMembers
-  const belowDivider = isMobile && expanded ? addingMembers.slice(4) : []
-  const toggleExpanded = () => {
-    if (isMobile) {
-      Kb.LayoutAnimation.configureNext(Kb.LayoutAnimation.Presets.easeInEaseOut)
-    }
-    setExpanded(!expanded)
-  }
-  const content = (
-    <Kb.Box2 direction="vertical" fullWidth={true} gap={isMobile ? 'tiny' : 'xtiny'}>
-      {aboveDivider.map(toAdd => (
-        <AddingMember
-          key={toAdd.assertion}
-          {...toAdd}
-          lastMember={addingMembers.length === 1}
-          disabledRoles={disabledRoles}
-          updateWizard={updateWizard}
-          wizard={wizard}
-        />
-      ))}
-      {showDivider && (
-        <Kb.ClickableBox onClick={toggleExpanded} direction="horizontal" alignSelf="stretch" style={styles.addingMemberDivider} centerChildren={true}>
-          <Kb.Text type="BodySemibold" negative={true}>
-            {expanded ? 'Show less' : `+${addingMembers.length - 4} more`}
-          </Kb.Text>
-        </Kb.ClickableBox>
-      )}
-      {expanded &&
-        belowDivider.map(toAdd => (
-          <AddingMember
-            key={toAdd.assertion}
-            {...toAdd}
-            disabledRoles={disabledRoles}
-            updateWizard={updateWizard}
-            wizard={wizard}
-          />
-        ))}
-    </Kb.Box2>
-  )
-  if (isMobile) {
-    return (
-      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.addingMembers}>
-        {content}
-      </Kb.Box2>
-    )
-  }
-  return <Kb.ScrollView style={styles.addingMembers}>{content}</Kb.ScrollView>
-}
-
-const AddingMember = (
-  props: T.Teams.AddingMember & {
-    disabledRoles: DisabledRoles
-    lastMember?: boolean
-    updateWizard: (wizard: AddMembersWizard) => void
-    wizard: AddMembersWizard
-  }
-) => {
-  const {wizard, updateWizard} = props
-  const role = wizard.role
-  const individualRole =
-    wizard.addingMembers.find(member => member.assertion === props.assertion)?.role ??
-    (role === 'setIndividually' ? 'writer' : role)
-  const onRemove = () => {
-    const nextWizard = removeWizardMember(wizard, props.assertion)
-    if (props.lastMember) {
-      C.Router2.navUpToScreen({name: 'teamAddToTeamFromWhere', params: {wizard: nextWizard}}, true)
-      return
-    }
-    updateWizard(nextWizard)
-  }
-  const isPhoneEmail = props.assertion.endsWith('@phone') || props.assertion.endsWith('@email')
-  const showDropdown = role === 'setIndividually'
-  const [showingMenu, setShowingMenu] = React.useState(false)
-  const [rolePickerRole, setRole] = React.useState(individualRole)
-  const onOpenRolePicker = () => {
-    setRole(individualRole)
-    setShowingMenu(true)
-  }
-
-  const onConfirmRole = (newRole: typeof rolePickerRole) => {
-    setRole(newRole)
-    setShowingMenu(false)
-    updateWizard(setWizardIndividualRole(wizard, props.assertion, newRole))
-  }
-  return (
-    <Kb.Box2 direction="horizontal" alignSelf="stretch" alignItems="center" style={styles.addingMember} justifyContent="space-between">
-      <Kb.Box2 direction="horizontal" alignItems="center" gap="tiny" flex={1} style={styles.memberPill}>
-        <Kb.Avatar size={16} username={props.assertion} />
-        <Kb.ConnectedUsernames
-          type="BodyBold"
-          inline={true}
-          lineClamp={1}
-          usernames={[props.assertion]}
-          colorFollowing={true}
-          containerStyle={styles.flexShrink}
-          style={styles.flexShrink}
-        />
-        {props.resolvedFrom && (
-          <Kb.Text lineClamp={1} type="BodySemibold" style={styles.flexDefinitelyShrink}>
-            ({assertionToDisplay(props.resolvedFrom)})
-          </Kb.Text>
-        )}
-      </Kb.Box2>
-      <Kb.Box2 direction="horizontal" alignItems="center" gap="tiny">
-        {showDropdown && (
-          <FloatingRolePicker
-            open={showingMenu}
-            presetRole={individualRole}
-            onCancel={individualRole === rolePickerRole ? () => setShowingMenu(false) : undefined}
-            onConfirm={onConfirmRole}
-            disabledRoles={isPhoneEmail ? disabledRolesForPhoneEmailIndividual : props.disabledRoles}
-          >
-            <Kb.InlineDropdown
-              textWrapperType="BodySmallSemibold"
-              onPress={onOpenRolePicker}
-              label={capitalize(individualRole)}
-            />
-          </FloatingRolePicker>
-        )}
-        <Kb.Icon type="iconfont-remove" sizeType="Small" onClick={onRemove} />
-      </Kb.Box2>
-    </Kb.Box2>
-  )
-}
-
-const DefaultChannels = ({
-  teamID,
-  updateWizard,
-  wizard,
-}: {
-  teamID: T.Teams.TeamID
-  updateWizard: (wizard: AddMembersWizard) => void
-  wizard: AddMembersWizard
-}) => {
-  const {defaultChannels, defaultChannelsWaiting} = useDefaultChannels(teamID)
-  const addToChannels = wizard.addToChannels
-  const allKeybaseUsers = !wizard.addingMembers.some(member => member.assertion.includes('@'))
-  const onChangeFromDefault = () => updateWizard(setWizardDefaultChannels(wizard, []))
-  const onAdd = (toAdd: ReadonlyArray<T.Teams.ChannelNameID>) => {
-    updateWizard(setWizardDefaultChannels(wizard, toAdd))
-  }
-  const onRemove = (toRemove: T.Teams.ChannelNameID) => {
-    updateWizard(setWizardDefaultChannels(wizard, undefined, toRemove))
-  }
-  return (
-    <Kb.Box2 direction="vertical" fullWidth={true} gap="xtiny">
-      <Kb.Text type="BodySmallSemibold">Join channels</Kb.Text>
-      <Kb.Box2 direction="vertical" fullWidth={true}>
-        {defaultChannelsWaiting ? (
-          <Kb.ProgressIndicator />
-        ) : (
-          <>
-            <Kb.Text type="BodySmall">
-              {allKeybaseUsers ? 'Your invitees' : 'Invitees that are Keybase users'} will be added to{' '}
-              {defaultChannels.length} {pluralize('channel', defaultChannels.length)}.
-            </Kb.Text>
-            <Kb.Text type="BodySmall">
-              {defaultChannels.map((channel, index) => (
-                <Kb.Text key={channel.conversationIDKey} type="BodySmallSemibold">
-                  #{channel.channelname}
-                  {defaultChannels.length > 2 && index < defaultChannels.length - 1 && ', '}
-                  {index === defaultChannels.length - 2 && <Kb.Text type="BodySmall"> and </Kb.Text>}
-                </Kb.Text>
-              ))}
-              .{' '}
-              {!addToChannels && (
-                <Kb.Text type="BodySmallPrimaryLink" onClick={onChangeFromDefault}>
-                  Add channels
-                </Kb.Text>
-              )}
-            </Kb.Text>
-          </>
-        )}
-      </Kb.Box2>
-      {addToChannels && (
-        <ChannelsWidget
-          disableGeneral={true}
-          teamID={teamID}
-          channels={addToChannels}
-          disabledChannels={defaultChannels}
-          onAddChannel={onAdd}
-          onRemoveChannel={onRemove}
-        />
-      )}
-    </Kb.Box2>
-  )
-}
-
 const styles = Kb.Styles.styleSheetCreate(() => ({
-  addingMember: Kb.Styles.platformStyles({
-    common: {
-      backgroundColor: Kb.Styles.globalColors.white,
-      borderRadius: Kb.Styles.borderRadius,
-    },
-    isElectron: {
-      height: 32,
-      ...Kb.Styles.paddingH(Kb.Styles.globalMargins.tiny),
-    },
-    isMobile: {
-      height: 40,
-      paddingLeft: Kb.Styles.globalMargins.tiny,
-      paddingRight: Kb.Styles.globalMargins.xsmall,
-    },
-  }),
-  addingMemberDivider: {
-    backgroundColor: Kb.Styles.globalColors.black_20,
-    borderRadius: Kb.Styles.borderRadius,
-    height: 40,
-  },
-  addingMembers: Kb.Styles.platformStyles({
-    common: {
-      backgroundColor: Kb.Styles.globalColors.blueGreyDark,
-      borderRadius: Kb.Styles.borderRadius,
-    },
-    isElectron: {
-      ...Kb.Styles.padding(
-        Kb.Styles.globalMargins.tiny,
-        Kb.Styles.globalMargins.small,
-        Kb.Styles.globalMargins.tiny,
-        Kb.Styles.globalMargins.tiny
-      ),
-      maxHeight: 168,
-    },
-    isMobile: {padding: Kb.Styles.globalMargins.tiny},
-  }),
   body: {
     flex: 1,
     padding: Kb.Styles.globalMargins.small,
   },
-  flexDefinitelyShrink: {flexShrink: 100},
-  flexShrink: {flexShrink: 1},
-  memberPill: {width: 0},
 }))
 
 type Props = {
diff --git a/shared/teams/add-members-wizard/default-channels.tsx b/shared/teams/add-members-wizard/default-channels.tsx
new file mode 100644
index 000000000000..439f379e8985
--- /dev/null
+++ b/shared/teams/add-members-wizard/default-channels.tsx
@@ -0,0 +1,72 @@
+import * as Kb from '@/common-adapters'
+import type * as T from '@/constants/types'
+import {useDefaultChannels} from '../team/settings-tab/default-channels'
+import {ChannelsWidget} from '../common'
+import {pluralize} from '@/util/string'
+import {setWizardDefaultChannels, type AddMembersWizard} from './state'
+
+// which channels the invitees will land in, with an optional channel picker
+const DefaultChannels = ({
+  teamID,
+  updateWizard,
+  wizard,
+}: {
+  teamID: T.Teams.TeamID
+  updateWizard: (wizard: AddMembersWizard) => void
+  wizard: AddMembersWizard
+}) => {
+  const {defaultChannels, defaultChannelsWaiting} = useDefaultChannels(teamID)
+  const addToChannels = wizard.addToChannels
+  const allKeybaseUsers = !wizard.addingMembers.some(member => member.assertion.includes('@'))
+  const onChangeFromDefault = () => updateWizard(setWizardDefaultChannels(wizard, []))
+  const onAdd = (toAdd: ReadonlyArray<T.Teams.ChannelNameID>) => {
+    updateWizard(setWizardDefaultChannels(wizard, toAdd))
+  }
+  const onRemove = (toRemove: T.Teams.ChannelNameID) => {
+    updateWizard(setWizardDefaultChannels(wizard, undefined, toRemove))
+  }
+  return (
+    <Kb.Box2 direction="vertical" fullWidth={true} gap="xtiny">
+      <Kb.Text type="BodySmallSemibold">Join channels</Kb.Text>
+      <Kb.Box2 direction="vertical" fullWidth={true}>
+        {defaultChannelsWaiting ? (
+          <Kb.ProgressIndicator />
+        ) : (
+          <>
+            <Kb.Text type="BodySmall">
+              {allKeybaseUsers ? 'Your invitees' : 'Invitees that are Keybase users'} will be added to{' '}
+              {defaultChannels.length} {pluralize('channel', defaultChannels.length)}.
+            </Kb.Text>
+            <Kb.Text type="BodySmall">
+              {defaultChannels.map((channel, index) => (
+                <Kb.Text key={channel.conversationIDKey} type="BodySmallSemibold">
+                  #{channel.channelname}
+                  {defaultChannels.length > 2 && index < defaultChannels.length - 1 && ', '}
+                  {index === defaultChannels.length - 2 && <Kb.Text type="BodySmall"> and </Kb.Text>}
+                </Kb.Text>
+              ))}
+              .{' '}
+              {!addToChannels && (
+                <Kb.Text type="BodySmallPrimaryLink" onClick={onChangeFromDefault}>
+                  Add channels
+                </Kb.Text>
+              )}
+            </Kb.Text>
+          </>
+        )}
+      </Kb.Box2>
+      {addToChannels && (
+        <ChannelsWidget
+          disableGeneral={true}
+          teamID={teamID}
+          channels={addToChannels}
+          disabledChannels={defaultChannels}
+          onAddChannel={onAdd}
+          onRemoveChannel={onRemove}
+        />
+      )}
+    </Kb.Box2>
+  )
+}
+
+export default DefaultChannels
diff --git a/shared/teams/add-members-wizard/state.tsx b/shared/teams/add-members-wizard/state.tsx
index d98c547a4bd2..1d7519775ccd 100644
--- a/shared/teams/add-members-wizard/state.tsx
+++ b/shared/teams/add-members-wizard/state.tsx
@@ -1,4 +1,5 @@
 import {isPhone} from '@/constants/platform'
+import {navUpToScreen} from '@/constants/router'
 import * as T from '@/constants/types'
 
 export type AddMembersWizard = Pick<
@@ -81,6 +82,31 @@ export const addMembersToWizard = async (
   }
 }
 
+// map bulk email/phone search results into wizard members, resolving found users
+// to their username
+export const searchResultsToMembers = (
+  results: ReadonlyArray<{foundUser: boolean; username: string; assertion: string}>
+): Array<T.Teams.AddingMember> =>
+  results.map(m => ({
+    ...(m.foundUser ? {assertion: m.username, resolvedFrom: m.assertion} : {assertion: m.assertion}),
+    role: 'writer' as const,
+  }))
+
+// add members to the wizard then jump back to the confirm screen; failures go
+// to onError
+export const addMembersToWizardAndNav = async (
+  wizard: AddMembersWizard,
+  members: ReadonlyArray<T.Teams.AddingMember>,
+  onError: (message: string) => void
+) => {
+  try {
+    const nextWizard = await addMembersToWizard(wizard, members)
+    navUpToScreen({name: 'teamAddToTeamConfirm', params: {wizard: nextWizard}}, true)
+  } catch (err) {
+    onError(err instanceof Error ? err.message : String(err))
+  }
+}
+
 export const removeWizardMember = (wizard: AddMembersWizard, assertion: string): AddMembersWizard => ({
   ...wizard,
   addingMembers: wizard.addingMembers.filter(member => member.assertion !== assertion),
diff --git a/shared/teams/channel/create-channels.tsx b/shared/teams/channel/create-channels.tsx
index b0e00291d69c..2c01b532af9e 100644
--- a/shared/teams/channel/create-channels.tsx
+++ b/shared/teams/channel/create-channels.tsx
@@ -55,9 +55,7 @@ const CreateChannelsInner = (props: Props) => {
   const [success, setSuccess] = React.useState(false)
 
   const banners = error ? (
-    <Kb.Banner color="red" key="error">
-      {error}
-    </Kb.Banner>
+    <Kb.ErrorBanner key="error" error={error} />
   ) : success ? (
     <Kb.Banner color="green" key="success">
       Successfully created channels.
diff --git a/shared/teams/channel/header.tsx b/shared/teams/channel/header.tsx
index 53555258321f..6fba7eb81908 100644
--- a/shared/teams/channel/header.tsx
+++ b/shared/teams/channel/header.tsx
@@ -77,7 +77,7 @@ const HeaderTitle = (props: HeaderTitleProps) => {
           {teamMeta.teamname}
         </Kb.Text>
       </Kb.Box2>
-      <Kb.Text type="Header" lineClamp={1} style={styles.header}>
+      <Kb.Text type="Header" lineClamp={1} style={styles.flexShrink}>
         {'#' + channelname}
       </Kb.Text>
     </Kb.Box2>
@@ -200,9 +200,7 @@ const HeaderTitle = (props: HeaderTitleProps) => {
         {topDescriptors}
         <Kb.Box2 direction="horizontal" fullWidth={true}>
           {bottomDescriptorsAndButtons}
-          <Kb.Box2 direction="vertical" alignSelf="flex-start" style={styles.tipBox}>
-            {tip}
-          </Kb.Box2>
+          {tip}
         </Kb.Box2>
       </Kb.Box2>
     </Kb.Box2>
@@ -225,9 +223,6 @@ const styles = Kb.Styles.styleSheetCreate(
       flexShrink: {
         flexShrink: 1,
       },
-      header: {
-        flexShrink: 1,
-      },
       outerBoxDesktop: {
         flexShrink: 1,
         marginBottom: Kb.Styles.globalMargins.small,
diff --git a/shared/teams/channel/rows.tsx b/shared/teams/channel/rows.tsx
index b9c2396c460f..2a2bf7f619a8 100644
--- a/shared/teams/channel/rows.tsx
+++ b/shared/teams/channel/rows.tsx
@@ -1,10 +1,17 @@
 import * as C from '@/constants'
 import * as Teams from '@/constants/teams'
-import * as T from '@/constants/types'
+import type * as T from '@/constants/types'
 import * as Kb from '@/common-adapters'
 import {useChannelSelectionState} from '../common/selection-state'
-import MenuHeader from '../team/rows/menu-header'
-import {selectionStyles} from '../team/rows/common'
+import RoleCrown from '../common/role-crown'
+import {
+  FullNameLabel,
+  getMassActionsProps,
+  getResetLabel,
+  MemberActions,
+  selectionStyles,
+  useOnBlockUser,
+} from '../team/rows/common'
 import {useUsersState} from '@/stores/users'
 import {useCurrentUserState} from '@/stores/current-user'
 import {navToProfile} from '@/constants/router'
@@ -20,17 +27,6 @@ type Props = {
   username: string
 }
 
-const crownIcon = (roleType: T.Teams.TeamRoleType) => {
-  switch (roleType) {
-    case 'admin':
-      return 'iconfont-crown-admin'
-    case 'owner':
-      return 'iconfont-crown-owner'
-    default:
-      return false
-  }
-}
-
 // NOTE the controls for reset and deleted users (and the chat button) are
 // duplicated here because the desktop & mobile layouts differ significantly. If
 // you're changing one remember to change the other.
@@ -38,7 +34,6 @@ const crownIcon = (roleType: T.Teams.TeamRoleType) => {
 const ChannelMemberRow = (props: Props) => {
   const {conversationIDKey, participantInfo, teamID, username} = props
   const infoMap = useUsersState(s => s.infoMap)
-  const setUserBlocks = C.useRPC(T.RPCGen.userSetUserBlocksRpcPromise)
   const {selectedMembers: channelSelectedMembers, setMemberSelected: channelSetMemberSelected} =
     useChannelSelectionState()
   const {teamDetails, teamMeta, yourOperations} = useLoadedTeam(teamID)
@@ -59,29 +54,8 @@ const ChannelMemberRow = (props: Props) => {
   )
   const canEditRole =
     yourOperations.manageMembers && active && !teamMemberInfo.needsPUK && hasEditableRoleChoice
-  const crown = (() => {
-    const type = crownIcon(roleType)
-    return active && type ? (
-      <Kb.Icon
-        type={type}
-        color={roleType === 'owner' ? Kb.Styles.globalColors.yellowDark : Kb.Styles.globalColors.black_35}
-        fontSize={10}
-      />
-    ) : null
-  })()
-  const fullNameLabel =
-    fullname && active ? (
-      <Kb.Text style={styles.fullNameLabel} type="BodySmall" lineClamp={1}>
-        {fullname} •
-      </Kb.Text>
-    ) : null
-  const resetLabel = !active
-    ? teamMemberInfo.status === 'deleted'
-      ? 'Has deleted their account'
-      : yourOperations.manageMembers
-        ? 'Has reset their account'
-        : 'Has reset their account; admins can re-invite'
-    : null
+  const crown = active ? <RoleCrown role={roleType} fontSize={10} /> : null
+  const resetLabel = !active ? getResetLabel(teamMemberInfo.status, yourOperations.manageMembers) : null
 
   const roleLabel = !!active && Teams.typeToLabel[teamMemberInfo.type]
   const isYou = you === username
@@ -104,26 +78,19 @@ const ChannelMemberRow = (props: Props) => {
       navigateAppend({name: 'teamMember', params: {teamID, username}})
     }
   }
-  const checkCircle = (
-    <Kb.CheckCircle
-      checked={memberSelected}
-      onCheck={onSelect}
-      key={`check-${username}`}
-      style={selectionStyles.widenClickableArea}
-    />
-  )
+  const onBlock = useOnBlockUser(username)
 
   const body = (
     <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center">
       <Kb.Avatar username={username} size={32} />
 
-      <Kb.Box2 direction="vertical" flex={1} style={styles.nameContainer}>
+      <Kb.Box2 direction="vertical" flex={1} style={selectionStyles.nameContainer}>
         <Kb.Box2 direction="horizontal" fullWidth={true}>
           <Kb.ConnectedUsernames type="BodySemibold" usernames={props.username} />
         </Kb.Box2>
 
         <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" gap="xtiny">
-          {fullNameLabel}
+          <FullNameLabel fullName={fullname} active={active} />
           {crown}
           {!active && (
             <Kb.Meta
@@ -140,134 +107,40 @@ const ChannelMemberRow = (props: Props) => {
     </Kb.Box2>
   )
 
-  const makePopup = (p: Kb.Popup2Parms) => {
-    const {attachTo, hidePopup} = p
-    const onOpenProfile = () => username && navToProfile(username)
-    const onRemoveFromChannel = () =>
-      navigateAppend({
-        name: 'teamReallyRemoveChannelMember',
-        params: {conversationIDKey, members: [username], teamID},
-      })
-    const onBlock = () => {
-      if (username) {
-        setUserBlocks(
-          [
-            {
-              blocks: [
-                {
-                  setChatBlock: true,
-                  setFollowBlock: true,
-                  username,
-                },
-              ],
-            },
-            C.waitingKeyUsersSetUserBlocks,
-          ],
-          () => {},
-          () => {}
-        )
+  const actions = (
+    <MemberActions
+      blockIcon="iconfont-user-block"
+      canEditRole={canEditRole}
+      crown={crown}
+      fullName={fullname}
+      isYou={isYou}
+      onAddToChannels={() =>
+        navigateAppend({name: 'teamAddToChannels', params: {teamID, usernames: [username]}})
       }
-    }
-
-    const menuItems: Kb.MenuItems = [
-      'Divider',
-      ...(yourOperations.manageMembers
-        ? ([
-            {
-              icon: 'iconfont-chat',
+      onBlock={onBlock}
+      onChat={onChat}
+      onEditRole={onEditMember}
+      onOpenProfile={() => username && navToProfile(username)}
+      removeItem={
+        (yourOperations.manageMembers || isYou) && !props.isGeneral
+          ? {
               onClick: () =>
-                navigateAppend({name: 'teamAddToChannels', params: {teamID, usernames: [username]}}),
-              title: 'Add to channels...',
-            },
-            ...(canEditRole
-              ? [{icon: 'iconfont-crown-admin', onClick: onEditMember, title: 'Edit role...'}]
-              : []),
-          ] as Kb.MenuItems)
-        : []),
-      {icon: 'iconfont-person', onClick: onOpenProfile, title: 'View profile'},
-      {icon: 'iconfont-chat', onClick: onChat, title: 'Chat'},
-      ...(yourOperations.manageMembers || !isYou ? (['Divider'] as Kb.MenuItems) : []),
-      ...((yourOperations.manageMembers || isYou) && !props.isGeneral
-        ? ([
-            {
-              danger: true,
-              icon: 'iconfont-remove',
-              onClick: onRemoveFromChannel,
+                navigateAppend({
+                  name: 'teamReallyRemoveChannelMember',
+                  params: {conversationIDKey, members: [username], teamID},
+                }),
               title: 'Remove from channel',
-            },
-          ] as Kb.MenuItems)
-        : []),
-      ...(!isYou
-        ? ([
-            {
-              danger: true,
-              icon: 'iconfont-user-block',
-              onClick: onBlock,
-              title: 'Block',
-            },
-          ] as Kb.MenuItems)
-        : []),
-    ]
-    const menuHeader = (
-      <MenuHeader
-        username={username}
-        fullName={fullname}
-        label={
-          <Kb.Box2 direction="horizontal">
-            <Kb.Text type="BodySmall">{crown}</Kb.Text>
-            <Kb.Text type="BodySmall">{roleLabel}</Kb.Text>
-          </Kb.Box2>
-        }
-      />
-    )
-
-    return (
-      <Kb.FloatingMenu
-        header={menuHeader}
-        attachTo={attachTo}
-        closeOnSelect={true}
-        items={menuItems}
-        onHidden={hidePopup}
-        visible={true}
-      />
-    )
-  }
-
-  const {showPopup, popupAnchor, popup} = Kb.usePopup2(makePopup)
-
-  const actions = (
-    <Kb.Box2
-      direction="horizontal"
-      gap="tiny"
-      style={yourOperations.manageMembers ? selectionStyles.mobileMarginsHack : undefined}
-    >
-      {popup}
-      <Kb.IconButton
-        icon="iconfont-chat"
-        iconColor={Kb.Styles.globalColors.black_50}
-        mode="Secondary"
-        onClick={onChat}
-        small={true}
-        tooltip="Open chat"
-      />
-      <Kb.IconButton
-        icon="iconfont-ellipsis"
-        iconColor={Kb.Styles.globalColors.black_50}
-        mode="Secondary"
-        onClick={showPopup}
-        ref={popupAnchor}
-        small={true}
-        tooltip="More actions"
-      />
-    </Kb.Box2>
+            }
+          : undefined
+      }
+      roleLabel={roleLabel}
+      username={username}
+      youCanManageMembers={yourOperations.manageMembers}
+    />
   )
 
   const massActionsProps = yourOperations.manageMembers
-    ? {
-        containerStyleOverride: styles.listItemMargin,
-        icon: checkCircle,
-        iconStyleOverride: selectionStyles.checkCircle,
-      }
+    ? getMassActionsProps(username, memberSelected, onSelect)
     : {}
   return (
     <Kb.ListItem
@@ -278,7 +151,7 @@ const ChannelMemberRow = (props: Props) => {
       type="Large"
       body={body}
       firstItem={props.firstItem}
-      style={memberSelected ? styles.selected : undefined}
+      style={memberSelected ? selectionStyles.selected : undefined}
       onClick={anySelected ? () => onSelect(!memberSelected) : onEditMember}
     />
   )
@@ -287,11 +160,7 @@ const ChannelMemberRow = (props: Props) => {
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      fullNameLabel: {flexShrink: 1},
-      listItemMargin: {marginLeft: 0},
       marginRight: {marginRight: Kb.Styles.globalMargins.xtiny},
-      nameContainer: {marginLeft: Kb.Styles.globalMargins.small},
-      selected: {backgroundColor: Kb.Styles.globalColors.blueLighterOrBlueDarker},
     }) as const
 )
 
diff --git a/shared/teams/channel/tabs.tsx b/shared/teams/channel/tabs.tsx
index 08d100b0db8c..804121cb5632 100644
--- a/shared/teams/channel/tabs.tsx
+++ b/shared/teams/channel/tabs.tsx
@@ -19,17 +19,15 @@ const ChannelTabs = (props: Props) => {
   ]
 
   return (
-    <Kb.Box2 direction="vertical" fullWidth={true}>
-      <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.container}>
-        <Kb.Tabs
-          clickableBoxStyle={styles.clickableBox}
-          tabs={tabs}
-          selectedTab={selectedTab}
-          onSelect={setSelectedTab}
-          style={styles.tabContainer}
-          tabStyle={styles.tab}
-        />
-      </Kb.Box2>
+    <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.container}>
+      <Kb.Tabs
+        clickableBoxStyle={styles.clickableBox}
+        tabs={tabs}
+        selectedTab={selectedTab}
+        onSelect={setSelectedTab}
+        style={styles.tabContainer}
+        tabStyle={styles.tab}
+      />
     </Kb.Box2>
   )
 }
diff --git a/shared/teams/common/activity.tsx b/shared/teams/common/activity.tsx
index 4cb0bb380e91..0def5bdc64f3 100644
--- a/shared/teams/common/activity.tsx
+++ b/shared/teams/common/activity.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import logger from '@/logger'
-import {useLoadedTeam} from '@/teams/team/use-loaded-team'
 import {createCachedResourceCache, type CachedResourceCache, useCachedResource} from '../use-cached-resource'
 
 const activityToIcon: {[key in 'active' | 'recently']: Kb.IconType} = {
@@ -132,43 +131,6 @@ const Activity = (p: Props) => {
   )
 }
 
-type MTProps = {title: string; teamID: T.Teams.TeamID}
-type ModalTitleProps = MTProps & {newTeamWizard?: T.Teams.NewTeamWizardState}
-export const ModalTitle = ({title, teamID, newTeamWizard}: ModalTitleProps) => {
-  const {teamMeta} = useLoadedTeam(teamID)
-  const teamname = teamMeta.teamname
-  const isNewTeamWizard = teamID === T.Teams.newTeamWizardTeamID
-  const displayTeamname = isNewTeamWizard ? (newTeamWizard?.name || 'New team') : teamname
-  const avatarFilepath = isNewTeamWizard ? newTeamWizard?.avatarFilename : undefined
-  const avatarCrop = isNewTeamWizard ? newTeamWizard?.avatarCrop : undefined
-
-  return isMobile ? (
-    <Kb.Box2 direction="vertical" alignItems="center">
-      {!!displayTeamname && (
-        <Kb.Text type="BodyTiny" lineClamp={1} ellipsizeMode="middle">
-          {displayTeamname}
-        </Kb.Text>
-      )}
-      <Kb.Text type="BodyBig">{title}</Kb.Text>
-    </Kb.Box2>
-  ) : (
-    <Kb.Box2 direction="vertical" gap="xtiny" alignItems="center" style={styles.title}>
-      <Kb.Avatar
-        size={32}
-        teamname={displayTeamname === 'New team' ? '' : displayTeamname}
-        style={styles.avatar}
-        isTeam={true}
-        imageOverrideUrl={isNewTeamWizard ? avatarFilepath : undefined}
-        crop={isNewTeamWizard ? avatarCrop : undefined}
-      />
-      <Kb.Text type="BodySmall" lineClamp={1}>
-        {displayTeamname}
-      </Kb.Text>
-      <Kb.Text type="Header">{title}</Kb.Text>
-    </Kb.Box2>
-  )
-}
-
 export const useActivityLevels = (): ActivityLevels => {
   const context = React.useContext(ActivityLevelsContext)
   if (!context) {
@@ -181,16 +143,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   activityActive: {
     color: Kb.Styles.globalColors.greenDark,
   },
-  avatar: Kb.Styles.platformStyles({
-    isElectron: {
-      height: 16,
-      position: 'relative',
-      top: -16,
-    },
-  }),
-  title: {
-    paddingBottom: Kb.Styles.globalMargins.tiny,
-  },
 }))
 
 export default Activity
diff --git a/shared/teams/common/card-choice.tsx b/shared/teams/common/card-choice.tsx
new file mode 100644
index 000000000000..aa8bf550e920
--- /dev/null
+++ b/shared/teams/common/card-choice.tsx
@@ -0,0 +1,19 @@
+import * as Kb from '@/common-adapters'
+
+// a wizard card choice: icon on the left, bold title over a small subtitle
+const CardChoice = (props: {icon: Kb.IconType; title: string; subtitle: string; onClick: () => void}) => (
+  <Kb.ListItem
+    type="Card"
+    firstItem={true}
+    icon={<Kb.IconAuto type={props.icon} />}
+    body={
+      <Kb.Box2 direction="vertical" fullWidth={true}>
+        <Kb.Text type="BodySemibold">{props.title}</Kb.Text>
+        <Kb.Text type="BodySmall">{props.subtitle}</Kb.Text>
+      </Kb.Box2>
+    }
+    onClick={props.onClick}
+  />
+)
+
+export default CardChoice
diff --git a/shared/teams/common/channel-hooks.tsx b/shared/teams/common/channel-hooks.tsx
index d9ca62632229..a28bdd7f1c02 100644
--- a/shared/teams/common/channel-hooks.tsx
+++ b/shared/teams/common/channel-hooks.tsx
@@ -4,10 +4,13 @@ import * as Chat from '@/constants/chat'
 import * as React from 'react'
 import logger from '@/logger'
 import {ensureError} from '@/util/errors'
-import {useEngineActionListener} from '@/engine/action-listener'
 import {useLoadedTeam} from '../team/use-loaded-team'
 import {createCachedResourceCache, type CachedResourceCache, useCachedResource} from '../use-cached-resource'
-import {useLoadedTeamChannels} from './use-loaded-team-channels'
+import {
+  teamChannelsRPCParams,
+  useLoadedTeamChannels,
+  useReloadOnTeamChannelChanges,
+} from './use-loaded-team-channels'
 
 type ChannelMetasData = {
   channelMetas: Map<T.Chat.ConversationIDKey, T.Chat.ConversationMeta>
@@ -74,14 +77,7 @@ export const useAllChannelMetas = (
     load: async () =>
       new Promise<ChannelMetasData>((resolve, reject) => {
         getConversations(
-          [
-            {
-              membersType: T.RPCChat.ConversationMembersType.team,
-              tlfName: teamname,
-              topicType: T.RPCChat.TopicType.chat,
-            },
-            C.waitingKeyTeamsGetChannels(teamID),
-          ],
+          [teamChannelsRPCParams(teamname), C.waitingKeyTeamsGetChannels(teamID)],
           ({convs}) => {
             const channelMetas = new Map<T.Chat.ConversationIDKey, T.Chat.ConversationMeta>()
             const channelParticipants = new Map<T.Chat.ConversationIDKey, T.Chat.ParticipantInfo>()
@@ -113,21 +109,7 @@ export const useAllChannelMetas = (
     staleMs: allChannelMetasReloadStaleMs,
   })
 
-  useEngineActionListener('keybase.1.NotifyTeam.teamChangedByID', action => {
-    if (action.payload.params.teamID === teamID) {
-      void reload()
-    }
-  }, enabled)
-  useEngineActionListener('keybase.1.NotifyTeam.teamDeleted', action => {
-    if (action.payload.params.teamID === teamID) {
-      clear(teamID)
-    }
-  }, enabled)
-  useEngineActionListener('keybase.1.NotifyTeam.teamExit', action => {
-    if (action.payload.params.teamID === teamID) {
-      clear(teamID)
-    }
-  }, enabled)
+  useReloadOnTeamChannelChanges(teamID, enabled, reload, () => clear(teamID))
 
   return {
     channelMetas: data.channelMetas,
diff --git a/shared/teams/common/index.tsx b/shared/teams/common/index.tsx
index a3a53aa58291..0d69e753f3b4 100644
--- a/shared/teams/common/index.tsx
+++ b/shared/teams/common/index.tsx
@@ -1,25 +1,7 @@
-import * as React from 'react'
-export {default as Activity, useActivityLevels, ActivityLevelsProvider, ModalTitle} from './activity'
+export {default as Activity, useActivityLevels, ActivityLevelsProvider} from './activity'
+export {ModalTitle} from './modal-title'
 export {ChannelsWidget} from './channels-widget'
 export {useAllChannelMetas, useChannelParticipants} from './channel-hooks'
 export {default as SelectionPopup} from './selection-popup'
-export {default as EnableContactsPopup} from './enable-contacts'
-export {default as useTeamLinkPopup} from './use-team-link-popup'
-
-export const usePhoneNumberList = () => {
-  const [phoneNumbers, setPhoneNumbers] = React.useState([{key: 0, phoneNumber: '', valid: false}])
-  const setPhoneNumber = (index: number, phoneNumber: string, valid: boolean) => {
-    setPhoneNumbers(prev => prev.map((pn, i) => (i === index ? {...pn, phoneNumber, valid} : pn)))
-  }
-  const addPhoneNumber = () => {
-    setPhoneNumbers(prev => [...prev, {key: (prev.at(-1)?.key ?? 0) + 1, phoneNumber: '', valid: false}])
-  }
-  const removePhoneNumber = (index: number) => {
-    setPhoneNumbers(prev => prev.filter((_, i) => i !== index))
-  }
-  const resetPhoneNumbers = () => {
-    setPhoneNumbers([{key: 0, phoneNumber: '', valid: false}])
-  }
-
-  return {addPhoneNumber, phoneNumbers, removePhoneNumber, resetPhoneNumbers, setPhoneNumber}
-}
+export {useTeamLinkPopup} from './use-team-link-popup'
+export {usePhoneNumberList} from './use-phone-number-list'
diff --git a/shared/teams/common/modal-title.tsx b/shared/teams/common/modal-title.tsx
new file mode 100644
index 000000000000..eed70c798ee9
--- /dev/null
+++ b/shared/teams/common/modal-title.tsx
@@ -0,0 +1,59 @@
+import * as Kb from '@/common-adapters'
+import * as T from '@/constants/types'
+import {useLoadedTeam} from '@/teams/team/use-loaded-team'
+
+type Props = {
+  title: string
+  teamID: T.Teams.TeamID
+  newTeamWizard?: T.Teams.NewTeamWizardState
+}
+
+export const ModalTitle = ({title, teamID, newTeamWizard}: Props) => {
+  const {teamMeta} = useLoadedTeam(teamID)
+  const teamname = teamMeta.teamname
+  const isNewTeamWizard = teamID === T.Teams.newTeamWizardTeamID
+  const displayTeamname = isNewTeamWizard ? (newTeamWizard?.name || 'New team') : teamname
+  const avatarFilepath = isNewTeamWizard ? newTeamWizard?.avatarFilename : undefined
+  const avatarCrop = isNewTeamWizard ? newTeamWizard?.avatarCrop : undefined
+
+  return isMobile ? (
+    <Kb.Box2 direction="vertical" alignItems="center">
+      {!!displayTeamname && (
+        <Kb.Text type="BodyTiny" lineClamp={1} ellipsizeMode="middle">
+          {displayTeamname}
+        </Kb.Text>
+      )}
+      <Kb.Text type="BodyBig">{title}</Kb.Text>
+    </Kb.Box2>
+  ) : (
+    <Kb.Box2 direction="vertical" gap="xtiny" alignItems="center" style={styles.title}>
+      <Kb.Avatar
+        size={32}
+        teamname={displayTeamname === 'New team' ? '' : displayTeamname}
+        style={styles.avatar}
+        isTeam={true}
+        imageOverrideUrl={isNewTeamWizard ? avatarFilepath : undefined}
+        crop={isNewTeamWizard ? avatarCrop : undefined}
+      />
+      <Kb.Text type="BodySmall" lineClamp={1}>
+        {displayTeamname}
+      </Kb.Text>
+      <Kb.Text type="Header">{title}</Kb.Text>
+    </Kb.Box2>
+  )
+}
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  avatar: Kb.Styles.platformStyles({
+    isElectron: {
+      height: 16,
+      position: 'relative',
+      top: -16,
+    },
+  }),
+  title: {
+    paddingBottom: Kb.Styles.globalMargins.tiny,
+  },
+}))
+
+export default ModalTitle
diff --git a/shared/teams/common/role-crown.tsx b/shared/teams/common/role-crown.tsx
new file mode 100644
index 000000000000..78d60cd2d56e
--- /dev/null
+++ b/shared/teams/common/role-crown.tsx
@@ -0,0 +1,24 @@
+import * as Kb from '@/common-adapters'
+import type * as T from '@/constants/types'
+import type {SizeType} from '@/common-adapters/icon'
+
+// crown icon shown next to admins (grey) and owners (yellow); renders nothing for other roles
+const RoleCrown = (props: {
+  role: T.Teams.MaybeTeamRoleType
+  fontSize?: number
+  sizeType?: SizeType
+  style?: Kb.Styles.StylesCrossPlatform
+}) =>
+  props.role === 'admin' || props.role === 'owner' ? (
+    <Kb.Icon
+      type={props.role === 'owner' ? 'iconfont-crown-owner' : 'iconfont-crown-admin'}
+      color={
+        props.role === 'owner' ? Kb.Styles.globalColors.yellowDark : Kb.Styles.globalColors.black_35
+      }
+      fontSize={props.fontSize}
+      sizeType={props.sizeType}
+      style={props.style}
+    />
+  ) : null
+
+export default RoleCrown
diff --git a/shared/teams/common/selection-state.tsx b/shared/teams/common/selection-state.tsx
index bc9ccca145ce..161ce65d14ca 100644
--- a/shared/teams/common/selection-state.tsx
+++ b/shared/teams/common/selection-state.tsx
@@ -55,45 +55,44 @@ const updateSelection = <T,>(
   return nextItems.size ? [...nextItems] : undefined
 }
 
-export const TeamSelectionProvider = (props: TeamSelectionProviderProps) => {
-  const selectedMembersRef = React.useRef(props.selectedMembers)
-  const selectedChannelsRef = React.useRef(props.selectedChannels)
-  React.useEffect(() => {
-    selectedMembersRef.current = props.selectedMembers
-  }, [props.selectedMembers])
+// one selectable collection (members or channels): current set + set/clear that
+// report the next selection through onChange, reading the latest value via a ref
+// so rapid updates don't act on stale props
+const useSelectionSlice = <Item,>(
+  items: ReadonlyArray<Item> | undefined,
+  onChange: (next?: Array<Item>) => void
+) => {
+  const itemsRef = React.useRef(items)
   React.useEffect(() => {
-    selectedChannelsRef.current = props.selectedChannels
-  }, [props.selectedChannels])
-  const selectedMembers = new Set(props.selectedMembers ?? [])
-  const selectedChannels = new Set(props.selectedChannels ?? [])
-
-  const value: TeamSelectionState = {
-    clearSelectedChannels: () => {
-      selectedChannelsRef.current = undefined
-      props.onSelectedChannelsChange(undefined)
-    },
-    clearSelectedMembers: () => {
-      selectedMembersRef.current = undefined
-      props.onSelectedMembersChange(undefined)
+    itemsRef.current = items
+  }, [items])
+  const selected: ReadonlySet<Item> = new Set(items ?? [])
+  return {
+    clear: () => {
+      itemsRef.current = undefined
+      onChange(undefined)
     },
-    selectedChannels,
-    selectedMembers,
-    setChannelSelected: (conversationIDKey, selected, clearAll) => {
-      const nextSelectedChannels = updateSelection(
-        selectedChannelsRef.current,
-        conversationIDKey,
-        selected,
-        clearAll
-      )
-      selectedChannelsRef.current = nextSelectedChannels
-      props.onSelectedChannelsChange(nextSelectedChannels)
-    },
-    setMemberSelected: (username, selected, clearAll) => {
-      const nextSelectedMembers = updateSelection(selectedMembersRef.current, username, selected, clearAll)
-      selectedMembersRef.current = nextSelectedMembers
-      props.onSelectedMembersChange(nextSelectedMembers)
+    selected,
+    set: (item: Item, selected: boolean, clearAll?: boolean) => {
+      const next = updateSelection(itemsRef.current, item, selected, clearAll)
+      itemsRef.current = next
+      onChange(next)
     },
   }
+}
+
+export const TeamSelectionProvider = (props: TeamSelectionProviderProps) => {
+  const members = useSelectionSlice(props.selectedMembers, props.onSelectedMembersChange)
+  const channels = useSelectionSlice(props.selectedChannels, props.onSelectedChannelsChange)
+
+  const value: TeamSelectionState = {
+    clearSelectedChannels: channels.clear,
+    clearSelectedMembers: members.clear,
+    selectedChannels: channels.selected,
+    selectedMembers: members.selected,
+    setChannelSelected: channels.set,
+    setMemberSelected: members.set,
+  }
 
   return <TeamSelectionContext.Provider value={value}>{props.children}</TeamSelectionContext.Provider>
 }
@@ -107,23 +106,12 @@ export const useTeamSelectionState = () => {
 }
 
 export const ChannelSelectionProvider = (props: ChannelSelectionProviderProps) => {
-  const selectedMembersRef = React.useRef(props.selectedMembers)
-  React.useEffect(() => {
-    selectedMembersRef.current = props.selectedMembers
-  }, [props.selectedMembers])
-  const selectedMembers = new Set(props.selectedMembers ?? [])
+  const members = useSelectionSlice(props.selectedMembers, props.onSelectedMembersChange)
 
   const value: ChannelSelectionState = {
-    clearSelectedMembers: () => {
-      selectedMembersRef.current = undefined
-      props.onSelectedMembersChange(undefined)
-    },
-    selectedMembers,
-    setMemberSelected: (username, selected, clearAll) => {
-      const nextSelectedMembers = updateSelection(selectedMembersRef.current, username, selected, clearAll)
-      selectedMembersRef.current = nextSelectedMembers
-      props.onSelectedMembersChange(nextSelectedMembers)
-    },
+    clearSelectedMembers: members.clear,
+    selectedMembers: members.selected,
+    setMemberSelected: members.set,
   }
 
   return <ChannelSelectionContext.Provider value={value}>{props.children}</ChannelSelectionContext.Provider>
diff --git a/shared/teams/common/use-add-to-team.tsx b/shared/teams/common/use-add-to-team.tsx
new file mode 100644
index 000000000000..411b60c4046e
--- /dev/null
+++ b/shared/teams/common/use-add-to-team.tsx
@@ -0,0 +1,39 @@
+import * as C from '@/constants'
+import * as T from '@/constants/types'
+import {handleContactSettingsBlock, handleNotAdded} from '../actions'
+
+// add members to a team; contact-restriction outcomes navigate to the
+// contactRestricted screen, any other failure is reported through onError
+export const useAddToTeam = () => {
+  const addToTeam = C.useRPC(T.RPCGen.teamsTeamAddMembersMultiRoleRpcPromise)
+  return (p: {
+    teamID: T.Teams.TeamID
+    users: Array<{assertion: string; role: T.Teams.TeamRoleType}>
+    sendChatNotification: boolean
+    onError: (message: string) => void
+  }) => {
+    const {teamID, users, sendChatNotification, onError} = p
+    addToTeam(
+      [
+        {
+          sendChatNotification,
+          teamID,
+          users: users.map(({assertion, role}) => ({assertion, role: T.RPCGen.TeamRole[role]})),
+        },
+        [
+          C.waitingKeyTeamsTeam(teamID),
+          C.waitingKeyTeamsAddMember(teamID, ...users.map(({assertion}) => assertion)),
+        ],
+      ],
+      res => {
+        handleNotAdded(res.notAdded ?? undefined)
+      },
+      err => {
+        if (handleContactSettingsBlock(err)) {
+          return
+        }
+        onError(err.message)
+      }
+    )
+  }
+}
diff --git a/shared/teams/common/use-loaded-team-channels.tsx b/shared/teams/common/use-loaded-team-channels.tsx
index 3d54eac2e90c..d56861a201e1 100644
--- a/shared/teams/common/use-loaded-team-channels.tsx
+++ b/shared/teams/common/use-loaded-team-channels.tsx
@@ -55,6 +55,37 @@ const useLoadedTeamChannelsCacheMap = (
   return providedCacheMap ?? contextCacheMap ?? localCacheMap
 }
 
+export const teamChannelsRPCParams = (teamname: string) => ({
+  membersType: T.RPCChat.ConversationMembersType.team,
+  tlfName: teamname,
+  topicType: T.RPCChat.TopicType.chat,
+})
+
+// keep a team's channel list fresh: reload on team changes, drop it when the
+// team is deleted or left
+export const useReloadOnTeamChannelChanges = (
+  teamID: T.Teams.TeamID | undefined,
+  enabled: boolean,
+  reload: () => unknown,
+  clear: () => void
+) => {
+  useEngineActionListener('keybase.1.NotifyTeam.teamChangedByID', action => {
+    if (enabled && action.payload.params.teamID === teamID) {
+      void reload()
+    }
+  })
+  useEngineActionListener('keybase.1.NotifyTeam.teamDeleted', action => {
+    if (enabled && action.payload.params.teamID === teamID) {
+      clear()
+    }
+  })
+  useEngineActionListener('keybase.1.NotifyTeam.teamExit', action => {
+    if (enabled && action.payload.params.teamID === teamID) {
+      clear()
+    }
+  })
+}
+
 const useLoadedTeamChannelsRaw = (
   teamID: T.Teams.TeamID,
   providedTeamname?: string,
@@ -84,11 +115,7 @@ const useLoadedTeamChannelsRaw = (
       const teamIDToLoad = validTeamID ?? T.Teams.noTeamID
       const teamname = teamnameToLoad
       const {convs} = await T.RPCChat.localGetTLFConversationsLocalRpcPromise(
-        {
-          membersType: T.RPCChat.ConversationMembersType.team,
-          tlfName: teamname,
-          topicType: T.RPCChat.TopicType.chat,
-        },
+        teamChannelsRPCParams(teamname),
         C.waitingKeyTeamsGetChannels(teamIDToLoad)
       )
       const channelParticipants = new Map<T.Chat.ConversationIDKey, T.Chat.ParticipantInfo>()
@@ -120,21 +147,7 @@ const useLoadedTeamChannelsRaw = (
     staleMs: loadedTeamChannelsReloadStaleMs,
   })
 
-  useEngineActionListener('keybase.1.NotifyTeam.teamChangedByID', action => {
-    if (enabled && action.payload.params.teamID === validTeamID) {
-      void reload()
-    }
-  })
-  useEngineActionListener('keybase.1.NotifyTeam.teamDeleted', action => {
-    if (enabled && action.payload.params.teamID === validTeamID) {
-      clear(validTeamID)
-    }
-  })
-  useEngineActionListener('keybase.1.NotifyTeam.teamExit', action => {
-    if (enabled && action.payload.params.teamID === validTeamID) {
-      clear(validTeamID)
-    }
-  })
+  useReloadOnTeamChannelChanges(validTeamID, enabled, reload, () => clear(validTeamID))
 
   return {...data, loading, reload}
 }
diff --git a/shared/teams/common/use-nav-up-when-done.tsx b/shared/teams/common/use-nav-up-when-done.tsx
new file mode 100644
index 000000000000..ef0c726860d5
--- /dev/null
+++ b/shared/teams/common/use-nav-up-when-done.tsx
@@ -0,0 +1,14 @@
+import * as C from '@/constants'
+import * as React from 'react'
+
+// navigate up once a waiting flag finishes without an error, e.g. to close a
+// modal after its RPC succeeds
+export const useNavUpWhenDone = (waiting: boolean, error?: unknown) => {
+  const prevWaitingRef = React.useRef(waiting)
+  React.useEffect(() => {
+    if (!waiting && prevWaitingRef.current && !error) {
+      C.Router2.navigateUp()
+    }
+    prevWaitingRef.current = waiting
+  }, [waiting, error])
+}
diff --git a/shared/teams/common/use-phone-number-list.tsx b/shared/teams/common/use-phone-number-list.tsx
new file mode 100644
index 000000000000..0a787e5c4bbe
--- /dev/null
+++ b/shared/teams/common/use-phone-number-list.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+// list of phone-number inputs for the add-by-phone wizard screen
+export const usePhoneNumberList = () => {
+  const [phoneNumbers, setPhoneNumbers] = React.useState([{key: 0, phoneNumber: '', valid: false}])
+  const setPhoneNumber = (index: number, phoneNumber: string, valid: boolean) => {
+    setPhoneNumbers(prev => prev.map((pn, i) => (i === index ? {...pn, phoneNumber, valid} : pn)))
+  }
+  const addPhoneNumber = () => {
+    setPhoneNumbers(prev => [...prev, {key: (prev.at(-1)?.key ?? 0) + 1, phoneNumber: '', valid: false}])
+  }
+  const removePhoneNumber = (index: number) => {
+    setPhoneNumbers(prev => prev.filter((_, i) => i !== index))
+  }
+  const resetPhoneNumbers = () => {
+    setPhoneNumbers([{key: 0, phoneNumber: '', valid: false}])
+  }
+
+  return {addPhoneNumber, phoneNumbers, removePhoneNumber, resetPhoneNumbers, setPhoneNumber}
+}
diff --git a/shared/teams/common/use-team-link-popup.tsx b/shared/teams/common/use-team-link-popup.tsx
index cf01b4f2a86a..927ae3ece737 100644
--- a/shared/teams/common/use-team-link-popup.tsx
+++ b/shared/teams/common/use-team-link-popup.tsx
@@ -38,5 +38,3 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   }),
   overlay: {backgroundColor: Kb.Styles.globalColors.white, marginTop: Kb.Styles.globalMargins.tiny},
 }))
-
-export default useTeamLinkPopup
diff --git a/shared/teams/confirm-modals/avatar-badge.tsx b/shared/teams/confirm-modals/avatar-badge.tsx
new file mode 100644
index 000000000000..8d3f793e3f50
--- /dev/null
+++ b/shared/teams/confirm-modals/avatar-badge.tsx
@@ -0,0 +1,28 @@
+import * as Kb from '@/common-adapters'
+
+// red circular badge overlaid on a confirm-modal avatar header; positioning
+// comes from the caller since each modal offsets it differently
+const AvatarBadge = (props: {
+  icon: Kb.IconType
+  style?: Kb.Styles.StylesCrossPlatform
+  iconStyle?: Kb.Styles.StylesCrossPlatform
+}) => (
+  <Kb.Box2
+    direction="horizontal"
+    centerChildren={true}
+    overflow="hidden"
+    style={Kb.Styles.collapseStyles([styles.badge, props.style])}
+  >
+    <Kb.Icon type={props.icon} color={Kb.Styles.globalColors.white} fontSize={14} style={props.iconStyle} />
+  </Kb.Box2>
+)
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  badge: {
+    ...Kb.Styles.size(24),
+    backgroundColor: Kb.Styles.globalColors.red,
+    ...Kb.Styles.border(Kb.Styles.globalColors.white, 3, 12),
+  },
+}))
+
+export default AvatarBadge
diff --git a/shared/teams/confirm-modals/confirm-kick-out.tsx b/shared/teams/confirm-modals/confirm-kick-out.tsx
index 365221918d46..6faa5dbdb301 100644
--- a/shared/teams/confirm-modals/confirm-kick-out.tsx
+++ b/shared/teams/confirm-modals/confirm-kick-out.tsx
@@ -8,6 +8,7 @@ import {useSafeNavigation} from '@/util/safe-navigation'
 import setRouteParamsIfPresent from './set-route-params-if-present'
 import {useLoadedTeam} from '../team/use-loaded-team'
 import {useTeamsListMap} from '../use-teams-list'
+import AvatarBadge from './avatar-badge'
 
 type Props = {
   members: string[]
@@ -27,10 +28,12 @@ const ConfirmKickOut = (props: Props) => {
     [subteamIDs, teamMetaByID]
   )
   const teamname = teamMeta.teamname
-  const waitingKeys = ([] as string[]).concat.apply(
-    members.map(member => C.waitingKeyTeamsRemoveMember(teamID, member)),
-    members.map(member => subteamIDs.map(subteamID => C.waitingKeyTeamsRemoveMember(subteamID, member)))
-  )
+  const waitingKeys = [
+    ...members.map(member => C.waitingKeyTeamsRemoveMember(teamID, member)),
+    ...members.flatMap(member =>
+      subteamIDs.map(subteamID => C.waitingKeyTeamsRemoveMember(subteamID, member))
+    ),
+  ]
   const waiting = C.Waiting.useAnyWaiting(waitingKeys)
   const waitingError = C.Waiting.useAnyErrors(waitingKeys)
   const navigation = useNavigation()
@@ -95,22 +98,14 @@ const ConfirmKickOut = (props: Props) => {
   const header = (
     <Kb.Box2 direction="vertical" relative={true}>
       <Kb.AvatarLine usernames={members} size={64} layout="horizontal" maxShown={5} />
-      <Kb.Box2
-        direction="horizontal"
-        centerChildren={true}
-        overflow="hidden"
+      <AvatarBadge
+        icon="iconfont-block"
         style={Kb.Styles.collapseStyles([
           styles.iconContainer,
           members.length > 5 && styles.iconContainerMany,
         ])}
-      >
-        <Kb.Icon
-          type="iconfont-block"
-          color={Kb.Styles.globalColors.white}
-          fontSize={14}
-          style={styles.headerIcon}
-        />
-      </Kb.Box2>
+        iconStyle={styles.headerIcon}
+      />
     </Kb.Box2>
   )
   return (
@@ -156,10 +151,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     isMobile: {right: -0.5, top: 0.5},
   }),
   iconContainer: {
-    backgroundColor: Kb.Styles.globalColors.red,
-    ...Kb.Styles.border(Kb.Styles.globalColors.white, 3, 12),
     bottom: -3,
-    ...Kb.Styles.size(24),
     position: 'absolute',
     right: isMobile ? -24 : 0,
   },
diff --git a/shared/teams/confirm-modals/confirm-remove-from-channel.tsx b/shared/teams/confirm-modals/confirm-remove-from-channel.tsx
index 0f055cef97cc..531ddb072ebb 100644
--- a/shared/teams/confirm-modals/confirm-remove-from-channel.tsx
+++ b/shared/teams/confirm-modals/confirm-remove-from-channel.tsx
@@ -51,7 +51,11 @@ const ConfirmRemoveFromChannel = (props: Props) => {
       <Kb.AvatarLine usernames={members} size={64} layout="horizontal" maxShown={5} />
       <Kb.Icon
         type="iconfont-block"
-        style={Kb.Styles.collapseStyles([styles.headerIcon, members.length <= 5 ? styles.iconContainerSingle : styles.iconContainer])}
+        style={Kb.Styles.collapseStyles([
+          styles.headerIcon,
+          styles.iconContainer,
+          members.length > 5 && styles.iconContainerMany,
+        ])}
         sizeType="Small"
       />
     </Kb.Box2>
@@ -89,13 +93,9 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     },
   }),
   iconContainer: {
-    bottom: -3,
-    position: 'absolute',
-    right: 20,
-  },
-  iconContainerSingle: {
     bottom: -3,
     position: 'absolute',
     right: 0,
   },
+  iconContainerMany: {right: 20},
 }))
diff --git a/shared/teams/confirm-modals/really-leave-team/index.tsx b/shared/teams/confirm-modals/really-leave-team/index.tsx
index 8f8c51e8aec0..dddf221f7c57 100644
--- a/shared/teams/confirm-modals/really-leave-team/index.tsx
+++ b/shared/teams/confirm-modals/really-leave-team/index.tsx
@@ -4,12 +4,12 @@ import * as Kb from '@/common-adapters'
 import {useSafeSubmit} from '@/util/safe-submit'
 import * as T from '@/constants/types'
 import LastOwnerDialog from './last-owner'
+import AvatarBadge from '../avatar-badge'
 import {useLoadedTeam} from '@/teams/team/use-loaded-team'
 
-export type Props = {
+type Props = {
   error: string
   onBack: () => void
-  onDeleteTeam: () => void
   onLeave: (perm: boolean) => void
   name: string
   open?: boolean
@@ -18,14 +18,7 @@ export type Props = {
 const Header = (props: Props) => (
   <>
     <Kb.Avatar teamname={props.name} size={64} />
-    <Kb.Box2 direction="horizontal" centerChildren={true} overflow="hidden" style={styles.iconContainer}>
-      <Kb.Icon
-        type="iconfont-leave"
-        color={Kb.Styles.globalColors.white}
-        fontSize={14}
-        style={styles.headerIcon}
-      />
-    </Kb.Box2>
+    <AvatarBadge icon="iconfont-leave" style={styles.iconContainer} iconStyle={styles.headerIcon} />
   </>
 )
 
@@ -90,12 +83,6 @@ const styles = Kb.Styles.styleSheetCreate(
         top: 1,
       },
       iconContainer: {
-        ...Kb.Styles.size(24),
-        backgroundColor: Kb.Styles.globalColors.red,
-        borderColor: Kb.Styles.globalColors.white,
-        borderRadius: 12,
-        borderStyle: 'solid',
-        borderWidth: 3,
         marginRight: -46,
         marginTop: -20,
         zIndex: 1,
@@ -149,7 +136,6 @@ const ReallyLeaveTeamContainer = (op: OwnProps) => {
     <ReallyLeaveTeam
       error={error?.message ?? ''}
       onBack={onBack}
-      onDeleteTeam={onDeleteTeam}
       onLeave={onLeave}
       open={open}
       name={teamname}
diff --git a/shared/teams/confirm-modals/really-leave-team/last-owner.tsx b/shared/teams/confirm-modals/really-leave-team/last-owner.tsx
index e04fa4a2d840..d86cefbe1712 100644
--- a/shared/teams/confirm-modals/really-leave-team/last-owner.tsx
+++ b/shared/teams/confirm-modals/really-leave-team/last-owner.tsx
@@ -7,7 +7,7 @@ type Props = {
   stillLoadingTeam: boolean
 }
 
-const ReallyLeaveTeam = (props: Props) => (
+const LastOwnerDialog = (props: Props) => (
   <>
     {props.stillLoadingTeam ? (
       <Kb.ProgressIndicator type="Huge" />
@@ -25,7 +25,7 @@ const ReallyLeaveTeam = (props: Props) => (
             <Kb.Icon type="iconfont-leave" style={styles.leaveIcon} />
           </Kb.Box2>
           <Kb.Text type="Header" center={true} style={styles.headerText}>
-            {"You can't leave the {props.name} team because you're the only owner."}
+            {`You can't leave the ${props.name} team because you're the only owner.`}
           </Kb.Text>
           <Kb.Text type="Body" center={true} style={styles.bodyText}>
             {`You'll have to add another user as an owner before you can leave ${props.name}. Or, you can `}
@@ -98,4 +98,4 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   }),
 }))
 
-export default ReallyLeaveTeam
+export default LastOwnerDialog
diff --git a/shared/teams/container.tsx b/shared/teams/container.tsx
index cac92374a80c..b6d178f909fd 100644
--- a/shared/teams/container.tsx
+++ b/shared/teams/container.tsx
@@ -6,8 +6,7 @@ import type * as T from '@/constants/types'
 import Main from './main'
 import {ActivityLevelsProvider, useActivityLevels} from './common'
 import {useTeamsList} from './use-teams-list'
-import {useSafeNavigation} from '@/util/safe-navigation'
-import {makeNewTeamWizard} from './new-team/wizard/state'
+import {useHeaderActions} from './get-options'
 import {useNavigation} from '@react-navigation/native'
 
 const orderTeams = (
@@ -50,7 +49,7 @@ type Props = {
   sort?: T.Teams.TeamListSort
 }
 
-const Connected = ({filter = '', sort = 'role'}: Props) => {
+const TeamsRoot = ({filter = '', sort = 'role'}: Props) => {
   const {reload, teams} = useTeamsList()
   const activityLevels = useActivityLevels()
   const {deletedTeams, newTeamRequests, newTeams, teamIDToResetUsers} = useNotifState(
@@ -73,11 +72,8 @@ const Connected = ({filter = '', sort = 'role'}: Props) => {
     teamMeta,
   }))
 
-  const nav = useSafeNavigation()
   const navigation = useNavigation('teamsRoot')
-  const onCreateTeam = () =>
-    nav.safeNavigateAppend({name: 'teamWizard1TeamPurpose', params: {wizard: makeNewTeamWizard()}})
-  const onJoinTeam = () => nav.safeNavigateAppend({name: 'teamJoinTeamDialog', params: {}})
+  const {onCreateTeam, onJoinTeam} = useHeaderActions()
 
   return (
     <Kb.Reloadable waitingKeys={C.waitingKeyTeamsLoaded} onReload={reload}>
@@ -93,10 +89,10 @@ const Connected = ({filter = '', sort = 'role'}: Props) => {
   )
 }
 
-const Container = (props: Props) => (
+const TeamsRootContainer = (props: Props) => (
   <ActivityLevelsProvider>
-    <Connected {...props} />
+    <TeamsRoot {...props} />
   </ActivityLevelsProvider>
 )
 
-export default Container
+export default TeamsRootContainer
diff --git a/shared/teams/create-team-effects.tsx b/shared/teams/create-team-effects.tsx
deleted file mode 100644
index aa77b82f7a64..000000000000
--- a/shared/teams/create-team-effects.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import type * as T from '@/constants/types'
-import {invalidateLoadedTeams} from './use-teams-list'
-
-export const onTeamCreated = (_teamID: T.Teams.TeamID) => {
-  invalidateLoadedTeams()
-}
diff --git a/shared/teams/delete-team.tsx b/shared/teams/delete-team.tsx
index f9031c70d91e..08ff9cc6c408 100644
--- a/shared/teams/delete-team.tsx
+++ b/shared/teams/delete-team.tsx
@@ -8,6 +8,7 @@ import noop from 'lodash/noop'
 import {deleteTeam} from './actions'
 import {useLoadedTeam} from './team/use-loaded-team'
 import {useTeamsList} from './use-teams-list'
+import {useNavUpWhenDone} from './common/use-nav-up-when-done'
 
 type OwnProps = {teamID: T.Teams.TeamID}
 
@@ -35,17 +36,7 @@ const DeleteTeamContainer = (op: OwnProps) => {
   const onCheck = (which: keyof typeof checks) => (enable: boolean) => setChecks({...checks, [which]: enable})
   const disabled = !checkChats || !checkFolder || !checkNotify
   const error = C.Waiting.useAnyErrors(C.waitingKeyTeamsDeleteTeam(teamID))
-  const prevDeleteWaitingRef = React.useRef(deleteWaiting)
-  React.useEffect(() => {
-    if (!deleteWaiting && prevDeleteWaitingRef.current && !error) {
-      // Finished, nav up
-      onBack()
-    }
-  }, [deleteWaiting, onBack, error])
-
-  React.useEffect(() => {
-    prevDeleteWaitingRef.current = deleteWaiting
-  }, [deleteWaiting])
+  useNavUpWhenDone(deleteWaiting, error)
 
   const dispatchClearWaiting = C.Waiting.useDispatchClearWaiting()
   React.useEffect(() => {
@@ -78,7 +69,7 @@ const DeleteTeamContainer = (op: OwnProps) => {
         header={<Header teamname={teamname} />}
         prompt={
           <Kb.Text type="Header" center={true} style={Kb.Styles.padding(0, Kb.Styles.globalMargins.small)}>
-            {"You can't delete {teamname} because it has subteams."}
+            {`You can't delete ${teamname} because it has subteams.`}
           </Kb.Text>
         }
         onCancel={onBack}
diff --git a/shared/teams/edit-team-description.tsx b/shared/teams/edit-team-description.tsx
index 8546a7042589..68899da772f3 100644
--- a/shared/teams/edit-team-description.tsx
+++ b/shared/teams/edit-team-description.tsx
@@ -3,6 +3,7 @@ import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import {useLoadedTeam} from './team/use-loaded-team'
+import {useNavUpWhenDone} from './common/use-nav-up-when-done'
 
 type Props = {teamID: T.Teams.TeamID}
 
@@ -41,24 +42,13 @@ const EditTeamDescription = (props: Props) => {
     )
   }
 
-  const wasWaitingRef = React.useRef(waiting)
-  React.useEffect(() => {
-    if (!waiting && wasWaitingRef.current && !error) C.Router2.navigateUp()
-  }, [waiting, wasWaitingRef, error])
-
-  React.useEffect(() => {
-    wasWaitingRef.current = waiting
-  }, [waiting])
+  useNavUpWhenDone(waiting, error)
 
   return (
     <>
-      {error ? (
-        <Kb.Banner color="red" key="err">
-          {error}
-        </Kb.Banner>
-      ) : null}
+      <Kb.ErrorBanner error={error} />
       <Kb.ScrollView alwaysBounceVertical={false} style={Kb.Styles.globalStyles.flexOne}>
-        <Kb.Box2 alignItems="center" direction="vertical" fullWidth={true} style={styles.container}>
+        <Kb.Box2 alignItems="center" direction="vertical" fullWidth={true} padding="small">
           <Kb.Input3
             placeholder="Team description"
             onChangeText={value => {
@@ -75,25 +65,16 @@ const EditTeamDescription = (props: Props) => {
         </Kb.Box2>
       </Kb.ScrollView>
       <Kb.ModalFooter>
-        <Kb.ButtonBar fullWidth={true} style={styles.buttonBar}>
-          <Kb.Button label="Cancel" onClick={C.Router2.navigateUp} type="Dim" />
-          <Kb.Button
-            disabled={description === origDescription}
-            label="Save"
-            onClick={onSave}
-            waiting={waiting}
-          />
-        </Kb.ButtonBar>
+        <Kb.ConfirmButtons
+          waiting={waiting}
+          onCancel={C.Router2.navigateUp}
+          onConfirm={onSave}
+          confirmLabel="Save"
+          confirmDisabled={description === origDescription}
+        />
       </Kb.ModalFooter>
     </>
   )
 }
 
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  buttonBar: {alignItems: 'center'},
-  container: {
-    ...Kb.Styles.padding(Kb.Styles.globalMargins.small),
-  },
-}))
-
 export default EditTeamDescription
diff --git a/shared/teams/emojis/add-alias.tsx b/shared/teams/emojis/add-alias.tsx
index 4cc703ecbba1..25b9bc771c29 100644
--- a/shared/teams/emojis/add-alias.tsx
+++ b/shared/teams/emojis/add-alias.tsx
@@ -13,6 +13,7 @@ import {AliasInput, Modal, type AliasRef} from './common'
 import {useEmojiState} from './use-emoji'
 import {usePickerState} from '@/chat/emoji-picker/use-picker'
 import {ensureError} from '@/util/errors'
+import {produce} from 'immer'
 
 type Props = {
   conversationIDKey?: T.Chat.ConversationIDKey
@@ -65,15 +66,20 @@ const AddAliasModal = (props: Props) => {
 
   const aliasInputRef = React.useRef<AliasRef>(null)
   const onChoose = (emojiStr: string, renderableEmoji: RenderableEmoji) => {
-    setSelection(selected => ({
-      ...selected,
-      alias: aliasFromEmojiStr(emojiStr),
-      emoji: {emojiStr, renderableEmoji},
-    }))
+    setSelection(
+      produce(draft => {
+        draft.alias = aliasFromEmojiStr(emojiStr)
+        draft.emoji = {emojiStr, renderableEmoji}
+      })
+    )
     aliasInputRef.current?.focus()
   }
   const onChangeAlias = (alias: string) => {
-    setSelection(selected => ({...selected, alias}))
+    setSelection(
+      produce(draft => {
+        draft.alias = alias
+      })
+    )
   }
 
   React.useEffect(() => {
diff --git a/shared/teams/emojis/add-emoji.tsx b/shared/teams/emojis/add-emoji.tsx
index a7dfc103e168..d402956d5ffd 100644
--- a/shared/teams/emojis/add-emoji.tsx
+++ b/shared/teams/emojis/add-emoji.tsx
@@ -20,10 +20,6 @@ type Props = {
   conversationIDKey: T.Chat.ConversationIDKey
   teamID: T.Teams.TeamID // not supported yet
 }
-type RoutableProps = {
-  conversationIDKey: T.Chat.ConversationIDKey
-  teamID: T.Teams.TeamID // not supported yet
-}
 
 // don't prefill on mobile since it's always a long random string.
 const filePathToDefaultAlias = isMobile
@@ -156,7 +152,7 @@ const useEmojiUpload = (conversationIDKey: T.Chat.ConversationIDKey, onChange?:
   }
 }
 
-export const AddEmojiModal = (props: Props) => {
+const AddEmojiModal = (props: Props) => {
   const onChange = useEmojiState(s => s.dispatch.triggerEmojiUpdated)
   const {addFiles, bannerError, clearErrors, clearFiles, doAddEmojis, emojisToAdd, waitingAddEmojis} =
     useEmojiUpload(props.conversationIDKey, onChange)
@@ -212,12 +208,6 @@ export const AddEmojiModal = (props: Props) => {
   )
 }
 
-const AddEmojiModalWrapper = (routableProps: RoutableProps) => {
-  const conversationIDKey = routableProps.conversationIDKey
-  const teamID = routableProps.teamID
-  return <AddEmojiModal conversationIDKey={conversationIDKey} teamID={teamID} />
-}
-
 const usePickFiles = (addFiles: (filePaths: Array<string>) => void) => {
   const [dragOver, setDragOver] = React.useState(false)
   const onDragOver = (e: React.DragEvent) => e.dataTransfer.types.includes('Files') && setDragOver(true)
@@ -485,4 +475,4 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   },
 }))
 
-export default AddEmojiModalWrapper
+export default AddEmojiModal
diff --git a/shared/teams/external-team.tsx b/shared/teams/external-team.tsx
index dc6317520145..aa27d108ac0f 100644
--- a/shared/teams/external-team.tsx
+++ b/shared/teams/external-team.tsx
@@ -4,6 +4,7 @@ import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import * as Teams from '@/constants/teams'
 import {useTeamLinkPopup} from './common'
+import RoleCrown from './common/role-crown'
 import {pluralize} from '@/util/string'
 import capitalize from 'lodash/capitalize'
 import {useSafeNavigation} from '@/util/safe-navigation'
@@ -48,7 +49,7 @@ const ExternalTeam = (props: Props) => {
 
   if (teamInfo) {
     return (
-      <Kb.Box2 direction="vertical" gap="small" fullWidth={true} fullHeight={true}>
+      <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true}>
         <ExternalTeamInfo info={teamInfo} />
       </Kb.Box2>
     )
@@ -205,14 +206,7 @@ const Member = ({member, firstItem}: {member: T.RPCGen.TeamMemberRole; firstItem
                 •
               </Kb.Text>
             )}
-            {[T.RPCGen.TeamRole.admin, T.RPCGen.TeamRole.owner].includes(member.role) && (
-              <Kb.Icon
-                type={`iconfont-crown-${roleString}` as Kb.IconType}
-                color={roleString === 'owner' ? Kb.Styles.globalColors.yellowDark : Kb.Styles.globalColors.black_35}
-                sizeType="Small"
-                style={styles.crownIcon}
-              />
-            )}
+            <RoleCrown role={roleString} sizeType="Small" style={styles.crownIcon} />
             <Kb.Text type="BodySmall">{capitalize(roleString)}</Kb.Text>
           </Kb.Box2>
         </Kb.Box2>
diff --git a/shared/teams/get-options.tsx b/shared/teams/get-options.tsx
index e1023762a67b..eb760aeede1c 100644
--- a/shared/teams/get-options.tsx
+++ b/shared/teams/get-options.tsx
@@ -4,7 +4,7 @@ import {makeNewTeamWizard} from './new-team/wizard/state'
 import {useTeamsList} from './use-teams-list'
 import {useRoute, useNavigation} from '@react-navigation/native'
 
-const useHeaderActions = () => {
+export const useHeaderActions = () => {
   const nav = useSafeNavigation()
   return {
     onCreateTeam: () =>
diff --git a/shared/teams/invite-by-contact/index.native.tsx b/shared/teams/invite-by-contact/index.native.tsx
index 42af98ff0562..b69631f8de29 100644
--- a/shared/teams/invite-by-contact/index.native.tsx
+++ b/shared/teams/invite-by-contact/index.native.tsx
@@ -18,37 +18,33 @@ const contactRow = (_: number, props: ContactRowProps) => {
   return (
     <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center" style={styles.contactRowBox}>
       <Kb.Box2 direction="horizontal" alignItems="center" flex={1}>
-        <Kb.Box2 direction="horizontal" alignItems="center" flex={1}>
-          {!!hasThumbnail && !!props.pictureUri && (
-            <Kb.Image style={styles.thumbnail} src={props.pictureUri} />
-          )}
-          {!hasThumbnail && <Kb.Avatar size={48} style={styles.placeHolderAvatar} />}
-          <Kb.Box2 direction="vertical">
-            <Kb.Box2 direction="horizontal" fullWidth={true}>
-              <Kb.Text type="BodySemibold">{props.name}</Kb.Text>
-            </Kb.Box2>
-            <Kb.Box2 direction="horizontal" fullWidth={true}>
-              <Kb.Text type="BodySmall">{props.valueFormatted || props.value}</Kb.Text>
-            </Kb.Box2>
+        {!!hasThumbnail && !!props.pictureUri && (
+          <Kb.Image style={styles.thumbnail} src={props.pictureUri} />
+        )}
+        {!hasThumbnail && <Kb.Avatar size={48} style={styles.placeHolderAvatar} />}
+        <Kb.Box2 direction="vertical" flex={1}>
+          <Kb.Box2 direction="horizontal" fullWidth={true}>
+            <Kb.Text type="BodySemibold">{props.name}</Kb.Text>
+          </Kb.Box2>
+          <Kb.Box2 direction="horizontal" fullWidth={true}>
+            <Kb.Text type="BodySmall">{props.valueFormatted || props.value}</Kb.Text>
           </Kb.Box2>
         </Kb.Box2>
-        <Kb.Box2 direction="vertical">
-          <Kb.Button
-            type="Success"
-            mode={props.alreadyInvited ? 'Secondary' : 'Primary'}
-            label={props.alreadyInvited ? 'Invited!' : 'Invite'}
-            waiting={props.loading}
-            small={true}
-            onClick={props.onClick}
-            style={styles.inviteButton}
-          />
-        </Kb.Box2>
+        <Kb.Button
+          type="Success"
+          mode={props.alreadyInvited ? 'Secondary' : 'Primary'}
+          label={props.alreadyInvited ? 'Invited!' : 'Invite'}
+          waiting={props.loading}
+          small={true}
+          onClick={props.onClick}
+          style={styles.inviteButton}
+        />
       </Kb.Box2>
     </Kb.Box2>
   )
 }
 
-export type InviteByContactProps = {
+type InviteByContactProps = {
   selectedRole: T.Teams.TeamRoleType
   onRoleChange: (newRole: T.Teams.TeamRoleType) => void
   teamName: string
diff --git a/shared/teams/invite-by-contact/team-invite-by-contacts.tsx b/shared/teams/invite-by-contact/team-invite-by-contacts.tsx
index e9859138ea88..8ae1410b4cbe 100644
--- a/shared/teams/invite-by-contact/team-invite-by-contacts.tsx
+++ b/shared/teams/invite-by-contact/team-invite-by-contacts.tsx
@@ -5,25 +5,8 @@ import {getE164} from '@/util/phone-numbers'
 import {openSMS} from '@/util/misc'
 import logger from '@/logger'
 import {useLoadedTeam} from '../team/use-loaded-team'
-import {InviteByContact} from './index.native'
-import useContacts from '../common/use-contacts.native'
-
-type Contact = {
-  id: string
-  name: string
-  pictureUri?: string
-  type: 'phone' | 'email'
-  value: string
-  valueFormatted?: string
-}
-
-type ContactRowProps = Contact & {
-  id: string
-  alreadyInvited: boolean
-  loading: boolean
-  onClick: () => void
-}
-
+import {InviteByContact, type ContactRowProps} from './index.native'
+import useContacts, {type Contact} from '../common/use-contacts.native'
 
 // Seitan invite names (labels) look like this: "[name] ([phone number])". Try
 // to derive E164 phone number based on seitan invite name and user's region.
diff --git a/shared/teams/invite-by-email.tsx b/shared/teams/invite-by-email.tsx
index a9234d7a5958..a1504683af4e 100644
--- a/shared/teams/invite-by-email.tsx
+++ b/shared/teams/invite-by-email.tsx
@@ -13,7 +13,7 @@ const malformedEmailErrorMessage = (malformed: ReadonlyArray<string>) =>
     ? `Error parsing email: ${malformed[0]}`
     : `There was an error parsing ${malformed.length} address${malformed.length > 1 ? 'es' : ''}.`
 
-const Container = (ownProps: OwnProps) => {
+const InviteByEmail = (ownProps: OwnProps) => {
   const teamID = ownProps.teamID
   const {
     teamMeta: {teamname},
@@ -64,13 +64,12 @@ const Container = (ownProps: OwnProps) => {
   }
 
   return (
-    <Kb.Box2 direction="vertical" fullWidth={true}>
-      <Kb.Box2
-        direction="vertical"
-        alignItems="center"
-        fullWidth={true}
-        style={styles.outerBox}
-      >
+    <Kb.Box2
+      direction="vertical"
+      alignItems="center"
+      fullWidth={true}
+      style={styles.outerBox}
+    >
         <Kb.Text style={styles.header} type="Header">
           Invite by email
         </Kb.Text>
@@ -110,10 +109,9 @@ const Container = (ownProps: OwnProps) => {
             </Kb.Text>
           )}
         </Kb.Box2>
-        <Kb.ButtonBar>
-          <Kb.WaitingButton label="Invite" onClick={onInvite} waitingKey={waitingKey} />
-        </Kb.ButtonBar>
-      </Kb.Box2>
+      <Kb.ButtonBar>
+        <Kb.WaitingButton label="Invite" onClick={onInvite} waitingKey={waitingKey} />
+      </Kb.ButtonBar>
     </Kb.Box2>
   )
 }
@@ -134,4 +132,4 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   roleRow: {margin: Kb.Styles.globalMargins.tiny},
 }))
 
-export default Container
+export default InviteByEmail
diff --git a/shared/teams/join-team/container.tsx b/shared/teams/join-team/container.tsx
index e89d06a9a8e8..26caff07b3a8 100644
--- a/shared/teams/join-team/container.tsx
+++ b/shared/teams/join-team/container.tsx
@@ -4,6 +4,7 @@ import * as Kb from '@/common-adapters'
 import {RPCError} from '@/util/errors'
 import upperFirst from 'lodash/upperFirst'
 import * as React from 'react'
+import Success from './success'
 import {useNavigation} from '@react-navigation/native'
 
 type OwnProps = {initialTeamname?: string; success?: boolean}
@@ -20,9 +21,10 @@ const getJoinTeamError = (error: unknown) => {
   return error instanceof Error ? error.message : 'Something went wrong.'
 }
 
-const Container = (props: OwnProps) => <ContainerInner key={props.initialTeamname ?? ''} {...props} />
+// keyed so a different initial teamname starts the dialog fresh
+const JoinTeam = (props: OwnProps) => <JoinTeamInner key={props.initialTeamname ?? ''} {...props} />
 
-const ContainerInner = ({initialTeamname, success: successParam}: OwnProps) => {
+const JoinTeamInner = ({initialTeamname, success: successParam}: OwnProps) => {
   const [errorText, setErrorText] = React.useState('')
   const [open, setOpen] = React.useState(false)
   const [successTeamName, setSuccessTeamName] = React.useState('')
@@ -137,20 +139,6 @@ const ContainerInner = ({initialTeamname, success: successParam}: OwnProps) => {
   )
 }
 
-export const Success = (props: {teamname: string}) => (
-  <Kb.Box2 alignItems="center" direction="vertical" gap="tiny" fullWidth={true} style={styles.container}>
-    <Kb.ImageIcon type="icon-illustration-welcome-96" />
-    {!!props.teamname && (
-      <Kb.Text center={true} type="Header">
-        You’ve joined {props.teamname}!
-      </Kb.Text>
-    )}
-    <Kb.Text center={true} type="Body">
-      The team may take a tiny while to appear as an admin needs to come online. But you’re in.
-    </Kb.Text>
-  </Kb.Box2>
-)
-
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
@@ -162,4 +150,4 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-export default Container
+export default JoinTeam
diff --git a/shared/teams/join-team/join-from-invite.tsx b/shared/teams/join-team/join-from-invite.tsx
index 78458015c1ae..fa71c0628285 100644
--- a/shared/teams/join-team/join-from-invite.tsx
+++ b/shared/teams/join-team/join-from-invite.tsx
@@ -4,7 +4,7 @@ import * as Kb from '@/common-adapters'
 import {RPCError} from '@/util/errors'
 import * as React from 'react'
 import {useSafeNavigation} from '@/util/safe-navigation'
-import {Success} from './container'
+import Success from './success'
 
 type Props = {
   inviteDetails?: T.RPCGen.InviteLinkDetails
diff --git a/shared/teams/join-team/success.tsx b/shared/teams/join-team/success.tsx
new file mode 100644
index 000000000000..733c5935abfe
--- /dev/null
+++ b/shared/teams/join-team/success.tsx
@@ -0,0 +1,25 @@
+import * as Kb from '@/common-adapters'
+
+// "you're in" body shown after joining an open team, also used by the
+// invite-link flow
+const Success = (props: {teamname: string}) => (
+  <Kb.Box2 alignItems="center" direction="vertical" gap="tiny" fullWidth={true} style={styles.container}>
+    <Kb.ImageIcon type="icon-illustration-welcome-96" />
+    {!!props.teamname && (
+      <Kb.Text center={true} type="Header">
+        You’ve joined {props.teamname}!
+      </Kb.Text>
+    )}
+    <Kb.Text center={true} type="Body">
+      The team may take a tiny while to appear as an admin needs to come online. But you’re in.
+    </Kb.Text>
+  </Kb.Box2>
+)
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  container: {
+    padding: Kb.Styles.globalMargins.small,
+  },
+}))
+
+export default Success
diff --git a/shared/teams/main/footer.tsx b/shared/teams/main/footer.tsx
index 86e2b4597bab..fbfd3d9c2e75 100644
--- a/shared/teams/main/footer.tsx
+++ b/shared/teams/main/footer.tsx
@@ -10,11 +10,15 @@ const TeamsFooter = (props: {empty: boolean}) => {
       ) : (
         <>
           {props.empty && (
-            <Kb.Box2 direction="vertical" alignItems="center" gap="tiny" style={styles.empty}>
-              <Kb.Box2 direction="vertical" flex={1} />
+            <Kb.Box2
+              direction="vertical"
+              alignItems="center"
+              justifyContent="center"
+              gap="tiny"
+              style={styles.empty}
+            >
               <Kb.ImageIcon type="icon-dark-empty-lone-wolf-116-96" />
               <Kb.Text type="BodySmall">You are not a part of any team, lone wolf.</Kb.Text>
-              <Kb.Box2 direction="vertical" flex={1} />
             </Kb.Box2>
           )}
           <Kb.Box2 direction="vertical" flex={1} />
diff --git a/shared/teams/main/index.tsx b/shared/teams/main/index.tsx
index 3b41228dbaab..cfb28c1def0d 100644
--- a/shared/teams/main/index.tsx
+++ b/shared/teams/main/index.tsx
@@ -20,7 +20,7 @@ export type Props = {
 }
 
 const TeamBigButtons = (props: {onCreateTeam: () => void; onJoinTeam: () => void; empty: boolean}) => (
-  <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.teamButtons} gap="tiny" justifyContent="flex-start">
+  <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.teamButtons} gap="tiny">
     <Kb.ClickableBox
       style={styles.bigButton}
       onClick={props.onCreateTeam}
diff --git a/shared/teams/main/team-row.tsx b/shared/teams/main/team-row.tsx
index 012a49655008..6bf57cb67a0f 100644
--- a/shared/teams/main/team-row.tsx
+++ b/shared/teams/main/team-row.tsx
@@ -7,6 +7,7 @@ import logger from '@/logger'
 import TeamMenu from '../team/menu-container'
 import {pluralize} from '@/util/string'
 import {Activity} from '../common'
+import RoleCrown from '../common/role-crown'
 
 export type TeamRowItem = {
   activityLevel: T.Teams.ActivityLevel
@@ -41,22 +42,12 @@ const TeamRow = function TeamRow(props: Props) {
   }
   const {popup, popupAnchor, showPopup} = Kb.usePopup2(makePopup)
 
-  const crownIconType: Kb.IconType | undefined =
-    teamMeta.role === 'owner'
-      ? 'iconfont-crown-owner'
-      : teamMeta.role === 'admin'
-        ? 'iconfont-crown-admin'
-        : undefined
-  const crownIcon = crownIconType ? (
-    <Kb.Box2 direction="vertical" style={styles.crownIconBox} centerChildren={true}>
-      <Kb.Icon
-        type={crownIconType}
-        sizeType="Tiny"
-        color={teamMeta.role === 'owner' ? Kb.Styles.globalColors.yellowDark : Kb.Styles.globalColors.black_35}
-        style={styles.crownIcon}
-      />
-    </Kb.Box2>
-  ) : null
+  const crownIcon =
+    teamMeta.role === 'owner' || teamMeta.role === 'admin' ? (
+      <Kb.Box2 direction="vertical" style={styles.crownIconBox} centerChildren={true}>
+        <RoleCrown role={teamMeta.role} sizeType="Tiny" style={styles.crownIcon} />
+      </Kb.Box2>
+    ) : null
 
   const avatarBlock = (
     <Kb.Box2 direction="vertical" style={styles.avatarOuter} centerChildren={true}>
@@ -74,14 +65,10 @@ const TeamRow = function TeamRow(props: Props) {
         <Kb.Text type="BodySemibold" lineClamp={1} ellipsizeMode="middle">
           {teamMeta.teamname}
         </Kb.Text>
-        {teamMeta.isOpen && (
-          <Kb.Meta title="open" backgroundColor={Kb.Styles.globalColors.green} style={styles.alignSelfCenter} />
-        )}
+        {teamMeta.isOpen && <Kb.Meta variant="open" />}
       </Kb.Box2>
       <Kb.Box2 direction="horizontal" alignItems="center" gap="tiny" alignSelf="flex-start">
-        {isNew && (
-          <Kb.Meta title="new" backgroundColor={Kb.Styles.globalColors.orange} style={styles.alignSelfCenter} />
-        )}
+        {isNew && <Kb.Meta variant="new" />}
         <Kb.Text type="BodySmall">
           {teamMeta.memberCount.toLocaleString()} {pluralize('member', teamMeta.memberCount)}
         </Kb.Text>
@@ -155,9 +142,6 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     flexShrink: 0,
     marginRight: 8,
   },
-  alignSelfCenter: {
-    alignSelf: 'center',
-  },
   avatarOuter: Kb.Styles.platformStyles({
     common: {
       minHeight: smallHeight,
diff --git a/shared/teams/new-team/index.stories.tsx b/shared/teams/new-team/index.stories.tsx
index 9e3708aa165c..c4f96edbc50d 100644
--- a/shared/teams/new-team/index.stories.tsx
+++ b/shared/teams/new-team/index.stories.tsx
@@ -5,7 +5,6 @@ const meta: Meta<typeof CreateNewTeam> = {
   component: CreateNewTeam,
   title: 'Teams/CreateNewTeam',
   args: {
-    onCancel: () => {},
     onSubmit: () => {},
   },
 }
diff --git a/shared/teams/new-team/index.tsx b/shared/teams/new-team/index.tsx
index c74ace56545e..5890ff5da62f 100644
--- a/shared/teams/new-team/index.tsx
+++ b/shared/teams/new-team/index.tsx
@@ -11,7 +11,6 @@ const openSubteamInfo = () => { void openUrl('https://book.keybase.io/docs/teams
 
 type Props = {
   baseTeam?: string // if set we're creating a subteam of this teamname
-  onCancel: () => void
   onSubmit: (fullName: string, joinSubteam: boolean) => void
 }
 
@@ -53,7 +52,7 @@ export const CreateNewTeam = (props: Props) => {
           />
         </Kb.Banner>
       ) : null}
-      {errorText ? <Kb.Banner color="red">{errorText}</Kb.Banner> : null}
+      <Kb.ErrorBanner error={errorText} />
       <Kb.ScrollView alwaysBounceVertical={false} style={Kb.Styles.globalStyles.flexOne}>
         <Kb.Box2 direction="vertical" fullWidth={true} padding="small" gap="tiny">
           <Kb.Input3
@@ -95,32 +94,23 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
 
 type OwnProps = {subteamOf?: T.Teams.TeamID}
 
-const Container = (ownProps: OwnProps) => {
+const CreateNewTeamContainer = (ownProps: OwnProps) => {
   const subteamOf = ownProps.subteamOf ?? T.Teams.noTeamID
   const {
     loading,
     teamMeta: {teamname: baseTeam},
   } = useLoadedTeam(subteamOf)
-  const navigateUp = C.Router2.navigateUp
-  const onCancel = () => {
-    navigateUp()
-  }
   const onSubmit = (teamname: string, joinSubteam: boolean) => {
     void createNewTeamAndNavigate(teamname, joinSubteam)
   }
   const props = {
     baseTeam,
-    onCancel,
     onSubmit,
   }
   if (subteamOf !== T.Teams.noTeamID && (loading || !baseTeam)) {
-    return (
-      <Kb.Box2 direction="vertical" fullWidth={true} fullHeight={true} centerChildren={true}>
-        <Kb.ProgressIndicator type="Large" />
-      </Kb.Box2>
-    )
+    return <Kb.LoadingScreen type="Large" />
   }
   return <CreateNewTeam {...props} />
 }
 
-export default Container
+export default CreateNewTeamContainer
diff --git a/shared/teams/new-team/wizard/common.tsx b/shared/teams/new-team/wizard/common.tsx
new file mode 100644
index 000000000000..d42e5b12f5a4
--- /dev/null
+++ b/shared/teams/new-team/wizard/common.tsx
@@ -0,0 +1,39 @@
+import * as Kb from '@/common-adapters'
+import * as React from 'react'
+
+// blue illustration banner across the top of a wizard step
+export const WizardBanner = (props: {icon: Kb.IconType}) => (
+  <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.banner} centerChildren={true}>
+    <Kb.ImageIcon type={props.icon} />
+  </Kb.Box2>
+)
+
+// the + button under a repeatable input list (create channels / subteams)
+export const AddRowButton = (props: {onAdd: () => void}) => (
+  <Kb.IconButton mode="Secondary" icon="iconfont-new" onClick={props.onAdd} style={styles.addButton} />
+)
+
+// editable list of strings backing the repeatable inputs
+export const useStringList = (initial: ReadonlyArray<string>) => {
+  const [items, setItems] = React.useState([...initial])
+  return {
+    addItem: () => setItems(prev => [...prev, '']),
+    clearItem: (i: number) => setItems(prev => prev.filter((_, idx) => idx !== i)),
+    items,
+    setItem: (i: number, value: string) => setItems(prev => prev.map((s, idx) => (idx === i ? value : s))),
+  }
+}
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  addButton: Kb.Styles.platformStyles({
+    isElectron: {width: 42},
+    isMobile: {width: 47},
+    isTablet: {alignSelf: 'flex-start'},
+  }),
+  banner: Kb.Styles.platformStyles({
+    common: {backgroundColor: Kb.Styles.globalColors.blue, height: 96},
+    isElectron: {overflowX: 'hidden'},
+  }),
+}))
+
+export const wizardInputStyle = {...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall)}
diff --git a/shared/teams/new-team/wizard/create-channels.tsx b/shared/teams/new-team/wizard/create-channels.tsx
index 162a437c6d61..1092dc8ad1fb 100644
--- a/shared/teams/new-team/wizard/create-channels.tsx
+++ b/shared/teams/new-team/wizard/create-channels.tsx
@@ -1,9 +1,10 @@
-import * as React from 'react'
+import type * as React from 'react'
 import * as Kb from '@/common-adapters'
 import type * as T from '@/constants/types'
 import {pluralize} from '@/util/string'
 import * as C from '@/constants'
 import {type NewTeamWizard} from './state'
+import {AddRowButton, useStringList, WizardBanner, wizardInputStyle} from './common'
 import {useNavigation} from '@react-navigation/native'
 
 type Props = {
@@ -20,18 +21,7 @@ export const CreateChannelsModal = (props: Props) => {
   const {onSubmitChannels, waiting} = props
   const initialChannels = props.initialChannels ?? ['hellos', 'random', '']
 
-  const [channels, setChannels] = React.useState([...initialChannels])
-  const setChannel = (i: number, value: string) => {
-    setChannels(prev => prev.map((channel, idx) => (idx === i ? value : channel)))
-  }
-
-  const onClear = (i: number) => {
-    setChannels(prev => prev.filter((_, idx) => idx !== i))
-  }
-
-  const onAdd = () => {
-    setChannels(prev => [...prev, ''])
-  }
+  const {items: channels, setItem: setChannel, clearItem: onClear, addItem: onAdd} = useStringList(initialChannels)
 
   const filteredChannels = channels.filter(c => c.trim())
   const onContinue = () => onSubmitChannels?.(filteredChannels)
@@ -55,9 +45,7 @@ export const CreateChannelsModal = (props: Props) => {
   return (
     <>
       {props.banners}
-      <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.banner} centerChildren={true}>
-        <Kb.ImageIcon type="icon-illustration-teams-channels-460-96" />
-      </Kb.Box2>
+      <WizardBanner icon="icon-illustration-teams-channels-460-96" />
       <Kb.Box2
         direction="vertical"
         fullWidth={true}
@@ -75,7 +63,7 @@ export const CreateChannelsModal = (props: Props) => {
             onClear={() => onClear(idx)}
           />
         ))}
-        <Kb.IconButton mode="Secondary" icon="iconfont-new" onClick={onAdd} style={styles.addButton} />
+        <AddRowButton onAdd={onAdd} />
         {numChannels === 0 && !props.onSubmitChannels && (
           <Kb.Text type="BodySmall" style={styles.noChannelsText}>
             Your team will be a simple conversation. You can always make it a big team later by adding
@@ -136,20 +124,11 @@ const ChannelInput = (props: ChannelInputProps) => {
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      addButton: Kb.Styles.platformStyles({
-        isElectron: {width: 42},
-        isMobile: {width: 47},
-        isTablet: {alignSelf: 'flex-start'},
-      }),
-      banner: Kb.Styles.platformStyles({
-        common: {backgroundColor: Kb.Styles.globalColors.blue, height: 96},
-        isElectron: {overflowX: 'hidden'},
-      }),
       body: {
         ...Kb.Styles.padding(Kb.Styles.globalMargins.small),
       },
-      input: {...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall)},
-      inputGeneral: {...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall), opacity: 0.4},
+      input: wizardInputStyle,
+      inputGeneral: {...wizardInputStyle, opacity: 0.4},
       noChannelsText: {paddingTop: Kb.Styles.globalMargins.tiny, width: '100%'},
     }) as const
 )
diff --git a/shared/teams/new-team/wizard/create-subteams.tsx b/shared/teams/new-team/wizard/create-subteams.tsx
index 713043d4af1f..e3f1d15a4d3a 100644
--- a/shared/teams/new-team/wizard/create-subteams.tsx
+++ b/shared/teams/new-team/wizard/create-subteams.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import {pluralize} from '@/util/string'
 import * as C from '@/constants'
 import {newTeamWizardToAddMembersWizard, type NewTeamWizard} from './state'
+import {AddRowButton, useStringList, WizardBanner, wizardInputStyle} from './common'
 import {useNavigation} from '@react-navigation/native'
 
 const cleanSubteamName = (name: string) => name.replace(/[^0-9a-zA-Z_]/, '')
@@ -17,19 +17,7 @@ const CreateSubteams = ({wizard: wizardState}: Props) => {
   const teamname = wizardState.name
   const initialSubteams = wizardState.subteams ?? ['', '', '']
 
-  const [subteams, setSubteams] = React.useState([...initialSubteams])
-
-  const setSubteam = (i: number, value: string) => {
-    setSubteams(prev => prev.map((s, idx) => (idx === i ? value : s)))
-  }
-
-  const onClear = (i: number) => {
-    setSubteams(prev => prev.filter((_, idx) => idx !== i))
-  }
-
-  const onAdd = () => {
-    setSubteams(prev => [...prev, ''])
-  }
+  const {items: subteams, setItem: setSubteam, clearItem: onClear, addItem: onAdd} = useStringList(initialSubteams)
 
   const onContinue = () => {
     const wizard = {...wizardState, subteams: subteams.filter(Boolean)}
@@ -47,9 +35,7 @@ const CreateSubteams = ({wizard: wizardState}: Props) => {
 
   return (
     <>
-      <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.banner} centerChildren={true}>
-        <Kb.ImageIcon type="icon-illustration-teams-subteams-460-96" />
-      </Kb.Box2>
+      <WizardBanner icon="icon-illustration-teams-subteams-460-96" />
       <Kb.Box2
         direction="vertical"
         fullWidth={true}
@@ -72,7 +58,7 @@ const CreateSubteams = ({wizard: wizardState}: Props) => {
             key={idx}
           />
         ))}
-        <Kb.IconButton mode="Secondary" icon="iconfont-new" onClick={onAdd} style={styles.addButton} />
+        <AddRowButton onAdd={onAdd} />
       </Kb.Box2>
       <Kb.ModalFooter>
         <Kb.Button fullWidth={true} label={continueLabel} onClick={onContinue} />
@@ -82,15 +68,6 @@ const CreateSubteams = ({wizard: wizardState}: Props) => {
 }
 
 const styles = Kb.Styles.styleSheetCreate(() => ({
-  addButton: Kb.Styles.platformStyles({
-    isElectron: {width: 42},
-    isMobile: {width: 47},
-    isTablet: {alignSelf: 'flex-start'},
-  }),
-  banner: Kb.Styles.platformStyles({
-    common: {backgroundColor: Kb.Styles.globalColors.blue, height: 96},
-    isElectron: {overflowX: 'hidden'},
-  }),
   body: Kb.Styles.platformStyles({
     common: {
       ...Kb.Styles.padding(Kb.Styles.globalMargins.small),
@@ -98,7 +75,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
     isElectron: {minHeight: 326},
     isMobile: {...Kb.Styles.globalStyles.flexOne},
   }),
-  input: {...Kb.Styles.padding(Kb.Styles.globalMargins.xsmall)},
+  input: wizardInputStyle,
 }))
 
 export default CreateSubteams
diff --git a/shared/teams/new-team/wizard/make-big-team.tsx b/shared/teams/new-team/wizard/make-big-team.tsx
index a0b392510d3c..51f0da780280 100644
--- a/shared/teams/new-team/wizard/make-big-team.tsx
+++ b/shared/teams/new-team/wizard/make-big-team.tsx
@@ -1,6 +1,7 @@
 import * as Kb from '@/common-adapters'
 import * as C from '@/constants'
 import {newTeamWizardToAddMembersWizard, type NewTeamWizard} from './state'
+import CardChoice from '../../common/card-choice'
 import {useNavigation} from '@react-navigation/native'
 
 type Props = {
@@ -31,28 +32,16 @@ const MakeBigTeam = ({wizard: initialWizard}: Props) => {
         style={styles.body}
         gap={isMobile ? 'xsmall' : 'tiny'}
       >
-        <Kb.ListItem
-          type="Card"
-          firstItem={true}
-          icon={<Kb.IconAuto type="icon-teams-size-big-64" />}
-          body={
-            <Kb.Box2 direction="vertical" fullWidth={true}>
-              <Kb.Text type="BodySemibold">Yes, make it a big team</Kb.Text>
-              <Kb.Text type="BodySmall">With multiple roles and channels. Big team chats appear in the lower section in the inbox.</Kb.Text>
-            </Kb.Box2>
-          }
+        <CardChoice
+          icon="icon-teams-size-big-64"
+          title="Yes, make it a big team"
+          subtitle="With multiple roles and channels. Big team chats appear in the lower section in the inbox."
           onClick={() => onSubmit(true)}
         />
-        <Kb.ListItem
-          type="Card"
-          firstItem={true}
-          icon={<Kb.IconAuto type="icon-teams-size-small-64" />}
-          body={
-            <Kb.Box2 direction="vertical" fullWidth={true}>
-              <Kb.Text type="BodySemibold">No, keep it a simple conversation for now</Kb.Text>
-              <Kb.Text type="BodySmall">You can always make it a big team later.</Kb.Text>
-            </Kb.Box2>
-          }
+        <CardChoice
+          icon="icon-teams-size-small-64"
+          title="No, keep it a simple conversation for now"
+          subtitle="You can always make it a big team later."
           onClick={() => onSubmit(false)}
         />
       </Kb.Box2>
diff --git a/shared/teams/new-team/wizard/team-purpose.tsx b/shared/teams/new-team/wizard/team-purpose.tsx
index 915fad94157d..6a8d0e2ceef8 100644
--- a/shared/teams/new-team/wizard/team-purpose.tsx
+++ b/shared/teams/new-team/wizard/team-purpose.tsx
@@ -1,6 +1,7 @@
 import * as Kb from '@/common-adapters'
 import type * as T from '@/constants/types'
 import {makeNewTeamWizard, type NewTeamWizard} from './state'
+import CardChoice from '../../common/card-choice'
 import * as C from '@/constants'
 import {useNavigation} from '@react-navigation/native'
 
@@ -27,32 +28,28 @@ const TeamPurpose = ({wizard: wizardParam}: Props) => {
         gap={isMobile ? 'xsmall' : 'tiny'}
       >
         <Kb.Text type="BodySemibold">What do you need a team for?</Kb.Text>
-        <Kb.ListItem
-          type="Card"
-          firstItem={true}
-          icon={<Kb.IconAuto type="icon-teams-type-squad-64" />}
-          body={<Kb.Box2 direction="vertical" fullWidth={true}><Kb.Text type="BodySemibold">Friends, family, or squad</Kb.Text><Kb.Text type="BodySmall">A small group of people, with no initial need for channels.</Kb.Text></Kb.Box2>}
+        <CardChoice
+          icon="icon-teams-type-squad-64"
+          title="Friends, family, or squad"
+          subtitle="A small group of people, with no initial need for channels."
           onClick={() => onSubmit('friends')}
         />
-        <Kb.ListItem
-          type="Card"
-          firstItem={true}
-          icon={<Kb.IconAuto type="icon-teams-type-business-64" />}
-          body={<Kb.Box2 direction="vertical" fullWidth={true}><Kb.Text type="BodySemibold">A project, business or organization</Kb.Text><Kb.Text type="BodySmall">With multiple roles and channels.</Kb.Text></Kb.Box2>}
+        <CardChoice
+          icon="icon-teams-type-business-64"
+          title="A project, business or organization"
+          subtitle="With multiple roles and channels."
           onClick={() => onSubmit('project')}
         />
-        <Kb.ListItem
-          type="Card"
-          firstItem={true}
-          icon={<Kb.IconAuto type="icon-teams-type-community-64" />}
-          body={<Kb.Box2 direction="vertical" fullWidth={true}><Kb.Text type="BodySemibold">A community</Kb.Text><Kb.Text type="BodySmall">A forum for people who share an interest or cause.</Kb.Text></Kb.Box2>}
+        <CardChoice
+          icon="icon-teams-type-community-64"
+          title="A community"
+          subtitle="A forum for people who share an interest or cause."
           onClick={() => onSubmit('community')}
         />
-        <Kb.ListItem
-          type="Card"
-          firstItem={true}
-          icon={<Kb.IconAuto type="icon-teams-type-notsure-64" />}
-          body={<Kb.Box2 direction="vertical" fullWidth={true}><Kb.Text type="BodySemibold">{"Other/You're not sure"}</Kb.Text><Kb.Text type="BodySmall">Start simple and go from there.</Kb.Text></Kb.Box2>}
+        <CardChoice
+          icon="icon-teams-type-notsure-64"
+          title="Other/You're not sure"
+          subtitle="Start simple and go from there."
           onClick={() => onSubmit('other')}
         />
       </Kb.Box2>
diff --git a/shared/teams/rename-team.tsx b/shared/teams/rename-team.tsx
index bc9e6f222fd7..9d43fc37ade9 100644
--- a/shared/teams/rename-team.tsx
+++ b/shared/teams/rename-team.tsx
@@ -2,22 +2,22 @@ import * as C from '@/constants'
 import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import {renameTeam} from './actions'
+import {useNavUpWhenDone} from './common/use-nav-up-when-done'
 
 type OwnProps = {teamname: string}
 
-const Container = (ownProps: OwnProps) => {
+const RenameTeam = (ownProps: OwnProps) => {
   const teamname = ownProps.teamname
-  const _error = C.Waiting.useAnyErrors(C.waitingKeyTeamsRename)
+  const waitingError = C.Waiting.useAnyErrors(C.waitingKeyTeamsRename)
   const waiting = C.Waiting.useAnyWaiting(C.waitingKeyTeamsRename)
   const dispatchClearWaiting = C.Waiting.useDispatchClearWaiting()
-  const _onRename = renameTeam
   const navigateUp = C.Router2.navigateUp
   const onCancel = () => {
     dispatchClearWaiting(C.waitingKeyTeamsRename)
     navigateUp()
   }
-  const propError = (!_error ? undefined : _error.message) || ''
-  const onRename = (newName: string) => _onRename(teamname, newName)
+  const propError = waitingError?.message || ''
+  const onRename = (newName: string) => renameTeam(teamname, newName)
 
   const [error, setError] = React.useState('')
   const [newName, setNewName] = React.useState('')
@@ -26,14 +26,7 @@ const Container = (ownProps: OwnProps) => {
   const originalName = teamNameParts.pop() || ''
   const prefix = teamNameParts.join('.')
 
-  const lastWaitingRef = React.useRef(waiting)
-  React.useEffect(() => {
-    if (!waiting && lastWaitingRef.current && !propError) {
-      // finished, go back
-      navigateUp()
-    }
-    lastWaitingRef.current = waiting
-  }, [waiting, propError, navigateUp])
+  useNavUpWhenDone(waiting, propError)
 
   const newFullName = [prefix, newName].join('.')
   const disabled = newName.length < 2
@@ -158,10 +151,7 @@ const styles = Kb.Styles.styleSheetCreate(
       }),
       error: {color: Kb.Styles.globalColors.redDark},
       inputContainer: {
-        borderColor: Kb.Styles.globalColors.black_10,
-        borderRadius: Kb.Styles.borderRadius,
-        borderStyle: 'solid',
-        borderWidth: 1,
+        ...Kb.Styles.border(Kb.Styles.globalColors.black_10, 1, Kb.Styles.borderRadius),
         padding: Kb.Styles.globalMargins.tiny,
       },
       inputContainerError: {borderColor: Kb.Styles.globalColors.red},
@@ -171,4 +161,4 @@ const styles = Kb.Styles.styleSheetCreate(
     }) as const
 )
 
-export default Container
+export default RenameTeam
diff --git a/shared/teams/role-button.tsx b/shared/teams/role-button.tsx
index e3007ab4aa65..7622f6b533e7 100644
--- a/shared/teams/role-button.tsx
+++ b/shared/teams/role-button.tsx
@@ -2,6 +2,7 @@ import * as Kb from '@/common-adapters'
 import {InlineDropdown} from '@/common-adapters/dropdown'
 import type * as T from '@/constants/types'
 import capitalize from 'lodash/capitalize'
+import RoleCrown from './common/role-crown'
 
 export type Props = {
   containerStyle?: Kb.Styles.StylesCrossPlatform
@@ -11,25 +12,14 @@ export type Props = {
   loading?: boolean
 }
 
-const roleIconMap = {
-  admin: 'iconfont-crown-admin',
-  bot: undefined,
-  owner: 'iconfont-crown-owner',
-  reader: undefined,
-  restrictedbot: undefined,
-  writer: undefined,
-} as const
-
 const RoleButton = (props: Props) => {
-  const iconType = roleIconMap[props.selectedRole]
-
   return (
     <InlineDropdown
       containerStyle={props.containerStyle}
       textWrapperType={null}
       label={
         <Kb.Box2 direction="horizontal" alignItems="center" style={styles.label}>
-          {iconType ? <Kb.Icon type={iconType} color={props.selectedRole === 'owner' ? Kb.Styles.globalColors.yellowDark : Kb.Styles.globalColors.black_35} style={styles.icon} sizeType="Small" /> : null}
+          <RoleCrown role={props.selectedRole} sizeType="Small" style={styles.icon} />
           <Kb.Text type="BodySmallSemibold">{capitalize(props.selectedRole)}</Kb.Text>
         </Kb.Box2>
       }
diff --git a/shared/teams/role-picker-utils.tsx b/shared/teams/role-picker-utils.tsx
index c5b82d6557ab..a4762d6ff4d1 100644
--- a/shared/teams/role-picker-utils.tsx
+++ b/shared/teams/role-picker-utils.tsx
@@ -2,12 +2,13 @@ import type * as T from '@/constants/types'
 
 const msgOnlyOwnersCanChangeOwnerRole = "Only owners can change another owner's role"
 const msgMustBeAdminToChangeRoles = 'You must be at least an admin to make role changes.'
+const msgSubteamsCannotHaveOwners = 'Subteams cannot have owners.'
 
-const subteamsCannotHaveOwners = {owner: 'Subteams cannot have owners.'}
+const subteamsCannotHaveOwners = {owner: msgSubteamsCannotHaveOwners}
 const onlyOwnersCanTurnTeamMembersIntoOwners = {owner: 'Only owners can turn team members into owners.'}
 const roleChangeSub = {
   admin: msgMustBeAdminToChangeRoles,
-  owner: 'Subteams cannot have owners.',
+  owner: msgSubteamsCannotHaveOwners,
   reader: msgMustBeAdminToChangeRoles,
   writer: msgMustBeAdminToChangeRoles,
 }
@@ -19,7 +20,7 @@ const roleChangeNotSub = {
 }
 const anotherRoleChangeSub = {
   admin: msgOnlyOwnersCanChangeOwnerRole,
-  owner: 'Subteams cannot have owners.',
+  owner: msgSubteamsCannotHaveOwners,
   reader: msgOnlyOwnersCanChangeOwnerRole,
   writer: msgOnlyOwnersCanChangeOwnerRole,
 }
@@ -29,7 +30,7 @@ const anotherRoleChangeNotSub = {
   reader: msgOnlyOwnersCanChangeOwnerRole,
   writer: msgOnlyOwnersCanChangeOwnerRole,
 }
-const notOwnerSub = {owner: 'Subteams cannot have owners.'}
+const notOwnerSub = {owner: msgSubteamsCannotHaveOwners}
 const notOwnerNotSub = {owner: `Only owners can turn members into owners`}
 const noRemoveLastOwner = {
   admin: `You can't demote a team's last owner`,
diff --git a/shared/teams/role-picker.tsx b/shared/teams/role-picker.tsx
index 2b66f908c378..d7882d03adb2 100644
--- a/shared/teams/role-picker.tsx
+++ b/shared/teams/role-picker.tsx
@@ -3,6 +3,7 @@ import * as Kb from '@/common-adapters'
 import capitalize from 'lodash/capitalize'
 import {pluralize} from '@/util/string'
 import type * as T from '@/constants/types'
+import RoleCrown from './common/role-crown'
 
 // Controls the ordering of the role picker
 const orderedRoles: Array<Role<true>> = ['owner', 'admin', 'writer', 'reader', 'setIndividually']
@@ -160,14 +161,7 @@ const rolesMetaInfo = (infoForRole: Role<true>): RolesMetaInfo => {
           `Can write and read in chats and folders`,
         ],
         cants: [`Can't delete the team`],
-        icon: (
-          <Kb.Icon
-            style={styles.roleIcon}
-            type="iconfont-crown-admin"
-            sizeType="Small"
-            color={Kb.Styles.globalColors.black_35}
-          />
-        ),
+        icon: <RoleCrown role="admin" sizeType="Small" style={styles.roleIcon} />,
       }
     case 'owner':
       return {
@@ -181,14 +175,7 @@ const rolesMetaInfo = (infoForRole: Role<true>): RolesMetaInfo => {
         ],
         cants: [],
         extra: ['A team can have multiple owners'],
-        icon: (
-          <Kb.Icon
-            style={styles.roleIcon}
-            type="iconfont-crown-owner"
-            sizeType="Small"
-            color={Kb.Styles.globalColors.yellowDark}
-          />
-        ),
+        icon: <RoleCrown role="owner" sizeType="Small" style={styles.roleIcon} />,
       }
     case 'reader':
       return {
diff --git a/shared/teams/routes.tsx b/shared/teams/routes.tsx
index 1c8ed8a40049..eed982adec5d 100644
--- a/shared/teams/routes.tsx
+++ b/shared/teams/routes.tsx
@@ -13,7 +13,7 @@ import {useModalHeaderState} from '@/stores/modal-header'
 import teamsRootGetOptions from './get-options'
 import {defineRouteMap} from '@/constants/types/router'
 import {createNewTeamFromWizard, type NewTeamWizard} from './new-team/wizard/state'
-import {onTeamCreated} from './create-team-effects'
+import {invalidateLoadedTeams} from './use-teams-list'
 import {RPCError} from '@/util/errors'
 import {useLoadedTeam} from './team/use-loaded-team'
 
@@ -97,15 +97,7 @@ const AddContactsHeaderRight = () => {
       >
         Done
       </Kb.Text>
-      {waiting && (
-        <Kb.Box2
-          direction="horizontal"
-          centerChildren={true}
-          style={Kb.Styles.globalStyles.fillAbsolute}
-        >
-          <Kb.ProgressIndicator />
-        </Kb.Box2>
-      )}
+      <Kb.LoadingOverlay show={waiting} />
     </Kb.Box2>
   )
 }
@@ -172,7 +164,7 @@ const AddFromWhereSkip = ({wizard}: {wizard: AddMembersWizard}) => {
     const f = async () => {
       try {
         const teamID = await createNewTeamFromWizard(newTeamWizard, cleanWizard.addingMembers)
-        onTeamCreated(teamID)
+        invalidateLoadedTeams()
         C.Router2.navigateAppend({name: 'team', params: {teamID}})
         C.Router2.clearModals()
       } catch (err) {
diff --git a/shared/teams/team-page-actions.tsx b/shared/teams/team-page-actions.tsx
index cc29774feb85..0c993fafc854 100644
--- a/shared/teams/team-page-actions.tsx
+++ b/shared/teams/team-page-actions.tsx
@@ -4,7 +4,7 @@ import {clearModals, navigateAppend, navigateToInbox, previewConversation} from
 import logger from '@/logger'
 import {useConfigState} from '@/stores/config'
 import {addToTeam} from './actions'
-import {onTeamCreated} from './create-team-effects'
+import {invalidateLoadedTeams} from './use-teams-list'
 
 type UsersToAdd = Array<{assertion: string; role: T.Teams.TeamRoleType}>
 
@@ -24,7 +24,7 @@ export const createNewTeamAndNavigate = async (
       {joinSubteam, name: teamname},
       S.waitingKeyTeamsCreation
     )
-    onTeamCreated(teamID)
+    invalidateLoadedTeams()
     if (options?.usersToAdd?.length) {
       addToTeam(teamID, options.usersToAdd, false)
     }
diff --git a/shared/teams/team/index.tsx b/shared/teams/team/index.tsx
index 08cf69056340..736343a65c1a 100644
--- a/shared/teams/team/index.tsx
+++ b/shared/teams/team/index.tsx
@@ -4,6 +4,7 @@ import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import {useNavigation} from '@react-navigation/native'
 import {useEngineActionListener} from '@/engine/action-listener'
+import {produce} from 'immer'
 import {SelectionPopup, ActivityLevelsProvider} from '../common'
 import {LoadedTeamChannelsProvider, useLoadedTeamChannels} from '../common/use-loaded-team-channels'
 import {TeamSelectionProvider} from '../common/selection-state'
@@ -103,20 +104,22 @@ const TeamBody = (props: Props) => {
   const invitesCollapsed = teamLocalState.invitesCollapsed
   const subteamFilter = teamLocalState.subteamFilter
   const setInvitesCollapsed: React.Dispatch<React.SetStateAction<boolean>> = nextInvitesCollapsed => {
-    setTeamLocalState(prev => ({
-      ...prev,
-      invitesCollapsed:
-        typeof nextInvitesCollapsed === 'function'
-          ? nextInvitesCollapsed(prev.invitesCollapsed)
-          : nextInvitesCollapsed,
-    }))
+    setTeamLocalState(
+      produce(draft => {
+        draft.invitesCollapsed =
+          typeof nextInvitesCollapsed === 'function'
+            ? nextInvitesCollapsed(draft.invitesCollapsed)
+            : nextInvitesCollapsed
+      })
+    )
   }
   const setSubteamFilter: React.Dispatch<React.SetStateAction<string>> = nextSubteamFilter => {
-    setTeamLocalState(prev => ({
-      ...prev,
-      subteamFilter:
-        typeof nextSubteamFilter === 'function' ? nextSubteamFilter(prev.subteamFilter) : nextSubteamFilter,
-    }))
+    setTeamLocalState(
+      produce(draft => {
+        draft.subteamFilter =
+          typeof nextSubteamFilter === 'function' ? nextSubteamFilter(draft.subteamFilter) : nextSubteamFilter
+      })
+    )
   }
   const clearJustFinishedAddWizard = React.useCallback(() => {
     navigation.setParams({justFinishedAddWizard: undefined})
@@ -143,7 +146,11 @@ const TeamBody = (props: Props) => {
   const refreshParticipants = C.useRPC(T.RPCChat.localRefreshParticipantsRpcPromise)
   React.useEffect(() => {
     for (const conversationIDKey of channels.keys()) {
-      refreshParticipants([{convID: T.Chat.keyToConversationID(conversationIDKey)}], () => {}, () => {})
+      refreshParticipants(
+        [{convID: T.Chat.keyToConversationID(conversationIDKey)}],
+        () => {},
+        () => {}
+      )
     }
   }, [channels, refreshParticipants])
 
@@ -193,7 +200,13 @@ const TeamBody = (props: Props) => {
   const botSections = useBotSections(teamID, loadingTeam, teamMeta, teamDetails, yourOperations)
   const invitesSections = useInvitesSections(teamID, teamDetails, invitesCollapsed, setInvitesCollapsed)
   const channelsSections = useChannelsSections(teamID, yourOperations, channels, loadingChannels)
-  const subteamsSections = useSubteamsSections(teamID, teamDetails, yourOperations, subteamFilter, setSubteamFilter)
+  const subteamsSections = useSubteamsSections(
+    teamID,
+    teamDetails,
+    yourOperations,
+    subteamFilter,
+    setSubteamFilter
+  )
   const emojiSections = useEmojiSections(teamID, selectedTab === 'emoji')
 
   switch (selectedTab) {
@@ -247,11 +260,15 @@ const TeamBody = (props: Props) => {
         style={styles.container}
         relative={true}
         testID={
-          selectedTab === 'members' ? TestIDs.TEAMS_MEMBER_LIST :
-          selectedTab === 'channels' ? TestIDs.TEAMS_CHANNEL_LIST :
-          selectedTab === 'settings' ? TestIDs.TEAMS_SETTINGS_TAB :
-          selectedTab === 'bots' ? TestIDs.TEAMS_BOTS_TAB :
-          undefined
+          selectedTab === 'members'
+            ? TestIDs.TEAMS_MEMBER_LIST
+            : selectedTab === 'channels'
+              ? TestIDs.TEAMS_CHANNEL_LIST
+              : selectedTab === 'settings'
+                ? TestIDs.TEAMS_SETTINGS_TAB
+                : selectedTab === 'bots'
+                  ? TestIDs.TEAMS_BOTS_TAB
+                  : undefined
         }
       >
         <Kb.SectionList
diff --git a/shared/teams/team/member/add-to-channels-row.tsx b/shared/teams/team/member/add-to-channels-row.tsx
new file mode 100644
index 000000000000..529e78127756
--- /dev/null
+++ b/shared/teams/team/member/add-to-channels-row.tsx
@@ -0,0 +1,324 @@
+import * as C from '@/constants'
+import * as T from '@/constants/types'
+import * as React from 'react'
+import * as Kb from '@/common-adapters'
+import * as Common from '@/teams/common'
+import {useSafeNavigation} from '@/util/safe-navigation'
+
+// horizontal padding shared with the header row in add-to-channels.tsx
+export const itemStyle = Kb.Styles.platformStyles({
+  isElectron: {...Kb.Styles.padding(0, Kb.Styles.globalMargins.small)},
+  isMobile: {
+    ...Kb.Styles.padding(Kb.Styles.globalMargins.small),
+  },
+})
+
+const SelfChannelActions = function SelfChannelActions(p: {
+  canDeleteChannel: boolean
+  canEditChannelDescription: boolean
+  meta: T.Chat.ConversationMeta
+  reloadChannels: () => Promise<void>
+  selfMode: boolean
+}) {
+  const {canDeleteChannel, canEditChannelDescription, meta, reloadChannels} = p
+  const nav = useSafeNavigation()
+  const inChannel = meta.membershipType === 'active'
+
+  const [waiting, setWaiting] = React.useState(false)
+  const stopWaiting = () => setWaiting(false)
+
+  const onEditChannel = () => {
+    nav.safeNavigateAppend({
+      name: 'teamEditChannel',
+      params: {
+        channelname: meta.channelname,
+        conversationIDKey: meta.conversationIDKey,
+        description: meta.description,
+        teamID: meta.teamID,
+      },
+    })
+  }
+  const clearModals = C.Router2.clearModals
+  const navigateAppend = C.Router2.navigateAppend
+  const onChannelSettings = () => {
+    clearModals()
+    navigateAppend({
+      name: 'teamChannel',
+      params: {conversationIDKey: meta.conversationIDKey, teamID: meta.teamID},
+    })
+  }
+  const onDelete = () => {
+    // TODO: consider not using the confirm modal
+    nav.safeNavigateAppend({
+      name: 'teamDeleteChannel',
+      params: {conversationIDKey: meta.conversationIDKey, teamID: meta.teamID},
+    })
+  }
+
+  const joinRPC = C.useRPC(T.RPCChat.localJoinConversationByIDLocalRpcPromise)
+  const leaveRPC = C.useRPC(T.RPCChat.localLeaveConversationLocalRpcPromise)
+
+  const convID = T.Chat.keyToConversationID(meta.conversationIDKey)
+  const onLeave = () => {
+    setWaiting(true)
+    leaveRPC(
+      [{convID}],
+      () => {
+        reloadChannels()
+          .then(stopWaiting, stopWaiting)
+          .catch(() => {})
+      },
+      stopWaiting
+    )
+  }
+  const onJoin = () => {
+    setWaiting(true)
+    joinRPC(
+      [{convID}],
+      () => {
+        reloadChannels()
+          .then(stopWaiting, stopWaiting)
+          .catch(() => {})
+      },
+      stopWaiting
+    )
+  }
+
+  const makePopup = (p: Kb.Popup2Parms) => {
+    const {attachTo, hidePopup} = p
+    const menuItems = [
+      {icon: 'iconfont-edit' as const, onClick: onEditChannel, title: 'Edit channel'},
+      ...(canDeleteChannel
+        ? [
+            {
+              icon: 'iconfont-nav-2-settings' as const,
+              onClick: onChannelSettings,
+              title: 'Channel settings',
+            },
+            {danger: true, icon: 'iconfont-remove' as const, onClick: onDelete, title: 'Delete'},
+          ]
+        : []),
+    ]
+    return (
+      <Kb.FloatingMenu
+        attachTo={attachTo}
+        visible={true}
+        onHidden={hidePopup}
+        closeOnSelect={true}
+        items={menuItems}
+      />
+    )
+  }
+  const {popupAnchor, showPopup, popup} = Kb.usePopup2(makePopup)
+  const [buttonMousedOver, setMouseover] = React.useState(false)
+  return (
+    <Kb.Box2
+      direction="horizontal"
+      gap="xtiny"
+      fullHeight={true}
+      centerChildren={true}
+    >
+      {popup}
+      <Kb.Box2
+        direction="horizontal"
+        onMouseOver={() => setMouseover(true)}
+        onMouseLeave={() => setMouseover(false)}
+      >
+        <Kb.Button
+          disabled={meta.channelname === 'general'}
+          type={buttonMousedOver && inChannel ? 'Default' : 'Success'}
+          mode={inChannel ? 'Secondary' : 'Primary'}
+          label={inChannel ? (buttonMousedOver ? 'Leave' : 'In') : 'Join'}
+          onClick={inChannel ? onLeave : onJoin}
+          small={true}
+          waiting={waiting}
+        >
+          {inChannel && !buttonMousedOver ? <Kb.Icon type="iconfont-check" sizeType="Tiny" /> : undefined}
+        </Kb.Button>
+      </Kb.Box2>
+      {canEditChannelDescription && (
+        <Kb.IconButton
+          icon="iconfont-ellipsis"
+          iconColor={Kb.Styles.globalColors.black_50}
+          onClick={showPopup}
+          ref={popupAnchor}
+          small={true}
+          mode="Secondary"
+          type="Dim"
+        />
+      )}
+    </Kb.Box2>
+  )
+}
+
+type ChannelRowProps = {
+  canDeleteChannel: boolean
+  canEditChannelDescription: boolean
+  channelMeta: T.Chat.ConversationMeta
+  selected: boolean
+  onSelect: (conviID: T.Chat.ConversationIDKey) => void
+  mode: 'self' | 'others'
+  participants: ReadonlyArray<string>
+  reloadChannels: () => Promise<void>
+  usernames: string[]
+  rowHeight: number
+}
+const ChannelRow = function ChannelRow(p: ChannelRowProps) {
+  const {
+    canDeleteChannel,
+    canEditChannelDescription,
+    channelMeta,
+    mode,
+    participants,
+    selected,
+    onSelect: _onSelect,
+    reloadChannels,
+    usernames,
+    rowHeight,
+  } = p
+  const {conversationIDKey} = channelMeta
+  const selfMode = mode === 'self'
+  const {channels: activityByChannel} = Common.useActivityLevels()
+  const activityLevel = activityByChannel.get(channelMeta.conversationIDKey) || 'none'
+  const allInChannel = usernames.every(member => participants.includes(member))
+  const previewConversation = C.Router2.previewConversation
+  const onPreviewChannel = () =>
+    previewConversation({
+      conversationIDKey: channelMeta.conversationIDKey,
+      reason: 'manageView',
+    })
+
+  const onSelect = () => {
+    _onSelect(conversationIDKey)
+  }
+
+  return isMobile ? (
+    <Kb.ClickableBox
+      onClick={selfMode ? onPreviewChannel : onSelect}
+      direction="horizontal"
+      alignItems="center"
+      fullWidth={true}
+      gap="tiny"
+      justifyContent="space-between"
+      style={Kb.Styles.collapseStyles([{height: rowHeight}, itemStyle])}
+    >
+        <Kb.Text type="Body" lineClamp={1} style={styles.channelText}>
+          #{channelMeta.channelname}
+        </Kb.Text>
+        <Common.Activity level={activityLevel} iconOnly={true} />
+        <ParticipantMeta numParticipants={participants.length} />
+        {selfMode ? (
+          <SelfChannelActions
+            canDeleteChannel={canDeleteChannel}
+            canEditChannelDescription={canEditChannelDescription}
+            selfMode={selfMode}
+            meta={channelMeta}
+            reloadChannels={reloadChannels}
+          />
+        ) : (
+          <Kb.CheckCircle
+            checked={selected || allInChannel}
+            onCheck={onSelect}
+            disabled={channelMeta.channelname === 'general' || allInChannel}
+            disabledColor={
+              channelMeta.channelname === 'general' || allInChannel
+                ? Kb.Styles.globalColors.black_20OrWhite_20
+                : undefined
+            }
+          />
+        )}
+      </Kb.ClickableBox>
+  ) : (
+    <Kb.ListItem
+      fullDivider={true}
+      onMouseDown={
+        selfMode || channelMeta.channelname === 'general' || allInChannel
+          ? undefined
+          : evt => {
+              // using onMouseDown so we can prevent blurring the search filter
+              evt.preventDefault()
+              onSelect()
+            }
+      }
+      onClick={selfMode ? onPreviewChannel : undefined}
+      type="Small"
+      action={
+        selfMode ? (
+          <Kb.Box2 direction="horizontal" gap="tiny" fullHeight={true}>
+            <Kb.Box2 direction="horizontal" alignSelf="stretch">
+              <Common.Activity level={activityLevel} />
+            </Kb.Box2>
+            <Kb.Box2 direction="horizontal">
+              <ParticipantMeta numParticipants={participants.length} />
+            </Kb.Box2>
+            <SelfChannelActions
+              canDeleteChannel={canDeleteChannel}
+              canEditChannelDescription={canEditChannelDescription}
+              selfMode={selfMode}
+              meta={channelMeta}
+              reloadChannels={reloadChannels}
+            />
+          </Kb.Box2>
+        ) : (
+          <Kb.CheckCircle
+            checked={selected || allInChannel}
+            disabled={channelMeta.channelname === 'general' || allInChannel}
+            disabledColor={
+              channelMeta.channelname === 'general' || allInChannel
+                ? Kb.Styles.globalColors.black_20OrWhite_20
+                : undefined
+            }
+            onCheck={() => {
+              /* ListItem onMouseDown triggers this */
+            }}
+          />
+        )
+      }
+      firstItem={false}
+      body={
+        <Kb.Box2 direction="vertical" alignItems="stretch">
+          <Kb.Box2 direction="horizontal" gap="xtiny" alignSelf="flex-start">
+            <Kb.Text type="BodySemibold" lineClamp={1}>
+              #{channelMeta.channelname}
+            </Kb.Text>
+          </Kb.Box2>
+          {selfMode && (
+            <Kb.Text
+              type="BodySmall"
+              lineClamp={1}
+              style={styles.description}
+              title={channelMeta.description}
+            >
+              {channelMeta.description}
+            </Kb.Text>
+          )}
+        </Kb.Box2>
+      }
+      containerStyleOverride={styles.channelRowContainer}
+    />
+  )
+}
+
+const ParticipantMeta = (props: {numParticipants: number}) => (
+  <Kb.Meta
+    color={Kb.Styles.globalColors.black_50}
+    icon="iconfont-people-solid"
+    iconColor={Kb.Styles.globalColors.black_20}
+    title={props.numParticipants.toLocaleString()}
+    backgroundColor={Kb.Styles.globalColors.black_10}
+    style={styles.participantMeta}
+  />
+)
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  channelRowContainer: {marginLeft: 16, marginRight: 8},
+  channelText: {flexGrow: 1, flexShrink: 1},
+  description: Kb.Styles.platformStyles({
+    isElectron: {
+      wordBreak: 'break-all',
+    },
+  }),
+  participantMeta: {...Kb.Styles.padding(3, 6)},
+}))
+
+export default ChannelRow
diff --git a/shared/teams/team/member/add-to-channels.tsx b/shared/teams/team/member/add-to-channels.tsx
index becbd0c94de0..91b9dbb2b5af 100644
--- a/shared/teams/team/member/add-to-channels.tsx
+++ b/shared/teams/team/member/add-to-channels.tsx
@@ -11,6 +11,7 @@ import {useSafeNavigation} from '@/util/safe-navigation'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useModalHeaderState} from '@/stores/modal-header'
 import {LoadedTeamProvider, useLoadedTeam} from '../use-loaded-team'
+import ChannelRow, {itemStyle} from './add-to-channels-row'
 
 type Props = {
   teamID: T.Teams.TeamID
@@ -190,22 +191,14 @@ const AddToChannelsBody = function AddToChannelsBody(props: Props) {
   const desktopFooter =
     !isMobile && mode !== 'self' ? (
       <Kb.ModalFooter>
-        <Kb.Box2 direction="horizontal" gap="tiny" fullWidth={true}>
-          <Kb.Button
-            type="Dim"
-            label="Cancel"
-            onClick={onCancel}
-            style={Kb.Styles.globalStyles.flexOne}
-            disabled={waiting}
-          />
-          <Kb.Button
-            label={numSelected ? `Add to ${numSelected} ${pluralize('channel', numSelected)}` : 'Add...'}
-            onClick={onFinish}
-            disabled={!numSelected}
-            style={Kb.Styles.globalStyles.flexOne}
-            waiting={waiting}
-          />
-        </Kb.Box2>
+        <Kb.ConfirmButtons
+          split={true}
+          waiting={waiting}
+          onCancel={onCancel}
+          onConfirm={onFinish}
+          confirmLabel={numSelected ? `Add to ${numSelected} ${pluralize('channel', numSelected)}` : 'Add...'}
+          confirmDisabled={!numSelected}
+        />
       </Kb.ModalFooter>
     ) : null
 
@@ -248,7 +241,7 @@ const AddToChannelsBody = function AddToChannelsBody(props: Props) {
   return (
     <Common.ActivityLevelsProvider>
       {loadingChannels && !channelMetas.size ? (
-        <Kb.Box2 direction="vertical" style={styles.spinnerContainer}>
+        <Kb.Box2 direction="vertical" style={Kb.Styles.globalStyles.flexOne} centerChildren={true}>
           <Kb.ProgressIndicator type="Large" />
         </Kb.Box2>
       ) : (
@@ -298,7 +291,7 @@ const HeaderRow = function HeaderRow(p: {
       alignItems="center"
       fullWidth={true}
       gap="tiny"
-      style={Kb.Styles.collapseStyles([styles.item, styles.headerItem])}
+      style={Kb.Styles.collapseStyles([itemStyle, styles.headerItem])}
     >
       <Kb.BoxGrow2 />
       <Kb.Button
@@ -321,332 +314,15 @@ const HeaderRow = function HeaderRow(p: {
   )
 }
 
-const SelfChannelActions = function SelfChannelActions(p: {
-  canDeleteChannel: boolean
-  canEditChannelDescription: boolean
-  meta: T.Chat.ConversationMeta
-  reloadChannels: () => Promise<void>
-  selfMode: boolean
-}) {
-  const {canDeleteChannel, canEditChannelDescription, meta, reloadChannels} = p
-  const nav = useSafeNavigation()
-  const inChannel = meta.membershipType === 'active'
-
-  const [waiting, setWaiting] = React.useState(false)
-  const stopWaiting = () => setWaiting(false)
-
-  const onEditChannel = () => {
-    nav.safeNavigateAppend({
-      name: 'teamEditChannel',
-      params: {
-        channelname: meta.channelname,
-        conversationIDKey: meta.conversationIDKey,
-        description: meta.description,
-        teamID: meta.teamID,
-      },
-    })
-  }
-  const clearModals = C.Router2.clearModals
-  const navigateAppend = C.Router2.navigateAppend
-  const onChannelSettings = () => {
-    clearModals()
-    navigateAppend({
-      name: 'teamChannel',
-      params: {conversationIDKey: meta.conversationIDKey, teamID: meta.teamID},
-    })
-  }
-  const onDelete = () => {
-    // TODO: consider not using the confirm modal
-    nav.safeNavigateAppend({
-      name: 'teamDeleteChannel',
-      params: {conversationIDKey: meta.conversationIDKey, teamID: meta.teamID},
-    })
-  }
-
-  const joinRPC = C.useRPC(T.RPCChat.localJoinConversationByIDLocalRpcPromise)
-  const leaveRPC = C.useRPC(T.RPCChat.localLeaveConversationLocalRpcPromise)
-
-  const convID = T.Chat.keyToConversationID(meta.conversationIDKey)
-  const onLeave = () => {
-    setWaiting(true)
-    leaveRPC(
-      [{convID}],
-      () => {
-        reloadChannels()
-          .then(stopWaiting, stopWaiting)
-          .catch(() => {})
-      },
-      stopWaiting
-    )
-  }
-  const onJoin = () => {
-    setWaiting(true)
-    joinRPC(
-      [{convID}],
-      () => {
-        reloadChannels()
-          .then(stopWaiting, stopWaiting)
-          .catch(() => {})
-      },
-      stopWaiting
-    )
-  }
-
-  const makePopup = (p: Kb.Popup2Parms) => {
-    const {attachTo, hidePopup} = p
-    const menuItems = [
-      {icon: 'iconfont-edit' as const, onClick: onEditChannel, title: 'Edit channel'},
-      ...(canDeleteChannel
-        ? [
-            {
-              icon: 'iconfont-nav-2-settings' as const,
-              onClick: onChannelSettings,
-              title: 'Channel settings',
-            },
-            {danger: true, icon: 'iconfont-remove' as const, onClick: onDelete, title: 'Delete'},
-          ]
-        : []),
-    ]
-    return (
-      <Kb.FloatingMenu
-        attachTo={attachTo}
-        visible={true}
-        onHidden={hidePopup}
-        closeOnSelect={true}
-        items={menuItems}
-      />
-    )
-  }
-  const {popupAnchor, showPopup, popup} = Kb.usePopup2(makePopup)
-  const [buttonMousedOver, setMouseover] = React.useState(false)
-  return (
-    <Kb.Box2
-      direction="horizontal"
-      gap="xtiny"
-      fullHeight={true}
-      centerChildren={true}
-    >
-      {popup}
-      <Kb.Box2
-        direction="horizontal"
-        onMouseOver={() => setMouseover(true)}
-        onMouseLeave={() => setMouseover(false)}
-      >
-        <Kb.Button
-          disabled={meta.channelname === 'general'}
-          type={buttonMousedOver && inChannel ? 'Default' : 'Success'}
-          mode={inChannel ? 'Secondary' : 'Primary'}
-          label={inChannel ? (buttonMousedOver ? 'Leave' : 'In') : 'Join'}
-          onClick={inChannel ? onLeave : onJoin}
-          small={true}
-          waiting={waiting}
-        >
-          {inChannel && !buttonMousedOver ? <Kb.Icon type="iconfont-check" sizeType="Tiny" /> : undefined}
-        </Kb.Button>
-      </Kb.Box2>
-      {canEditChannelDescription && (
-        <Kb.IconButton
-          icon="iconfont-ellipsis"
-          iconColor={Kb.Styles.globalColors.black_50}
-          onClick={showPopup}
-          ref={popupAnchor}
-          small={true}
-          mode="Secondary"
-          type="Dim"
-        />
-      )}
-    </Kb.Box2>
-  )
-}
-
-type ChannelRowProps = {
-  canDeleteChannel: boolean
-  canEditChannelDescription: boolean
-  channelMeta: T.Chat.ConversationMeta
-  selected: boolean
-  onSelect: (conviID: T.Chat.ConversationIDKey) => void
-  mode: 'self' | 'others'
-  participants: ReadonlyArray<string>
-  reloadChannels: () => Promise<void>
-  usernames: string[]
-  rowHeight: number
-}
-const ChannelRow = function ChannelRow(p: ChannelRowProps) {
-  const {
-    canDeleteChannel,
-    canEditChannelDescription,
-    channelMeta,
-    mode,
-    participants,
-    selected,
-    onSelect: _onSelect,
-    reloadChannels,
-    usernames,
-    rowHeight,
-  } = p
-  const {conversationIDKey} = channelMeta
-  const selfMode = mode === 'self'
-  const {channels: activityByChannel} = Common.useActivityLevels()
-  const activityLevel = activityByChannel.get(channelMeta.conversationIDKey) || 'none'
-  const allInChannel = usernames.every(member => participants.includes(member))
-  const previewConversation = C.Router2.previewConversation
-  const onPreviewChannel = () =>
-    previewConversation({
-      conversationIDKey: channelMeta.conversationIDKey,
-      reason: 'manageView',
-    })
-
-  const onSelect = () => {
-    _onSelect(conversationIDKey)
-  }
-
-  return isMobile ? (
-    <Kb.ClickableBox
-      onClick={selfMode ? onPreviewChannel : onSelect}
-      direction="horizontal"
-      alignItems="center"
-      fullWidth={true}
-      gap="tiny"
-      justifyContent="space-between"
-      style={Kb.Styles.collapseStyles([{height: rowHeight}, styles.item])}
-    >
-        <Kb.Text type="Body" lineClamp={1} style={styles.channelText}>
-          #{channelMeta.channelname}
-        </Kb.Text>
-        <Kb.Box2 direction="vertical">
-          <Common.Activity level={activityLevel} iconOnly={true} />
-        </Kb.Box2>
-        <ParticipantMeta numParticipants={participants.length} />
-        {selfMode ? (
-          <SelfChannelActions
-            canDeleteChannel={canDeleteChannel}
-            canEditChannelDescription={canEditChannelDescription}
-            selfMode={selfMode}
-            meta={channelMeta}
-            reloadChannels={reloadChannels}
-          />
-        ) : (
-          <Kb.CheckCircle
-            checked={selected || allInChannel}
-            onCheck={onSelect}
-            disabled={channelMeta.channelname === 'general' || allInChannel}
-            disabledColor={
-              channelMeta.channelname === 'general' || allInChannel
-                ? Kb.Styles.globalColors.black_20OrWhite_20
-                : undefined
-            }
-          />
-        )}
-      </Kb.ClickableBox>
-  ) : (
-    <Kb.ListItem
-      fullDivider={true}
-      onMouseDown={
-        selfMode || channelMeta.channelname === 'general' || allInChannel
-          ? undefined
-          : evt => {
-              // using onMouseDown so we can prevent blurring the search filter
-              evt.preventDefault()
-              onSelect()
-            }
-      }
-      onClick={selfMode ? onPreviewChannel : undefined}
-      type="Small"
-      action={
-        selfMode ? (
-          <Kb.Box2 direction="horizontal" gap="tiny" fullHeight={true}>
-            <Kb.Box2 direction="horizontal" alignSelf="stretch" gap="xxtiny">
-              <Common.Activity level={activityLevel} />
-            </Kb.Box2>
-            <Kb.Box2 direction="horizontal">
-              <ParticipantMeta numParticipants={participants.length} />
-            </Kb.Box2>
-            <SelfChannelActions
-              canDeleteChannel={canDeleteChannel}
-              canEditChannelDescription={canEditChannelDescription}
-              selfMode={selfMode}
-              meta={channelMeta}
-              reloadChannels={reloadChannels}
-            />
-          </Kb.Box2>
-        ) : (
-          <Kb.CheckCircle
-            checked={selected || allInChannel}
-            disabled={channelMeta.channelname === 'general' || allInChannel}
-            disabledColor={
-              channelMeta.channelname === 'general' || allInChannel
-                ? Kb.Styles.globalColors.black_20OrWhite_20
-                : undefined
-            }
-            onCheck={() => {
-              /* ListItem onMouseDown triggers this */
-            }}
-          />
-        )
-      }
-      firstItem={false}
-      body={
-        <Kb.Box2 direction="vertical" alignItems="stretch">
-          <Kb.Box2 direction="horizontal" gap="xtiny" alignSelf="flex-start">
-            <Kb.Text type="BodySemibold" lineClamp={1}>
-              #{channelMeta.channelname}
-            </Kb.Text>
-          </Kb.Box2>
-          {selfMode && (
-            <Kb.Text
-              type="BodySmall"
-              lineClamp={1}
-              style={styles.description}
-              title={channelMeta.description}
-            >
-              {channelMeta.description}
-            </Kb.Text>
-          )}
-        </Kb.Box2>
-      }
-      containerStyleOverride={styles.channelRowContainer}
-    />
-  )
-}
-
-const ParticipantMeta = (props: {numParticipants: number}) => (
-  <Kb.Meta
-    color={Kb.Styles.globalColors.black_50}
-    icon="iconfont-people-solid"
-    iconColor={Kb.Styles.globalColors.black_20}
-    title={props.numParticipants.toLocaleString()}
-    backgroundColor={Kb.Styles.globalColors.black_10}
-    style={styles.participantMeta}
-  />
-)
-
 const styles = Kb.Styles.styleSheetCreate(() => ({
-  channelRowContainer: {marginLeft: 16, marginRight: 8},
-  channelText: {flexGrow: 1, flexShrink: 1},
-  description: Kb.Styles.platformStyles({
-    isElectron: {
-      wordBreak: 'break-all',
-    },
-  }),
   headerItem: Kb.Styles.platformStyles({
     common: {backgroundColor: Kb.Styles.globalColors.blueGrey},
     isElectron: {height: 40},
     isMobile: {height: 48},
   }),
-  item: Kb.Styles.platformStyles({
-    isElectron: {...Kb.Styles.padding(0, Kb.Styles.globalMargins.small)},
-    isMobile: {
-      ...Kb.Styles.padding(Kb.Styles.globalMargins.small),
-    },
-  }),
-  participantMeta: {...Kb.Styles.padding(3, 6)},
   searchFilterContainer: Kb.Styles.platformStyles({
     isElectron: Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small),
   }),
-  spinnerContainer: {
-    ...Kb.Styles.globalStyles.flexOne,
-    ...Kb.Styles.globalStyles.flexBoxCenter,
-  },
 }))
 
 const AddToChannels = (props: Props) => (
diff --git a/shared/teams/team/member/header.tsx b/shared/teams/team/member/header.tsx
index ae236e4cee2a..08c2290c9d9a 100644
--- a/shared/teams/team/member/header.tsx
+++ b/shared/teams/team/member/header.tsx
@@ -64,9 +64,8 @@ export const TeamMemberHeader = (props: Props) => {
   )
 
   return (
-    <Kb.Box2 direction="vertical" fullWidth={true} gap="tiny" style={styles.headerContainer}>
-      <Kb.Box2 direction="vertical" fullWidth={true} style={styles.headerContent}>
-        <Kb.Box2 direction="vertical" gap="tiny" fullWidth={true}>
+    <Kb.Box2 direction="vertical" fullWidth={true} style={styles.headerContainer}>
+      <Kb.Box2 direction="vertical" gap="tiny" fullWidth={true} style={styles.headerContent}>
           <Kb.Box2
             direction="horizontal"
             alignItems="center"
@@ -106,7 +105,6 @@ export const TeamMemberHeader = (props: Props) => {
             {!Kb.Styles.isPhone && buttons}
           </Kb.Box2>
           {Kb.Styles.isPhone && buttons}
-        </Kb.Box2>
       </Kb.Box2>
     </Kb.Box2>
   )
diff --git a/shared/teams/team/member/index.tsx b/shared/teams/team/member/index.tsx
index d965c33bf90f..d61c686073c5 100644
--- a/shared/teams/team/member/index.tsx
+++ b/shared/teams/team/member/index.tsx
@@ -14,6 +14,7 @@ import {useSafeNavigation} from '@/util/safe-navigation'
 import {getRolePickerDisabledReasons, isLastOwnerInTeamMembers} from '@/teams/role-picker-utils'
 import {useLoadedTeam} from '../use-loaded-team'
 import {removeMember} from '@/teams/actions'
+import {useAddToTeam} from '@/teams/common/use-add-to-team'
 import {TeamMemberHeader} from './header'
 import {
   useTeamTreeMemberships,
@@ -156,38 +157,16 @@ const NodeNotInRow = (props: NodeNotInRowProps) => {
     membersToModify: props.username,
     teamname: teamMeta.teamname,
   })
-  const addToTeam = C.useRPC(T.RPCGen.teamsTeamAddMembersMultiRoleRpcPromise)
+  const addToTeam = useAddToTeam()
   const [error, setError] = React.useState('')
-  const navigateAppend = C.Router2.navigateAppend
   const onAdd = (role: T.Teams.TeamRoleType) => {
     setError('')
-    addToTeam(
-      [
-        {
-          sendChatNotification: true,
-          teamID: props.node.teamID,
-          users: [{assertion: props.username, role: T.RPCGen.TeamRole[role]}],
-        },
-        [C.waitingKeyTeamsTeam(props.node.teamID), onAddWaitingKey],
-      ],
-      res => {
-        const usernames = res.notAdded?.map(user => user.username) ?? []
-        if (usernames.length) {
-          navigateAppend({name: 'contactRestricted', params: {source: 'teamAddSomeFailed', usernames}})
-        }
-      },
-      err => {
-        if (err.code === T.RPCGen.StatusCode.scteamcontactsettingsblock) {
-          const users = (err.fields as Array<{key?: string; value?: string} | undefined> | undefined)
-            ?.filter(field => field?.key === 'usernames')
-            .map(field => field?.value)
-          const usernames = users?.[0]?.split(',') ?? []
-          navigateAppend({name: 'contactRestricted', params: {source: 'teamAddAllFailed', usernames}})
-          return
-        }
-        setError(err.message)
-      }
-    )
+    addToTeam({
+      onError: setError,
+      sendChatNotification: true,
+      teamID: props.node.teamID,
+      users: [{assertion: props.username, role}],
+    })
   }
   const openTeam = () => nav.safeNavigateAppend({name: 'team', params: {teamID: props.node.teamID}})
   const [open, setOpen] = React.useState(false)
@@ -389,7 +368,7 @@ const NodeInRow = (props: NodeInRowProps) => {
           {props.idx !== 0 && <Kb.Divider />}
 
           <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="flex-start" style={styles.row}>
-            <Kb.Box2 direction="horizontal" style={Kb.Styles.collapseStyles([styles.expandIcon])}>
+            <Kb.Box2 direction="horizontal" style={styles.expandIcon}>
               <Kb.Icon type={expanded ? 'iconfont-caret-down' : 'iconfont-caret-right'} sizeType="Tiny" />
             </Kb.Box2>
             <Kb.Box2
diff --git a/shared/teams/team/member/use-team-tree-memberships.tsx b/shared/teams/team/member/use-team-tree-memberships.tsx
index 32a0c94f72bd..44f90190d3e6 100644
--- a/shared/teams/team/member/use-team-tree-memberships.tsx
+++ b/shared/teams/team/member/use-team-tree-memberships.tsx
@@ -2,6 +2,7 @@ import * as C from '@/constants'
 import * as Teams from '@/constants/teams'
 import * as T from '@/constants/types'
 import * as React from 'react'
+import {produce} from 'immer'
 import logger from '@/logger'
 import {useEngineActionListener} from '@/engine/action-listener'
 import {useTeamsList} from '@/teams/use-teams-list'
@@ -39,7 +40,7 @@ const makeEmptyTeamTreeMembershipState = (
 })
 
 const matchesTeamTreeMembershipState = (
-  state: TeamTreeMembershipState,
+  state: {targetTeamID: T.Teams.TeamID; username: string},
   targetTeamID: T.Teams.TeamID,
   username: string
 ) => state.targetTeamID === targetTeamID && state.username === username
@@ -70,16 +71,16 @@ export const useTeamTreeMemberships = (targetTeamID: T.Teams.TeamID, username: s
         C.waitingKeyTeamsLoadTeamTreeActivity(teamID, username)
       )
         .then(activityMap => {
-          setState(prev => {
-            if (!matchesTeamTreeMembershipState(prev, targetTeamID, username)) {
-              return prev
-            }
-            const nextLastActivity = new Map(prev.lastActivity)
-            Object.entries(activityMap ?? {}).forEach(([activityTeamID, lastActivity]) => {
-              nextLastActivity.set(activityTeamID, lastActivity)
+          setState(
+            produce(draft => {
+              if (!matchesTeamTreeMembershipState(draft, targetTeamID, username)) {
+                return
+              }
+              Object.entries(activityMap ?? {}).forEach(([activityTeamID, lastActivity]) => {
+                draft.lastActivity.set(activityTeamID, lastActivity)
+              })
             })
-            return {...prev, lastActivity: nextLastActivity}
-          })
+          )
           return undefined
         })
         .catch(error => {
@@ -130,13 +131,14 @@ export const useTeamTreeMemberships = (targetTeamID: T.Teams.TeamID, username: s
         return base
       }
       if (base.guid === undefined || result.guid > base.guid) {
-        return {
-          ...makeEmptyTeamTreeMembershipState(targetTeamID, username),
-          expectedCount: result.expectedCount,
-          guid: result.guid,
-        }
+        const next = makeEmptyTeamTreeMembershipState(targetTeamID, username)
+        next.expectedCount = result.expectedCount
+        next.guid = result.guid
+        return next
       }
-      return {...base, expectedCount: result.expectedCount}
+      return produce(base, draft => {
+        draft.expectedCount = result.expectedCount
+      })
     })
   })
 
@@ -152,24 +154,22 @@ export const useTeamTreeMemberships = (targetTeamID: T.Teams.TeamID, username: s
       if (base.guid !== undefined && membership.guid < base.guid) {
         return base
       }
-      const nextMemberships =
-        base.guid === undefined || membership.guid > base.guid
-          ? [membership]
-          : [...base.memberships, membership]
-      const nextSparseMemberInfos =
-        base.guid === undefined || membership.guid > base.guid ? new Map() : new Map(base.sparseMemberInfos)
-      if (membership.result.s === T.RPCGen.TeamTreeMembershipStatus.ok) {
-        nextSparseMemberInfos.set(
-          membership.result.ok.teamID,
-          consumeTeamTreeMembershipValue(membership.result.ok)
-        )
-      }
-      return {
-        ...base,
-        guid: membership.guid,
-        memberships: nextMemberships,
-        sparseMemberInfos: nextSparseMemberInfos,
-      }
+      const reset = base.guid === undefined || membership.guid > base.guid
+      return produce(base, draft => {
+        draft.guid = membership.guid
+        if (reset) {
+          draft.memberships = [membership]
+          draft.sparseMemberInfos = new Map()
+        } else {
+          draft.memberships.push(membership)
+        }
+        if (membership.result.s === T.RPCGen.TeamTreeMembershipStatus.ok) {
+          draft.sparseMemberInfos.set(
+            membership.result.ok.teamID,
+            consumeTeamTreeMembershipValue(membership.result.ok)
+          )
+        }
+      })
     })
     if (membership.result.s === T.RPCGen.TeamTreeMembershipStatus.ok) {
       loadLastActivity(membership.result.ok.teamID)
@@ -221,7 +221,8 @@ export const useTeamTreeMemberships = (targetTeamID: T.Teams.TeamID, username: s
   return {
     errors,
     loading:
-      visibleState.expectedCount === undefined || visibleState.memberships.length < visibleState.expectedCount,
+      visibleState.expectedCount === undefined ||
+      visibleState.memberships.length < visibleState.expectedCount,
     nodesIn,
     nodesNotIn,
     reload,
diff --git a/shared/teams/team/menu-container.tsx b/shared/teams/team/menu-container.tsx
index d804b0fc6d1c..f317ae76091b 100644
--- a/shared/teams/team/menu-container.tsx
+++ b/shared/teams/team/menu-container.tsx
@@ -6,6 +6,7 @@ import capitalize from 'lodash/capitalize'
 import * as T from '@/constants/types'
 import {pluralize} from '@/util/string'
 import {useLoadedTeam} from './use-loaded-team'
+import RoleCrown from '../common/role-crown'
 import {makeAddMembersWizard} from '../add-members-wizard/state'
 
 type OwnProps = {
@@ -42,13 +43,7 @@ const TeamMenu = (props: Props) => {
       }
       metaTwo={
         <Kb.Box2 direction="horizontal" alignItems="flex-start" gap="xtiny">
-          {(role === 'admin' || role === 'owner') && (
-            <Kb.Icon
-              color={role === 'owner' ? Kb.Styles.globalColors.yellowDark : Kb.Styles.globalColors.black_35}
-              fontSize={10}
-              type="iconfont-crown-owner"
-            />
-          )}
+          <RoleCrown role={role} fontSize={10} />
           <Kb.Text type="BodySmall">{capitalize(role)}</Kb.Text>
         </Kb.Box2>
       }
@@ -79,7 +74,7 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   }),
 }))
 
-const Container = (ownProps: OwnProps) => {
+const TeamMenuContainer = (ownProps: OwnProps) => {
   const {teamID} = ownProps
   const {teamDetails, teamMeta, yourOperations} = useLoadedTeam(teamID)
   const {teamname, role, memberCount} = teamMeta
@@ -147,4 +142,4 @@ const Container = (ownProps: OwnProps) => {
   )
 }
 
-export default Container
+export default TeamMenuContainer
diff --git a/shared/teams/team/new-header.tsx b/shared/teams/team/new-header.tsx
index d07fa0fb09bb..16b1921317d4 100644
--- a/shared/teams/team/new-header.tsx
+++ b/shared/teams/team/new-header.tsx
@@ -3,6 +3,7 @@ import * as Kb from '@/common-adapters'
 import TeamMenu from './menu-container'
 import {pluralize} from '@/util/string'
 import {Activity, useActivityLevels, useTeamLinkPopup} from '../common'
+import RoleCrown from '../common/role-crown'
 import type * as T from '@/constants/types'
 import {useSafeNavigation} from '@/util/safe-navigation'
 import {useCurrentUserState} from '@/stores/current-user'
@@ -130,26 +131,18 @@ const HeaderTitle = (props: HeaderTitleProps) => {
           alignSelf="flex-start"
           style={styles.flexShrink}
         >
-          <Kb.Text type="Header" lineClamp={3} style={styles.header} selectable={true}>
+          <Kb.Text type="Header" lineClamp={3} style={styles.flexShrink} selectable={true}>
             {meta.teamname}
           </Kb.Text>
           {!!onRename && <Kb.Icon type="iconfont-edit" onClick={onRename} />}
         </Kb.Box2>
         {meta.isOpen && (
-          <Kb.Meta title="open" backgroundColor={Kb.Styles.globalColors.green} style={styles.openMeta} />
+          <Kb.Meta variant="open" style={styles.openMeta} />
         )}
       </Kb.Box2>
       {
         <Kb.Box2 direction="horizontal" gap="xxtiny" alignSelf="flex-start">
-          {(meta.role === 'admin' || meta.role === 'owner') && (
-            <Kb.Icon
-              color={
-                meta.role === 'owner' ? Kb.Styles.globalColors.yellowDark : Kb.Styles.globalColors.black_35
-              }
-              fontSize={Kb.Styles.isPhone ? 16 : 10}
-              type={meta.role === 'owner' ? 'iconfont-crown-owner' : 'iconfont-crown-admin'}
-            />
-          )}
+          <RoleCrown role={meta.role} fontSize={Kb.Styles.isPhone ? 16 : 10} />
           {!Kb.Styles.isPhone && (
             <>
               <Kb.Text type="BodySmall">
@@ -188,7 +181,7 @@ const HeaderTitle = (props: HeaderTitleProps) => {
             {meta.memberCount.toLocaleString()} {pluralize('member', meta.memberCount)}
           </Kb.Text>
         )}
-        <Activity level={activityLevel} style={styles.activity} />
+        <Activity level={activityLevel} style={styles.alignSelfFlexStart} />
         <Kb.Box2 direction="horizontal" gap="tiny" alignItems="center" style={styles.rightActionsContainer}>
           {meta.isMember && <Kb.Button label="Chat" onClick={onChat} small={true} />}
           {yourOperations.editTeamDescription && (
@@ -226,7 +219,7 @@ const HeaderTitle = (props: HeaderTitleProps) => {
 
   if (Kb.Styles.isPhone) {
     return (
-      <Kb.Box2 alignItems="flex-start" direction="vertical" fullWidth={true} style={styles.backButton}>
+      <Kb.Box2 alignItems="flex-start" direction="vertical" fullWidth={true} style={styles.backgroundWhite}>
         <Kb.Box2 direction="vertical" fullWidth={true} gap="small" style={styles.outerBoxMobile}>
           <Kb.Box2 direction="horizontal" fullWidth={true} gap="tiny">
             {avatar}
@@ -259,7 +252,7 @@ const HeaderTitle = (props: HeaderTitleProps) => {
         alignItems="flex-start"
         alignSelf="flex-start"
         flex={1}
-        style={styles.flexShrinkGrow}
+        style={styles.flexShrink}
       >
         {topDescriptors}
         {bottomDescriptorsAndButtons}
@@ -307,7 +300,6 @@ const useHeaderCallbacks = (teamID: T.Teams.TeamID) => {
 const styles = Kb.Styles.styleSheetCreate(
   () =>
     ({
-      activity: {alignSelf: 'flex-start'},
       addInviteAndLinkBox: Kb.Styles.platformStyles({
         common: {
           ...Kb.Styles.border(Kb.Styles.globalColors.black_10),
@@ -365,7 +357,6 @@ const styles = Kb.Styles.styleSheetCreate(
         textDecorationLine: 'underline',
       },
       alignSelfFlexStart: {alignSelf: 'flex-start'},
-      backButton: {backgroundColor: Kb.Styles.globalColors.white},
       backgroundWhite: {backgroundColor: Kb.Styles.globalColors.white},
       clickable: Kb.Styles.platformStyles({
         isElectron: {...Kb.Styles.desktopStyles.windowDraggingClickable},
@@ -382,10 +373,6 @@ const styles = Kb.Styles.styleSheetCreate(
         },
       }),
       flexShrink: {flexShrink: 1},
-      flexShrinkGrow: {
-        flexShrink: 1,
-      },
-      header: {flexShrink: 1},
       illustration: {borderRadius: Kb.Styles.borderRadius},
       marginBottomRightTiny: {
         marginBottom: Kb.Styles.globalMargins.tiny,
diff --git a/shared/teams/team/rows/bot-row/bot.tsx b/shared/teams/team/rows/bot-row/bot.tsx
index 576ca38306a0..79d8ad051898 100644
--- a/shared/teams/team/rows/bot-row/bot.tsx
+++ b/shared/teams/team/rows/bot-row/bot.tsx
@@ -27,7 +27,7 @@ export type Props = {
 // duplicated here because the desktop & mobile layouts differ significantly. If
 // you're changing one remember to change the other.
 
-export const TeamBotRow = (props: Props) => {
+const TeamBotRow = (props: Props) => {
   let descriptionLabel: React.ReactNode = null
   const popupAnchor = React.useRef<Kb.MeasureRef | null>(null)
   const [showMenu, setShowMenu] = React.useState(false)
diff --git a/shared/teams/team/rows/channel-row/add.tsx b/shared/teams/team/rows/channel-row/add.tsx
index 508a73c111dd..6ce35f23b699 100644
--- a/shared/teams/team/rows/channel-row/add.tsx
+++ b/shared/teams/team/rows/channel-row/add.tsx
@@ -3,7 +3,7 @@ import * as Kb from '@/common-adapters'
 import type * as T from '@/constants/types'
 import {useSafeNavigation} from '@/util/safe-navigation'
 
-const ButtonRow = (props: {teamID: T.Teams.TeamID}) => {
+const CreateChannelRow = (props: {teamID: T.Teams.TeamID}) => {
   const nav = useSafeNavigation()
   const onCreateChannel = () =>
     nav.safeNavigateAppend({name: 'chatCreateChannel', params: {...props, navToChatOnSuccess: false}})
@@ -12,7 +12,7 @@ const ButtonRow = (props: {teamID: T.Teams.TeamID}) => {
   const waitingForGet = C.Waiting.useAnyWaiting(waitingKey)
 
   return (
-    <Kb.Box2 direction="horizontal" style={styles.container} fullWidth={true} gap="small" justifyContent="flex-start">
+    <Kb.Box2 direction="horizontal" style={styles.container} fullWidth={true} gap="small">
       <Kb.Button small={true} mode="Secondary" label="Create channel" onClick={onCreateChannel} />
       {waitingForGet && <Kb.ProgressIndicator type="Small" />}
     </Kb.Box2>
@@ -26,4 +26,4 @@ const styles = Kb.Styles.styleSheetCreate(() => ({
   },
 }))
 
-export default ButtonRow
+export default CreateChannelRow
diff --git a/shared/teams/team/rows/channel-row/channel.tsx b/shared/teams/team/rows/channel-row/channel.tsx
index c42fe385912f..73e324a2f286 100644
--- a/shared/teams/team/rows/channel-row/channel.tsx
+++ b/shared/teams/team/rows/channel-row/channel.tsx
@@ -145,7 +145,7 @@ const ChannelRow = (props: ChannelRowProps) => {
   ) : undefined
   const massActionsProps = canPerform.deleteChannel
     ? {
-        containerStyleOverride: styles.listItemMargin,
+        containerStyleOverride: selectionStyles.listItemMargin,
         icon: checkCircle,
         iconStyleOverride: styles.checkCircle,
       }
@@ -159,7 +159,7 @@ const ChannelRow = (props: ChannelRowProps) => {
       type="Large"
       body={body}
       firstItem={isGeneral}
-      style={selected ? styles.selected : styles.unselected}
+      style={selected ? selectionStyles.selected : selectionStyles.unselected}
       onClick={onNavToChannel}
     />
   )
@@ -171,13 +171,11 @@ const styles = Kb.Styles.styleSheetCreate(
       actionButtons: {
         paddingTop: Kb.Styles.globalMargins.tiny,
       },
+      // like selectionStyles.checkCircle but deliberately not centered in the taller row
       checkCircle: Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small),
-      listItemMargin: {marginLeft: 0},
       row: {
         paddingTop: Kb.Styles.globalMargins.xtiny,
       },
-      selected: {backgroundColor: Kb.Styles.globalColors.blueLighterOrBlueDarker},
-      unselected: {backgroundColor: Kb.Styles.globalColors.white},
     }) as const
 )
 
diff --git a/shared/teams/team/rows/common.tsx b/shared/teams/team/rows/common.tsx
index 9e1abb7bd683..f11729e43c5e 100644
--- a/shared/teams/team/rows/common.tsx
+++ b/shared/teams/team/rows/common.tsx
@@ -1,5 +1,8 @@
+import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
+import * as T from '@/constants/types'
 import type * as React from 'react'
+import MenuHeader from './menu-header'
 
 // the explanatory blueGrey footer row at the bottom of the channels/subteams tabs
 export const InfoNoteRow = (props: {children: React.ReactNode}) => (
@@ -24,6 +27,168 @@ export const selectionStyles = Kb.Styles.styleSheetCreate(() => ({
     ...Kb.Styles.padding(Kb.Styles.globalMargins.tiny, Kb.Styles.globalMargins.small),
     alignSelf: 'center',
   },
+  fullNameLabel: {flexShrink: 1},
+  listItemMargin: {marginLeft: 0},
   mobileMarginsHack: Kb.Styles.platformStyles({isMobile: {marginRight: 48}}), // ListItem is malfunctioning because the checkbox width is unusual
+  nameContainer: {marginLeft: Kb.Styles.globalMargins.small},
+  selected: {backgroundColor: Kb.Styles.globalColors.blueLighterOrBlueDarker},
+  unselected: {backgroundColor: Kb.Styles.globalColors.white},
   widenClickableArea: {margin: -5, padding: 5},
 }))
+
+export const getResetLabel = (status: T.Teams.MemberStatus, youCanManageMembers: boolean) =>
+  status === 'deleted'
+    ? 'Has deleted their account'
+    : youCanManageMembers
+      ? 'Has reset their account'
+      : 'Has reset their account; admins can re-invite'
+
+export const FullNameLabel = (props: {fullName: string; active: boolean}) =>
+  props.fullName && props.active ? (
+    <Kb.Text style={selectionStyles.fullNameLabel} type="BodySmall" lineClamp={1}>
+      {props.fullName} •
+    </Kb.Text>
+  ) : null
+
+// ListItem props that swap the leading icon for a mass-selection check circle
+export const getMassActionsProps = (username: string, selected: boolean, onSelect: (s: boolean) => void) => ({
+  containerStyleOverride: selectionStyles.listItemMargin,
+  icon: (
+    <Kb.CheckCircle
+      checked={selected}
+      onCheck={onSelect}
+      key={`check-${username}`}
+      style={selectionStyles.widenClickableArea}
+    />
+  ),
+  iconStyleOverride: selectionStyles.checkCircle,
+})
+
+export const useOnBlockUser = (username: string) => {
+  const setUserBlocks = C.useRPC(T.RPCGen.userSetUserBlocksRpcPromise)
+  return () => {
+    if (username) {
+      setUserBlocks(
+        [{blocks: [{setChatBlock: true, setFollowBlock: true, username}]}, C.waitingKeyUsersSetUserBlocks],
+        () => {},
+        () => {}
+      )
+    }
+  }
+}
+
+type MemberMenuProps = {
+  blockIcon: Kb.IconType
+  canEditRole: boolean
+  crown: React.ReactNode
+  fullName: string
+  isYou: boolean
+  onAddToChannels: () => void
+  onBlock: () => void
+  onChat: () => void
+  onEditRole: () => void
+  onOpenProfile: () => void
+  removeItem?: {title: string; onClick: () => void}
+  roleLabel: React.ReactNode
+  username: string
+  youCanManageMembers: boolean
+}
+
+// the chat/ellipsis hover actions incl. the "More actions" floating menu, shared
+// by the team-members and channel-members rows
+export const MemberActions = (props: MemberMenuProps) => {
+  const {blockIcon, canEditRole, crown, fullName, isYou, onAddToChannels, onBlock, onChat} = props
+  const {onEditRole, onOpenProfile, removeItem, roleLabel, username, youCanManageMembers} = props
+  const makePopup = (p: Kb.Popup2Parms) => {
+    const {attachTo, hidePopup} = p
+    const menuHeader = (
+      <MenuHeader
+        username={username}
+        fullName={fullName}
+        label={
+          <Kb.Box2 direction="horizontal">
+            <Kb.Text type="BodySmall">{crown}</Kb.Text>
+            <Kb.Text type="BodySmall">{roleLabel}</Kb.Text>
+          </Kb.Box2>
+        }
+      />
+    )
+
+    const menuItems: Kb.MenuItems = [
+      'Divider',
+      ...(youCanManageMembers
+        ? ([
+            {
+              icon: 'iconfont-chat',
+              onClick: onAddToChannels,
+              title: 'Add to channels...',
+            },
+            ...(canEditRole
+              ? [{icon: 'iconfont-crown-admin', onClick: onEditRole, title: 'Edit role...'}]
+              : []),
+          ] as Kb.MenuItems)
+        : []),
+      {icon: 'iconfont-person', onClick: onOpenProfile, title: 'View profile'},
+      {icon: 'iconfont-chat', onClick: onChat, title: 'Chat'},
+      ...(youCanManageMembers || !isYou ? (['Divider'] as Kb.MenuItems) : []),
+      ...(removeItem
+        ? ([
+            {
+              danger: true,
+              icon: 'iconfont-remove',
+              onClick: removeItem.onClick,
+              title: removeItem.title,
+            },
+          ] as Kb.MenuItems)
+        : []),
+      ...(!isYou
+        ? ([
+            {
+              danger: true,
+              icon: blockIcon,
+              onClick: onBlock,
+              title: 'Block',
+            },
+          ] as Kb.MenuItems)
+        : []),
+    ]
+    return (
+      <Kb.FloatingMenu
+        header={menuHeader}
+        attachTo={attachTo}
+        closeOnSelect={true}
+        items={menuItems}
+        onHidden={hidePopup}
+        visible={true}
+      />
+    )
+  }
+  const {showPopup, popupAnchor, popup} = Kb.usePopup2(makePopup)
+
+  return (
+    <Kb.Box2
+      direction="horizontal"
+      gap="tiny"
+      style={youCanManageMembers ? selectionStyles.mobileMarginsHack : undefined}
+    >
+      {popup}
+      <Kb.IconButton
+        icon="iconfont-chat"
+        iconColor={Kb.Styles.globalColors.black_50}
+        mode="Secondary"
+        onClick={onChat}
+        small={true}
+        tooltip="Open chat"
+      />
+      <Kb.IconButton
+        icon="iconfont-ellipsis"
+        iconColor={Kb.Styles.globalColors.black_50}
+        mode="Secondary"
+        onClick={showPopup}
+        ref={popupAnchor}
+        small={true}
+        tooltip="More actions"
+      />
+    </Kb.Box2>
+  )
+}
diff --git a/shared/teams/team/rows/empty-row.tsx b/shared/teams/team/rows/empty-row.tsx
index eadd25b09943..43388de3d55b 100644
--- a/shared/teams/team/rows/empty-row.tsx
+++ b/shared/teams/team/rows/empty-row.tsx
@@ -1,4 +1,4 @@
-import * as T from '@/constants/types'
+import type * as T from '@/constants/types'
 import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import * as React from 'react'
@@ -8,6 +8,7 @@ import {makeAddMembersWizard} from '@/teams/add-members-wizard/state'
 import {makeNewTeamWizard} from '@/teams/new-team/wizard/state'
 import {useLoadedTeam} from '../use-loaded-team'
 import {joinConversation} from '@/chat/conversation/status-actions'
+import {useAddToTeam} from '../../common/use-add-to-team'
 
 type Props = {
   type: 'channelsEmpty' | 'channelsFew' | 'members' | 'subteams'
@@ -91,46 +92,19 @@ const EmptyRow = (props: Props) => {
   const notIn = teamMeta.role === 'none' || props.notChannelMember
   const you = useCurrentUserState(s => s.username)
   const onSecondaryAction = useSecondaryAction(props)
-  const addToTeam = C.useRPC(T.RPCGen.teamsTeamAddMembersMultiRoleRpcPromise)
+  const addToTeam = useAddToTeam()
   const [error, setError] = React.useState('')
   const onAddSelf = () => {
     if (conversationIDKey) {
       joinConversation(conversationIDKey)
     } else {
       setError('')
-      addToTeam(
-        [
-          {
-            sendChatNotification: false,
-            teamID,
-            users: [{assertion: you, role: T.RPCGen.TeamRole.admin}],
-          },
-          [C.waitingKeyTeamsTeam(teamID), C.waitingKeyTeamsAddMember(teamID, you)],
-        ],
-        res => {
-          const usernames = res.notAdded?.map(user => user.username) ?? []
-          if (usernames.length) {
-            C.Router2.navigateAppend({
-              name: 'contactRestricted',
-              params: {source: 'teamAddSomeFailed', usernames},
-            })
-          }
-        },
-        err => {
-          if (err.code === T.RPCGen.StatusCode.scteamcontactsettingsblock) {
-            const users = (err.fields as Array<{key?: string; value?: string} | undefined> | undefined)
-              ?.filter(field => field?.key === 'usernames')
-              .map(field => field?.value)
-            const usernames = users?.[0]?.split(',') ?? []
-            C.Router2.navigateAppend({
-              name: 'contactRestricted',
-              params: {source: 'teamAddAllFailed', usernames},
-            })
-            return
-          }
-          setError(err.message)
-        }
-      )
+      addToTeam({
+        onError: setError,
+        sendChatNotification: false,
+        teamID,
+        users: [{assertion: you, role: 'admin'}],
+      })
     }
   }
   const waiting = C.Waiting.useAnyWaiting(C.waitingKeyTeamsAddMember(teamID, you))
@@ -144,7 +118,6 @@ const EmptyRow = (props: Props) => {
       alignItems="center"
       style={styles.container}
       fullWidth={true}
-      justifyContent="flex-start"
     >
       <Kb.ImageIcon type={icon[props.type]} style={styles.iconHeight} />
       <Kb.Text type="BodySmall" center={true} style={styles.text}>
diff --git a/shared/teams/team/rows/index.tsx b/shared/teams/team/rows/index.tsx
index 7333995b935d..9ee62233584f 100644
--- a/shared/teams/team/rows/index.tsx
+++ b/shared/teams/team/rows/index.tsx
@@ -25,16 +25,10 @@ import {useCurrentUserState} from '@/stores/current-user'
 import {useTeamsListMap} from '@/teams/use-teams-list'
 import {metasReceived} from '@/chat/inbox/metadata'
 
-type Requests = Omit<React.ComponentProps<typeof RequestRow>, 'firstItem' | 'teamID'>
-
 export type Item =
   | {type: 'members-loading'}
   | {type: 'members-none'}
   | {type: 'member-members'; mi: T.Teams.MemberInfo}
-  | {type: 'row'}
-  | {type: 'invite-info'; ii: T.Teams.InviteInfo}
-  | {type: 'requests'; r: Requests}
-  | {type: 'channel-info'; ci: T.Teams.TeamChannelInfo}
   | {type: 'emoji'; e: T.RPCChat.Emoji}
   | {type: 'add-bots'}
   | {type: 'invite-requests'; ctime: number; fullName: string; reset?: boolean; username: string}
diff --git a/shared/teams/team/rows/invite-row/invite.tsx b/shared/teams/team/rows/invite-row/invite.tsx
index db87b00b0d80..49b3b1b59174 100644
--- a/shared/teams/team/rows/invite-row/invite.tsx
+++ b/shared/teams/team/rows/invite-row/invite.tsx
@@ -14,7 +14,7 @@ export type Props = {
   firstItem: boolean
 }
 
-export const TeamInviteRow = (props: Props) => {
+const TeamInviteRow = (props: Props) => {
   const {onCancelInvite, role, label, firstItem, subLabel, isKeybaseUser} = props
   const text2 = subLabel ? `${subLabel} · ${Teams.typeToLabel[role]}` : Teams.typeToLabel[role]
   return (
diff --git a/shared/teams/team/rows/invite-row/request.tsx b/shared/teams/team/rows/invite-row/request.tsx
index a0341b216776..7621bd864069 100644
--- a/shared/teams/team/rows/invite-row/request.tsx
+++ b/shared/teams/team/rows/invite-row/request.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import * as C from '@/constants'
 import {useIsBigTeam} from '@/teams/common/use-loaded-team-channels'
 import {useCurrentUserState} from '@/stores/current-user'
-import * as T from '@/constants/types'
+import type * as T from '@/constants/types'
 import * as Kb from '@/common-adapters'
 import {FloatingRolePicker, sendNotificationFooter} from '@/teams/role-picker'
 import {getRolePickerDisabledReasons} from '@/teams/role-picker-utils'
@@ -11,6 +11,7 @@ import MenuHeader from '../menu-header'
 import {navToProfile} from '@/constants/router'
 import {useLoadedTeam} from '../../use-loaded-team'
 import {ignoreRequest, removeMember} from '@/teams/actions'
+import {useAddToTeam} from '@/teams/common/use-add-to-team'
 
 const positionFallbacks = ['left center', 'top left'] as const
 
@@ -40,7 +41,7 @@ type RolePickerProps = {
 
 export type Props = {} & RowProps & RolePickerProps
 
-export const TeamRequestRow = (props: Props) => {
+const TeamRequestRow = (props: Props) => {
   const {ctime, fullName, username, onAccept, onOpenProfile, reset} = props
 
   const approveWord = reset ? 'Readmit' : 'Approve'
@@ -239,40 +240,18 @@ const RequestRow = (ownProps: OwnProps) => {
     }
   }
 
-  const addToTeam = C.useRPC(T.RPCGen.teamsTeamAddMembersMultiRoleRpcPromise)
-  const navigateAppend = C.Router2.navigateAppend
+  const addToTeam = useAddToTeam()
   const letIn = (
     sendNotification: boolean,
     role: T.Teams.TeamRoleType,
     onError: (message: string) => void
   ) => {
-    addToTeam(
-      [
-        {
-          sendChatNotification: sendNotification,
-          teamID,
-          users: [{assertion: username, role: T.RPCGen.TeamRole[role]}],
-        },
-        [C.waitingKeyTeamsTeam(teamID), C.waitingKeyTeamsAddMember(teamID, username)],
-      ],
-      res => {
-        const usernames = res.notAdded?.map(user => user.username) ?? []
-        if (usernames.length) {
-          navigateAppend({name: 'contactRestricted', params: {source: 'teamAddSomeFailed', usernames}})
-        }
-      },
-      err => {
-        if (err.code === T.RPCGen.StatusCode.scteamcontactsettingsblock) {
-          const users = (err.fields as Array<{key?: string; value?: string} | undefined> | undefined)
-            ?.filter(field => field?.key === 'usernames')
-            .map(field => field?.value)
-          const usernames = users?.[0]?.split(',') ?? []
-          navigateAppend({name: 'contactRestricted', params: {source: 'teamAddAllFailed', usernames}})
-          return
-        }
-        onError(err.message)
-      }
-    )
+    addToTeam({
+      onError,
+      sendChatNotification: sendNotification,
+      teamID,
+      users: [{assertion: username, role}],
+    })
   }
   const onChat = () => {
     if (username) {
diff --git a/shared/teams/team/rows/member-row.tsx b/shared/teams/team/rows/member-row.tsx
index e8ed32c29b02..cec5f71c1d8f 100644
--- a/shared/teams/team/rows/member-row.tsx
+++ b/shared/teams/team/rows/member-row.tsx
@@ -1,9 +1,16 @@
 import * as C from '@/constants'
 import * as Kb from '@/common-adapters'
 import * as Teams from '@/constants/teams'
-import * as T from '@/constants/types'
-import MenuHeader from './menu-header'
-import {selectionStyles} from './common'
+import type * as T from '@/constants/types'
+import RoleCrown from '../../common/role-crown'
+import {
+  FullNameLabel,
+  getMassActionsProps,
+  getResetLabel,
+  MemberActions,
+  selectionStyles,
+  useOnBlockUser,
+} from './common'
 import {useTeamSelectionState} from '../../common/selection-state'
 import {useSafeNavigation} from '@/util/safe-navigation'
 import {useCurrentUserState} from '@/stores/current-user'
@@ -30,47 +37,19 @@ export type Props = {
   youCanManageMembers: boolean
 }
 
-const showCrown = {
-  admin: true,
-  bot: false,
-  owner: true,
-  reader: false,
-  restrictedbot: false,
-  writer: false,
-} satisfies T.Teams.BoolTypeMap
-
 // NOTE the controls for reset and deleted users (and the chat button) are
 // duplicated here because the desktop & mobile layouts differ significantly. If
 // you're changing one remember to change the other.
 
-export const TeamMemberRow = (props: Props) => {
+const TeamMemberRow = (props: Props) => {
   const {roleType, fullName, username, youCanEditRole, youCanManageMembers} = props
   const {onOpenProfile, onChat, onBlock, onRemoveFromTeam} = props
   const active = props.status === 'active'
-  const crown =
-    active && showCrown[roleType] ? (
-      <Kb.Icon
-        type={('iconfont-crown-' + roleType) as Kb.IconType}
-        color={roleType === 'owner' ? Kb.Styles.globalColors.yellowDark : Kb.Styles.globalColors.black_35}
-        fontSize={10}
-      />
-    ) : null
-
-  const fullNameLabel =
-    fullName && active ? (
-      <Kb.Text style={styles.fullNameLabel} type="BodySmall" lineClamp={1}>
-        {fullName} •
-      </Kb.Text>
-    ) : null
+  const crown = active ? <RoleCrown role={roleType} fontSize={10} /> : null
 
   let resetLabel: string | undefined
   if (!active) {
-    resetLabel = props.youCanManageMembers
-      ? 'Has reset their account'
-      : 'Has reset their account; admins can re-invite'
-    if (props.status === 'deleted') {
-      resetLabel = 'Has deleted their account'
-    }
+    resetLabel = getResetLabel(props.status, youCanManageMembers)
   } else if (props.needsPUK) {
     resetLabel = ' • Needs to update Keybase'
   }
@@ -90,19 +69,10 @@ export const TeamMemberRow = (props: Props) => {
   const canEnterMemberPage = props.youCanManageMembers && active && !props.needsPUK
   const onClick = anySelected ? () => onSelect(!selected) : canEnterMemberPage ? props.onClick : undefined
 
-  const checkCircle = (
-    <Kb.CheckCircle
-      checked={selected}
-      onCheck={onSelect}
-      key={`check-${props.username}`}
-      style={selectionStyles.widenClickableArea}
-    />
-  )
-
   const body = (
     <Kb.Box2 direction="horizontal" fullWidth={true} alignItems="center">
       <Kb.Avatar username={props.username} size={32} />
-      <Kb.Box2 direction="vertical" flex={1} style={styles.nameContainer} justifyContent="center">
+      <Kb.Box2 direction="vertical" flex={1} style={selectionStyles.nameContainer} justifyContent="center">
         <Kb.ConnectedUsernames
           type="BodyBold"
           usernames={props.username}
@@ -110,7 +80,7 @@ export const TeamMemberRow = (props: Props) => {
           onUsernameClicked={onClick}
         />
         <Kb.Box2 direction="horizontal" centerChildren={true} alignSelf="flex-start" gap="xtiny">
-          {fullNameLabel}
+          <FullNameLabel fullName={fullName} active={active} />
           {crown}
           {!active && (
             <Kb.Meta
@@ -127,109 +97,34 @@ export const TeamMemberRow = (props: Props) => {
     </Kb.Box2>
   )
 
-  const makePopup = (p: Kb.Popup2Parms) => {
-    const {attachTo, hidePopup} = p
-    const menuHeader = (
-      <MenuHeader
-        username={username}
-        fullName={fullName}
-        label={
-          <Kb.Box2 direction="horizontal">
-            <Kb.Text type="BodySmall">{crown}</Kb.Text>
-            <Kb.Text type="BodySmall">{!!active && Teams.typeToLabel[roleType]}</Kb.Text>
-          </Kb.Box2>
-        }
-      />
-    )
-
-    const menuItems: Kb.MenuItems = [
-      'Divider',
-      ...(youCanManageMembers
-        ? ([
-            {
-              icon: 'iconfont-chat',
-              onClick: () =>
-                nav.safeNavigateAppend({
-                  name: 'teamAddToChannels',
-                  params: {teamID, usernames: [username]},
-                }),
-              title: 'Add to channels...',
-            },
-            ...(youCanEditRole
-              ? [{icon: 'iconfont-crown-admin', onClick: props.onClick, title: 'Edit role...'}]
-              : []),
-          ] as Kb.MenuItems)
-        : []),
-      {icon: 'iconfont-person', onClick: onOpenProfile, title: 'View profile'},
-      {icon: 'iconfont-chat', onClick: onChat, title: 'Chat'},
-      ...(youCanManageMembers || !isYou ? (['Divider'] as Kb.MenuItems) : []),
-      ...(youCanManageMembers
-        ? ([
-            {
-              danger: true,
-              icon: 'iconfont-remove',
-              onClick: onRemoveFromTeam,
-              title: 'Remove from team',
-            },
-          ] as Kb.MenuItems)
-        : []),
-      ...(!isYou
-        ? ([
-            {
-              danger: true,
-              icon: 'iconfont-block',
-              onClick: onBlock,
-              title: 'Block',
-            },
-          ] as Kb.MenuItems)
-        : []),
-    ]
-    return (
-      <Kb.FloatingMenu
-        header={menuHeader}
-        attachTo={attachTo}
-        closeOnSelect={true}
-        items={menuItems}
-        onHidden={hidePopup}
-        visible={true}
-      />
-    )
-  }
-  const {showPopup, popupAnchor, popup} = Kb.usePopup2(makePopup)
-
   const actions = (
-    <Kb.Box2
-      direction="horizontal"
-      gap="tiny"
-      style={props.youCanManageMembers ? selectionStyles.mobileMarginsHack : undefined}
-    >
-      {popup}
-      <Kb.IconButton
-        icon="iconfont-chat"
-        iconColor={Kb.Styles.globalColors.black_50}
-        mode="Secondary"
-        onClick={props.onChat}
-        small={true}
-        tooltip="Open chat"
-      />
-      <Kb.IconButton
-        icon="iconfont-ellipsis"
-        iconColor={Kb.Styles.globalColors.black_50}
-        mode="Secondary"
-        onClick={showPopup}
-        ref={popupAnchor}
-        small={true}
-        tooltip="More actions"
-      />
-    </Kb.Box2>
+    <MemberActions
+      blockIcon="iconfont-block"
+      canEditRole={youCanEditRole}
+      crown={crown}
+      fullName={fullName}
+      isYou={isYou}
+      onAddToChannels={() =>
+        nav.safeNavigateAppend({
+          name: 'teamAddToChannels',
+          params: {teamID, usernames: [username]},
+        })
+      }
+      onBlock={onBlock}
+      onChat={onChat}
+      onEditRole={props.onClick}
+      onOpenProfile={onOpenProfile}
+      removeItem={
+        youCanManageMembers ? {onClick: onRemoveFromTeam, title: 'Remove from team'} : undefined
+      }
+      roleLabel={!!active && Teams.typeToLabel[roleType]}
+      username={username}
+      youCanManageMembers={youCanManageMembers}
+    />
   )
 
   const massActionsProps = props.youCanManageMembers
-    ? {
-        containerStyleOverride: styles.listItemMargin,
-        icon: checkCircle,
-        iconStyleOverride: selectionStyles.checkCircle,
-      }
+    ? getMassActionsProps(props.username, selected, onSelect)
     : {}
 
   return (
@@ -241,23 +136,13 @@ export const TeamMemberRow = (props: Props) => {
       type="Large"
       body={body}
       firstItem={props.firstItem}
-      style={selected ? styles.selected : styles.unselected}
-      innerStyle={selected ? styles.selected : styles.unselected}
+      style={selected ? selectionStyles.selected : selectionStyles.unselected}
+      innerStyle={selected ? selectionStyles.selected : selectionStyles.unselected}
       onClick={onClick}
     />
   )
 }
 
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  fullNameLabel: {flexShrink: 1},
-  listItemMargin: {marginLeft: 0},
-  nameContainer: {
-    marginLeft: Kb.Styles.globalMargins.small,
-  },
-  selected: {backgroundColor: Kb.Styles.globalColors.blueLighterOrBlueDarker},
-  unselected: {backgroundColor: Kb.Styles.globalColors.white},
-}))
-
 type OwnProps = {
   teamID: T.Teams.TeamID
   username: string
@@ -289,16 +174,7 @@ const MemberRow = (ownProps: OwnProps) => {
     role => role !== roleType && disabledReasons[role] === undefined
   )
   const youCanEditRole = youCanManageMembers && status === 'active' && !needsPUK && hasEditableRoleChoice
-  const setUserBlocks = C.useRPC(T.RPCGen.userSetUserBlocksRpcPromise)
-  const onBlock = () => {
-    if (username) {
-      setUserBlocks(
-        [{blocks: [{setChatBlock: true, setFollowBlock: true, username}]}, C.waitingKeyUsersSetUserBlocks],
-        () => {},
-        () => {}
-      )
-    }
-  }
+  const onBlock = useOnBlockUser(username)
   const onChat = () => {
     if (username) {
       C.Router2.previewConversation({participants: [username], reason: 'teamMember'})
diff --git a/shared/teams/team/settings-tab/confirm-warning.tsx b/shared/teams/team/settings-tab/confirm-warning.tsx
new file mode 100644
index 000000000000..905724d88029
--- /dev/null
+++ b/shared/teams/team/settings-tab/confirm-warning.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react'
+import * as Kb from '@/common-adapters'
+
+type Props = {
+  body: React.ReactNode
+  checkboxLabel: React.ReactNode
+  // on mobile the confirm button always reads "Confirm"
+  confirmLabel: string
+  icon: React.ReactNode
+  header: React.ReactNode
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+// destructive-settings warning: icon, header, body, an "I understand" checkbox
+// gating the confirm button
+const ConfirmWarning = (props: Props) => {
+  const [enabled, setEnabled] = React.useState(false)
+
+  return (
+    <Kb.Box2 direction="vertical" alignItems="center" style={styles.container}>
+      <Kb.Box2 direction="vertical" style={styles.iconBox}>
+        {props.icon}
+      </Kb.Box2>
+      <Kb.Text center={true} type="Header" style={styles.header}>
+        {props.header}
+      </Kb.Text>
+      <Kb.Text center={true} type="Body" style={styles.body}>
+        {props.body}
+      </Kb.Text>
+      <Kb.Checkbox
+        checked={enabled}
+        onCheck={setEnabled}
+        style={styles.checkbox}
+        label=""
+        labelComponent={
+          <Kb.Box2 direction="vertical" alignItems="flex-start" style={styles.label}>
+            {props.checkboxLabel}
+          </Kb.Box2>
+        }
+      />
+      <Kb.ConfirmButtons
+        onCancel={props.onCancel}
+        onConfirm={props.onConfirm}
+        confirmLabel={isMobile ? 'Confirm' : props.confirmLabel}
+        confirmType="Danger"
+        confirmDisabled={!enabled}
+      />
+    </Kb.Box2>
+  )
+}
+
+const styles = Kb.Styles.styleSheetCreate(() => ({
+  body: {marginBottom: Kb.Styles.globalMargins.small},
+  checkbox: Kb.Styles.platformStyles({
+    isElectron: {
+      marginBottom: Kb.Styles.globalMargins.xlarge,
+    },
+    isMobile: {
+      marginBottom: Kb.Styles.globalMargins.small,
+    },
+  }),
+  container: Kb.Styles.platformStyles({
+    common: {
+      paddingBottom: Kb.Styles.globalMargins.large,
+    },
+    isElectron: {
+      paddingLeft: Kb.Styles.globalMargins.xlarge,
+      paddingRight: Kb.Styles.globalMargins.xlarge,
+      paddingTop: Kb.Styles.globalMargins.xlarge,
+    },
+    isMobile: {
+      paddingLeft: Kb.Styles.globalMargins.small,
+      paddingRight: Kb.Styles.globalMargins.small,
+      paddingTop: Kb.Styles.globalMargins.small,
+    },
+  }),
+  header: {marginBottom: Kb.Styles.globalMargins.small},
+  iconBox: {marginBottom: 20},
+  label: {flexShrink: 1},
+}))
+
+export default ConfirmWarning
diff --git a/shared/teams/team/settings-tab/default-channels.tsx b/shared/teams/team/settings-tab/default-channels.tsx
index 5d8870dd600c..c4d9f71079db 100644
--- a/shared/teams/team/settings-tab/default-channels.tsx
+++ b/shared/teams/team/settings-tab/default-channels.tsx
@@ -3,6 +3,7 @@ import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as T from '@/constants/types'
 import type {RPCError} from '@/util/errors'
+import {produce} from 'immer'
 import {ChannelsWidget} from '@/teams/common'
 import {useLoadedTeam} from '../use-loaded-team'
 
@@ -28,11 +29,10 @@ export const useDefaultChannels = (teamID: T.Teams.TeamID) => {
   const requestVersionRef = React.useRef(0)
   const requestTeamIDRef = React.useRef(teamID)
 
-  const reloadDefaultChannels = React.useCallback((showWaiting = true) => {
+  // no synchronous setState here so the mount effect below can call it directly;
+  // initial/mismatched-team state already shows waiting
+  const load = React.useCallback(() => {
     const requestVersion = ++requestVersionRef.current
-    if (showWaiting) {
-      setState(prev => ({...prev, error: undefined, waiting: true}))
-    }
     getDefaultChannelsRPC(
       [{teamID}],
       result => {
@@ -42,7 +42,10 @@ export const useDefaultChannels = (teamID: T.Teams.TeamID) => {
         setState({
           defaultChannels: [
             {channelname: 'general', conversationIDKey: 'unused'},
-            ...(result.convs || []).map(conv => ({channelname: conv.channel, conversationIDKey: conv.convID})),
+            ...(result.convs || []).map(conv => ({
+              channelname: conv.channel,
+              conversationIDKey: conv.convID,
+            })),
           ],
           error: undefined,
           loadedTeamID: teamID,
@@ -53,11 +56,27 @@ export const useDefaultChannels = (teamID: T.Teams.TeamID) => {
         if (requestVersion !== requestVersionRef.current) {
           return
         }
-        setState(prev => ({...prev, error: err, loadedTeamID: teamID, waiting: false}))
+        setState(
+          produce(draft => {
+            draft.error = err
+            draft.loadedTeamID = teamID
+            draft.waiting = false
+          })
+        )
       }
     )
   }, [getDefaultChannelsRPC, teamID])
 
+  const reloadDefaultChannels = React.useCallback(() => {
+    setState(
+      produce(draft => {
+        draft.error = undefined
+        draft.waiting = true
+      })
+    )
+    load()
+  }, [load])
+
   React.useEffect(() => {
     if (requestTeamIDRef.current !== teamID) {
       requestTeamIDRef.current = teamID
@@ -66,31 +85,8 @@ export const useDefaultChannels = (teamID: T.Teams.TeamID) => {
   }, [teamID])
 
   React.useEffect(() => {
-    const requestVersion = ++requestVersionRef.current
-    getDefaultChannelsRPC(
-      [{teamID}],
-      result => {
-        if (requestVersion !== requestVersionRef.current) {
-          return
-        }
-        setState({
-          defaultChannels: [
-            {channelname: 'general', conversationIDKey: 'unused'},
-            ...(result.convs || []).map(conv => ({channelname: conv.channel, conversationIDKey: conv.convID})),
-          ],
-          error: undefined,
-          loadedTeamID: teamID,
-          waiting: false,
-        })
-      },
-      err => {
-        if (requestVersion !== requestVersionRef.current) {
-          return
-        }
-        setState(prev => ({...prev, error: err, loadedTeamID: teamID, waiting: false}))
-      }
-    )
-  }, [getDefaultChannelsRPC, teamID])
+    load()
+  }, [load])
 
   const visibleState =
     state.loadedTeamID === teamID
diff --git a/shared/teams/team/settings-tab/index.tsx b/shared/teams/team/settings-tab/index.tsx
index 6aeae19cdd24..52ba4e63821d 100644
--- a/shared/teams/team/settings-tab/index.tsx
+++ b/shared/teams/team/settings-tab/index.tsx
@@ -231,8 +231,8 @@ const Settings = (p: Props) => {
 
   return (
     <Kb.Box2 direction="horizontal" fullWidth={true} style={styles.outerBox}>
-      <Kb.Box2 direction="vertical" alignItems="flex-start" flex={1} style={styles.main} justifyContent="flex-start">
-        {!!error && <Kb.Banner color="red">{error}</Kb.Banner>}
+      <Kb.Box2 direction="vertical" alignItems="flex-start" flex={1} style={styles.main}>
+        <Kb.ErrorBanner error={error} />
         <SetMemberShowcase
           yourOperationsJoinTeam={yourOperations.joinTeam}
           canShowcase={canShowcase}
@@ -330,7 +330,7 @@ export type OwnProps = {
   teamID: T.Teams.TeamID
 }
 
-const Container = (ownProps: OwnProps) => {
+const SettingsTabContainer = (ownProps: OwnProps) => {
   const {teamID} = ownProps
   const {reload, teamDetails, teamMeta, yourOperations} = useLoadedTeam(teamID)
   const setGlobalError = useConfigState(s => s.dispatch.setGlobalError)
@@ -455,4 +455,4 @@ const Container = (ownProps: OwnProps) => {
   )
 }
 
-export default Container
+export default SettingsTabContainer
diff --git a/shared/teams/team/settings-tab/open-team-warning.tsx b/shared/teams/team/settings-tab/open-team-warning.tsx
index f43e9a878afb..734e399be1c4 100644
--- a/shared/teams/team/settings-tab/open-team-warning.tsx
+++ b/shared/teams/team/settings-tab/open-team-warning.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as C from '@/constants'
+import ConfirmWarning from './confirm-warning'
 import {useSettingsTabState} from './use-settings'
 
 type Props = {
@@ -11,7 +11,6 @@ type Props = {
 const OpenTeamWarning = (props: Props) => {
   const isOpenTeam = props.isOpenTeam
   const teamname = props.teamname
-  const [enabled, setEnabled] = React.useState(false)
   const onConfirmCallback = useSettingsTabState(s => s.dispatch.triggerAllowOpen)
 
   const clearModals = C.Router2.clearModals
@@ -23,75 +22,31 @@ const OpenTeamWarning = (props: Props) => {
   const onCancel = () => clearModals()
 
   return (
-    <Kb.Box2 direction="vertical" alignItems="center" style={styles.container}>
-      <Kb.ImageIcon type={'icon-illustration-teams-216'} style={styles.iconStyle} />
-      <Kb.Text center={true} type="Header" style={styles.headerStyle}>
-        Make {teamname} into {isOpenTeam ? 'an open' : 'a closed'} team?
-      </Kb.Text>
-      <Kb.Text center={true} type="Body" style={styles.bodyStyle}>
-        You are about to make this team{' '}
-        {isOpenTeam ? 'publicly visible. Anyone will be able to join this team.' : 'private.'}
-      </Kb.Text>
-      <Kb.Checkbox
-        checked={enabled}
-        onCheck={setEnabled}
-        style={styles.checkboxStyle}
-        label=""
-        labelComponent={
-          <Kb.Box2 direction="vertical" alignItems="flex-start" style={styles.label}>
-            <Kb.Text type="Body">
-              I understand that{' '}
-              {isOpenTeam
-                ? 'anyone will be able to join this team.'
-                : 'members will only be able to join through adds or invites.'}
-            </Kb.Text>
-            <Kb.Text type="BodySmall">Subteams will not be affected.</Kb.Text>
-          </Kb.Box2>
-        }
-      />
-      <Kb.ButtonBar>
-        <Kb.Button type="Dim" onClick={onCancel} label="Cancel" />
-        <Kb.Button
-          type="Danger"
-          onClick={onConfirm}
-          label={isMobile ? 'Confirm' : `Yes, set to ${isOpenTeam ? 'Open' : 'Private'}`}
-          disabled={!enabled}
-        />
-      </Kb.ButtonBar>
-    </Kb.Box2>
+    <ConfirmWarning
+      icon={<Kb.ImageIcon type={'icon-illustration-teams-216'} />}
+      header={`Make ${teamname} into ${isOpenTeam ? 'an open' : 'a closed'} team?`}
+      body={
+        <>
+          You are about to make this team{' '}
+          {isOpenTeam ? 'publicly visible. Anyone will be able to join this team.' : 'private.'}
+        </>
+      }
+      checkboxLabel={
+        <>
+          <Kb.Text type="Body">
+            I understand that{' '}
+            {isOpenTeam
+              ? 'anyone will be able to join this team.'
+              : 'members will only be able to join through adds or invites.'}
+          </Kb.Text>
+          <Kb.Text type="BodySmall">Subteams will not be affected.</Kb.Text>
+        </>
+      }
+      confirmLabel={`Yes, set to ${isOpenTeam ? 'Open' : 'Private'}`}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+    />
   )
 }
 
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  bodyStyle: {marginBottom: Kb.Styles.globalMargins.small},
-  checkboxStyle: Kb.Styles.platformStyles({
-    isElectron: {
-      marginBottom: Kb.Styles.globalMargins.xlarge,
-    },
-    isMobile: {
-      marginBottom: Kb.Styles.globalMargins.small,
-    },
-  }),
-  container: Kb.Styles.platformStyles({
-    common: {
-      paddingBottom: Kb.Styles.globalMargins.large,
-    },
-    isElectron: {
-      paddingLeft: Kb.Styles.globalMargins.xlarge,
-      paddingRight: Kb.Styles.globalMargins.xlarge,
-      paddingTop: Kb.Styles.globalMargins.xlarge,
-    },
-    isMobile: {
-      paddingLeft: Kb.Styles.globalMargins.small,
-      paddingRight: Kb.Styles.globalMargins.small,
-      paddingTop: Kb.Styles.globalMargins.small,
-    },
-  }),
-  headerStyle: {marginBottom: Kb.Styles.globalMargins.small},
-  iconStyle: {marginBottom: 20},
-  label: {flexShrink: 1},
-}))
-
 export default OpenTeamWarning
-
-
diff --git a/shared/teams/team/settings-tab/retention/index.tsx b/shared/teams/team/settings-tab/retention/index.tsx
index ff7010d9edce..bfc921581479 100644
--- a/shared/teams/team/settings-tab/retention/index.tsx
+++ b/shared/teams/team/settings-tab/retention/index.tsx
@@ -8,7 +8,7 @@ import SaveIndicator from '@/common-adapters/save-indicator'
 import {useEngineActionListener} from '@/engine/action-listener'
 import {useLoadedTeam} from '../../use-loaded-team'
 import {useConfirm} from './use-confirm'
-import {ConversationThreadProvider, useConversationThreadSelector} from '@/chat/conversation/thread-context'
+import {ConversationThreadProvider, useThreadMeta} from '@/chat/conversation/thread-context'
 
 export type RetentionEntityType = 'adhoc' | 'channel' | 'small team' | 'big team'
 
@@ -171,7 +171,7 @@ const RetentionPicker = (p: Props) => {
         alignItems="center"
         style={styles.retentionDropdown}
       >
-        <Kb.Box2 direction="horizontal" alignItems="center" gap="tiny" fullWidth={true} style={styles.label} justifyContent="flex-start">
+        <Kb.Box2 direction="horizontal" alignItems="center" gap="tiny" fullWidth={true} style={styles.label}>
           {policyToLabel(policy, teamPolicy)}
         </Kb.Box2>
         <Kb.Icon type="iconfont-caret-down" color="inherit" fontSize={7} sizeType="Tiny" />
@@ -469,7 +469,7 @@ export type OwnProps = {
   teamID: T.Teams.TeamID
 }
 
-const Container = (ownProps: OwnProps) => {
+const RetentionPickerContainer = (ownProps: OwnProps) => {
   const {conversationIDKey: _cid, entityType} = ownProps
   if (!_cid && !entityType.endsWith('team')) {
     throw new Error(`RetentionPicker needs a conversationIDKey to set ${entityType} retention policies`)
@@ -491,7 +491,7 @@ const Container = (ownProps: OwnProps) => {
 }
 
 const ConversationPolicyContainer = (ownProps: OwnProps & {conversationIDKey: T.Chat.ConversationIDKey}) => {
-  const policy = useConversationThreadSelector(s => s.meta.retentionPolicy)
+  const policy = useThreadMeta(m => m.retentionPolicy)
   return <ContainerWithPolicy {...ownProps} policy={policy} />
 }
 
@@ -568,4 +568,4 @@ const ContainerWithPolicy = (
   return <RetentionSwitcher {...props} />
 }
 
-export default Container
+export default RetentionPickerContainer
diff --git a/shared/teams/team/settings-tab/retention/warning.tsx b/shared/teams/team/settings-tab/retention/warning.tsx
index 1a34139d2945..2cd46ed9c451 100644
--- a/shared/teams/team/settings-tab/retention/warning.tsx
+++ b/shared/teams/team/settings-tab/retention/warning.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react'
 import * as Kb from '@/common-adapters'
 import * as C from '@/constants'
 import type * as T from '@/constants/types'
 import type {RetentionEntityType} from '.'
+import ConfirmWarning from '../confirm-warning'
 import {useConfirm} from './use-confirm'
 
 type Props = {
@@ -14,59 +14,42 @@ type Props = {
 }
 
 const RetentionWarning = (props: Props) => {
-  const [enabled, setEnabled] = React.useState(false)
-
-  let showChannelWarnings = false
-  if (props.entityType === 'big team') {
-    showChannelWarnings = true
-  }
+  const showChannelWarnings = props.entityType === 'big team'
   const convType: string = getConvType(props.entityType)
   return (
-    <Kb.Box2 direction="vertical" alignItems="center" style={styles.container}>
-      <Kb.Box2 direction="vertical" style={styles.iconBoxStyle}>
+    <ConfirmWarning
+      icon={
         <Kb.Icon
           color={props.exploding ? Kb.Styles.globalColors.black : Kb.Styles.globalColors.black_20}
           fontSize={48}
           type={props.exploding ? 'iconfont-bomb-solid' : 'iconfont-timer-solid'}
         />
-      </Kb.Box2>
-      <Kb.Text center={true} type="Header" style={styles.headerStyle}>
-        {props.exploding ? 'Explode' : 'Auto-delete'} chat messages after {props.timePeriod}?
-      </Kb.Text>
-      <Kb.Text center={true} type="Body" style={styles.bodyStyle}>
-        You are about to set the messages in this {convType} to{' '}
-        {props.exploding ? 'explode after ' : 'be automatically deleted after '}
-        <Kb.Text type="BodyBold">{props.timePeriod}.</Kb.Text>{' '}
-        {showChannelWarnings &&
-          "This will affect all the team's channels, except the ones you've set manually."}
-      </Kb.Text>
-      <Kb.Checkbox
-        checked={enabled}
-        onCheck={setEnabled}
-        style={styles.checkboxStyle}
-        label=""
-        labelComponent={
-          <Kb.Box2 direction="vertical" alignItems="flex-start" style={styles.label}>
-            <Kb.Text type="Body">
-              I understand that existing messages older than {props.timePeriod} will be deleted now, for
-              everyone.
-            </Kb.Text>
-            {showChannelWarnings && (
-              <Kb.Text type="BodySmall">{"Channels you've set manually will not be affected."}</Kb.Text>
-            )}
-          </Kb.Box2>
-        }
-      />
-      <Kb.ButtonBar>
-        <Kb.Button type="Dim" onClick={props.onBack} label="Cancel" />
-        <Kb.Button
-          type="Danger"
-          onClick={props.onConfirm}
-          label={isMobile ? 'Confirm' : `Yes, set to ${props.timePeriod}`}
-          disabled={!enabled}
-        />
-      </Kb.ButtonBar>
-    </Kb.Box2>
+      }
+      header={`${props.exploding ? 'Explode' : 'Auto-delete'} chat messages after ${props.timePeriod}?`}
+      body={
+        <>
+          You are about to set the messages in this {convType} to{' '}
+          {props.exploding ? 'explode after ' : 'be automatically deleted after '}
+          <Kb.Text type="BodyBold">{props.timePeriod}.</Kb.Text>{' '}
+          {showChannelWarnings &&
+            "This will affect all the team's channels, except the ones you've set manually."}
+        </>
+      }
+      checkboxLabel={
+        <>
+          <Kb.Text type="Body">
+            I understand that existing messages older than {props.timePeriod} will be deleted now, for
+            everyone.
+          </Kb.Text>
+          {showChannelWarnings && (
+            <Kb.Text type="BodySmall">{"Channels you've set manually will not be affected."}</Kb.Text>
+          )}
+        </>
+      }
+      confirmLabel={`Yes, set to ${props.timePeriod}`}
+      onCancel={props.onBack}
+      onConfirm={props.onConfirm}
+    />
   )
 }
 
@@ -92,42 +75,12 @@ const getConvType = (entityType: RetentionEntityType) => {
   return convType
 }
 
-const styles = Kb.Styles.styleSheetCreate(() => ({
-  bodyStyle: {marginBottom: Kb.Styles.globalMargins.small},
-  checkboxStyle: Kb.Styles.platformStyles({
-    isElectron: {
-      marginBottom: Kb.Styles.globalMargins.xlarge,
-    },
-    isMobile: {
-      marginBottom: Kb.Styles.globalMargins.small,
-    },
-  }),
-  container: Kb.Styles.platformStyles({
-    common: {
-      paddingBottom: Kb.Styles.globalMargins.large,
-    },
-    isElectron: {
-      paddingLeft: Kb.Styles.globalMargins.xlarge,
-      paddingRight: Kb.Styles.globalMargins.xlarge,
-      paddingTop: Kb.Styles.globalMargins.xlarge,
-    },
-    isMobile: {
-      paddingLeft: Kb.Styles.globalMargins.small,
-      paddingRight: Kb.Styles.globalMargins.small,
-      paddingTop: Kb.Styles.globalMargins.small,
-    },
-  }),
-  headerStyle: {marginBottom: Kb.Styles.globalMargins.small},
-  iconBoxStyle: {marginBottom: 20},
-  label: {flexShrink: 1},
-}))
-
 type OwnProps = {
   policy: T.Retention.RetentionPolicy
   entityType: RetentionEntityType
 }
 
-const Container = (ownProps: OwnProps) => {
+const RetentionWarningContainer = (ownProps: OwnProps) => {
   const navigateUp = C.Router2.navigateUp
   const openModal = useConfirm(s => s.dispatch.openModal)
   const closeModal = useConfirm(s => s.dispatch.closeModal)
@@ -157,4 +110,4 @@ const Container = (ownProps: OwnProps) => {
   )
 }
 
-export default Container
+export default RetentionWarningContainer
diff --git a/shared/teams/team/tabs.tsx b/shared/teams/team/tabs.tsx
index 20fce86f1d02..8aa5d03273a6 100644
--- a/shared/teams/team/tabs.tsx
+++ b/shared/teams/team/tabs.tsx
@@ -86,7 +86,7 @@ type OwnProps = {
   setSelectedTab: (tab: T.Teams.TabKey) => void
 }
 
-const Container = (ownProps: OwnProps) => {
+const TeamTabsContainer = (ownProps: OwnProps) => {
   const {selectedTab, setSelectedTab, teamID} = ownProps
   const {teamDetails, yourOperations} = useLoadedTeam(teamID)
   const resetUserCount = [...teamDetails.members.values()].filter(member => member.status === 'reset').length
@@ -104,4 +104,4 @@ const Container = (ownProps: OwnProps) => {
   )
 }
 
-export default Container
+export default TeamTabsContainer
diff --git a/shared/teams/use-cached-resource.tsx b/shared/teams/use-cached-resource.tsx
index a0e31c5bfc99..4d151998b6f2 100644
--- a/shared/teams/use-cached-resource.tsx
+++ b/shared/teams/use-cached-resource.tsx
@@ -1,5 +1,6 @@
 import * as C from '@/constants'
 import * as React from 'react'
+import {produce} from 'immer'
 
 export type CachedResourceCache<T, K> = {
   clearInFlight: (request: Promise<T>) => void
@@ -156,7 +157,11 @@ const runLoad = async <T, K>(
       return
     }
     onError?.(error)
-    setState(prev => ({...prev, loading: false}))
+    setState(
+      produce(draft => {
+        draft.loading = false
+      })
+    )
   } finally {
     if (request) {
       cache.clearInFlight(request)
@@ -211,34 +216,32 @@ export const useCachedResource = <T, K>(props: Props<T, K>) => {
     }
   }, [cache, cacheKey, enabled, initialData, load, onError, resetCache, staleMs])
 
-  const loadResource = React.useCallback(
-    async (force: boolean) => {
-      const {cache, cacheKey, enabled, initialData, load, onError, resetCache, staleMs} =
-        latestRef.current
-      if (!Object.is(cache.getKey(), cacheKey)) {
-        requestVersionRef.current += 1
-        resetCache(cacheKey)
-      }
-      if (!enabled) {
-        requestVersionRef.current += 1
-        resetCache(cacheKey)
-        return
-      }
-      const loadedAt = cache.getLoadedAt()
-      if (!force && loadedAt && Date.now() - loadedAt < staleMs) {
-        setState(storedState(cache, cacheKey, initialData, {data: cache.getData(), loaded: true, loading: false}))
-        return
-      }
-      const requestVersion = ++requestVersionRef.current
-      setState(prev =>
-        prev.cache === cache && Object.is(prev.cacheKey, cacheKey) && Object.is(prev.initialData, initialData)
-          ? {...prev, loading: true}
-          : storedState(cache, cacheKey, initialData, {...emptyState(initialData), loading: true})
+  const loadResource = React.useCallback(async (force: boolean) => {
+    const {cache, cacheKey, enabled, initialData, load, onError, resetCache, staleMs} = latestRef.current
+    if (!Object.is(cache.getKey(), cacheKey)) {
+      requestVersionRef.current += 1
+      resetCache(cacheKey)
+    }
+    if (!enabled) {
+      requestVersionRef.current += 1
+      resetCache(cacheKey)
+      return
+    }
+    const loadedAt = cache.getLoadedAt()
+    if (!force && loadedAt && Date.now() - loadedAt < staleMs) {
+      setState(
+        storedState(cache, cacheKey, initialData, {data: cache.getData(), loaded: true, loading: false})
       )
-      await runLoad(cache, cacheKey, initialData, load, onError, requestVersion, requestVersionRef, setState)
-    },
-    []
-  )
+      return
+    }
+    const requestVersion = ++requestVersionRef.current
+    setState(prev =>
+      prev.cache === cache && Object.is(prev.cacheKey, cacheKey) && Object.is(prev.initialData, initialData)
+        ? {...prev, loading: true}
+        : storedState(cache, cacheKey, initialData, {...emptyState(initialData), loading: true})
+    )
+    await runLoad(cache, cacheKey, initialData, load, onError, requestVersion, requestVersionRef, setState)
+  }, [])
 
   const reload = React.useCallback(async () => {
     await loadResource(true)
diff --git a/shared/teams/use-teams-list.tsx b/shared/teams/use-teams-list.tsx
index 200483fa3d4e..8adbfa1a51ea 100644
--- a/shared/teams/use-teams-list.tsx
+++ b/shared/teams/use-teams-list.tsx
@@ -61,6 +61,42 @@ export const invalidateLoadedTeams = () => {
   teamsRoleMapInvalidationListeners.forEach(listener => listener())
 }
 
+// reload whenever the service signals a team change or invalidateLoadedTeams fires
+const useReloadOnTeamChanges = (
+  enabled: boolean,
+  reload: () => unknown,
+  invalidationListeners: Set<() => void>,
+  includeMetadataUpdate = false
+) => {
+  const onChange = () => {
+    if (enabled) {
+      void reload()
+    }
+  }
+  useEngineActionListener('keybase.1.NotifyTeam.teamMetadataUpdate', () => {
+    if (includeMetadataUpdate) {
+      onChange()
+    }
+  })
+  useEngineActionListener('keybase.1.NotifyTeam.teamRoleMapChanged', onChange)
+  useEngineActionListener('keybase.1.NotifyTeam.teamChangedByID', onChange)
+  useEngineActionListener('keybase.1.NotifyTeam.teamDeleted', onChange)
+  useEngineActionListener('keybase.1.NotifyTeam.teamExit', onChange)
+
+  React.useEffect(() => {
+    if (!enabled) {
+      return
+    }
+    const listener = () => {
+      void reload()
+    }
+    invalidationListeners.add(listener)
+    return () => {
+      invalidationListeners.delete(listener)
+    }
+  }, [enabled, reload, invalidationListeners])
+}
+
 const useTeamsListRaw = (enabled = true): TeamsList => {
   const username = useCurrentUserState(s => s.username)
   const loggedIn = useConfigState(s => s.loggedIn)
@@ -86,44 +122,7 @@ const useTeamsListRaw = (enabled = true): TeamsList => {
     staleMs: teamsListReloadStaleMs,
   })
 
-  useEngineActionListener('keybase.1.NotifyTeam.teamMetadataUpdate', () => {
-    if (enabled) {
-      void reload()
-    }
-  })
-  useEngineActionListener('keybase.1.NotifyTeam.teamRoleMapChanged', () => {
-    if (enabled) {
-      void reload()
-    }
-  })
-  useEngineActionListener('keybase.1.NotifyTeam.teamChangedByID', () => {
-    if (enabled) {
-      void reload()
-    }
-  })
-  useEngineActionListener('keybase.1.NotifyTeam.teamDeleted', () => {
-    if (enabled) {
-      void reload()
-    }
-  })
-  useEngineActionListener('keybase.1.NotifyTeam.teamExit', () => {
-    if (enabled) {
-      void reload()
-    }
-  })
-
-  React.useEffect(() => {
-    if (!enabled) {
-      return
-    }
-    const listener = () => {
-      void reload()
-    }
-    teamsListInvalidationListeners.add(listener)
-    return () => {
-      teamsListInvalidationListeners.delete(listener)
-    }
-  }, [enabled, reload])
+  useReloadOnTeamChanges(enabled, reload, teamsListInvalidationListeners, true)
 
   return React.useMemo(() => ({reload, teams}), [reload, teams])
 }
@@ -157,39 +156,7 @@ const useTeamsRoleMapRaw = (enabled = true): TeamsRoleMap => {
     staleMs: teamsListReloadStaleMs,
   })
 
-  useEngineActionListener('keybase.1.NotifyTeam.teamRoleMapChanged', () => {
-    if (enabled) {
-      void reload()
-    }
-  })
-  useEngineActionListener('keybase.1.NotifyTeam.teamChangedByID', () => {
-    if (enabled) {
-      void reload()
-    }
-  })
-  useEngineActionListener('keybase.1.NotifyTeam.teamDeleted', () => {
-    if (enabled) {
-      void reload()
-    }
-  })
-  useEngineActionListener('keybase.1.NotifyTeam.teamExit', () => {
-    if (enabled) {
-      void reload()
-    }
-  })
-
-  React.useEffect(() => {
-    if (!enabled) {
-      return
-    }
-    const listener = () => {
-      void reload()
-    }
-    teamsRoleMapInvalidationListeners.add(listener)
-    return () => {
-      teamsRoleMapInvalidationListeners.delete(listener)
-    }
-  }, [enabled, reload])
+  useReloadOnTeamChanges(enabled, reload, teamsRoleMapInvalidationListeners)
 
   return React.useMemo(() => ({loadIfStale, reload, roleMap}), [loadIfStale, reload, roleMap])
 }
@@ -212,16 +179,24 @@ export const useTeamsList = (): TeamsList => {
   return context
 }
 
+const noopLoad = async () => {}
+
+// useTeamsRoleMap and useTeamsListMap are reachable from mobile popup portals
+// (popup-root and the bottom-sheet host are siblings to the router, outside
+// LoadedTeamsListProvider), so they fall back to the module cache instead of
+// throwing. The cache stays fresh because the provider is mounted elsewhere.
 export const useTeamsRoleMap = (): TeamsRoleMap => {
   const context = React.useContext(TeamsRoleMapContext)
-  if (!context) {
-    throw new Error('useTeamsRoleMap must be used within LoadedTeamsListProvider')
-  }
-  return context
+  const fallback = React.useMemo(
+    () => ({loadIfStale: noopLoad, reload: noopLoad, roleMap: teamsRoleMapCache.getData()}),
+    []
+  )
+  return context ?? fallback
 }
 
 export const useTeamsListMap = () => {
-  const {teams} = useTeamsList()
+  const context = React.useContext(TeamsListContext)
+  const teams = context?.teams ?? teamsListCache.getData()
   return React.useMemo(() => new Map(teams.map(team => [team.id, team] as const)), [teams])
 }
 
diff --git a/shared/tests/e2e/electron/flows/chat-compose.test.ts b/shared/tests/e2e/electron/flows/chat-compose.test.ts
new file mode 100644
index 000000000000..8f9e7c918dff
--- /dev/null
+++ b/shared/tests/e2e/electron/flows/chat-compose.test.ts
@@ -0,0 +1,59 @@
+import type {Page} from '@playwright/test'
+import {test, expect} from '@/tests/e2e/electron/helpers/fixtures'
+import {openFirstConversation} from '@/tests/e2e/electron/helpers/navigate'
+import {snap} from '@/tests/e2e/electron/helpers/snap'
+import * as T from '@/tests/e2e/shared/test-ids'
+
+// Visual states of the chat input area. Nothing is ever sent; every test
+// clears the input before ending.
+
+async function typeInInput(page: Page, text: string): Promise<void> {
+  const input = page.getByTestId(T.CHAT_INPUT).first()
+  await input.click()
+  await page.keyboard.type(text, {delay: 30})
+}
+
+async function clearInput(page: Page): Promise<void> {
+  await page.keyboard.press('Meta+a')
+  await page.keyboard.press('Backspace')
+  await page.keyboard.press('Escape')
+}
+
+test('mention suggestion popup', async ({page}, testInfo) => {
+  if (!(await openFirstConversation(page))) {
+    test.skip()
+    return
+  }
+  await typeInInput(page, '@cn')
+  await expect(page.getByTestId(T.CHAT_SUGGESTION_LIST).first()).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await clearInput(page)
+  await expect(page.getByTestId(T.CHAT_SUGGESTION_LIST)).toHaveCount(0, {timeout: 5_000})
+})
+
+test('command suggestion popup', async ({page}, testInfo) => {
+  if (!(await openFirstConversation(page))) {
+    test.skip()
+    return
+  }
+  await typeInInput(page, '/')
+  await expect(page.getByTestId(T.CHAT_SUGGESTION_LIST).first()).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await clearInput(page)
+  await expect(page.getByTestId(T.CHAT_SUGGESTION_LIST)).toHaveCount(0, {timeout: 5_000})
+})
+
+test('multiline input grows', async ({page}, testInfo) => {
+  if (!(await openFirstConversation(page))) {
+    test.skip()
+    return
+  }
+  const input = page.getByTestId(T.CHAT_INPUT).first()
+  await input.click()
+  for (let i = 0; i < 4; i++) {
+    await page.keyboard.type(`line ${i + 1}`)
+    await page.keyboard.press('Shift+Enter')
+  }
+  await snap(page, testInfo)
+  await clearInput(page)
+})
diff --git a/shared/tests/e2e/electron/flows/chat-interactions.test.ts b/shared/tests/e2e/electron/flows/chat-interactions.test.ts
new file mode 100644
index 000000000000..f96ff7319903
--- /dev/null
+++ b/shared/tests/e2e/electron/flows/chat-interactions.test.ts
@@ -0,0 +1,169 @@
+import type {Page} from '@playwright/test'
+import {test, expect} from '@/tests/e2e/electron/helpers/fixtures'
+import {openConversationMatching, openFirstConversation} from '@/tests/e2e/electron/helpers/navigate'
+import {snap} from '@/tests/e2e/electron/helpers/snap'
+import * as T from '@/tests/e2e/shared/test-ids'
+
+// More chat visual states: reply/edit input modes, reaction picker, channel
+// mentions, giphy, info panel sub-tabs. Nothing is ever sent or saved.
+
+test('reply-quote state in input', async ({page}, testInfo) => {
+  const replyItem = page.getByText('Reply', {exact: true}).first()
+  const findReplyableMessage = async (p: Page) => {
+    const messages = p.locator('.TextAndSiblings')
+    const count = await messages.count()
+    for (let i = count - 1; i >= 0 && i >= count - 5; i--) {
+      await messages.nth(i).click({button: 'right'})
+      try {
+        await expect(replyItem).toBeVisible({timeout: 2_000})
+        return true
+      } catch {
+        await p.keyboard.press('Escape')
+      }
+    }
+    return false
+  }
+  if (!(await openConversationMatching(page, findReplyableMessage, 3))) {
+    test.skip()
+    return
+  }
+  await replyItem.click()
+  const replyingTo = page.getByText('Replying to:')
+  await expect(replyingTo).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-remove:visible').first().click()
+  await expect(replyingTo).not.toBeVisible({timeout: 5_000})
+})
+
+test('edit-message mode in input', async ({page}, testInfo) => {
+  test.setTimeout(60_000) // probes several conversations at ~4s each
+  // ArrowUp in an empty input edits your own last message — only works in a
+  // conversation where you have sent something. Desktop edit mode shows a
+  // "Cancel" button next to the input (Save/Send is mobile-only).
+  const saveButton = page.getByText('Cancel', {exact: true}).locator('visible=true').first()
+  const entersEditMode = async (p: Page) => {
+    await p.getByTestId(T.CHAT_INPUT).first().click()
+    // ArrowUp only triggers edit mode when the input is empty — clear drafts first
+    await p.keyboard.press('Meta+a')
+    await p.keyboard.press('Backspace')
+    await p.keyboard.press('ArrowUp')
+    try {
+      await expect(saveButton).toBeVisible({timeout: 4_000})
+      return true
+    } catch {
+      // leave no draft behind: exit edit mode and clear whatever got filled in
+      await p.keyboard.press('Escape')
+      await p.keyboard.press('Meta+a')
+      await p.keyboard.press('Backspace')
+      return false
+    }
+  }
+  if (!(await openConversationMatching(page, entersEditMode, 5))) {
+    test.skip()
+    return
+  }
+  await snap(page, testInfo)
+  await page.keyboard.press('Escape')
+  await expect(saveButton).not.toBeVisible({timeout: 5_000})
+})
+
+test('reaction picker opens from hover toolbar', async ({page}, testInfo) => {
+  const reacji = page.locator('.icon-gen-iconfont-reacji:visible')
+  // system messages have no hover toolbar — hunt for one that does
+  const hasReacjiOnHover = async (p: Page) => {
+    const messages = p.locator('.TextAndSiblings')
+    const count = await messages.count()
+    for (let i = count - 1; i >= 0 && i >= count - 5; i--) {
+      await messages.nth(i).hover()
+      await p.waitForTimeout(300)
+      if ((await reacji.count()) > 0) return true
+    }
+    return false
+  }
+  if (!(await openConversationMatching(page, hasReacjiOnHover, 3))) {
+    test.skip()
+    return
+  }
+  await reacji.first().click()
+  await expect(page.getByTestId(T.CHAT_EMOJI_PICKER)).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.getByTestId(T.CHAT_MESSAGE_LIST).first().click({force: true, position: {x: 10, y: 10}})
+  await expect(page.getByTestId(T.CHAT_EMOJI_PICKER)).not.toBeVisible({timeout: 5_000})
+})
+
+test('channel mention popup in team conversation', async ({page}, testInfo) => {
+  const suggestions = page.getByTestId(T.CHAT_SUGGESTION_LIST)
+  const showsChannelSuggestions = async (p: Page) => {
+    await p.getByTestId(T.CHAT_INPUT).first().click()
+    await p.keyboard.press('Meta+a')
+    await p.keyboard.press('Backspace')
+    await p.keyboard.type('#')
+    try {
+      await expect(suggestions.first()).toBeVisible({timeout: 2_000})
+      return true
+    } catch {
+      await p.keyboard.press('Backspace')
+      return false
+    }
+  }
+  if (!(await openConversationMatching(page, showsChannelSuggestions, 5))) {
+    test.skip()
+    return
+  }
+  await snap(page, testInfo)
+  await page.keyboard.press('Meta+a')
+  await page.keyboard.press('Backspace')
+  await page.keyboard.press('Escape')
+  await expect(suggestions).toHaveCount(0, {timeout: 5_000})
+})
+
+test('giphy preview renders', async ({page}, testInfo) => {
+  if (!(await openFirstConversation(page))) {
+    test.skip()
+    return
+  }
+  await page.getByTestId(T.CHAT_INPUT).first().click()
+  // clear any draft left by another test before typing the command
+  await page.keyboard.press('Meta+a')
+  await page.keyboard.press('Backspace')
+  await page.keyboard.type('/giphy hello', {delay: 30})
+  const tip = page.getByText("Tip: hit 'Enter' now to send a random GIF.")
+  await expect(tip).toBeVisible({timeout: 10_000})
+  // give preview images a moment to load
+  await page.waitForTimeout(1_500)
+  await snap(page, testInfo)
+  await page.keyboard.press('Meta+a')
+  await page.keyboard.press('Backspace')
+  await expect(tip).not.toBeVisible({timeout: 5_000})
+})
+
+test('info panel attachments tab', async ({page}, testInfo) => {
+  if (!(await openFirstConversation(page))) {
+    test.skip()
+    return
+  }
+  await page.locator('.icon-gen-iconfont-info:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL)).toBeVisible({timeout: 5_000})
+  await page.getByTestId(T.CHAT_INFO_PANEL).getByText('Attachments', {exact: true}).click()
+  // the attachments tab shows media type sub-tabs
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL).getByText('Docs', {exact: true})).toBeVisible({
+    timeout: 5_000,
+  })
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-info:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL)).not.toBeVisible({timeout: 5_000})
+})
+
+test('info panel settings tab', async ({page}, testInfo) => {
+  if (!(await openFirstConversation(page))) {
+    test.skip()
+    return
+  }
+  await page.locator('.icon-gen-iconfont-info:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL)).toBeVisible({timeout: 5_000})
+  await page.getByTestId(T.CHAT_INFO_PANEL).getByText('Settings', {exact: true}).click()
+  await expect(page.getByText('Mute all notifications').first()).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-info:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL)).not.toBeVisible({timeout: 5_000})
+})
diff --git a/shared/tests/e2e/electron/flows/chat-modals.test.ts b/shared/tests/e2e/electron/flows/chat-modals.test.ts
new file mode 100644
index 000000000000..1b7915a975de
--- /dev/null
+++ b/shared/tests/e2e/electron/flows/chat-modals.test.ts
@@ -0,0 +1,144 @@
+import {test, expect} from '@/tests/e2e/electron/helpers/fixtures'
+import {openFirstConversation, openConversationMatching} from '@/tests/e2e/electron/helpers/navigate'
+import {snap} from '@/tests/e2e/electron/helpers/snap'
+import * as T from '@/tests/e2e/shared/test-ids'
+
+// Kb.Icon has no testID prop on desktop; it renders a span with an
+// icon-gen-<type> class, so icons are selected by class here.
+
+test('info panel opens', async ({page}, testInfo) => {
+  if (!(await openFirstConversation(page))) {
+    test.skip()
+    return
+  }
+  await page.locator('.icon-gen-iconfont-info:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL)).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  // toggle it back off so later tests see a clean conversation
+  await page.locator('.icon-gen-iconfont-info:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL)).not.toBeVisible({timeout: 5_000})
+})
+
+test('emoji picker opens', async ({page}, testInfo) => {
+  if (!(await openFirstConversation(page))) {
+    test.skip()
+    return
+  }
+  await page.locator('.icon-gen-iconfont-emoji:visible').last().click()
+  await expect(page.getByTestId(T.CHAT_EMOJI_PICKER)).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  // the popup dismisses on outside click, not Escape
+  await page.getByTestId(T.CHAT_MESSAGE_LIST).first().click({force: true, position: {x: 10, y: 10}})
+  await expect(page.getByTestId(T.CHAT_EMOJI_PICKER)).not.toBeVisible({timeout: 5_000})
+})
+
+test('message context menu opens', async ({page}, testInfo) => {
+  const menuItem = page.getByText('Reply', {exact: true}).locator('visible=true').first()
+  // system messages don't open a popup — walk back until one does
+  const opensMenu = async (p: typeof page) => {
+    const messages = p.locator('.TextAndSiblings')
+    const count = await messages.count()
+    for (let i = count - 1; i >= 0 && i >= count - 5; i--) {
+      await messages.nth(i).click({button: 'right'})
+      if (await menuItem.waitFor({state: 'visible', timeout: 2_000}).then(() => true).catch(() => false)) {
+        return true
+      }
+    }
+    return false
+  }
+  if (!(await openConversationMatching(page, opensMenu, 3))) {
+    test.skip()
+    return
+  }
+  await snap(page, testInfo)
+  await page.keyboard.press('Escape')
+  await expect(menuItem).not.toBeVisible({timeout: 5_000})
+})
+
+test('attachment fullscreen opens', async ({page}, testInfo) => {
+  const images = page.getByTestId(T.CHAT_ATTACHMENT_IMAGE)
+  const found = await openConversationMatching(page, async () => (await images.count()) > 0)
+  if (!found) {
+    test.skip()
+    return
+  }
+  await images.last().click()
+  await expect(page.getByTestId(T.CHAT_ATTACHMENT_FULLSCREEN)).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_ATTACHMENT_FULLSCREEN)).not.toBeVisible({timeout: 5_000})
+})
+
+test('bot install preview opens', async ({page}, testInfo) => {
+  if (!(await openFirstConversation(page))) {
+    test.skip()
+    return
+  }
+  await page.locator('.icon-gen-iconfont-info:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL)).toBeVisible({timeout: 5_000})
+  await page.getByTestId(T.CHAT_INFO_PANEL).getByText('Bots', {exact: true}).click()
+  const botRows = page.getByTestId(T.CHAT_BOT_ROW)
+  await expect(botRows.first()).toBeVisible({timeout: 10_000})
+  await botRows.first().click()
+  // installed bot: Edit settings; new bot: Install; restricted bot: Review
+  const installButton = page.getByText(/^(Install|Edit settings|Review)$/).first()
+  await expect(installButton).toBeVisible({timeout: 10_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(installButton).not.toBeVisible({timeout: 5_000})
+  // close the info panel again
+  await page.locator('.icon-gen-iconfont-info:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL)).not.toBeVisible({timeout: 5_000})
+})
+
+test('bot search modal opens', async ({page}, testInfo) => {
+  if (!(await openFirstConversation(page))) {
+    test.skip()
+    return
+  }
+  await page.locator('.icon-gen-iconfont-info:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL)).toBeVisible({timeout: 5_000})
+  await page.getByTestId(T.CHAT_INFO_PANEL).getByText('Bots', {exact: true}).click()
+  await page.getByText('Add a bot', {exact: true}).click()
+  const search = page.getByPlaceholder('Search featured bots or users...')
+  await expect(search).toBeVisible({timeout: 10_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(search).not.toBeVisible({timeout: 5_000})
+  await page.locator('.icon-gen-iconfont-info:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL)).not.toBeVisible({timeout: 5_000})
+})
+
+test('forward message picker opens', async ({page}, testInfo) => {
+  const forwardItem = page.getByText('Forward', {exact: true}).first()
+  // not every message type offers Forward — walk back until one does
+  const findForwardableMessage = async (p: typeof page) => {
+    const messages = p.locator('.TextAndSiblings')
+    const count = await messages.count()
+    for (let i = count - 1; i >= 0 && i >= count - 5; i--) {
+      await messages.nth(i).click({button: 'right'})
+      // system messages may not open a menu at all — just move on
+      const menuOpened = await p
+        .getByText('Reply', {exact: true})
+        .locator('visible=true')
+        .first()
+        .waitFor({state: 'visible', timeout: 2_000})
+        .then(() => true)
+        .catch(() => false)
+      if (menuOpened && (await forwardItem.isVisible())) return true
+      if (menuOpened) await p.keyboard.press('Escape')
+    }
+    return false
+  }
+  const found = await openConversationMatching(page, findForwardableMessage, 5)
+  if (!found) {
+    test.skip()
+    return
+  }
+  await forwardItem.click()
+  const search = page.getByPlaceholder('Search chats and teams...')
+  await expect(search).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.keyboard.press('Escape')
+  await expect(search).not.toBeVisible({timeout: 5_000})
+})
diff --git a/shared/tests/e2e/electron/flows/chat-mutations.test.ts b/shared/tests/e2e/electron/flows/chat-mutations.test.ts
new file mode 100644
index 000000000000..fb51e81e1eee
--- /dev/null
+++ b/shared/tests/e2e/electron/flows/chat-mutations.test.ts
@@ -0,0 +1,71 @@
+import type {Page} from '@playwright/test'
+import {test, expect} from '@/tests/e2e/electron/helpers/fixtures'
+import {
+  navigateToChat,
+  openConversationMatching,
+  openFirstConversation,
+} from '@/tests/e2e/electron/helpers/navigate'
+import {snap} from '@/tests/e2e/electron/helpers/snap'
+import * as T from '@/tests/e2e/shared/test-ids'
+
+// View-only trips into mutation flows: open the modal, screenshot, cancel.
+// Nothing here ever submits.
+
+async function openInfoPanelSettings(page: Page): Promise<void> {
+  await page.locator('.icon-gen-iconfont-info:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL)).toBeVisible({timeout: 5_000})
+  await page.getByTestId(T.CHAT_INFO_PANEL).getByText('Settings', {exact: true}).click()
+}
+
+async function closeInfoPanel(page: Page): Promise<void> {
+  await page.locator('.icon-gen-iconfont-info:visible').first().click()
+  await expect(page.getByTestId(T.CHAT_INFO_PANEL)).not.toBeVisible({timeout: 5_000})
+}
+
+test('new chat team builder opens', async ({page}, testInfo) => {
+  await navigateToChat(page)
+  await page.getByText('New chat', {exact: true}).click()
+  const search = page.getByPlaceholder('Search Keybase').locator('visible=true')
+  await expect(search.first()).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(search).toHaveCount(0, {timeout: 5_000})
+})
+
+test('delete history warning opens', async ({page}, testInfo) => {
+  if (!(await openFirstConversation(page))) {
+    test.skip()
+    return
+  }
+  await openInfoPanelSettings(page)
+  await page.getByText('Clear entire conversation', {exact: true}).click()
+  const confirmButton = page.getByText('Yes, clear for everyone', {exact: true})
+  await expect(confirmButton).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.getByText('Cancel', {exact: true}).locator('visible=true').first().click()
+  await expect(confirmButton).not.toBeVisible({timeout: 5_000})
+  await closeInfoPanel(page)
+})
+
+test('block modal opens', async ({page}, testInfo) => {
+  const blockButton = page.getByTestId(T.CHAT_INFO_PANEL).getByText('Block', {exact: true})
+  // team conversations have no Block button — hunt for a 1:1 conversation
+  const hasBlock = async (p: typeof page) => {
+    await openInfoPanelSettings(p)
+    if ((await blockButton.count()) > 0) return true
+    await closeInfoPanel(p)
+    return false
+  }
+  const found = await openConversationMatching(page, hasBlock, 4)
+  if (!found) {
+    test.skip()
+    return
+  }
+  await blockButton.first().click()
+  const finishButton = page.getByText('Finish', {exact: true})
+  await expect(finishButton).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.getByText('Cancel', {exact: true}).locator('visible=true').first().click()
+  await expect(finishButton).not.toBeVisible({timeout: 5_000})
+  await closeInfoPanel(page)
+})
diff --git a/shared/tests/e2e/electron/flows/chat-send-message.test.ts b/shared/tests/e2e/electron/flows/chat-send-message.test.ts
index 15ad4897f040..8838361f657b 100644
--- a/shared/tests/e2e/electron/flows/chat-send-message.test.ts
+++ b/shared/tests/e2e/electron/flows/chat-send-message.test.ts
@@ -11,10 +11,10 @@ test('send a message to KB_SMOKE_USER', async ({page}, testInfo) => {
     await navigateToChat(page)
   })
 
-  await test.step('open conversation with KB_SMOKE_USER (must be most recent)', async () => {
-    const firstRow = page.getByTestId(CHAT_INBOX_ROW).first()
-    await expect(firstRow).toContainText(smokeUser, {timeout: 3_000})
-    await firstRow.click()
+  await test.step('open conversation with KB_SMOKE_USER', async () => {
+    const row = page.getByTestId(CHAT_INBOX_ROW).filter({hasText: smokeUser}).first()
+    await expect(row).toBeVisible({timeout: 3_000})
+    await row.click()
     await page.waitForSelector(`[data-testid="${CHAT_MESSAGE_LIST}"]`, {timeout: 3_000})
   })
 
diff --git a/shared/tests/e2e/electron/flows/device-wallet-modals.test.ts b/shared/tests/e2e/electron/flows/device-wallet-modals.test.ts
new file mode 100644
index 000000000000..dc70fa11a5e7
--- /dev/null
+++ b/shared/tests/e2e/electron/flows/device-wallet-modals.test.ts
@@ -0,0 +1,29 @@
+import {test, expect} from '@/tests/e2e/electron/helpers/fixtures'
+import {navigateToDevices, navigateToCrypto} from '@/tests/e2e/electron/helpers/navigate'
+import {snap} from '@/tests/e2e/electron/helpers/snap'
+import * as T from '@/tests/e2e/shared/test-ids'
+
+test('add device chooser opens', async ({page}, testInfo) => {
+  await navigateToDevices(page)
+  await page.getByText('Add a device or paper key', {exact: true}).click()
+  const blurb = page.getByText('Protect your account by having more devices and paper keys.')
+  await expect(blurb).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(blurb).not.toBeVisible({timeout: 5_000})
+})
+
+// NOTE: no test touches the wallet Remove-account flow — stellar account
+// removal is off-limits for automation (see the Forbidden list in
+// plans/flow-test.md), even the open-and-cancel variant.
+
+test('crypto recipients team builder opens', async ({page}, testInfo) => {
+  await navigateToCrypto(page)
+  await page.getByTestId(T.CRYPTO_NAV_ENCRYPT).click()
+  await page.getByPlaceholder('Search people').locator('visible=true').first().click()
+  const search = page.getByPlaceholder('Search Keybase').locator('visible=true')
+  await expect(search.first()).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(search).toHaveCount(0, {timeout: 5_000})
+})
diff --git a/shared/tests/e2e/electron/flows/git-mutations.test.ts b/shared/tests/e2e/electron/flows/git-mutations.test.ts
new file mode 100644
index 000000000000..9cf622162af7
--- /dev/null
+++ b/shared/tests/e2e/electron/flows/git-mutations.test.ts
@@ -0,0 +1,72 @@
+import type {Page} from '@playwright/test'
+import {test, expect} from '@/tests/e2e/electron/helpers/fixtures'
+import {navigateToGit} from '@/tests/e2e/electron/helpers/navigate'
+import {snap} from '@/tests/e2e/electron/helpers/snap'
+import * as T from '@/tests/e2e/shared/test-ids'
+
+// Full create → delete cycle on a personal repo with a fixed name. The tests in
+// this file run in order and depend on each other; deleteRepoIfExists at the
+// start of the create test makes a crashed earlier run self-heal.
+const REPO_NAME = 'e2e-vis-repo'
+
+// repo create/delete RPCs can outlive the default 15s test timeout
+test.beforeEach(() => test.setTimeout(60_000))
+
+function repoRow(page: Page) {
+  return page.getByTestId(T.GIT_REPO_ROW).filter({hasText: REPO_NAME})
+}
+
+async function deleteRepo(page: Page): Promise<void> {
+  await repoRow(page).first().click()
+  await page.getByText('Delete repo', {exact: true}).click()
+  const confirmInput = page.getByPlaceholder('Name of the repository')
+  await expect(confirmInput).toBeVisible({timeout: 5_000})
+  await confirmInput.fill(REPO_NAME)
+  await page.getByText('Delete this repository', {exact: true}).click()
+  await expect(repoRow(page)).toHaveCount(0, {timeout: 30_000})
+}
+
+test('new repo modal opens', async ({page}, testInfo) => {
+  await navigateToGit(page)
+  // self-heal: remove a leftover repo from a crashed previous run
+  if ((await repoRow(page).count()) > 0) {
+    await deleteRepo(page)
+  }
+  await page.getByText('New repository', {exact: true}).click()
+  await page.getByText('New personal repository', {exact: true}).click()
+  const nameInput = page.getByPlaceholder('Name your repository')
+  await expect(nameInput).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(nameInput).not.toBeVisible({timeout: 5_000})
+})
+
+test('created repo row renders', async ({page}, testInfo) => {
+  await navigateToGit(page)
+  if ((await repoRow(page).count()) === 0) {
+    await page.getByText('New repository', {exact: true}).click()
+    await page.getByText('New personal repository', {exact: true}).click()
+    const nameInput = page.getByPlaceholder('Name your repository')
+    await expect(nameInput).toBeVisible({timeout: 5_000})
+    await nameInput.fill(REPO_NAME)
+    await page.getByText('Create', {exact: true}).click()
+  }
+  await expect(repoRow(page).first()).toBeVisible({timeout: 30_000})
+  await snap(page, testInfo)
+})
+
+test('delete repo confirm renders, then repo is deleted', async ({page}, testInfo) => {
+  await navigateToGit(page)
+  if ((await repoRow(page).count()) === 0) {
+    test.skip()
+    return
+  }
+  await repoRow(page).first().click()
+  await page.getByText('Delete repo', {exact: true}).click()
+  const confirmInput = page.getByPlaceholder('Name of the repository')
+  await expect(confirmInput).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await confirmInput.fill(REPO_NAME)
+  await page.getByText('Delete this repository', {exact: true}).click()
+  await expect(repoRow(page)).toHaveCount(0, {timeout: 30_000})
+})
diff --git a/shared/tests/e2e/electron/flows/misc-modals.test.ts b/shared/tests/e2e/electron/flows/misc-modals.test.ts
new file mode 100644
index 000000000000..846d409ad544
--- /dev/null
+++ b/shared/tests/e2e/electron/flows/misc-modals.test.ts
@@ -0,0 +1,47 @@
+import {test, expect} from '@/tests/e2e/electron/helpers/fixtures'
+import {navigateToSettings, navigateToPeople} from '@/tests/e2e/electron/helpers/navigate'
+import {snap} from '@/tests/e2e/electron/helpers/snap'
+import * as T from '@/tests/e2e/shared/test-ids'
+
+test('password modal opens', async ({page}, testInfo) => {
+  await navigateToSettings(page)
+  await page.getByText(/^(Change password|Set a password)$/).click()
+  await expect(page.getByPlaceholder('New password')).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(page.getByPlaceholder('New password')).not.toBeVisible({timeout: 5_000})
+})
+
+test('account switcher menu opens', async ({page}, testInfo) => {
+  await navigateToPeople(page)
+  await page.locator('.username').first().click()
+  const editProfile = page.getByText('View/Edit profile', {exact: true})
+  await expect(editProfile).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.mouse.click(600, 400)
+  await expect(editProfile).not.toBeVisible({timeout: 5_000})
+})
+
+test('archive modal opens', async ({page}, testInfo) => {
+  await navigateToSettings(page)
+  await page.getByTestId(T.SETTINGS_ACCOUNT).locator('text=Backup').click()
+  await expect(page.getByTestId(T.SETTINGS_ARCHIVE)).toBeVisible({timeout: 5_000})
+  await page.getByText('Backup all chat', {exact: true}).click()
+  const blurb = page.getByText('Save a copy of your content to your local drive')
+  await expect(blurb).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(blurb).not.toBeVisible({timeout: 5_000})
+})
+
+test('wallet section renders', async ({page}, testInfo) => {
+  await navigateToSettings(page)
+  const walletRow = page.getByTestId(T.SETTINGS_ACCOUNT).locator('text=Wallet')
+  if ((await walletRow.count()) === 0) {
+    test.skip()
+    return
+  }
+  await walletRow.click()
+  await expect(page.getByText('Secret key').first()).toBeVisible({timeout: 10_000})
+  await snap(page, testInfo)
+})
diff --git a/shared/tests/e2e/electron/flows/profile-modals.test.ts b/shared/tests/e2e/electron/flows/profile-modals.test.ts
new file mode 100644
index 000000000000..893a185c7b14
--- /dev/null
+++ b/shared/tests/e2e/electron/flows/profile-modals.test.ts
@@ -0,0 +1,25 @@
+import {test, expect} from '@/tests/e2e/electron/helpers/fixtures'
+import {openOwnProfile, navigateToPeople} from '@/tests/e2e/electron/helpers/navigate'
+import {snap} from '@/tests/e2e/electron/helpers/snap'
+
+test('edit profile modal opens', async ({page}, testInfo) => {
+  await openOwnProfile(page)
+  await page.getByText('Edit profile', {exact: true}).click()
+  const fullName = page.getByPlaceholder('Full name')
+  await expect(fullName).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(fullName).not.toBeVisible({timeout: 5_000})
+  await navigateToPeople(page)
+})
+
+test('proofs list modal opens', async ({page}, testInfo) => {
+  await openOwnProfile(page)
+  await page.getByText('Add more identities', {exact: true}).click()
+  const filter = page.getByPlaceholder(/Search \d+ platforms/)
+  await expect(filter).toBeVisible({timeout: 10_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(filter).not.toBeVisible({timeout: 5_000})
+  await navigateToPeople(page)
+})
diff --git a/shared/tests/e2e/electron/flows/scroll-states.test.ts b/shared/tests/e2e/electron/flows/scroll-states.test.ts
new file mode 100644
index 000000000000..23f30dbbf416
--- /dev/null
+++ b/shared/tests/e2e/electron/flows/scroll-states.test.ts
@@ -0,0 +1,85 @@
+import type {Page} from '@playwright/test'
+import {test, expect} from '@/tests/e2e/electron/helpers/fixtures'
+import {
+  navigateToSettings,
+  navigateToPeople,
+  navigateToFiles,
+  navigateToTeams,
+  navigateToChat,
+  openFirstConversation,
+  openOwnProfile,
+} from '@/tests/e2e/electron/helpers/navigate'
+import {snap} from '@/tests/e2e/electron/helpers/snap'
+import * as T from '@/tests/e2e/shared/test-ids'
+
+// Scroll a container by hovering it and spinning the wheel; a large delta lands
+// at the end of the list, which is a deterministic position.
+async function wheel(page: Page, selector: string, deltaY: number) {
+  await page.locator(selector).first().hover()
+  await page.mouse.wheel(0, deltaY)
+  // let the virtualized list settle
+  await page.waitForTimeout(500)
+}
+
+test('settings advanced scrolled to bottom', async ({page}, testInfo) => {
+  await navigateToSettings(page)
+  await page.getByTestId(T.SETTINGS_ACCOUNT).locator('text=Advanced').click()
+  await expect(page.getByTestId(T.SETTINGS_ADVANCED)).toBeVisible({timeout: 5_000})
+  await wheel(page, `[data-testid="${T.SETTINGS_ADVANCED}"]`, 5_000)
+  await snap(page, testInfo)
+})
+
+test('settings notifications scrolled to bottom', async ({page}, testInfo) => {
+  await navigateToSettings(page)
+  await page.getByTestId(T.SETTINGS_ACCOUNT).locator('text=Notifications').click()
+  await expect(page.getByTestId(T.SETTINGS_NOTIFICATIONS)).toBeVisible({timeout: 5_000})
+  await wheel(page, `[data-testid="${T.SETTINGS_NOTIFICATIONS}"]`, 10_000)
+  await snap(page, testInfo)
+})
+
+test('chat inbox scrolled to bottom', async ({page}, testInfo) => {
+  await navigateToChat(page)
+  await wheel(page, `[data-testid="${T.CHAT_INBOX_LIST}"]`, 20_000)
+  await snap(page, testInfo)
+})
+
+test('chat conversation scrolled up', async ({page}, testInfo) => {
+  if (!(await openFirstConversation(page))) {
+    test.skip()
+    return
+  }
+  await wheel(page, `[data-testid="${T.CHAT_MESSAGE_LIST}"]`, -5_000)
+  await snap(page, testInfo)
+})
+
+test('files tlf list scrolled to bottom', async ({page}, testInfo) => {
+  await navigateToFiles(page)
+  await wheel(page, `[data-testid="${T.FILES_BROWSER}"]`, 20_000)
+  await snap(page, testInfo)
+})
+
+test('people feed scrolled down', async ({page}, testInfo) => {
+  await navigateToPeople(page)
+  await wheel(page, `[data-testid="${T.PEOPLE_FEED}"]`, 10_000)
+  await snap(page, testInfo)
+})
+
+test('team members scrolled to bottom', async ({page}, testInfo) => {
+  await navigateToTeams(page)
+  const rows = page.getByTestId(T.TEAMS_ROW)
+  if ((await rows.count()) === 0) {
+    test.skip()
+    return
+  }
+  await rows.first().click()
+  await expect(page.getByTestId(T.TEAMS_MEMBER_LIST).first()).toBeVisible({timeout: 5_000})
+  await wheel(page, `[data-testid="${T.TEAMS_MEMBER_LIST}"]`, 10_000)
+  await snap(page, testInfo)
+})
+
+test('own profile scrolled down', async ({page}, testInfo) => {
+  await openOwnProfile(page)
+  await wheel(page, `[data-testid="${T.PROFILE_PAGE}"]`, 5_000)
+  await snap(page, testInfo)
+  await navigateToPeople(page)
+})
diff --git a/shared/tests/e2e/electron/flows/settings-mutations.test.ts b/shared/tests/e2e/electron/flows/settings-mutations.test.ts
new file mode 100644
index 000000000000..488744abaf9f
--- /dev/null
+++ b/shared/tests/e2e/electron/flows/settings-mutations.test.ts
@@ -0,0 +1,98 @@
+import type {Locator, Page} from '@playwright/test'
+import {test, expect} from '@/tests/e2e/electron/helpers/fixtures'
+import {navigateToSettings} from '@/tests/e2e/electron/helpers/navigate'
+import {snap} from '@/tests/e2e/electron/helpers/snap'
+import * as T from '@/tests/e2e/shared/test-ids'
+
+// Email add → delete full cycle with a fixed test address, plus view-only
+// trips into the phone and sign-out screens. The sign-out button is NEVER
+// clicked; the delete confirm is only ever accepted for the test address.
+const EMAIL = 'e2e-vis@example.com'
+
+const becomesVisible = async (l: Locator, timeout = 5_000) =>
+  l.waitFor({state: 'visible', timeout}).then(() => true).catch(() => false)
+
+async function goToAccountPage(page: Page): Promise<void> {
+  await navigateToSettings(page)
+  await page.getByTestId(T.SETTINGS_ACCOUNT).locator('text=Account').first().click()
+  await expect(page.getByText('Email & phone').first()).toBeVisible({timeout: 5_000})
+}
+
+// Deletes the test email if present. Safety: the confirm modal must show the
+// test address before "Yes, delete" is clicked.
+async function deleteTestEmail(page: Page): Promise<void> {
+  const emailText = page.getByText(EMAIL, {exact: true}).locator('visible=true')
+  if ((await emailText.count()) === 0) return
+  await page.locator(`.icon-gen-iconfont-gear:right-of(:text("${EMAIL}"))`).first().click()
+  await page.getByText('Delete', {exact: true}).locator('visible=true').first().click()
+  await expect(page.getByText('Delete email').first()).toBeVisible({timeout: 5_000})
+  await expect(page.getByText(`${EMAIL}?`).first()).toBeVisible({timeout: 5_000})
+  await page.getByText('Yes, delete', {exact: true}).click()
+  await expect(emailText).toHaveCount(0, {timeout: 10_000})
+}
+
+test('add email modal opens', async ({page}, testInfo) => {
+  await goToAccountPage(page)
+  await deleteTestEmail(page) // self-heal from a crashed previous run
+  await page.getByText('Add email', {exact: true}).click()
+  const emailInput = page.getByPlaceholder('Email address')
+  await expect(emailInput).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.getByText('Cancel', {exact: true}).locator('visible=true').first().click()
+  await expect(emailInput).not.toBeVisible({timeout: 5_000})
+})
+
+test('added email row renders', async ({page}, testInfo) => {
+  await goToAccountPage(page)
+  if ((await page.getByText(EMAIL, {exact: true}).locator('visible=true').count()) === 0) {
+    await page.getByText('Add email', {exact: true}).click()
+    const emailInput = page.getByPlaceholder('Email address')
+    await expect(emailInput).toBeVisible({timeout: 5_000})
+    await emailInput.fill(EMAIL)
+    await page.getByText('Continue', {exact: true}).click()
+  }
+  await expect(page.getByText(EMAIL, {exact: true}).locator('visible=true').first()).toBeVisible({
+    timeout: 15_000,
+  })
+  await snap(page, testInfo)
+})
+
+test('delete email confirm renders, then email is deleted', async ({page}, testInfo) => {
+  await goToAccountPage(page)
+  const emailText = page.getByText(EMAIL, {exact: true}).locator('visible=true')
+  if ((await emailText.count()) === 0) {
+    test.skip()
+    return
+  }
+  await page.locator(`.icon-gen-iconfont-gear:right-of(:text("${EMAIL}"))`).first().click()
+  await page.getByText('Delete', {exact: true}).locator('visible=true').first().click()
+  await expect(page.getByText('Delete email').first()).toBeVisible({timeout: 5_000})
+  await expect(page.getByText(`${EMAIL}?`).first()).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.getByText('Yes, delete', {exact: true}).click()
+  await expect(emailText).toHaveCount(0, {timeout: 10_000})
+})
+
+test('add phone modal opens', async ({page}, testInfo) => {
+  await goToAccountPage(page)
+  await page.getByText('Add phone number', {exact: true}).click()
+  const continueButton = page.getByText('Continue', {exact: true}).locator('visible=true')
+  await expect(continueButton.first()).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.getByText('Cancel', {exact: true}).locator('visible=true').first().click()
+  await expect(continueButton).toHaveCount(0, {timeout: 5_000})
+})
+
+test('sign out screen renders (without signing out)', async ({page}, testInfo) => {
+  await navigateToSettings(page)
+  await page.getByTestId(T.SETTINGS_ACCOUNT).locator('text=Sign out').first().click()
+  // password accounts get a "Test password" screen; randomPW accounts get "Sign out"
+  if (!(await becomesVisible(page.getByText(/^(Test password|Safely sign out|Sign out)$/).locator('visible=true').first(), 10_000))) {
+    test.skip()
+    return
+  }
+  await snap(page, testInfo)
+  // close the modal — never click the sign out button
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(page.getByText('Do you know your password?')).not.toBeVisible({timeout: 5_000})
+})
diff --git a/shared/tests/e2e/electron/flows/settings-navigation.test.ts b/shared/tests/e2e/electron/flows/settings-navigation.test.ts
index b05312a3ef93..d177abfc2030 100644
--- a/shared/tests/e2e/electron/flows/settings-navigation.test.ts
+++ b/shared/tests/e2e/electron/flows/settings-navigation.test.ts
@@ -9,6 +9,7 @@ test('settings nav renders', async ({page}) => {
 
 test('can click Account settings', async ({page}) => {
   await navigateToSettings(page)
-  await page.click('text=Your account')
-  await expect(page.getByTestId(SETTINGS_ACCOUNT)).toBeVisible()
+  // earlier tests may leave another settings subpage selected — go to Account first
+  await page.getByTestId(SETTINGS_ACCOUNT).locator('text=Account').first().click()
+  await expect(page.getByText('Your account').first()).toBeVisible({timeout: 5_000})
 })
diff --git a/shared/tests/e2e/electron/flows/team-wizard-channel.test.ts b/shared/tests/e2e/electron/flows/team-wizard-channel.test.ts
new file mode 100644
index 000000000000..94d8a62b5800
--- /dev/null
+++ b/shared/tests/e2e/electron/flows/team-wizard-channel.test.ts
@@ -0,0 +1,128 @@
+import type {Locator, Page} from '@playwright/test'
+import {test, expect} from '@/tests/e2e/electron/helpers/fixtures'
+import {navigateToTeams, openFirstTeam} from '@/tests/e2e/electron/helpers/navigate'
+import {snap} from '@/tests/e2e/electron/helpers/snap'
+import * as T from '@/tests/e2e/shared/test-ids'
+
+// New-team wizard screens (view + cancel — team names are permanent, NEVER
+// create) and a full channel create → delete cycle in the first owned team.
+const CHANNEL = 'e2e-vis-chan'
+
+const becomesVisible = async (l: Locator, timeout = 5_000) =>
+  l.waitFor({state: 'visible', timeout}).then(() => true).catch(() => false)
+
+test.beforeEach(async ({page}) => {
+  for (let i = 0; i < 3; i++) {
+    const close = page.locator('.icon-gen-iconfont-close:visible')
+    if ((await close.count()) === 0) break
+    await close.first().click()
+    await page.waitForTimeout(300)
+  }
+})
+
+test('team wizard purpose screen opens', async ({page}, testInfo) => {
+  await navigateToTeams(page)
+  await page.getByText('Create a team', {exact: true}).locator('visible=true').first().click()
+  const prompt = page.getByText('What do you need a team for?')
+  await expect(prompt).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(prompt).not.toBeVisible({timeout: 5_000})
+})
+
+test('team wizard name screen opens', async ({page}, testInfo) => {
+  await navigateToTeams(page)
+  await page.getByText('Create a team', {exact: true}).locator('visible=true').first().click()
+  await page.getByText('Friends, family, or squad', {exact: true}).click()
+  const nameInput = page.getByPlaceholder('Team name')
+  await expect(nameInput).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  // cancel the wizard — never actually create a team
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(nameInput).not.toBeVisible({timeout: 5_000})
+})
+
+async function openChannelsTab(page: Page): Promise<boolean> {
+  if (!(await openFirstTeam(page))) return false
+  const channelsTab = page.getByText('Channels', {exact: true}).locator('visible=true').first()
+  if (!(await becomesVisible(channelsTab))) return false
+  await channelsTab.click()
+  return becomesVisible(page.getByTestId(T.TEAMS_CHANNEL_LIST).first())
+}
+
+function channelRow(page: Page) {
+  return page.getByText(`#${CHANNEL}`, {exact: true}).locator('visible=true')
+}
+
+async function deleteChannel(page: Page): Promise<void> {
+  await channelRow(page).first().hover()
+  await page.locator(`.icon-gen-iconfont-ellipsis:right-of(:text("#${CHANNEL}")):visible`).first().click()
+  await page.getByText('Delete channel', {exact: true}).locator('visible=true').first().click()
+  // wait for the confirm modal (its heading names the channel) so the menu item
+  // is gone before clicking the identically-labelled confirm button
+  await expect(page.getByText(`Delete #${CHANNEL}?`)).toBeVisible({timeout: 5_000})
+  await page.getByText('Delete channel', {exact: true}).locator('visible=true').first().click()
+  await expect(page.getByText(`Delete #${CHANNEL}?`)).not.toBeVisible({timeout: 15_000})
+  // the channels list doesn't always live-refresh — re-enter the tab
+  await openChannelsTab(page)
+  await expect(channelRow(page)).toHaveCount(0, {timeout: 30_000})
+}
+
+test('create channel modal opens', async ({page}, testInfo) => {
+  test.setTimeout(60_000)
+  if (!(await openChannelsTab(page))) {
+    test.skip()
+    return
+  }
+  // self-heal: remove a leftover channel from a crashed previous run
+  if ((await channelRow(page).count()) > 0) {
+    await deleteChannel(page)
+  }
+  await page.getByText('Create channel', {exact: true}).locator('visible=true').first().click()
+  const nameInput = page.getByPlaceholder('Channel name')
+  await expect(nameInput).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(nameInput).not.toBeVisible({timeout: 5_000})
+})
+
+test('created channel row renders', async ({page}, testInfo) => {
+  test.setTimeout(60_000)
+  if (!(await openChannelsTab(page))) {
+    test.skip()
+    return
+  }
+  if ((await channelRow(page).count()) === 0) {
+    await page.getByText('Create channel', {exact: true}).locator('visible=true').first().click()
+    const nameInput = page.getByPlaceholder('Channel name')
+    await expect(nameInput).toBeVisible({timeout: 5_000})
+    await nameInput.fill(CHANNEL)
+    await page.getByText('Save', {exact: true}).locator('visible=true').first().click()
+    await expect(nameInput).not.toBeVisible({timeout: 15_000})
+    // the channels list doesn't always live-refresh — re-enter the tab
+    await openChannelsTab(page)
+  }
+  await expect(channelRow(page).first()).toBeVisible({timeout: 30_000})
+  await snap(page, testInfo)
+})
+
+test('delete channel confirm renders, then channel is deleted', async ({page}, testInfo) => {
+  test.setTimeout(60_000)
+  if (!(await openChannelsTab(page))) {
+    test.skip()
+    return
+  }
+  if (!(await becomesVisible(channelRow(page).first(), 10_000))) {
+    test.skip()
+    return
+  }
+  await channelRow(page).first().hover()
+  await page.locator(`.icon-gen-iconfont-ellipsis:right-of(:text("#${CHANNEL}")):visible`).first().click()
+  await page.getByText('Delete channel', {exact: true}).locator('visible=true').first().click()
+  await expect(page.getByText(`Delete #${CHANNEL}?`)).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.getByText('Delete channel', {exact: true}).locator('visible=true').first().click()
+  await expect(page.getByText(`Delete #${CHANNEL}?`)).not.toBeVisible({timeout: 15_000})
+  await openChannelsTab(page)
+  await expect(channelRow(page)).toHaveCount(0, {timeout: 30_000})
+})
diff --git a/shared/tests/e2e/electron/flows/teams-modals.test.ts b/shared/tests/e2e/electron/flows/teams-modals.test.ts
new file mode 100644
index 000000000000..313eba84a61e
--- /dev/null
+++ b/shared/tests/e2e/electron/flows/teams-modals.test.ts
@@ -0,0 +1,169 @@
+import type {Locator} from '@playwright/test'
+import {test, expect} from '@/tests/e2e/electron/helpers/fixtures'
+import {openFirstTeam} from '@/tests/e2e/electron/helpers/navigate'
+import {snap} from '@/tests/e2e/electron/helpers/snap'
+import * as T from '@/tests/e2e/shared/test-ids'
+
+// Team modals and wizards, all open → screenshot → cancel. Nothing submits.
+
+// locator.isVisible() doesn't wait — this does, without throwing
+const becomesVisible = async (l: Locator, timeout = 5_000) =>
+  l.waitFor({state: 'visible', timeout}).then(() => true).catch(() => false)
+
+// a test that died mid-modal poisons every test after it — close leftovers first
+test.beforeEach(async ({page}) => {
+  for (let i = 0; i < 3; i++) {
+    const close = page.locator('.icon-gen-iconfont-close:visible')
+    if ((await close.count()) === 0) break
+    await close.first().click()
+    await page.waitForTimeout(300)
+  }
+})
+
+test('add members wizard opens', async ({page}, testInfo) => {
+  if (!(await openFirstTeam(page))) {
+    test.skip()
+    return
+  }
+  const addButton = page.getByText('Add/Invite people', {exact: true}).locator('visible=true')
+  if (!(await becomesVisible(addButton.first()))) {
+    test.skip()
+    return
+  }
+  await addButton.first().click()
+  const emailOption = page.getByText('A list of email addresses', {exact: true})
+  await expect(emailOption).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(emailOption).not.toBeVisible({timeout: 5_000})
+})
+
+test('add by email screen opens', async ({page}, testInfo) => {
+  if (!(await openFirstTeam(page))) {
+    test.skip()
+    return
+  }
+  const addButton = page.getByText('Add/Invite people', {exact: true}).locator('visible=true')
+  if (!(await becomesVisible(addButton.first()))) {
+    test.skip()
+    return
+  }
+  await addButton.first().click()
+  await page.getByText('A list of email addresses', {exact: true}).click()
+  const emailInput = page.getByPlaceholder('Email addresses')
+  await expect(emailInput).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(emailInput).not.toBeVisible({timeout: 5_000})
+})
+
+test('edit team info modal opens', async ({page}, testInfo) => {
+  if (!(await openFirstTeam(page))) {
+    test.skip()
+    return
+  }
+  const editButton = page.getByText('Edit', {exact: true}).locator('visible=true')
+  if ((await editButton.count()) === 0) {
+    test.skip()
+    return
+  }
+  await editButton.first().click()
+  const description = page.getByPlaceholder('Description')
+  await expect(description).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(description).not.toBeVisible({timeout: 5_000})
+})
+
+test('edit channel modal opens', async ({page}, testInfo) => {
+  if (!(await openFirstTeam(page))) {
+    test.skip()
+    return
+  }
+  const channelsTab = page.getByText('Channels', {exact: true}).locator('visible=true').first()
+  if (!(await channelsTab.isVisible())) {
+    test.skip()
+    return
+  }
+  await channelsTab.click()
+  const channelList = page.getByTestId(T.TEAMS_CHANNEL_LIST)
+  if (!(await becomesVisible(channelList.first()))) {
+    test.skip()
+    return
+  }
+  // hover a channel row so its action buttons appear, then click ITS edit icon.
+  // The team-avatar edit pencil also matches iconfont-edit and sits earlier in
+  // the DOM (the header is a list section) — so take the LAST visible match.
+  const channelRowName = channelList.getByText(/^#\w/).locator('visible=true').first()
+  if (!(await becomesVisible(channelRowName))) {
+    test.skip()
+    return
+  }
+  await channelRowName.hover()
+  const editIcons = channelList.locator('.icon-gen-iconfont-edit:visible')
+  await expect.poll(async () => editIcons.count(), {timeout: 5_000}).toBeGreaterThan(0)
+  await editIcons.last().click()
+  const channelName = page.getByPlaceholder('channelname')
+  await expect(channelName).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(channelName).not.toBeVisible({timeout: 5_000})
+})
+
+test('retention warning opens', async ({page}, testInfo) => {
+  if (!(await openFirstTeam(page))) {
+    test.skip()
+    return
+  }
+  // 'Settings' also exists in the left nav — the team tab is the second visible match
+  await page.getByText('Settings', {exact: true}).locator('visible=true').nth(1).click()
+  // retention section renders only with admin rights
+  if (!(await becomesVisible(page.getByText('Message deletion', {exact: true}).locator('visible=true').first()))) {
+    test.skip()
+    return
+  }
+  const dropdown = page
+    .getByText(/^(Never auto-delete|Team default \(.*\)|\d+ (days?|weeks?|hours?|minutes?))$/)
+    .locator('visible=true')
+    .first()
+  if (!(await becomesVisible(dropdown))) {
+    test.skip()
+    return
+  }
+  await dropdown.click()
+  await page.getByText('7 days', {exact: true}).locator('visible=true').last().click()
+  const confirm = page.getByText('Yes, set to 7 days')
+  if (!(await becomesVisible(confirm, 3_000))) {
+    // no warning fired (already at/below 7 days) — nothing to capture
+    await page.keyboard.press('Escape')
+    test.skip()
+    return
+  }
+  await snap(page, testInfo)
+  await page.getByText('Cancel', {exact: true}).locator('visible=true').first().click()
+  await expect(confirm).not.toBeVisible({timeout: 5_000})
+})
+
+test('add emoji modal opens', async ({page}, testInfo) => {
+  if (!(await openFirstTeam(page))) {
+    test.skip()
+    return
+  }
+  const emojiTab = page.getByText('Emoji', {exact: true}).locator('visible=true')
+  if (!(await becomesVisible(emojiTab.first()))) {
+    test.skip()
+    return
+  }
+  await emojiTab.first().click()
+  const addEmoji = page.getByText('Add emoji', {exact: true}).locator('visible=true')
+  if (!(await becomesVisible(addEmoji.first()))) {
+    test.skip()
+    return
+  }
+  await addEmoji.first().click()
+  const dragDrop = page.getByText('Drag and drop images or')
+  await expect(dragDrop).toBeVisible({timeout: 5_000})
+  await snap(page, testInfo)
+  await page.locator('.icon-gen-iconfont-close:visible').first().click()
+  await expect(dragDrop).not.toBeVisible({timeout: 5_000})
+})
diff --git a/shared/tests/e2e/electron/helpers/navigate.ts b/shared/tests/e2e/electron/helpers/navigate.ts
index ad311e66c6c3..291273727f7a 100644
--- a/shared/tests/e2e/electron/helpers/navigate.ts
+++ b/shared/tests/e2e/electron/helpers/navigate.ts
@@ -23,6 +23,64 @@ export async function navigateToTeams(page: Page): Promise<void> {
   }
 }
 
+// Opens the first inbox conversation and waits for the message list.
+// Returns false when the inbox is empty (caller should test.skip()).
+export async function openFirstConversation(page: Page): Promise<boolean> {
+  await navigateToChat(page)
+  const rows = page.getByTestId(T.CHAT_INBOX_ROW)
+  if ((await rows.count()) === 0) return false
+  await rows.first().click()
+  await page.waitForSelector(`[data-testid="${T.CHAT_MESSAGE_LIST}"]`, {timeout: 5_000})
+  return true
+}
+
+// Opens inbox conversations top-down until `check` passes for one of them.
+// Returns false when no conversation matches (caller should test.skip()).
+export async function openConversationMatching(
+  page: Page,
+  check: (page: Page) => Promise<boolean>,
+  maxRows = 5
+): Promise<boolean> {
+  await navigateToChat(page)
+  const rows = page.getByTestId(T.CHAT_INBOX_ROW)
+  const n = Math.min(await rows.count(), maxRows)
+  for (let i = 0; i < n; i++) {
+    await rows.nth(i).click()
+    await page.waitForSelector(`[data-testid="${T.CHAT_MESSAGE_LIST}"]`, {timeout: 5_000})
+    // let messages land before probing
+    await page.waitForTimeout(500)
+    if (await check(page)) return true
+  }
+  return false
+}
+
+// Opens the first team in the teams list; false when there are no teams.
+export async function openFirstTeam(page: Page): Promise<boolean> {
+  await navigateToTeams(page)
+  const rows = page.getByTestId(T.TEAMS_ROW)
+  if ((await rows.count()) === 0) return false
+  await rows.first().click()
+  await rows.first().waitFor({state: 'hidden', timeout: 5_000})
+  return true
+}
+
+// Opens own profile via the "Hi user!" menu and dismisses the menu popup.
+export async function openOwnProfile(page: Page): Promise<void> {
+  const smokeUser = process.env['KB_SMOKE_USER']
+  await page.click(`[data-testid="${T.NAV_TAB_PEOPLE}"]`)
+  await page.click(`text=Hi ${smokeUser}!`)
+  await page.click('text=View/Edit profile')
+  await page.waitForSelector(`[data-testid="${T.PROFILE_PAGE}"]`, {timeout: 10_000})
+  // dismiss the still-open account-switcher menu (Escape first, outside click as fallback)
+  await page.keyboard.press('Escape')
+  try {
+    await page.waitForSelector('text=View/Edit profile', {state: 'hidden', timeout: 2_000})
+  } catch {
+    await page.mouse.click(700, 300)
+    await page.waitForSelector('text=View/Edit profile', {state: 'hidden', timeout: 5_000})
+  }
+}
+
 export async function navigateToFiles(page: Page): Promise<void> {
   await clickNavTab(page, T.NAV_TAB_FILES)
   await page.waitForSelector(`[data-testid="${T.FILES_BROWSER}"]`, {timeout: 5_000})
diff --git a/shared/tests/e2e/electron/helpers/snap.ts b/shared/tests/e2e/electron/helpers/snap.ts
new file mode 100644
index 000000000000..ecfeb24cf96f
--- /dev/null
+++ b/shared/tests/e2e/electron/helpers/snap.ts
@@ -0,0 +1,12 @@
+import type {Page, TestInfo} from '@playwright/test'
+
+// Attach a screenshot of the current state under the name 'screenshot' — the same
+// name playwright's automatic end-of-test screenshot uses. The report generator
+// picks the FIRST attachment with that name, so calling this mid-test makes the
+// captured state (e.g. an open modal) the card image even though the test closes
+// the modal before ending. Call at the moment the screen shows what the card
+// should display; at most once per test.
+export async function snap(page: Page, testInfo: TestInfo): Promise<void> {
+  const body = await page.screenshot()
+  await testInfo.attach('screenshot', {body, contentType: 'image/png'})
+}
diff --git a/shared/tests/e2e/ios-appium/all.test.ts b/shared/tests/e2e/ios-appium/all.test.ts
index 8c7ccb032bf9..c4cd6631ab00 100644
--- a/shared/tests/e2e/ios-appium/all.test.ts
+++ b/shared/tests/e2e/ios-appium/all.test.ts
@@ -17,3 +17,4 @@ import './flows/settings-subpages.test'
 import './flows/team-member.test'
 import './flows/teams-browse.test'
 import './flows/teams-inner.test'
+import './flows/visual-states.test'
diff --git a/shared/tests/e2e/ios-appium/flows/chat-send-message.test.ts b/shared/tests/e2e/ios-appium/flows/chat-send-message.test.ts
index e758d92192b3..5ca47c75b4dd 100644
--- a/shared/tests/e2e/ios-appium/flows/chat-send-message.test.ts
+++ b/shared/tests/e2e/ios-appium/flows/chat-send-message.test.ts
@@ -1,7 +1,7 @@
 import {expect} from '@wdio/globals'
 import {requireSmokeUser} from '../helpers/app'
 import {escapeToTabs, navigateToChat} from '../helpers/navigate'
-import {anyExist, el, els, waitForTestID, byText, enterText} from '../helpers/elements'
+import {anyExist, byText, el, els, waitForTestID, enterText} from '../helpers/elements'
 import * as T from '../../shared/test-ids'
 
 describe('chat send message', () => {
diff --git a/shared/tests/e2e/ios-appium/flows/crypto-outputs.test.ts b/shared/tests/e2e/ios-appium/flows/crypto-outputs.test.ts
index e89edad75815..2b8848888395 100644
--- a/shared/tests/e2e/ios-appium/flows/crypto-outputs.test.ts
+++ b/shared/tests/e2e/ios-appium/flows/crypto-outputs.test.ts
@@ -1,6 +1,6 @@
 import {expect} from '@wdio/globals'
-import {escapeToTabs, navigateToMore} from '../helpers/navigate'
-import {el, waitForTestID, byText, tapForTestID, enterText} from '../helpers/elements'
+import {escapeToTabs, navigateToMore, tapSettingsRow} from '../helpers/navigate'
+import {el, waitForTestID, tapForTestID, enterText} from '../helpers/elements'
 import * as T from '../../shared/test-ids'
 
 // Two separate tests: the crypto output is shown in its own modal whose "Done"
@@ -10,7 +10,7 @@ describe('crypto outputs', () => {
   it('encrypt produces output', async () => {
     await escapeToTabs()
     await navigateToMore()
-    await byText('Crypto').click()
+    await tapSettingsRow('Crypto')
     await waitForTestID(T.CRYPTO_INPUT, 3000)
 
     await tapForTestID(T.CRYPTO_NAV_ENCRYPT, T.CRYPTO_ENCRYPT_INPUT)
@@ -23,7 +23,7 @@ describe('crypto outputs', () => {
   it('sign produces output', async () => {
     await escapeToTabs()
     await navigateToMore()
-    await byText('Crypto').click()
+    await tapSettingsRow('Crypto')
     await waitForTestID(T.CRYPTO_INPUT, 3000)
 
     await tapForTestID(T.CRYPTO_NAV_SIGN, T.CRYPTO_SIGN_INPUT)
diff --git a/shared/tests/e2e/ios-appium/flows/crypto-subtabs.test.ts b/shared/tests/e2e/ios-appium/flows/crypto-subtabs.test.ts
index d326e63edb06..d555bb16ea2a 100644
--- a/shared/tests/e2e/ios-appium/flows/crypto-subtabs.test.ts
+++ b/shared/tests/e2e/ios-appium/flows/crypto-subtabs.test.ts
@@ -1,6 +1,6 @@
 import {expect} from '@wdio/globals'
-import {escapeToTabs, navigateToMore, goBackUntilGone} from '../helpers/navigate'
-import {el, waitForTestID, byText, tapForTestID} from '../helpers/elements'
+import {escapeToTabs, navigateToMore, goBackUntilGone, tapSettingsRow} from '../helpers/navigate'
+import {el, waitForTestID, tapForTestID} from '../helpers/elements'
 import * as T from '../../shared/test-ids'
 
 describe('crypto subtabs', () => {
@@ -8,7 +8,7 @@ describe('crypto subtabs', () => {
     await escapeToTabs()
     await navigateToMore()
     // Maestro: tapOn text: ".*Crypto" — label match for the Crypto menu item
-    await byText('Crypto').click()
+    await tapSettingsRow('Crypto')
     await waitForTestID(T.CRYPTO_INPUT, 3000)
 
     // Each sub-nav tap immediately follows a push/pop transition; on slow sims
diff --git a/shared/tests/e2e/ios-appium/flows/device-detail.test.ts b/shared/tests/e2e/ios-appium/flows/device-detail.test.ts
index cad8bf71a4d4..ee9e0d7c34f0 100644
--- a/shared/tests/e2e/ios-appium/flows/device-detail.test.ts
+++ b/shared/tests/e2e/ios-appium/flows/device-detail.test.ts
@@ -1,6 +1,6 @@
 import {expect} from '@wdio/globals'
-import {escapeToTabs, navigateToMore} from '../helpers/navigate'
-import {el, els, waitForTestID, byText} from '../helpers/elements'
+import {escapeToTabs, navigateToMore, tapSettingsRow} from '../helpers/navigate'
+import {el, els, waitForTestID} from '../helpers/elements'
 import * as T from '../../shared/test-ids'
 
 describe('device detail', () => {
@@ -8,7 +8,7 @@ describe('device detail', () => {
     await escapeToTabs()
     await navigateToMore()
     // Maestro: tapOn text: ".*Devices" — label match for the Devices menu item
-    await byText('Devices').click()
+    await tapSettingsRow('Devices')
     await waitForTestID(T.DEVICES_LIST, 3000)
     await waitForTestID(T.DEVICES_ROW, 3000)
 
diff --git a/shared/tests/e2e/ios-appium/flows/devices-view.test.ts b/shared/tests/e2e/ios-appium/flows/devices-view.test.ts
index 52b599e2982c..81537fa150d0 100644
--- a/shared/tests/e2e/ios-appium/flows/devices-view.test.ts
+++ b/shared/tests/e2e/ios-appium/flows/devices-view.test.ts
@@ -1,6 +1,6 @@
 import {expect} from '@wdio/globals'
-import {escapeToTabs, navigateToMore} from '../helpers/navigate'
-import {el, waitForTestID, byText} from '../helpers/elements'
+import {escapeToTabs, navigateToMore, tapSettingsRow} from '../helpers/navigate'
+import {el, waitForTestID} from '../helpers/elements'
 import * as T from '../../shared/test-ids'
 
 describe('devices view', () => {
@@ -8,7 +8,7 @@ describe('devices view', () => {
     await escapeToTabs()
     await navigateToMore()
     // Maestro: tapOn text: ".*Devices" — label match for the Devices menu item
-    await byText('Devices').click()
+    await tapSettingsRow('Devices')
     await waitForTestID(T.DEVICES_LIST, 3000)
     await expect(el(T.DEVICES_LIST)).toExist()
 
diff --git a/shared/tests/e2e/ios-appium/flows/git.test.ts b/shared/tests/e2e/ios-appium/flows/git.test.ts
index 8b1769f4100e..4df8ea8c7c27 100644
--- a/shared/tests/e2e/ios-appium/flows/git.test.ts
+++ b/shared/tests/e2e/ios-appium/flows/git.test.ts
@@ -1,13 +1,13 @@
 import {expect} from '@wdio/globals'
-import {escapeToTabs, navigateToMore} from '../helpers/navigate'
-import {el, waitForTestID, byText} from '../helpers/elements'
+import {escapeToTabs, navigateToMore, tapSettingsRow} from '../helpers/navigate'
+import {el, waitForTestID} from '../helpers/elements'
 import * as T from '../../shared/test-ids'
 
 describe('git', () => {
   it('renders the git repo list with a repo row', async () => {
     await escapeToTabs()
     await navigateToMore()
-    await byText('Git').click()
+    await tapSettingsRow('Git')
     await waitForTestID(T.GIT_REPO_LIST, 3000)
     await expect(el(T.GIT_REPO_LIST)).toExist()
 
diff --git a/shared/tests/e2e/ios-appium/flows/people-profile.test.ts b/shared/tests/e2e/ios-appium/flows/people-profile.test.ts
index 98214147c4d2..59d0b9d1efc1 100644
--- a/shared/tests/e2e/ios-appium/flows/people-profile.test.ts
+++ b/shared/tests/e2e/ios-appium/flows/people-profile.test.ts
@@ -1,7 +1,7 @@
 import {expect} from '@wdio/globals'
 import {requireSmokeUser} from '../helpers/app'
 import {escapeToTabs, navigateToPeople} from '../helpers/navigate'
-import {el, waitForTestID, byText} from '../helpers/elements'
+import {byText, el, waitForTestID} from '../helpers/elements'
 import * as T from '../../shared/test-ids'
 
 describe('people profile', () => {
diff --git a/shared/tests/e2e/ios-appium/flows/settings-navigation.test.ts b/shared/tests/e2e/ios-appium/flows/settings-navigation.test.ts
index e423ed3ce048..bbc25c2d3290 100644
--- a/shared/tests/e2e/ios-appium/flows/settings-navigation.test.ts
+++ b/shared/tests/e2e/ios-appium/flows/settings-navigation.test.ts
@@ -1,6 +1,6 @@
 import {expect} from '@wdio/globals'
-import {escapeToTabs, navigateToMore} from '../helpers/navigate'
-import {el, waitForTestID, byText} from '../helpers/elements'
+import {escapeToTabs, navigateToMore, tapSettingsRow} from '../helpers/navigate'
+import {byText, el, waitForTestID} from '../helpers/elements'
 import * as T from '../../shared/test-ids'
 
 describe('settings navigation', () => {
@@ -11,7 +11,7 @@ describe('settings navigation', () => {
     await expect(el(T.SETTINGS_ACCOUNT)).toExist()
 
     // Maestro: tapOn text: "Account"
-    await byText('Account').click()
+    await tapSettingsRow('Account')
     // Maestro: extendedWaitUntil visible text: "Email & phone"
     await byText('Email & phone').waitForExist({timeout: 3000, timeoutMsg: '"Email & phone" never appeared on Account page'})
     await expect(byText('Email & phone')).toExist()
diff --git a/shared/tests/e2e/ios-appium/flows/settings-subpages.test.ts b/shared/tests/e2e/ios-appium/flows/settings-subpages.test.ts
index ad575b611c05..da054b9ed90b 100644
--- a/shared/tests/e2e/ios-appium/flows/settings-subpages.test.ts
+++ b/shared/tests/e2e/ios-appium/flows/settings-subpages.test.ts
@@ -1,6 +1,6 @@
 import {expect} from '@wdio/globals'
-import {escapeToTabs, navigateToMore, goBack, scrollDownToText, scrollToTestID, dismissKeyboard} from '../helpers/navigate'
-import {el, waitForTestID, byText} from '../helpers/elements'
+import {escapeToTabs, navigateToMore, goBack, scrollToTestID, dismissKeyboard, tapSettingsRow} from '../helpers/navigate'
+import {el, waitForTestID} from '../helpers/elements'
 import * as T from '../../shared/test-ids'
 
 describe('settings subpages', () => {
@@ -28,8 +28,8 @@ describe('settings subpages', () => {
       }
     }
 
-    await visit(async () => byText('Advanced').click(), T.SETTINGS_ADVANCED)
-    await visit(async () => byText('Backup').click(), T.SETTINGS_ARCHIVE)
+    await visit(async () => tapSettingsRow('Advanced'), T.SETTINGS_ADVANCED)
+    await visit(async () => tapSettingsRow('Backup'), T.SETTINGS_ARCHIVE)
     // Chat/Files by row testID — their text collides with the bottom tab bar.
     // scrollToTestID first: on the tablet's short landscape LeftNav these rows
     // can sit below the fold (present but not displayed → a tap would no-op).
@@ -37,19 +37,13 @@ describe('settings subpages', () => {
       await scrollToTestID(T.SETTINGS_ROW_CHAT)
       await el(T.SETTINGS_ROW_CHAT).click()
     }, T.SETTINGS_CHAT)
-    await visit(async () => byText('Display').click(), T.SETTINGS_DISPLAY)
-    await visit(async () => byText('Feedback').click(), T.SETTINGS_FEEDBACK)
+    await visit(async () => tapSettingsRow('Display'), T.SETTINGS_DISPLAY)
+    await visit(async () => tapSettingsRow('Feedback'), T.SETTINGS_FEEDBACK)
     await visit(async () => {
       await scrollToTestID(T.SETTINGS_ROW_FILES)
       await el(T.SETTINGS_ROW_FILES).click()
     }, T.SETTINGS_FILES)
-    await visit(async () => {
-      await scrollDownToText('Notifications')
-      await byText('Notifications').click()
-    }, T.SETTINGS_NOTIFICATIONS)
-    await visit(async () => {
-      await scrollDownToText('About')
-      await byText('About').click()
-    }, T.SETTINGS_ABOUT)
+    await visit(async () => tapSettingsRow('Notifications'), T.SETTINGS_NOTIFICATIONS)
+    await visit(async () => tapSettingsRow('About'), T.SETTINGS_ABOUT)
   })
 })
diff --git a/shared/tests/e2e/ios-appium/flows/team-member.test.ts b/shared/tests/e2e/ios-appium/flows/team-member.test.ts
index c7216878dfe6..b2699f408eca 100644
--- a/shared/tests/e2e/ios-appium/flows/team-member.test.ts
+++ b/shared/tests/e2e/ios-appium/flows/team-member.test.ts
@@ -1,7 +1,7 @@
 import {expect} from '@wdio/globals'
 import {requireSmokeUser} from '../helpers/app'
 import {escapeToTabs, navigateToTeams, scrollDownToText} from '../helpers/navigate'
-import {el, els, waitForTestID, byText, tapForTestID} from '../helpers/elements'
+import {byText, el, els, waitForTestID, tapForTestID} from '../helpers/elements'
 import * as T from '../../shared/test-ids'
 
 describe('team member', () => {
diff --git a/shared/tests/e2e/ios-appium/flows/teams-browse.test.ts b/shared/tests/e2e/ios-appium/flows/teams-browse.test.ts
index 3cc70ef623d5..a3135b02a32a 100644
--- a/shared/tests/e2e/ios-appium/flows/teams-browse.test.ts
+++ b/shared/tests/e2e/ios-appium/flows/teams-browse.test.ts
@@ -1,6 +1,6 @@
 import {expect} from '@wdio/globals'
 import {escapeToTabs, navigateToTeams} from '../helpers/navigate'
-import {el, els, waitForTestID, byText} from '../helpers/elements'
+import {byText, el, els, waitForTestID} from '../helpers/elements'
 import * as T from '../../shared/test-ids'
 
 describe('teams browse', () => {
diff --git a/shared/tests/e2e/ios-appium/flows/teams-inner.test.ts b/shared/tests/e2e/ios-appium/flows/teams-inner.test.ts
index fa4e459c1505..6b65a3b43b3d 100644
--- a/shared/tests/e2e/ios-appium/flows/teams-inner.test.ts
+++ b/shared/tests/e2e/ios-appium/flows/teams-inner.test.ts
@@ -1,6 +1,6 @@
 import {expect} from '@wdio/globals'
 import {escapeToTabs, navigateToTeams} from '../helpers/navigate'
-import {el, els, waitForTestID, byText, tapForTestID} from '../helpers/elements'
+import {byText, el, els, waitForTestID, tapForTestID} from '../helpers/elements'
 import * as T from '../../shared/test-ids'
 
 describe('teams inner', () => {
diff --git a/shared/tests/e2e/ios-appium/flows/visual-states.test.ts b/shared/tests/e2e/ios-appium/flows/visual-states.test.ts
new file mode 100644
index 000000000000..6294f34c7c53
--- /dev/null
+++ b/shared/tests/e2e/ios-appium/flows/visual-states.test.ts
@@ -0,0 +1,328 @@
+import {expect} from '@wdio/globals'
+import {escapeToTabs, navigateToMore, navigateToTeams, navigateToFiles, navigateToPeople, goBack, scrollDownToText, tapSettingsRow, tabTo} from '../helpers/navigate'
+import {byText, el, els, anyExist, waitForTestID, tab, enterText, tapForTestID} from '../helpers/elements'
+import * as T from '../../shared/test-ids'
+
+// Visual-coverage states. The harness screenshots AFTER each test and
+// escapeToTabs resets before the next one, so each test ENDS at the state it
+// wants captured (modal left open on purpose). View-only: nothing submits.
+
+// Swipe from mid-screen upward-content (finger down) to reveal older content.
+async function swipeContentDown(times: number): Promise<void> {
+  const {width, height} = await browser.getWindowRect()
+  const x = Math.round(width * 0.5)
+  for (let i = 0; i < times; i++) {
+    await browser
+      .action('pointer')
+      .move({x, y: Math.round(height * 0.35)})
+      .down()
+      .move({x, y: Math.round(height * 0.75), duration: 300})
+      .up()
+      .perform()
+  }
+}
+
+// Finger up — scrolls the content toward its bottom.
+async function swipeContentUp(times: number): Promise<void> {
+  const {width, height} = await browser.getWindowRect()
+  const x = Math.round(width * 0.5)
+  for (let i = 0; i < times; i++) {
+    await browser
+      .action('pointer')
+      .move({x, y: Math.round(height * 0.75)})
+      .down()
+      .move({x, y: Math.round(height * 0.35), duration: 300})
+      .up()
+      .perform()
+  }
+}
+
+// Open the conversation info panel from inside a conversation. iOS 26 folds
+// Search/Info into one native "More" header menu (native UIMenu items ARE
+// accessible); Android keeps the plain info icon in the RN header, reached by
+// its testID. Returns false when the affordance isn't there (e.g. pending conv).
+async function openInfoPanel(): Promise<boolean> {
+  if (browser.isAndroid) {
+    const info = el(T.CHAT_HEADER_INFO_BUTTON)
+    if (!(await info.waitForExist({timeout: 4000}).then(() => true).catch(() => false))) return false
+    await info.click()
+  } else {
+    const more = el('More')
+    if (!(await more.waitForExist({timeout: 4000}).then(() => true).catch(() => false))) return false
+    await more.click()
+    const info = byText('Info')
+    if (!(await info.waitForExist({timeout: 4000}).then(() => true).catch(() => false))) return false
+    await info.click()
+  }
+  return true
+}
+
+async function openFirstConversation(): Promise<boolean> {
+  // Two-tap idiom: sidestep the ambiguous "Chat" label in the More stack.
+  await tab('Teams').click().catch(() => {})
+  await tabTo('Chat', T.CHAT_INBOX_LIST)
+  if (!(await anyExist(T.CHAT_INBOX_ROW))) return false
+  await els(T.CHAT_INBOX_ROW)[0]!.click()
+  await waitForTestID(T.CHAT_MESSAGE_LIST, 5000)
+  return true
+}
+
+describe('visual states', () => {
+  it('new chat team builder', async () => {
+    await escapeToTabs()
+    await tab('Teams').click().catch(() => {})
+    await tabTo('Chat', T.CHAT_INBOX_LIST)
+    await byText('New chat').click()
+    // phone builder has no "Recommendations" header and the service-tab labels
+    // are comma-merged (", A phone, number") — anchor on the self row instead
+    await byText('Write secure notes to yourself').waitForExist({timeout: 8000})
+    await expect(byText('Write secure notes to yourself')).toExist()
+  })
+
+  it('conversation scrolled up', async () => {
+    await escapeToTabs()
+    if (!(await openFirstConversation())) return
+    await swipeContentDown(3)
+    await expect(el(T.CHAT_MESSAGE_LIST)).toExist()
+  })
+
+  it('archive backup modal', async () => {
+    await escapeToTabs()
+    await navigateToMore()
+    await tapSettingsRow('Backup')
+    await waitForTestID(T.SETTINGS_ARCHIVE, 5000)
+    await byText('Backup all chat').click()
+    await byText('Share a copy of your content to another app').waitForExist({timeout: 5000})
+    await expect(byText('Share a copy of your content to another app')).toExist()
+  })
+
+  it('wallet screen', async () => {
+    await escapeToTabs()
+    await navigateToMore()
+    await tapSettingsRow('Wallet')
+    await byText('Secret key').waitForExist({timeout: 8000})
+    await expect(byText('Secret key')).toExist()
+  })
+
+  it('password screen', async () => {
+    await escapeToTabs()
+    await navigateToMore()
+    await tapSettingsRow('Account')
+    await byText('Email & phone').waitForExist({timeout: 5000})
+    // mobile label is just "Change" (desktop says "Change password")
+    const change = byText('Change')
+    if (!(await change.isExisting())) {
+      // randomPW accounts show "Set a password" instead
+      await byText('Set a password').click()
+    } else {
+      await change.click()
+    }
+    // input placeholders aren't labels in the XCUITest tree — anchor on the checkbox
+    await byText('Show typing').waitForExist({timeout: 5000})
+    await expect(byText('Show typing')).toExist()
+  })
+
+  it('add device chooser', async () => {
+    await escapeToTabs()
+    await navigateToMore()
+    await tapSettingsRow('Devices')
+    await waitForTestID(T.DEVICES_LIST, 5000)
+    await byText('Add a device or paper key').click()
+    await byText('Protect your account by having more devices and paper keys.').waitForExist({
+      timeout: 5000,
+    })
+    await expect(byText('Protect your account by having more devices and paper keys.')).toExist()
+  })
+
+  it('git new repo menu', async () => {
+    await escapeToTabs()
+    await navigateToMore()
+    await tapSettingsRow('Git')
+    await waitForTestID(T.GIT_REPO_LIST, 5000)
+    await byText('New encrypted git repository...').click()
+    // The sheet's menu items are NOT in the accessibility tree (FloatingMenu
+    // bottom-sheet items are a11y-invisible — real VoiceOver gap), so we can't
+    // tap through to the form. Capture the open-menu state instead.
+    await byText('Bottom Sheet').waitForExist({timeout: 8000})
+    await expect(byText('Bottom Sheet')).toExist()
+  })
+
+  it('conversation info panel', async () => {
+    await escapeToTabs()
+    if (!(await openFirstConversation())) return
+    if (!(await openInfoPanel())) return
+    await waitForTestID(T.CHAT_INFO_PANEL, 8000)
+    await expect(el(T.CHAT_INFO_PANEL)).toExist()
+  })
+
+  it('delete history warning', async () => {
+    await escapeToTabs()
+    if (!(await openFirstConversation())) return
+    if (!(await openInfoPanel())) return
+    await waitForTestID(T.CHAT_INFO_PANEL, 8000)
+    // the tab label text isn't tappable on iOS — the tab carries its own testID
+    if (!(await el(T.CHAT_INFO_PANEL_SETTINGS_TAB).waitForExist({timeout: 4000}).then(() => true).catch(() => false))) {
+      return // no settings tab without admin rights
+    }
+    await el(T.CHAT_INFO_PANEL_SETTINGS_TAB).click()
+    await scrollDownToText('Clear entire conversation')
+    await byText('Clear entire conversation').click()
+    await byText('Yes, clear for everyone').waitForExist({timeout: 5000})
+    await expect(byText('Yes, clear for everyone')).toExist()
+  })
+
+  it('mention suggestions popup', async () => {
+    await escapeToTabs()
+    if (!(await openFirstConversation())) return
+    await waitForTestID(T.CHAT_INPUT, 5000)
+    await enterText(T.CHAT_INPUT, '@cn')
+    await waitForTestID(T.CHAT_SUGGESTION_LIST, 8000)
+    await expect(el(T.CHAT_SUGGESTION_LIST)).toExist()
+  })
+
+  it('mention suggestions cleanup', async () => {
+    // paired with the test above: clear the draft it left so inbox rows don't
+    // show "Draft:" noise in later screenshots; this shot = clean conversation
+    await escapeToTabs()
+    if (!(await openFirstConversation())) return
+    await waitForTestID(T.CHAT_INPUT, 5000)
+    await el(T.CHAT_INPUT).clearValue()
+    await browser.pause(500)
+    await expect(el(T.CHAT_MESSAGE_LIST)).toExist()
+  })
+
+  it('attachment fullscreen', async () => {
+    await escapeToTabs()
+    await tab('Teams').click().catch(() => {})
+    await tabTo('Chat', T.CHAT_INBOX_LIST)
+    // hunt inbox rows for a conversation with an image attachment
+    for (let i = 0; i < 6; i++) {
+      const rows = els(T.CHAT_INBOX_ROW)
+      if ((await rows.length) <= i) break
+      await rows[i]!.click()
+      await waitForTestID(T.CHAT_MESSAGE_LIST, 5000)
+      if (await anyExist(T.CHAT_ATTACHMENT_IMAGE, 2500)) {
+        const images = els(T.CHAT_ATTACHMENT_IMAGE)
+        await images[(await images.length) - 1]!.click()
+        await waitForTestID(T.CHAT_ATTACHMENT_FULLSCREEN, 8000)
+        await expect(el(T.CHAT_ATTACHMENT_FULLSCREEN)).toExist()
+        return
+      }
+      await goBack()
+      await waitForTestID(T.CHAT_INBOX_LIST, 5000)
+    }
+  })
+
+  it('settings advanced scrolled', async () => {
+    await escapeToTabs()
+    await navigateToMore()
+    await tapSettingsRow('Advanced')
+    await waitForTestID(T.SETTINGS_ADVANCED, 5000)
+    await swipeContentUp(4)
+    await expect(el(T.SETTINGS_ADVANCED)).toExist()
+  })
+
+  it('files folder overflow menu', async () => {
+    await escapeToTabs()
+    await navigateToFiles()
+    // the native More menu only exists inside a TLF (hidden at the files root)
+    if (!(await anyExist(T.FILES_TLF_ROW, 5000))) return
+    await els(T.FILES_TLF_ROW)[0]!.click()
+    await browser.pause(1000)
+    const more = el('More')
+    if (!(await more.waitForExist({timeout: 4000}).then(() => true).catch(() => false))) return
+    await more.click()
+    await browser.pause(800)
+    await expect(el(T.FILES_BROWSER)).toExist()
+  })
+
+  it('account switcher', async () => {
+    await escapeToTabs()
+    await navigateToPeople()
+    await el(T.PEOPLE_HEADER_AVATAR).click()
+    await byText('Log in as another user').waitForExist({timeout: 8000})
+    await expect(byText('Log in as another user')).toExist()
+  })
+
+  it('emoji picker', async () => {
+    await escapeToTabs()
+    if (!(await openFirstConversation())) return
+    await waitForTestID(T.CHAT_EMOJI_BUTTON, 5000)
+    await el(T.CHAT_EMOJI_BUTTON).click()
+    await waitForTestID(T.CHAT_EMOJI_PICKER, 8000)
+    await expect(el(T.CHAT_EMOJI_PICKER)).toExist()
+  })
+
+  it('command suggestions popup', async () => {
+    await escapeToTabs()
+    if (!(await openFirstConversation())) return
+    await waitForTestID(T.CHAT_INPUT, 5000)
+    await enterText(T.CHAT_INPUT, '/')
+    await waitForTestID(T.CHAT_SUGGESTION_LIST, 8000)
+    await expect(el(T.CHAT_SUGGESTION_LIST)).toExist()
+  })
+
+  it('command suggestions cleanup', async () => {
+    await escapeToTabs()
+    if (!(await openFirstConversation())) return
+    await waitForTestID(T.CHAT_INPUT, 5000)
+    await el(T.CHAT_INPUT).clearValue()
+    await browser.pause(500)
+    await expect(el(T.CHAT_MESSAGE_LIST)).toExist()
+  })
+
+  it('inbox scrolled to bottom', async () => {
+    await escapeToTabs()
+    await tab('Teams').click().catch(() => {})
+    await tabTo('Chat', T.CHAT_INBOX_LIST)
+    await swipeContentUp(5)
+    await expect(el(T.CHAT_INBOX_LIST)).toExist()
+  })
+
+  it('team members scrolled', async () => {
+    await escapeToTabs()
+    await navigateToTeams()
+    await waitForTestID(T.TEAMS_ROW, 8000)
+    await els(T.TEAMS_ROW)[0]!.click()
+    await tapForTestID(T.TEAMS_TAB_MEMBERS_BUTTON, T.TEAMS_MEMBER_LIST, {timeout: 10000})
+    await swipeContentUp(4)
+    await expect(el(T.TEAMS_MEMBER_LIST)).toExist()
+  })
+
+  it('settings notifications scrolled', async () => {
+    await escapeToTabs()
+    await navigateToMore()
+    await scrollDownToText('Notifications')
+    await byText('Notifications').click()
+    await waitForTestID(T.SETTINGS_NOTIFICATIONS, 5000)
+    await swipeContentUp(4)
+    await expect(el(T.SETTINGS_NOTIFICATIONS)).toExist()
+  })
+
+  it('edit team info modal', async () => {
+    await escapeToTabs()
+    await navigateToTeams()
+    await waitForTestID(T.TEAMS_ROW, 8000)
+    await els(T.TEAMS_ROW)[0]!.click()
+    const edit = byText('Edit')
+    if (!(await edit.waitForExist({timeout: 5000}).then(() => true).catch(() => false))) return
+    await edit.click()
+    await byText('Save').waitForExist({timeout: 5000})
+    await expect(byText('Save')).toExist()
+  })
+
+  it('team add members wizard', async () => {
+    await escapeToTabs()
+    await navigateToTeams()
+    await waitForTestID(T.TEAMS_ROW, 8000)
+    await els(T.TEAMS_ROW)[0]!.click()
+    const addButton = byText('Add/Invite people')
+    if (!(await addButton.waitForExist({timeout: 5000}).then(() => true).catch(() => false))) {
+      await goBack()
+      return
+    }
+    await addButton.click()
+    await byText('A list of email addresses').waitForExist({timeout: 5000})
+    await expect(byText('A list of email addresses')).toExist()
+  })
+})
diff --git a/shared/tests/e2e/ios-appium/helpers/elements.ts b/shared/tests/e2e/ios-appium/helpers/elements.ts
index d427676cff5e..311ab79b2399 100644
--- a/shared/tests/e2e/ios-appium/helpers/elements.ts
+++ b/shared/tests/e2e/ios-appium/helpers/elements.ts
@@ -165,7 +165,18 @@ export const byText = (text: string): ChainablePromiseElement => {
 }
 
 // Tab-bar buttons. iOS exposes the native UITabBarItem by its title as the
-// accessibility id; Android's RN tab bar exposes the label as visible text /
-// content-desc, so reuse byText there.
+// accessibility id. Android's tab bar is a native Material BottomNavigationView:
+// target the ITEM view via its content-desc — the label, plus an optional badge
+// suffix ("Chat, 1 new notification"), hence the anchored regex. Not the label
+// TextViews: each item keeps BOTH a small and large label view (selected vs not)
+// and UiSelector also matches the currently-invisible twin, whose bogus bounds
+// make the click silently no-op. The className pins it to the NATIVE item
+// (FrameLayout): RN touchables surface as android.view.ViewGroup, and the
+// settings root's "Files"/"Chat" rows carry the same content-desc — without the
+// class filter the row wins the match and the tap opens the settings subpage.
 export const tab = (label: string): ChainablePromiseElement =>
-  browser.isAndroid ? byText(label) : browser.$(`~${label}`)
+  browser.isAndroid
+    ? browser.$(
+        `android=new UiSelector().className("android.widget.FrameLayout").descriptionMatches("^${label}(,.*)?$")`
+      )
+    : browser.$(`~${label}`)
diff --git a/shared/tests/e2e/ios-appium/helpers/navigate.ts b/shared/tests/e2e/ios-appium/helpers/navigate.ts
index eec3546c8126..2733c1b725e2 100644
--- a/shared/tests/e2e/ios-appium/helpers/navigate.ts
+++ b/shared/tests/e2e/ios-appium/helpers/navigate.ts
@@ -22,23 +22,55 @@ async function scrollUpUntil(visible: () => Promise<boolean>, maxSwipes: number)
   }
 }
 
+// Android: uiautomator's tree only contains ON-SCREEN views (unlike XCUITest,
+// which exposes below-the-fold rows), so a byText tap on an off-screen settings
+// row simply never finds it. UiScrollable.scrollIntoView scrolls the first
+// scrollable on screen in BOTH directions until the target is visible — also
+// covering the case where a prior test left the list scrolled down.
+async function androidScrollIntoView(uiSelector: string): Promise<void> {
+  await browser
+    .$(`android=new UiScrollable(new UiSelector().scrollable(true)).scrollIntoView(${uiSelector})`)
+    .waitForExist({timeout: 10000})
+    .catch(() => {})
+}
+
 export async function scrollToTestID(id: string, maxSwipes = 8): Promise<void> {
+  if (browser.isAndroid) {
+    await androidScrollIntoView(`new UiSelector().resourceId("${id}")`)
+    return
+  }
   await scrollUpUntil(async () => el(id).isDisplayed().catch(() => false), maxSwipes)
 }
 
 export async function scrollDownToText(text: string, maxSwipes = 8): Promise<void> {
+  if (browser.isAndroid) {
+    await androidScrollIntoView(`new UiSelector().textContains("${text}")`)
+    return
+  }
   await scrollUpUntil(async () => byText(text).isDisplayed().catch(() => false), maxSwipes)
 }
 
+// Tap a settings-root row by its label, scrolling it into view first: Android's
+// uiautomator tree omits off-screen rows (and a prior test may have left the
+// list scrolled), while on iOS the scroll no-ops when the row is already
+// visible. Use this for every row tap that follows navigateToMore.
+export async function tapSettingsRow(text: string): Promise<void> {
+  await scrollDownToText(text)
+  await byText(text).click()
+}
+
 // True once we're at the root of a tab. The tab bar alone isn't proof: on iPad
 // it stays visible inside pushed stack screens, so also require that no back
 // button (app-custom or native) is present.
 async function atTabs(): Promise<boolean> {
   if (browser.isAndroid) {
-    // Android tab labels are text/content-desc, not resource-id testIDs, so use
-    // tab() (byText) not els(). At a tab root the People tab shows and there's
-    // no app back button nor a native toolbar up-affordance.
+    // tab() scopes to the native BottomNavigationView's label resource-ids with
+    // EXACT text — a looser contains-match gets fooled by screen content (the
+    // emoji picker's "Smileys & People" category once made atTabs report true
+    // and stranded an entire run on the picker). Require two labels so a single
+    // stray match can't fake a root.
     if (!(await tab('People').isExisting().catch(() => false))) return false
+    if (!(await tab('More').isExisting().catch(() => false))) return false
     if ((await els(T.COMMON_BACK_BUTTON).length) > 0) return false
     return (await browser.$$('//*[@content-desc="Navigate up" or @content-desc="Back"]').length) === 0
   }
@@ -96,8 +128,10 @@ async function tapNavBack(requireLeftEdge = false): Promise<boolean> {
 // swipe. Try each, re-checking for the tab bar, until we're home.
 // One predicate for any modal/sheet dismiss control (Done/Close/Cancel), any
 // element type — cheaper than three separate searches.
+// visible == 1: hidden nav-stack screens and keyboard toolbars can carry their
+// own Done/Close/Cancel — clicking one is a silent no-op that loops forever.
 const DISMISS_PRED =
-  '-ios predicate string:label CONTAINS "Done" OR name CONTAINS "Done" OR label CONTAINS "Close" OR name CONTAINS "Close" OR label CONTAINS "Cancel" OR name CONTAINS "Cancel"'
+  '-ios predicate string:(label CONTAINS "Done" OR name CONTAINS "Done" OR label CONTAINS "Close" OR name CONTAINS "Close" OR label CONTAINS "Cancel" OR name CONTAINS "Cancel") AND visible == 1'
 
 // Wait for a tapped control to take effect — return as soon as the tab bar
 // appears OR the control we clicked is gone (the screen transitioned). No fixed
@@ -121,22 +155,51 @@ export async function escapeToTabs(): Promise<void> {
   // background/exit the app).
   if (browser.isAndroid) {
     for (let i = 0; i < 12; i++) {
+      // A back pressed AT the root exits the app (screens can also settle slower
+      // than the wait below, making the loop overshoot) — if that happened,
+      // bring the existing task back to the foreground instead of pressing
+      // back on the launcher. activateApp moves the running process forward;
+      // it does NOT relaunch it (a relaunch would reload from Metro and can
+      // land on a dead blank RN root).
+      const pkg = await browser.getCurrentPackage().catch(() => '')
+      if (pkg && pkg !== 'io.keybase.ossifrage') {
+        await browser.activateApp('io.keybase.ossifrage').catch(() => {})
+        await browser.waitUntil(async () => atTabs(), {timeout: 5000, interval: 250}).catch(() => {})
+        continue
+      }
       if (await atTabs()) return
       await browser.back()
-      await browser.waitUntil(async () => atTabs(), {timeout: 1500, interval: 80}).catch(() => {})
+      // Short fixed settle for the pop animation, then loop back to the atTabs
+      // check (itself a slow full-tree query, adding natural pacing). A back
+      // pressed one screen too early is recovered by the foreground guard above,
+      // so a long per-hop wait would only tax multi-hop resets.
+      await browser.pause(800)
     }
     throw new Error('escapeToTabs(android): root tab bar not reached after 12 attempts')
   }
   for (let i = 0; i < 10; i++) {
     if (await atTabs()) return
+    // Past the first few hops something is off — narrate each step so a stall
+    // is diagnosable from the console instead of looking like a silent hang.
+    const debug = i >= 3
     // Dismiss a modal/sheet FIRST (e.g. the crypto output modal). A modal can
     // also have a back button, and tapping back on it is a no-op that loops —
     // so its Done/Close/Cancel must win.
     if ((await browser.$$(DISMISS_PRED).length) > 0) {
       const ctrl = browser.$$(DISMISS_PRED)[0]!
+      // eslint-disable-next-line no-console
+      if (debug) console.log(`  escapeToTabs[${i}]: dismissing "${await ctrl.getAttribute('label').catch(() => '?')}"`)
       await ctrl.click().catch(() => {})
       await settleAfter(ctrl)
-      continue
+      // Only loop when the click actually changed something; a dismiss control
+      // whose click no-ops (still present, still not at tabs) must fall through
+      // to the back/pop path or we'd click it forever.
+      if ((await atTabs()) || !(await ctrl.isExisting().catch(() => false))) continue
+      // eslint-disable-next-line no-console
+      if (debug) console.log(`  escapeToTabs[${i}]: dismiss no-oped, falling through to back/pop`)
+    } else if (debug) {
+      // eslint-disable-next-line no-console
+      console.log(`  escapeToTabs[${i}]: no dismiss control, trying back/pop`)
     }
     if ((await els(T.COMMON_BACK_BUTTON).length) > 0) {
       const ctrl = els(T.COMMON_BACK_BUTTON)[0]!
@@ -232,24 +295,35 @@ export async function goBackUntilGone(markerId: string, tries = 3): Promise<void
 // The iOS tab bar is a NATIVE UITabBar: testIDs (nav-tab-*) do not reach the
 // native UITabBarItems, but their titles do (exposed as the accessibility
 // name/label). So tabs are tapped by visible label, not testID.
+// Tab taps aren't idle-synchronized (waitForIdleTimeout is 0), so a tap can
+// land mid tab-switch and silently no-op — verify the destination marker and
+// re-tap when it doesn't show.
+export async function tabTo(label: string, markerId: string, {taps = 3, timeout = 4000} = {}): Promise<void> {
+  for (let i = 0; i < taps; i++) {
+    await tab(label).click().catch(() => {})
+    const ok = await el(markerId)
+      .waitForExist({timeout, interval: 150})
+      .then(() => true)
+      .catch(() => false)
+    if (ok) return
+  }
+  throw new Error(`tabTo: "${markerId}" never appeared after ${taps} taps on tab "${label}"`)
+}
+
 export async function navigateToPeople(): Promise<void> {
-  await tab('People').click()
-  await waitForTestID(T.PEOPLE_FEED, 5000)
+  await tabTo('People', T.PEOPLE_FEED)
 }
 
 export async function navigateToChat(): Promise<void> {
-  await tab('Chat').click()
-  await waitForTestID(T.CHAT_INBOX_LIST, 5000)
+  await tabTo('Chat', T.CHAT_INBOX_LIST)
 }
 
 export async function navigateToFiles(): Promise<void> {
-  await tab('Files').click()
-  await waitForTestID(T.FILES_BROWSER, 5000)
+  await tabTo('Files', T.FILES_BROWSER)
 }
 
 export async function navigateToTeams(): Promise<void> {
-  await tab('Teams').click()
-  await waitForTestID(T.TEAMS_LIST, 3000)
+  await tabTo('Teams', T.TEAMS_LIST)
 }
 
 // The "More" tab surfaces Crypto / Git / Devices / Settings under its stack.
diff --git a/shared/tests/e2e/ios-appium/wdio.android.conf.ts b/shared/tests/e2e/ios-appium/wdio.android.conf.ts
index be5ea5ffd9c5..394504e37484 100644
--- a/shared/tests/e2e/ios-appium/wdio.android.conf.ts
+++ b/shared/tests/e2e/ios-appium/wdio.android.conf.ts
@@ -21,7 +21,8 @@ export const config: WebdriverIO.Config = {
   port,
   path: '/',
   // One aggregate file → one session for the whole suite (see all.test.ts).
-  specs: ['./all.test.ts'],
+  // KB_ANDROID_SPEC: run a single flow file instead, for fast iteration.
+  specs: [process.env['KB_ANDROID_SPEC'] ?? './all.test.ts'],
   maxInstances: 1,
   capabilities: [androidCapabilities(serial)],
   logLevel: 'warn',
@@ -34,12 +35,23 @@ export const config: WebdriverIO.Config = {
   services: [['appium', {args: {basePath: '/', port}}]],
   // The app restores its last screen on launch and screens leak between specs,
   // so reset to the root tab bar before each test by climbing out of any stack.
-  beforeTest: async () => {
+  beforeTest: async test => {
+    // eslint-disable-next-line no-console
+    console.log(`▶ ${new Date().toLocaleTimeString()} starting: ${test.title}`)
+    // KB_SKIP_RESET: for probe/debug specs that must run even when the reset
+    // itself is what's broken.
+    if (process.env['KB_SKIP_RESET']) return
     await escapeToTabs()
+    // eslint-disable-next-line no-console
+    console.log(`  ${new Date().toLocaleTimeString()} at tab root, running: ${test.title}`)
   },
   // Emit a screenshot + status json per test so generate-appium-report.mts can
   // build the unified HTML report (one card per test).
   afterTest: async (test, _context, result: {passed: boolean; duration: number; error?: Error}) => {
+    // eslint-disable-next-line no-console
+    console.log(
+      `${result.passed ? '✓' : '✗'} ${new Date().toLocaleTimeString()} ${test.title} (${(result.duration / 1000).toFixed(1)}s)`
+    )
     fs.mkdirSync(debugDir, {recursive: true})
     const slug = `${test.parent} ${test.title}`.replace(/[^\w]+/g, '-').replace(/^-|-$/g, '')
     const screenshotPath = path.join(debugDir, `${slug}.png`)
diff --git a/shared/tests/e2e/ios-appium/wdio.conf.ts b/shared/tests/e2e/ios-appium/wdio.conf.ts
index 51ff36feb46c..4195cfe40064 100644
--- a/shared/tests/e2e/ios-appium/wdio.conf.ts
+++ b/shared/tests/e2e/ios-appium/wdio.conf.ts
@@ -38,7 +38,8 @@ export const config: WebdriverIO.Config = {
   port,
   path: '/',
   // One aggregate file → one session for the whole suite (see all.test.ts).
-  specs: ['./all.test.ts'],
+  // KB_IOS_SPEC overrides for fast single-flow iteration during development.
+  specs: [process.env['KB_IOS_SPEC'] ?? './all.test.ts'],
   maxInstances: 1,
   capabilities: [iosCapabilities(udid, {wdaLocalPort, prebuilt: !isOld, derivedDataPath})],
   logLevel: 'warn',
@@ -60,12 +61,24 @@ export const config: WebdriverIO.Config = {
   // The app restores its last screen on launch and screens leak between specs,
   // so reset to the root tab bar before each test by climbing out of any stack.
   // (Cheaper + more reliable than a cold relaunch, which also restores state.)
-  beforeTest: async () => {
+  beforeTest: async test => {
+    // eslint-disable-next-line no-console
+    console.log(`▶ ${new Date().toLocaleTimeString()} starting: ${test.title}`)
     await escapeToTabs()
   },
+  // Tests deliberately END on the state they capture (often an open modal), so
+  // park the app back at the tab root when the session closes — otherwise the
+  // last test's modal is what you find on the simulator after a run.
+  after: async () => {
+    await escapeToTabs().catch(() => {})
+  },
   // Emit a screenshot + status json per test so generate-appium-report.mts can
   // build the unified HTML report (one card per test).
   afterTest: async (test, _context, result: {passed: boolean; duration: number; error?: Error}) => {
+    // eslint-disable-next-line no-console
+    console.log(
+      `${result.passed ? '✓' : '✗'} ${new Date().toLocaleTimeString()} ${test.title} (${(result.duration / 1000).toFixed(1)}s)`
+    )
     fs.mkdirSync(debugDir, {recursive: true})
     const slug = `${test.parent} ${test.title}`.replace(/[^\w]+/g, '-').replace(/^-|-$/g, '')
     const screenshotPath = path.join(debugDir, `${slug}.png`)
diff --git a/shared/tests/e2e/shared/test-ids.ts b/shared/tests/e2e/shared/test-ids.ts
index d213193318b3..9b4f455421a5 100644
--- a/shared/tests/e2e/shared/test-ids.ts
+++ b/shared/tests/e2e/shared/test-ids.ts
@@ -17,6 +17,17 @@ export const CHAT_INBOX_ROW    = 'chat-inbox-row'
 export const CHAT_MESSAGE_LIST = 'chat-message-list'
 export const CHAT_INPUT        = 'chat-input'
 export const CHAT_SEND_BUTTON  = 'chat-send-button'
+export const CHAT_INFO_PANEL   = 'chat-info-panel'
+export const CHAT_EMOJI_PICKER = 'chat-emoji-picker'
+export const CHAT_ATTACHMENT_IMAGE      = 'chat-attachment-image'
+export const CHAT_ATTACHMENT_FULLSCREEN = 'chat-attachment-fullscreen'
+export const CHAT_BOT_ROW               = 'chat-bot-row'
+export const CHAT_SUGGESTION_LIST       = 'chat-suggestion-list'
+export const CHAT_EMOJI_BUTTON          = 'chat-emoji-button'
+export const CHAT_INFO_PANEL_SETTINGS_TAB = 'chat-info-panel-settings-tab'
+// Android only: iOS 26 folds Search/Info into one native "More" header menu,
+// but the Android header keeps the plain info icon — icons have no tappable text
+export const CHAT_HEADER_INFO_BUTTON = 'chat-header-info-button'
 
 // Files
 export const FILES_BROWSER = 'files-browser'
@@ -63,6 +74,7 @@ export const SETTINGS_SCREENPROTECTOR   = 'settings-screenprotector'
 
 // People
 export const PEOPLE_FEED = 'people-feed'
+export const PEOPLE_HEADER_AVATAR = 'people-header-avatar'
 
 // Profile
 export const PROFILE_PAGE = 'profile-page'
diff --git a/shared/tracker/assertion.tsx b/shared/tracker/assertion.tsx
index db8987ca41f6..77950aa739b4 100644
--- a/shared/tracker/assertion.tsx
+++ b/shared/tracker/assertion.tsx
@@ -4,7 +4,7 @@ import {useCurrentUserState} from '@/stores/current-user'
 import * as T from '@/constants/types'
 import {openURL as openUrl} from '@/util/misc'
 import * as Kb from '@/common-adapters'
-import {SiteIcon} from '@/profile/generic/shared'
+import {SiteIcon} from '@/profile/generic/site-icon'
 import {formatTimeForAssertionPopup} from '@/util/timestamp'
 import {useColorScheme} from 'react-native'
 import {navToProfile} from '@/constants/router'
diff --git a/shared/tracker/main.desktop.tsx b/shared/tracker/main.desktop.tsx
deleted file mode 100644
index d92ac3514cb7..000000000000
--- a/shared/tracker/main.desktop.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-// Entry point for the tracker render window
-import '../desktop/renderer/globals.desktop'
-import {waitOnKB2Loaded} from '@/util/electron'
-waitOnKB2Loaded(() => {
-  import('./main2.desktop').then(() => {}).catch(() => {})
-})
diff --git a/shared/tracker/main2.desktop.tsx b/shared/tracker/main2.desktop.tsx
index a634e52e54f6..4bef4591bb68 100644
--- a/shared/tracker/main2.desktop.tsx
+++ b/shared/tracker/main2.desktop.tsx
@@ -4,7 +4,6 @@ import * as R from '@/constants/remote'
 import * as RemoteGen from '../constants/remote-actions'
 import Tracker from './index.desktop'
 import loadRemoteComponent from '../desktop/remote/component-loader.desktop'
-import {getRemoteComponentParam, RemoteDarkModeSync} from '../desktop/remote/remote-component.desktop'
 import type {Props as TrackerProps} from './index.desktop'
 import KB2 from '@/util/electron'
 
@@ -13,41 +12,38 @@ const {closeWindow} = KB2.functions
 type ProxyProps = Omit<TrackerProps, 'onAccept' | 'onChat' | 'onClose' | 'onFollow' | 'onIgnoreFor24Hours' | 'onReload'>
 
 const RemoteTracker = (p: ProxyProps) => (
-  <RemoteDarkModeSync darkMode={p.darkMode}>
-    <Tracker
-      {...p}
-      onAccept={() => R.remoteDispatch(RemoteGen.createTrackerChangeFollow({follow: true, guiID: p.guiID}))}
-      onChat={() => {
-        R.remoteDispatch(RemoteGen.createShowMain())
-        R.remoteDispatch(RemoteGen.createPreviewConversation({participant: p.trackerUsername}))
-      }}
-      onClose={() => {
-        R.remoteDispatch(RemoteGen.createTrackerCloseTracker({guiID: p.guiID}))
-        closeWindow?.()
-      }}
-      onFollow={() => R.remoteDispatch(RemoteGen.createTrackerChangeFollow({follow: true, guiID: p.guiID}))}
-      onIgnoreFor24Hours={() => R.remoteDispatch(RemoteGen.createTrackerIgnore({guiID: p.guiID}))}
-      onReload={() =>
-        R.remoteDispatch(
-          RemoteGen.createTrackerLoad({
-            assertion: p.trackerUsername,
-            forceDisplay: true,
-            fromDaemon: false,
-            guiID: C.generateGUIID(),
-            ignoreCache: true,
-            inTracker: true,
-            reason: '',
-          })
-        )
-      }
-    />
-  </RemoteDarkModeSync>
+  <Tracker
+    {...p}
+    onAccept={() => R.remoteDispatch(RemoteGen.createTrackerChangeFollow({follow: true, guiID: p.guiID}))}
+    onChat={() => {
+      R.remoteDispatch(RemoteGen.createShowMain())
+      R.remoteDispatch(RemoteGen.createPreviewConversation({participant: p.trackerUsername}))
+    }}
+    onClose={() => {
+      R.remoteDispatch(RemoteGen.createTrackerCloseTracker({guiID: p.guiID}))
+      closeWindow?.()
+    }}
+    onFollow={() => R.remoteDispatch(RemoteGen.createTrackerChangeFollow({follow: true, guiID: p.guiID}))}
+    onIgnoreFor24Hours={() => R.remoteDispatch(RemoteGen.createTrackerIgnore({guiID: p.guiID}))}
+    onReload={() =>
+      R.remoteDispatch(
+        RemoteGen.createTrackerLoad({
+          assertion: p.trackerUsername,
+          forceDisplay: true,
+          fromDaemon: false,
+          guiID: C.generateGUIID(),
+          ignoreCache: true,
+          inTracker: true,
+          reason: '',
+        })
+      )
+    }
+  />
 )
 
 loadRemoteComponent<ProxyProps>({
   Component: RemoteTracker,
   component: 'tracker',
-  param: getRemoteComponentParam(),
   style: Kb.Styles.platformStyles({
     isElectron: {
       backgroundColor: Kb.Styles.globalColors.transparent,
diff --git a/shared/tracker/remote-proxy.desktop.tsx b/shared/tracker/remote-proxy.desktop.tsx
index 879a07fc378f..f69fe121b032 100644
--- a/shared/tracker/remote-proxy.desktop.tsx
+++ b/shared/tracker/remote-proxy.desktop.tsx
@@ -5,7 +5,6 @@ import * as T from '@/constants/types'
 import {generateGUIID, ignorePromise} from '@/constants/utils'
 import useSerializeProps from '../desktop/remote/use-serialize-props.desktop'
 import useBrowserWindow from '../desktop/remote/use-browser-window.desktop'
-import {useColorScheme} from 'react-native'
 import {useUsersState} from '@/stores/users'
 import {useFollowerState} from '@/stores/followers'
 import {useCurrentUserState} from '@/stores/current-user'
@@ -67,7 +66,6 @@ const RemoteTracker = (props: {details: T.Tracker.Details; trackerUsername: stri
   const following = useFollowerState(s => s.following)
   const username = useCurrentUserState(s => s.username)
   const httpSrv = useConfigState(s => s.httpSrv)
-  const isDarkMode = useColorScheme() === 'dark'
 
   const windowComponent = 'tracker'
   const windowParam = trackerUsername
@@ -84,7 +82,6 @@ const RemoteTracker = (props: {details: T.Tracker.Details; trackerUsername: stri
       assertions: details.assertions ? [...details.assertions.values()] : undefined,
       bio: details.bio,
       blocked: blockMap.get(trackerUsername)?.chatBlocked || false,
-      darkMode: isDarkMode,
       followThem: following.has(trackerUsername),
       followersCount: details.followersCount,
       followingCount: details.followingCount,
diff --git a/shared/tracker/use-profile.tsx b/shared/tracker/use-profile.tsx
index 396c904abd66..b78f06f8f539 100644
--- a/shared/tracker/use-profile.tsx
+++ b/shared/tracker/use-profile.tsx
@@ -5,6 +5,7 @@ import {generateGUIID, ignorePromise} from '@/constants/utils'
 import {useCurrentUserState} from '@/stores/current-user'
 import {useUsersState} from '@/stores/users'
 import {useEngineActionListener} from '@/engine/action-listener'
+import {produce} from 'immer'
 import logger from '@/logger'
 import {RPCError} from '@/util/errors'
 import {navigateAppend, navigateUp} from '@/constants/router'
@@ -78,7 +79,10 @@ export const useTrackerProfile = (username: string, options?: Options) => {
     }))
   )
   const [details, setDetails] = React.useState<T.Tracker.Details>(() => makeDetails(username))
-  const [nonUserDetails, setNonUserDetails] = React.useState<{details: T.Tracker.NonUserDetails; username: string}>(() => ({
+  const [nonUserDetails, setNonUserDetails] = React.useState<{
+    details: T.Tracker.NonUserDetails
+    username: string
+  }>(() => ({
     details: {...noNonUserDetails},
     username,
   }))
@@ -109,13 +113,15 @@ export const useTrackerProfile = (username: string, options?: Options) => {
       requestVersionRef.current = version
       const preserveExistingData = detailsRef.current.username === username
 
-      setDetails(prev => ({
-        ...(preserveExistingData ? prev : makeDetails(username)),
-        guiID,
-        reason: preserveExistingData && prev.resetBrokeTrack ? prev.reason : '',
-        resetBrokeTrack: preserveExistingData ? prev.resetBrokeTrack : false,
-        state: 'checking',
-      }))
+      setDetails(prev =>
+        produce(preserveExistingData ? prev : makeDetails(username), draft => {
+          draft.guiID = guiID
+          if (!draft.resetBrokeTrack) {
+            draft.reason = ''
+          }
+          draft.state = 'checking'
+        })
+      )
 
       const load = async () => {
         try {
@@ -129,7 +135,11 @@ export const useTrackerProfile = (username: string, options?: Options) => {
             return
           }
           if (error.code === T.RPCGen.StatusCode.scresolutionfailed) {
-            setDetails(prev => ({...prev, state: 'notAUserYet'}))
+            setDetails(
+              produce(draft => {
+                draft.state = 'notAUserYet'
+              })
+            )
             loadNonUserProfile()
           } else if (error.code === T.RPCGen.StatusCode.scnotfound) {
             navigateUp()
@@ -154,11 +164,12 @@ export const useTrackerProfile = (username: string, options?: Options) => {
           if (requestVersionRef.current !== version) {
             return
           }
-          setDetails(prev => ({
-            ...prev,
-            followers: new Set((fs.users ?? []).map(f => f.username)),
-            followersCount: fs.users?.length ?? 0,
-          }))
+          setDetails(
+            produce(draft => {
+              draft.followers = new Set((fs.users ?? []).map(f => f.username))
+              draft.followersCount = fs.users?.length ?? 0
+            })
+          )
           if (fs.users) {
             useUsersState
               .getState()
@@ -181,11 +192,12 @@ export const useTrackerProfile = (username: string, options?: Options) => {
           if (requestVersionRef.current !== version) {
             return
           }
-          setDetails(prev => ({
-            ...prev,
-            following: new Set((fs.users ?? []).map(f => f.username)),
-            followingCount: fs.users?.length ?? 0,
-          }))
+          setDetails(
+            produce(draft => {
+              draft.following = new Set((fs.users ?? []).map(f => f.username))
+              draft.followingCount = fs.users?.length ?? 0
+            })
+          )
           if (fs.users) {
             useUsersState
               .getState()
diff --git a/shared/unlock-folders/main.desktop.tsx b/shared/unlock-folders/main.desktop.tsx
deleted file mode 100644
index f32552456c90..000000000000
--- a/shared/unlock-folders/main.desktop.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-// Entry point for the unlock folders render window
-import '../desktop/renderer/globals.desktop'
-import {waitOnKB2Loaded} from '@/util/electron'
-waitOnKB2Loaded(() => require('./main2.desktop') as () => void)
diff --git a/shared/unlock-folders/main2.desktop.tsx b/shared/unlock-folders/main2.desktop.tsx
index 08f4fcaf1012..ec8daceb6cae 100644
--- a/shared/unlock-folders/main2.desktop.tsx
+++ b/shared/unlock-folders/main2.desktop.tsx
@@ -3,11 +3,9 @@ import * as R from '@/constants/remote'
 import * as RemoteGen from '../constants/remote-actions'
 import UnlockFolders from './index.desktop'
 import loadRemoteComponent from '../desktop/remote/component-loader.desktop'
-import {RemoteDarkModeSync} from '../desktop/remote/remote-component.desktop'
 import type {UnlockFolderDevice} from './store'
 
 export type ProxyProps = {
-  darkMode: boolean
   devices: ReadonlyArray<UnlockFolderDevice>
   paperKeyError: string
   waiting: boolean
@@ -16,7 +14,7 @@ export type ProxyProps = {
 type Phase = 'promptOtherDevice' | 'paperKeyInput' | 'success'
 
 const UnlockFoldersWrapper = (p: ProxyProps) => {
-  const {darkMode, devices, waiting, paperKeyError: _error} = p
+  const {devices, waiting, paperKeyError: _error} = p
   const [phase, setPhase] = React.useState<Phase>('promptOtherDevice')
   const [paperKeyError, setPaperKeyError] = React.useState(_error)
 
@@ -37,21 +35,19 @@ const UnlockFoldersWrapper = (p: ProxyProps) => {
   }, [phase])
 
   return (
-    <RemoteDarkModeSync darkMode={darkMode}>
-      <UnlockFolders
-        devices={devices}
-        waiting={waiting}
-        phase={phase}
-        paperkeyError={paperKeyError}
-        onBackFromPaperKey={() => setPhase('promptOtherDevice')}
-        onClose={() => R.remoteDispatch(RemoteGen.createCloseUnlockFolders())}
-        onContinueFromPaperKey={(paperKey: string) =>
-          R.remoteDispatch(RemoteGen.createUnlockFoldersSubmitPaperKey({paperKey}))
-        }
-        onFinish={() => R.remoteDispatch(RemoteGen.createCloseUnlockFolders())}
-        toPaperKeyInput={() => setPhase('paperKeyInput')}
-      />
-    </RemoteDarkModeSync>
+    <UnlockFolders
+      devices={devices}
+      waiting={waiting}
+      phase={phase}
+      paperkeyError={paperKeyError}
+      onBackFromPaperKey={() => setPhase('promptOtherDevice')}
+      onClose={() => R.remoteDispatch(RemoteGen.createCloseUnlockFolders())}
+      onContinueFromPaperKey={(paperKey: string) =>
+        R.remoteDispatch(RemoteGen.createUnlockFoldersSubmitPaperKey({paperKey}))
+      }
+      onFinish={() => R.remoteDispatch(RemoteGen.createCloseUnlockFolders())}
+      toPaperKeyInput={() => setPhase('paperKeyInput')}
+    />
   )
 }
 
diff --git a/shared/unlock-folders/remote-proxy.desktop.tsx b/shared/unlock-folders/remote-proxy.desktop.tsx
index 0c678752e716..78793b176fce 100644
--- a/shared/unlock-folders/remote-proxy.desktop.tsx
+++ b/shared/unlock-folders/remote-proxy.desktop.tsx
@@ -2,7 +2,6 @@ import * as C from '@/constants'
 import {useEngineActionListener} from '@/engine/action-listener'
 import useBrowserWindow from '../desktop/remote/use-browser-window.desktop'
 import useSerializeProps from '../desktop/remote/use-serialize-props.desktop'
-import {useColorScheme} from 'react-native'
 import {handleUnlockFoldersEngineAction} from './engine-actions.desktop'
 import type {ProxyProps} from './main2.desktop'
 import {useUnlockFoldersState} from './store'
@@ -33,7 +32,6 @@ const UnlockRemoteProxy = () => {
     }))
   )
   const waiting = C.Waiting.useAnyWaiting('unlock-folders:waiting')
-  const isDarkMode = useColorScheme() === 'dark'
 
   useEngineActionListener('keybase.1.rekeyUI.refresh', action => {
     handleUnlockFoldersEngineAction(action, open)
@@ -44,14 +42,7 @@ const UnlockRemoteProxy = () => {
   })
 
   if (devices.length) {
-    return (
-      <UnlockFolders
-        darkMode={isDarkMode}
-        devices={devices}
-        paperKeyError={paperKeyError}
-        waiting={waiting}
-      />
-    )
+    return <UnlockFolders devices={devices} paperKeyError={paperKeyError} waiting={waiting} />
   }
   return null
 }
diff --git a/shared/util/electron.tsx b/shared/util/electron.tsx
index e7c1eba88282..d95be2ac6b00 100644
--- a/shared/util/electron.tsx
+++ b/shared/util/electron.tsx
@@ -79,6 +79,7 @@ export type KB2 = {
     ipcRendererOn?: (channel: string, cb: (event: unknown, action: unknown) => void) => (() => void) | undefined
     hideWindow?: () => void
     getPathType?: (path: string) => Promise<'file' | 'directory'>
+    getRemoteProps?: (windowComponent: string, windowParam: string) => Promise<string>
     // defined for both always
     mainWindowDispatch: (action: Actions) => void
     mainWindowDispatchEngineIncoming?: (data: Uint8Array) => void
diff --git a/shared/util/featured-bots.tsx b/shared/util/featured-bots.tsx
index f80ce95611b0..0e0cd40561f2 100644
--- a/shared/util/featured-bots.tsx
+++ b/shared/util/featured-bots.tsx
@@ -2,6 +2,7 @@ import * as C from '@/constants'
 import * as React from 'react'
 import * as T from '@/constants/types'
 import logger from '@/logger'
+import {useRPCLoad} from '@/util/use-rpc-load'
 
 const featuredBotPageSize = 100
 
@@ -33,39 +34,17 @@ export const getFeaturedSorted = (featuredBots: ReadonlyArray<T.RPCGen.FeaturedB
 }
 
 export const useFeaturedBot = (botUsername?: string) => {
-  const [loadedFeaturedBot, setLoadedFeaturedBot] = React.useState<{
-    bot?: T.RPCGen.FeaturedBot
-    botUsername: string
-  }>()
-  const searchFeaturedBots = C.useRPC(T.RPCGen.featuredBotSearchRpcPromise)
-
-  React.useEffect(() => {
-    if (!botUsername) {
-      return
-    }
-
-    let canceled = false
-    searchFeaturedBots(
-      [{limit: 10, offset: 0, query: botUsername}],
-      result => {
-        if (!canceled) {
-          setLoadedFeaturedBot({bot: pickFeaturedBot(botUsername, result.bots ?? []), botUsername})
-        }
-      },
-      error => {
-        if (!canceled) {
-          logger.info(`Featured bot load failed for ${botUsername}: ${error.message}`)
-        }
-      }
-    )
-    return () => {
-      canceled = true
+  const {data} = useRPCLoad(
+    T.RPCGen.featuredBotSearchRpcPromise,
+    [{limit: 10, offset: 0, query: botUsername ?? ''}],
+    {
+      enabled: !!botUsername,
+      key: botUsername ?? '',
+      map: result => pickFeaturedBot(botUsername ?? '', result.bots ?? []),
+      onError: error => logger.info(`Featured bot load failed for ${botUsername}: ${error.message}`),
     }
-  }, [botUsername, searchFeaturedBots])
-
-  return loadedFeaturedBot && loadedFeaturedBot.botUsername === botUsername
-    ? loadedFeaturedBot.bot
-    : undefined
+  )
+  return botUsername ? data : undefined
 }
 
 export const useFeaturedBotPage = () => {
diff --git a/shared/util/file-url.tsx b/shared/util/file-url.tsx
new file mode 100644
index 000000000000..052f317106b2
--- /dev/null
+++ b/shared/util/file-url.tsx
@@ -0,0 +1,15 @@
+// Desktop: normalize absolute file paths (posix or windows) to encoded file:// URLs
+export const normalizeFilePathURL = (url: string) => {
+  const isWindowsPath = /^[a-zA-Z]:[\\/]/.test(url)
+  if (url.startsWith('/') || isWindowsPath) {
+    let path = url.replace(/\\/g, '/')
+    if (isWindowsPath && !path.startsWith('/')) {
+      path = '/' + path
+    }
+    return encodeURI(`file://${path}`).replace(/#/g, '%23')
+  }
+  if (url.startsWith('file://') && (url.includes(' ') || url.includes('#'))) {
+    return encodeURI(url).replace(/#/g, '%23')
+  }
+  return url
+}
diff --git a/shared/util/use-local-badging.tsx b/shared/util/use-local-badging.tsx
index 75cb97981fd1..31947c08304a 100644
--- a/shared/util/use-local-badging.tsx
+++ b/shared/util/use-local-badging.tsx
@@ -5,6 +5,12 @@ import * as C from '@/constants'
 // On click: clear the badges on the server and remove from things like tabs
 // Keep a local version of this which is only cleared on navigation blur
 const noBadges = new Set<string>()
+
+// share the badged set with rows without prop drilling. Provide `badged` from
+// useLocalBadging at the list level, read with useIsNew in rows
+export const NewItemsContext = React.createContext<ReadonlySet<string>>(noBadges)
+export const useIsNew = (id: string) => React.useContext(NewItemsContext).has(id)
+
 export const useLocalBadging = (storeSet: ReadonlySet<string> | undefined, clearStoreBadges: () => void) => {
   const [badged, setBadged] = React.useState(storeSet?.size ? storeSet : noBadges)
 
diff --git a/shared/util/use-rpc-load.tsx b/shared/util/use-rpc-load.tsx
new file mode 100644
index 000000000000..498ba2e9404b
--- /dev/null
+++ b/shared/util/use-rpc-load.tsx
@@ -0,0 +1,127 @@
+import * as React from 'react'
+import * as C from '@/constants'
+import type {RPCError} from './errors'
+
+type Options<RESULT, DATA> = {
+  /** skips the mount/focus/key auto-load when false, checked when the trigger fires. reload() ignores this */
+  enabled?: boolean
+  /**
+   * correlate results with the param they were requested for. data/error only
+   * surface while the key still matches, and the load auto-refires when the
+   * key changes (unless when is 'manual'). Don't combine with when: 'focus'
+   */
+  key?: string
+  /** turn the raw rpc result into the data you want to keep */
+  map: (result: RESULT) => DATA
+  onError?: (error: RPCError) => void
+  /** called after a successful load, with the mapped data */
+  onResult?: (data: DATA) => void
+  /** when to load: on mount (default), on every screen focus, or only via reload(). Fixed at mount */
+  when?: 'mount' | 'focus' | 'manual'
+}
+
+/**
+ * Load data via an rpc and keep it in local state. Wraps the common
+ * useRPC + useState + load-on-mount/focus dance. Like useRPC this skips the
+ * state layer entirely; pass a waitingKey inside `args` if you want spinners
+ * driven by the waiting store.
+ * @returns data: mapped result of the last successful load (for the current key, if keyed)
+ * @returns error: error from the last load, cleared on the next success
+ * @returns loaded: true once a load attempt finished (success or error; for the current key, if keyed)
+ * @returns loading: enabled and no finished attempt yet, spinner-friendly
+ * @returns loadCount: number of successful loads, useful as a refresh token
+ * @returns reload: kick off a load manually
+ * @returns setData: overwrite data locally, for optimistic updates; the next load result wins
+ */
+export function useRPCLoad<F extends (...rest: any[]) => Promise<any>, DATA>(
+  call: F,
+  args: Parameters<F>,
+  opts: Options<Awaited<ReturnType<F>>, DATA>
+) {
+  const {enabled = true, key, map, onError, onResult, when = 'mount'} = opts
+  const [state, setState] = React.useState<{
+    data?: DATA
+    dataKey?: string
+    error?: RPCError
+    errorKey?: string
+    loadCount: number
+    loaded: boolean
+  }>({loadCount: 0, loaded: false})
+
+  // ignore out-of-order responses when reload fires while a load is in flight
+  const requestID = React.useRef(0)
+  const load = React.useEffectEvent(() => {
+    const id = ++requestID.current
+    const keyAtCall = key
+    call(...args)
+      .then((result: Awaited<ReturnType<F>>) => {
+        if (requestID.current !== id) return
+        const data = map(result)
+        setState(s => ({
+          data,
+          dataKey: keyAtCall,
+          error: undefined,
+          errorKey: undefined,
+          loadCount: s.loadCount + 1,
+          loaded: true,
+        }))
+        onResult?.(data)
+      })
+      .catch((error: RPCError) => {
+        if (requestID.current !== id) return
+        setState(s => ({...s, error, errorKey: keyAtCall, loaded: true}))
+        onError?.(error)
+      })
+  })
+
+  const setData = React.useEffectEvent(
+    (next: DATA | undefined | ((prev: DATA | undefined) => DATA | undefined)) => {
+      const keyNow = key
+      setState(s => {
+        const prev = key !== undefined && s.dataKey !== keyNow ? undefined : s.data
+        return {
+          ...s,
+          data: typeof next === 'function' ? (next as (p: DATA | undefined) => DATA | undefined)(prev) : next,
+          dataKey: keyNow,
+        }
+      })
+    }
+  )
+
+  const autoLoad = React.useEffectEvent(() => {
+    if (enabled) load()
+  })
+  // `when` and key-presence are locked at mount so the subscriptions stay stable
+  const [onMountOrFocus] = React.useState(() => ({
+    focus: () => {
+      if (when === 'focus') autoLoad()
+      return undefined
+    },
+    mount: () => {
+      // keyed loads fire from the key effect below instead
+      if (when === 'mount' && key === undefined) autoLoad()
+    },
+  }))
+  C.useOnMountOnce(onMountOrFocus.mount)
+  C.Router2.useSafeFocusEffect(onMountOrFocus.focus)
+  const keyed = key !== undefined
+  React.useEffect(() => {
+    if (keyed && when !== 'manual') autoLoad()
+  }, [keyed, when, key])
+
+  const data = keyed ? (state.dataKey === key ? state.data : undefined) : state.data
+  const error = keyed ? (state.errorKey === key ? state.error : undefined) : state.error
+  const loaded = keyed
+    ? state.dataKey === key || (state.error !== undefined && state.errorKey === key)
+    : state.loaded
+
+  return {
+    data,
+    error,
+    loadCount: state.loadCount,
+    loaded,
+    loading: enabled && !loaded,
+    reload: load,
+    setData,
+  }
+}