X Recall

User Flow

End-to-end journey from app open through feed scroll, AI classification, library management, and correction loop

View live prototype GitHub repo
AInitialization
On every app load
Does localStorage have saved data?
Yes — load persisted state No — load seed demo data
Returning user
Reads all three localStorage keys. Restores exact bookmarks, folders, and correction history from last session. Seed data is skipped entirely.
First visit
Loads 40 demo tweets across 5 folders: Dev Resources, Crypto, Design, Automobiles, Sports. Unique avatars per author. Writes to localStorage immediately.
BEntry
1
Feed screen
For You feed loads
User lands on the algorithmic feed. 25 tweets memoized. Ads interleave every 5 tweets. Two tabs available.
  • For You and Following tabs with animated indicator
  • Ads interleaved every 5 tweets with intent signals
  • Stateful like and retweet buttons per tweet
  • iOS status bar, Grok nav icon, profile drawer
  • Three-dot menu: Not interested, Mute, Block, Report
2
Profile drawer
Tap avatar to open drawer
Tapping the top-left avatar slides in the profile drawer. Direct navigation to Library available from here.
  • Verified badge, follower and following counts
  • Nav items: Profile, Lists, Bookmarks, Spaces
  • Bookmarks tap navigates directly to Library
  • Spring animation with backdrop on open and close
CBookmark and AI Classification
3
Core interaction
User taps the bookmark icon
A single tap triggers the entire X Recall system. No folder picker. No modal. No interruption to scroll flow.
  • Bookmark icon fills blue with scale animation
  • Already-bookmarked tweet triggers removal flow
  • AI classification runs synchronously before render
  • No async delay, no setTimeout, no race condition
4
AI engine
Grok classifies the tweet
Three signals run in priority order. Result returned synchronously with category, confidence score, and matched keywords.
  • Signal 1: Learned corrections — checks user history first
  • Signal 2: Semantic analysis — keyword match on content and author
  • Signal 3: Author authority — Bayesian prior from account type
  • Trust score adjusts confidence ceiling dynamically
Confidence threshold
Confidence score 75% or above?
Yes — auto-file to folder No — Unsorted inbox
High confidence path
Tweet filed into matched folder automatically. New folder created and color-assigned if needed. Most recently used folder bubbles to top. Persist to localStorage.
Low confidence path
Tweet routes to Unsorted inbox instead of auto-filing incorrectly. User reviews and moves manually. Every move trains the model for next time.
5
Feedback moment
Toast: "Saved to [Folder]"
Ambient toast confirms classification without interrupting scroll. Tap to navigate to the folder or let it autodismiss after 2.8 seconds.
  • Shows folder name and confidence percentage inline
  • High confidence: "Grok is 84% confident"
  • Low confidence: "AI suggested — tap to change folder"
  • Tapping navigates to Library instantly
  • Autodismiss after 2.8 seconds
  • Removal variant: "Removed from [Folder]"
  • Trust score increases +2 on every accepted save
Zero-click core moment
DLibrary Screen
6
Core screen
Library screen
The organized knowledge library. State loaded from localStorage on mount. Every saved tweet sorted into folders with counts.
  • All tab with total bookmark count badge
  • Folder chips sorted by most recently used
  • Each chip shows tweet count badge
  • Active chip has inline pencil icon for instant rename
  • Semantic search across content, author, and handle
  • Folder chips stay visible during search
  • Tweets sorted by bookmarkedAt descending
  • Reset button: clears localStorage and reloads for demos
7
Folder management
Long press or pencil to manage
Long pressing any folder chip for 650ms opens an action sheet. Pencil icon on active chip opens rename directly.
  • Rename: validates for empty name and duplicates
  • Delete: confirmation step with destructive warning
  • Delete removes all tweets in the folder
  • Auto-navigate away if active folder is deleted
  • All changes persist to localStorage immediately
  • onPointerCancel prevents stuck long press on mobile
EAction Paths in Library
User action in Library
What does the user do next?
Search Tap tweet menu Long press chip Tap bookmark icon
8
Search path
Semantic search
Typing filters across all bookmarks simultaneously regardless of active folder.
  • Filters on content, author name, and handle
  • Cross-folder — all bookmarks at once
  • Folder chips stay visible during search
  • No-results state with suggestion copy
9
Tweet menu path
Tweet action sheet
Three-dot menu opens a bottom sheet: move the tweet or ask why the AI filed it here.
  • Move to another folder — shows all folders with counts
  • Why was this saved here — AI explanation sheet
  • Spring animation on open and close
  • Single ActiveSheet union type — no invalid states
10
Remove path
Remove bookmark
Tapping the filled bookmark icon removes the tweet. Auto-deletes the folder if it was the last tweet.
  • Dispatch REMOVE action to reducer
  • Trust score increases by 2
  • Auto-delete empty folder after removal
  • Persist updated store to localStorage
FCorrection Loop
11
Move flow
Move to a different folder
User moves a tweet to a different folder than the AI chose. Correction is logged, keyword pattern stored, trust score adjusted.
  • Bottom sheet lists all other folders with counts
  • Dispatch MOVE: fromId to toId
  • autoAssigned set to false on the tweet
  • CorrectionRecord written with keyword and timestamp
  • Trust score decreases by 4
  • Persisted to xrecall_corrections in localStorage
  • Toast: "Moved to [Folder]"
12
Explanation flow
AI explanation sheet
Full transparency into why the AI filed a tweet here. Shows the reasoning, confidence, and how to teach it.
  • Category name and matched keywords displayed
  • Animated confidence bar with percentage
  • Current trust score shown
  • Prompt: move the tweet and Grok learns
  • Got it CTA closes and returns to Library
13
Learning system
Correction history closes the loop — persisted across sessions
Every correction is written to localStorage. On next app load, the AI has full memory of your preferences and classifies similar tweets correctly from the first attempt.
  • Correction history is the highest priority signal in the inference engine
  • Matched keyword routes to corrected category at confidence 0.88 to 0.98
  • Trust score rises with accepted saves (+2) and falls with corrections (-4)
  • Persisted to xrecall_corrections — survives page refresh
  • System converges toward accurate classification over time
Live feedback loop — persisted
Phase legend
A–B — Initialization and entry
C — Bookmark and AI classification
D — Library screen
E — Action paths
F — Correction loop
Decision point