fix: correct membership back flow and add onboarding paywall

frontend/src/app/globals.css

@@ -749,6 +749,7 @@ button:disabled { cursor: default; opacity: .45; }
 .avatar-randomize { justify-self: start; }
 .avatar-notice { margin-top: var(--space-4); }
 .redeem-modal { width: min(100%, 420px); }
+.paywall-modal { width: min(100%, 480px); }
 .logout-modal { width: min(100%, 400px); }
 .account-modal h2, .auth-panel h1, .admin-header h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.5px; text-wrap: balance; }
 .account-modal h2 { margin: 0; font-size: var(--type-display-sm); letter-spacing: -.025em; }
@@ -758,6 +759,14 @@ button:disabled { cursor: default; opacity: .45; }
 .redeem-balance span { color: var(--color-ink-secondary); font-size: var(--type-caption); }
 .redeem-balance strong { color: var(--color-ink); font-size: var(--type-title-lg); font-variant-numeric: tabular-nums; font-weight: 400; }
 .account-redeem-form { padding-top: var(--space-5); }
+.paywall-intro { display: flex; align-items: flex-start; gap: var(--space-4); padding-bottom: var(--space-5); }
+.paywall-mark { width: 44px; height: 44px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--color-action-soft); color: var(--color-action); }
+.paywall-mark svg { width: 20px; height: 20px; }
+.paywall-intro b { display: block; color: var(--color-ink); font-family: var(--font-display); font-size: var(--type-title-md); font-weight: 400; }
+.paywall-intro p { margin: var(--space-1) 0 0; color: var(--color-ink-secondary); font-size: var(--type-body-sm); line-height: 1.6; text-wrap: pretty; }
+.paywall-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
+.paywall-footer span { color: var(--color-ink-secondary); font-size: var(--type-caption); }
+.paywall-footer > a, .paywall-footer > button { flex: 0 0 auto; text-decoration: none; }
 .logout-copy { margin: 0; color: var(--color-ink-secondary); font-size: var(--type-body-md); line-height: 1.6; text-wrap: pretty; }
 .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-6); }
 .sheet-section { border-bottom: 1px solid var(--color-border); padding: var(--space-6) 0; border-color: var(--color-border); }
@@ -910,6 +919,8 @@ input:not([class^="ant-"]):not([class*=" ant-"]):not(.ant-picker input):disabled
   .starter-content span { font-size: var(--type-title-sm); }
   .account-modal h2 { font-size: var(--type-title-lg); }
   .account-redeem-form > div { grid-template-columns: 1fr; }
+  .paywall-footer { align-items: stretch; flex-direction: column; }
+  .paywall-footer > a, .paywall-footer > button { width: 100%; }
   .dialog-actions { flex-direction: column-reverse; }
   .dialog-actions > button { width: 100%; }
   .auth-story { min-height: 220px; padding: var(--space-6) var(--space-5); }

frontend/src/app/membership/orders/page.tsx

