Implementation handoff. Every screen, full resolution, with notes.
Phase 1 of the MJ mobile app. Native iOS & Android via React Native (Expo). Chat is primary — a first-class multi-agent conversation experience with artifacts, designed-for voice. Data Explorer is read-only secondary. This page is the visual contract: the architecture plan, design tokens, data sources, and interaction notes live in README.md. Deviations should be discussed and reflected back into both.
The reason this app exists. Multi-agent conversations, inline artifacts, designed-for voice. The drawer is the global nav root.
B1 · Drawer / nav root
Conversation list
Opens via hamburger or edge-swipe from any conversation. Sectioned by Pinned / Today / Yesterday. Avatar stack on each row shows participating agents. Footer rows link to Data Explorer + Profile.
Composer-first with suggested prompts and agent rail. Default: Skip routes to the right agent. @mention targets a specific agent. Mic enters voice mode.
Fullscreen takeover. Animated orb, waveform, live transcript card. Phase 1 ships the visual scaffold; Phase 2 wires expo-av + Whisper. The chat thread already has a conversation context, so voice doesn't need an agent picker.
Bottom sheet revealed by tapping/dragging the collapsed handle. All artifacts in this conversation. Filter by agent or type. Tap a card to open the artifact detail. Snaps at half- and full-screen.
Shown here: data-table case (the simplest type). Tabs (Data / Chart / JSON), version selector, summary KPIs, sticky bottom bar. Other types render differently — see README §4.3 for the full per-type plan, including the Interactive Component path that reuses @memberjunction/react-runtime.
Key conversation patterns: Top nav is conversation-centric (title + participating-agent avatar stack), never agent-centric. @mention brings any agent into the thread mid-conversation. The artifact dock is collapsed to a thin handle by default — gives back ~56px of thread space vs. always-expanded — and pulses briefly when a new artifact arrives. Voice mode is a peer to text but visually distinct; it's the same conversation, just spoken.
C · Data Explorer (secondary)
Browse, query, view
Read-only surfaces for Phase 1. Entities, Queries, Dashboards. Every screen ends with an "Ask Skip about this" CTA that bridges back to chat with the current context attached.
C1 · Hub
Data Explorer home
Three tiles (Entities / Queries / Dashboards) over a recently-viewed list. Search at top spans all three resource types. Dashboard tile carries an honest "may not render optimally on mobile" caveat.
Cards, never grids. Filter chips persist locally. Sort menu. FAB at bottom right says "Ask Skip about these" — opens a new conversation with the active RunView params as context.
Read-only. Hero card with the most important field huge. Sections: Key details / Owner / Related (counts that drill further). Sticky "Ask Skip about this opportunity" bar at the bottom.
Compact param card at top (chips for active values + Edit/Re-run). Result cards ranked by risk. Risk meter at bottom of each card. Sticky "Ask Skip about these accounts" CTA.
Best-effort render of an existing dashboard. Mobile notice banner at top. Native renderers for KPI grids, line charts, and lists. Desktop-only parts fall back to a stub card with "Open on desktop." Honest about the limitation.
The "Ask Skip" bridge: every Explorer surface ends with a CTA that opens a new conversation seeded with the current context (record reference, query name + params, dashboard reference). This is the bridge that makes Data Explorer relevant on mobile — without it, a phone-sized record view is just a worse desktop view. With it, the user lands on a record, sees something interesting, and immediately can have a conversation about it.
D · Profile
Profile & settings
Identity, preferences, account, sign-out. Some toggles (voice responses, push notifications, biometric lock) are visible in Phase 1 but inert until Phase 2 wires them.