OpenSecretCloud · marksftw · Jul 11, 2026 · Jul 11, 2026 · Jul 12, 2026 · Jul 12, 2026
diff --git a/docs/mobile-navigation-plan.md b/docs/mobile-navigation-plan.md
diff --git a/frontend/index.html b/frontend/index.html
@@ -73,6 +73,7 @@
     />
   </head>
   <body>
+    <div id="maple-native-ios-safe-area-boundary" aria-hidden="true"></div>
     <div id="root" class="h-full"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

diff --git a/frontend/src/components/AccountMenu.tsx b/frontend/src/components/AccountMenu.tsx
@@ -7,9 +7,11 @@ import { CreditUsage } from "@/components/CreditUsage";
 import { useCompactSettingsLayout } from "@/components/settings/useCompactSettingsLayout";
 import { useBillingState } from "@/state/useLocalState";
 import type { TeamStatus } from "@/types/team";
+import { SETTINGS_HOME_PARENT_STATE_KEY } from "@/utils/settingsNavigation";
 import { getTeamSeatMismatch } from "@/utils/teamSeats";
+import { cn } from "@/utils/utils";
 
-export function AccountMenu() {
+export function AccountMenu({ pagePresentation = false }: { pagePresentation?: boolean }) {
   const os = useOpenSecret();
   const { billingStatus, setBillingStatus } = useBillingState();
   const isCompactSettingsLayout = useCompactSettingsLayout();
@@ -45,11 +47,19 @@ export function AccountMenu() {
     <div className="flex w-full max-w-full items-end gap-2">
       <Link
         to={isCompactSettingsLayout ? "/settings" : "/settings/account"}
+        state={
+          isCompactSettingsLayout && pagePresentation
+            ? (previous) => ({ ...previous, [SETTINGS_HOME_PARENT_STATE_KEY]: true })
+            : undefined
+        }
         aria-label={attentionLabel ? `Open settings, ${attentionLabel}` : "Open settings"}
         title="Settings"
-        className="relative flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[hsl(var(--sidebar-chrome))] text-[hsl(var(--on-sidebar-chrome))] shadow-none ring-0 transition-colors hover:bg-[hsl(var(--sidebar-chrome-hover))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className={cn(
+          "relative flex shrink-0 items-center justify-center rounded-full bg-[hsl(var(--sidebar-chrome))] text-[hsl(var(--on-sidebar-chrome))] shadow-none ring-0 transition-colors hover:bg-[hsl(var(--sidebar-chrome-hover))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          pagePresentation ? "h-11 w-11" : "h-9 w-9"
+        )}
       >
-        <Settings className="h-4 w-4" />
+        <Settings className={pagePresentation ? "h-5 w-5" : "h-4 w-4"} />
         {(teamSeatMismatch || needsTeamSetup) && (
           <AlertCircle
             className={`absolute -right-1 -top-1 h-4 w-4 rounded-full bg-background ${
@@ -60,10 +70,13 @@ export function AccountMenu() {
       </Link>
       <Link
         to="/pricing"
-        className="group/credit-link min-w-0 flex-1 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        className={cn(
+          "group/credit-link min-w-0 flex-1 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          pagePresentation && "flex min-h-11"
+        )}
         aria-label={billingStatus ? `${billingStatus.product_name} plan` : "Billing status"}
       >
-        <CreditUsage />
+        <CreditUsage pagePresentation={pagePresentation} />
       </Link>
     </div>
   );

diff --git a/frontend/src/components/AgentMode.tsx b/frontend/src/components/AgentMode.tsx
@@ -2743,7 +2743,7 @@ export function AgentMode({ userId }: { userId: string }) {
 
   if (!isTauriDesktop()) {
     return (
-      <div className="flex h-dvh items-center justify-center bg-background p-6 text-center">
+      <div className="maple-native-ios-agent-safe-page flex h-dvh items-center justify-center bg-background p-6 text-center">
         <div className="max-w-sm space-y-3">
           <MapleWordmark className="mx-auto h-4 w-auto" />
           <p className="text-sm text-muted-foreground">Agent Mode is available in Maple Desktop.</p>

diff --git a/frontend/src/components/AppEntryPage.tsx b/frontend/src/components/AppEntryPage.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 
 export function AppEntryPage() {
   return (
-    <div className="flex min-h-dvh flex-col bg-[#e2e2e2] text-[#221a18] dark:bg-background dark:text-foreground">
+    <div className="maple-native-ios-static-safe-page flex min-h-dvh flex-col bg-[#e2e2e2] text-[#221a18] dark:bg-background dark:text-foreground">
       <AuthHeader />
 
       <main className="flex flex-1 items-center justify-center px-4 pb-16 pt-8 sm:px-6">

diff --git a/frontend/src/components/AuthMain.tsx b/frontend/src/components/AuthMain.tsx
@@ -9,7 +9,7 @@ type AuthMainProps = {
 
 export function AuthMain({ children, title, description }: AuthMainProps) {
   return (
-    <div className="flex min-h-dvh flex-col bg-[#e2e2e2] text-[#221a18] dark:bg-background dark:text-foreground">
+    <div className="maple-native-ios-static-safe-page flex min-h-dvh flex-col bg-[#e2e2e2] text-[#221a18] dark:bg-background dark:text-foreground">
       <AuthHeader />
 
       <main className="flex flex-1 items-center justify-center px-4 py-10 sm:px-6">

diff --git a/frontend/src/components/AuthenticatedHomeContent.tsx b/frontend/src/components/AuthenticatedHomeContent.tsx
@@ -11,11 +11,13 @@ import { useLocation, useRouter } from "@tanstack/react-router";
 import { useOpenSecret } from "@opensecret/react";
 import { ProjectDetailView } from "@/components/ProjectDetailView";
 import { UnifiedChat } from "@/components/UnifiedChat";
+import { MobileNavigationStack } from "@/components/MobileNavigationStack";
 import {
   PersistentHomeNavigationContext,
   useAccountSidebarOpenState
 } from "@/contexts/PersistentHomeNavigationContext";
 import { AgentSessionSelectionMemory } from "@/services/agentSessionSelection";
+import { useIsLandscapeMobile, useIsMobile } from "@/utils/utils";
 
 const TRANSIENT_HOME_SEARCH_PARAMS = ["team_setup", "credits_success", "api_settings"];
 
@@ -138,10 +140,15 @@ export function PersistentHomeNavigationProvider({ children }: { children: React
 }
 
 export function AuthenticatedHomeContent({
-  homeLocationHref
+  homeLocationHref,
+  suspendChats = false
 }: {
   homeLocationHref: string | null;
+  suspendChats?: boolean;
 }) {
+  const isMobile = useIsMobile();
+  const isLandscapeMobile = useIsLandscapeMobile();
+  const isCompactLayout = isMobile || isLandscapeMobile;
   const [selection, setSelection] = useState<HomeSelection>(readHomeSelection);
 
   const syncFromHomeLocation = useCallback(() => {
@@ -176,6 +183,12 @@ export function AuthenticatedHomeContent({
     };
   }, [syncFromHomeLocation]);
 
+  if (isCompactLayout) {
+    return (
+      <MobileNavigationStack homeLocationHref={homeLocationHref} suspendChats={suspendChats} />
+    );
+  }
+
   if (selection.projectId && !selection.hasConversationId) {
     return <ProjectDetailView projectId={selection.projectId} />;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -73,6 +73,7 @@ @@
         />
       </head>
       <body>
+        <div id="maple-native-ios-safe-area-boundary" aria-hidden="true"></div>
         <div id="root" class="h-full"></div>
         <script type="module" src="/src/main.tsx"></script>
       </body>
@@ Expand Down @@