Skip to content

fix(web): iOS prechat safe-area + back-nav persistence (LUM-1763) #31416

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ashleeradka merged 2 commits into from
May 21, 2026
Merged

fix(web): iOS prechat safe-area + back-nav persistence (LUM-1763) #31416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab4f542
fix(web): iOS onboarding safe-area + back-nav persistence in prechat …
claude May 21, 2026
279c1e2
chore(web): extract goToVibeStep closure (review feedback)
claude May 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 39 additions & 4 deletions apps/web/src/domains/onboarding/pages/pre-chat-flow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,19 @@ export function PreChatFlow() {
(isIOSWeb && !readIOSAppDownloaded()) ||
(isMacOSWeb && !readMacOsAppDownloaded());

const [screen, setScreen] = useState<Screen>(0);
// Native pre-chat restores its position across reloads via sessionStorage
// — without this, an iOS user who's tapped through to the vibe step and
// hot-reloads (or returns after the OS reclaims memory) is silently
// dropped back to the name step.
const [screen, setScreen] = useState<Screen>(() => {
try {
const saved = sessionStorage.getItem("prechat_native_screen");
if (saved === "1") return 1;
Comment on lines +81 to +82
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot May 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Scope native prechat resume state to the active user

Reading prechat_native_screen unconditionally from sessionStorage means a stale value from a prior onboarding attempt can skip the name step for a different login in the same webview session (for example, user A reaches vibe step, logs out, then user B logs in and lands directly on vibe). Because the key is not user-scoped or cleared on auth transitions, this introduces cross-session state leakage in onboarding flow progression.

Useful? React with 👍 / 👎.

Copy link
Copy Markdown
Contributor Author

@ashleeradka ashleeradka May 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch — real concern. This PR merged before I could push the fix, so I opened #31431 to address it: the persisted key is now prechat_native_screen:${userId}, the read moves into a useLayoutEffect keyed on the user-scoped key (so the restore runs once userId is known, before paint), and all write/clear sites use the same scoped key. If user B logs in after user A left a stale key behind, they read their own key (which doesn't exist) and start at the name step.

Generated by Claude Code

} catch {
// sessionStorage can throw under privacy modes — ignore.
}
return 0;
});
const [selectedTools, setSelectedTools] = useState<Set<string>>(
() => new Set(),
);
Expand Down Expand Up @@ -190,15 +202,26 @@ export function PreChatFlow() {
// ── iOS native flow: NameStep → VibeStep → Privacy → Hatching → Chat ──
if (isNative) {
if (screen === 0) {
// Both Continue and Skip advance to the vibe step and persist the
// position so the user lands back here on reload — shared closure
// keeps the two callsites from drifting.
const goToVibeStep = () => {
setScreen(1);
try {
sessionStorage.setItem("prechat_native_screen", "1");
} catch {
// ignore — see initial-state comment.
}
};
return (
<NameStepScreen
userName={userName}
assistantName={assistantName}
displayedAssistantNames={displayedAssistantNames}
onUserNameChange={handleUserNameChange}
onAssistantNameChange={setAssistantName}
onContinue={() => setScreen(1)}
onSkip={() => setScreen(1)}
onContinue={goToVibeStep}
onSkip={goToVibeStep}
currentStep={0}
totalSteps={IOS_TOTAL_STEPS}
/>
Expand All @@ -223,13 +246,25 @@ export function PreChatFlow() {
if (trimmedAssistant) {
setPendingAssistantName(trimmedAssistant);
}
try {
sessionStorage.removeItem("prechat_native_screen");
} catch {
// ignore — see initial-state comment.
}
void navigate(routes.onboarding.privacy);
};
return (
<VibeStepScreen
selectedGroupId={selectedGroupId}
onGroupChange={setSelectedGroupId}
onBack={() => setScreen(0)}
onBack={() => {
setScreen(0);
try {
sessionStorage.removeItem("prechat_native_screen");
} catch {
// ignore — see initial-state comment.
}
}}
onContinue={finishNativePreChat}
onSkip={finishNativePreChat}
currentStep={1}
Expand Down
11 changes: 9 additions & 2 deletions apps/web/src/domains/onboarding/screens/name-step-screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,15 @@ export function NameStepScreen({
<OnboardingLayout>
<div className="mx-auto flex min-h-screen w-full max-w-md flex-col px-6 pb-40 text-[var(--content-default)]">
<div
className="grid w-full grid-cols-[auto_1fr_auto] items-center pb-4 pt-4"
style={{ animation: "fadeInUp 0.3s ease-out 0.1s both" }}
className="grid w-full grid-cols-[auto_1fr_auto] items-center pb-4"
style={{
// Respect the iOS safe-area inset on top of the standard
// 1rem padding so the header clears the status bar / Dynamic
// Island instead of sliding under it.
paddingTop:
"calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 1rem)",
animation: "fadeInUp 0.3s ease-out 0.1s both",
}}
>
{onBack ? (
<Button
Expand Down
10 changes: 8 additions & 2 deletions apps/web/src/domains/onboarding/screens/vibe-step-screen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,14 @@ export function VibeStepScreen({
<OnboardingLayout>
<div className="mx-auto flex min-h-screen w-full max-w-md flex-col px-6 pb-40 text-[var(--content-default)]">
<div
className="grid w-full grid-cols-[auto_1fr_auto] items-center pb-4 pt-4"
style={{ animation: "fadeInUp 0.3s ease-out 0.1s both" }}
className="grid w-full grid-cols-[auto_1fr_auto] items-center pb-4"
style={{
// Match name-step's safe-area handling — iOS status bar /
// Dynamic Island would otherwise overlap the back button row.
paddingTop:
"calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 1rem)",
animation: "fadeInUp 0.3s ease-out 0.1s both",
}}
>
<Button
variant="ghost"
Expand Down