---
name: infinibot-mobile-screen-revamp
description: Build or revamp InfiniBot mobile (React Native) screens with cross-device parity via the gateway and themed (non-hex) styling.
---
# InfiniBot Mobile Screen Revamp

## When to use
- User asks to build, revamp, or fix a mobile screen under `mobile/src/screens/` in InfiniBot-fresh.
- A mobile screen shows stale/dummy data (e.g. `value: '—'`) while a desktop UI view of the same feature already works.
- User reports cross-device divergence: a note/database/research item exists on desktop but not on mobile (or vice versa).
- User asks to remove hardcoded colors / apply theme tokens to a mobile screen.

## How to apply
1. **Locate the screen + nav wiring.** Grep `mobile/src/screens/` for the feature name. Check `mobile/App.js` for the stack registration — old screens are often inline functions inside `App.js` that need to be deleted when promoting to a real file.
2. **Find the desktop counterpart's gateway calls.** Look in `ui/src/ui/controllers/<feature>.ts` for the exact gateway method names (e.g. `notes.list`, `notes.get`, `notes.create`, `notes.update`, `notes.delete`). The mobile screen MUST call the same method names — that is what guarantees cross-device parity through `getRoleMode()` in `src/gateway/server-methods/<feature>.ts`.
3. **Wire the mobile screen to those same gateway methods** via whatever gateway client the existing mobile screens use (grep a working screen like `KanbanScreen.js` for the pattern). Do not invent a new endpoint.
4. **Theme everything via `useTheme()`** — pull `colors`, `spacing`, fonts from the hook. Run a grep for `#[0-9a-fA-F]{3,8}` on the changed files and confirm zero matches before finishing.
5. **For markdown rendering**, use `react-native-markdown-display` (already in `mobile/package.json`). Apply theme-tinted styles for headings, code blocks (mono + theme tint), inline code, blockquotes, links (`colors.primary`), tables.
6. **Add the standard mobile screen affordances**: search filter, pull-to-refresh, empty states with CTA, animated list items, relative timestamps. For editors: Edit/Preview segmented toggle with a debounced (~200ms) live preview.
7. **Deep-link support**: read `route.params.<id>` in a `useEffect` and open the matching item — enables Library/list screens to navigate into detail screens.
8. **Verify acceptance** before declaring done: data populates from gateway (same store as desktop), stats render real counts, zero hardcoded hex, only the screen file(s) + `mobile/App.js` nav wiring touched.

## Rules
- Never invent a new gateway endpoint for a mobile screen when a desktop controller already calls one — reuse the exact method name so `getRoleMode()` routes both clients to the same store.
- Never leave hardcoded hex colors in a revamped screen; always pull from `useTheme()`.
- Never leave the old inline screen function in `mobile/App.js` after promoting it to a real file — delete it and import the new screen.
- Never add a markdown library dependency without first checking `mobile/package.json` — `react-native-markdown-display` is already present.
- Always grep both `ui/src/ui/controllers/` and `src/gateway/server-methods/` to confirm the desktop store path before wiring mobile, so you can state the parity guarantee explicitly.
- Always keep the change surface minimal: the screen file(s) and `mobile/App.js` nav wiring — nothing else.