@@ -84,7 +84,7 @@ export default function MembershipOrdersPage() {
       <div className="membership-shell">
         <header className="membership-header">
           <div className="membership-header-left">
-            <Link className="membership-back" href="/membership" aria-label="返回套餐与会员">
+            <Link className="membership-back" href="/membership" replace aria-label="返回套餐与会员">
               <ArrowLeft aria-hidden="true" />
               <span>返回</span>
             </Link>

frontend/src/app/page.tsx

@@ -20,6 +20,7 @@ import { ChatMessageContent } from "@/components/chat-message-content";
 import { GeneratePersonalReportButton } from "@/components/personal-report/generate-personal-report-button";
 import { AgentAvatar, ChatMessageRow } from "@/components/chat-message-row";
 import { ModelSelector } from "@/components/model-selector";
+import { OnboardingRedeemPaywall } from "@/components/onboarding-redeem-paywall";
 import {
   LocationSearchCombobox,
   type ResolvedBirthLocation,
@@ -74,7 +75,11 @@ import {
 } from "@/lib/birth-time-guided-preview";
 import { defaultGuidedJyotishTopics, generalGuidedJyotishTopics } from "@/lib/guided-jyotish-topics";
 import { keepFocusWithin } from "@/lib/focus-trap";
-import { BALANCE_SYNC_KEY, BALANCE_CHANGED_EVENT, membershipHref } from "@/lib/membership";
+import {
+  BALANCE_SYNC_KEY,
+  BALANCE_CHANGED_EVENT,
+  membershipHref,
+} from "@/lib/membership";
 import { chatMessageViews, type ChatMessage } from "@/lib/chat-message-view";
 import { writeChatSession } from "@/lib/chat-session-write-contract";
 import { consultationReportMarkdown } from "@/lib/consultation-report-export";
@@ -1027,6 +1032,7 @@ export default function Home() {
   const [onboardingError, setOnboardingError] = useState("");
   const [onboardingStep, setOnboardingStep] = useState<OnboardingStep>("name");
   const [onboardingJustCompleted, setOnboardingJustCompleted] = useState(false);
+  const [onboardingPaywallOpen, setOnboardingPaywallOpen] = useState(false);
   const [birthTimeJourney, setBirthTimeJourney] = useState<JourneyClientResponse | null>(null);
   const [birthTimeError, setBirthTimeError] = useState("");
   const [birthTimeAssessmentPhase, setBirthTimeAssessmentPhase] = useState<BirthTimeAssessmentPhase | null>(null);
@@ -1037,6 +1043,7 @@ export default function Home() {
   const accountDialog = useRef<HTMLElement>(null);
   const dialogReturnTarget = useRef<HTMLButtonElement | null>(null);
   const closeButton = useRef<HTMLButtonElement>(null);
+  const onboardingPaywallShown = useRef(false);
   const composerInput = useRef<HTMLTextAreaElement>(null);
   const starterWorkbench = useRef<HTMLDivElement>(null);
   const pendingConsultation = useRef<PendingConsultation | null>(null);
@@ -1709,6 +1716,18 @@ export default function Home() {
     }
   }, [accountId, activeAccountDialog, hydrated, onboardingStep, presetMessageFinished, profileComplete]);
 
+  useEffect(() => {
+    if (uiPreview.current
+      || onboardingPaywallShown.current
+      || !starterHomeVisible
+      || !account
+      || account.credits > 0
+      || account.activeSubscription?.status === "active"
+      || activeAccountDialog !== null) return;
+    onboardingPaywallShown.current = true;
+    setOnboardingPaywallOpen(true);
+  }, [account, activeAccountDialog, starterHomeVisible]);
+
   useEffect(() => {
     if (activeAccountDialog === null) return;
     window.requestAnimationFrame(() => {
@@ -1964,18 +1983,10 @@ export default function Home() {
     dialogReturnTarget.current = returnTarget ?? accountTrigger.current;
     setAccountMenuOpen(false);
     setAccountError("");
-    switch (dialog) {
-      case "profile":
-        setProfileDraft(profile);
-        setProfileNotice("");
-        setAvatarNotice("");
-        break;
-      case "logout":
-        break;
-      default: {
-        const unreachable: never = dialog;
-        return unreachable;
-      }
+    if (dialog === "profile") {
+      setProfileDraft(profile);
+      setProfileNotice("");
+      setAvatarNotice("");
     }
     setActiveAccountDialog(dialog);
   }
@@ -3048,9 +3059,10 @@ export default function Home() {
     pinned: pinnedSessionIds.includes(session.id),
     archived: archivedSessionIds.includes(session.id),
   }));
+  const modalOpen = activeAccountDialog !== null || onboardingPaywallOpen;
 
   return (
-    <SidebarProvider escapeBlocked={accountMenuOpen || activeAccountDialog !== null}>
+    <SidebarProvider escapeBlocked={accountMenuOpen || modalOpen}>
       <main className="chat-app">
         <AppSidebar
           sessions={sidebarSessions}
@@ -3108,7 +3120,7 @@ export default function Home() {
             </section>
           </div>
         ) : null}
-        <SidebarInset className="chat-panel" inert={activeAccountDialog !== null}>
+        <SidebarInset className="chat-panel" inert={modalOpen}>
           <header className="chat-header">
             <SidebarTrigger placement="inset" />
           <div>
@@ -3552,6 +3564,13 @@ export default function Home() {
           </section>
         </div>
       )}
+      {onboardingPaywallOpen && account && (
+        <OnboardingRedeemPaywall
+          credits={account.credits}
+          onClose={() => setOnboardingPaywallOpen(false)}
+          onCreditsChanged={(credits) => setAccount((current) => current ? { ...current, credits } : current)}
+        />
+      )}
       </main>
     </SidebarProvider>
   );