diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1303d922..285a4f7f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # 印度占星 Skill 更新日志
 
+## 2026-09-06 — 设置弹窗固定尺寸，账户与点数进弹窗
+
+设置弹窗四个分区共用一个外框，切换时不再跳变。星盘资料先出列表，点进去才编辑或添加。账户与点数成为第四个分区，套餐、点数包、兑换码和订单都在里面完成；原来的 `/membership` 页面删除，旧链接会回到首页并打开这一格。Skill 版本未变。
+
 ## 2026-09-06 — 普通咨询记住结论，超长会缩窗，后台能看见缓存命中
 
 多轮咨询不再只留每条开头几千字。服务端会维护一份会话摘要，并把后半段原文按模型窗口留给下一轮；报告被截断时会写明省略了多少字。上下文真的超了，会在同一次等待里缩到摘要加最后一对再试一次。后台用量能看到各模型的缓存命中率和缓存读 tokens。Skill 版本未变。
diff --git a/docs/BUG_HISTORY.md b/docs/BUG_HISTORY.md
index 10ba0e86..8b2b39c5 100644
--- a/docs/BUG_HISTORY.md
+++ b/docs/BUG_HISTORY.md
@@ -8565,6 +8565,22 @@
 - 复发自：无
 - 修复版本：`a1956deb`
 
+## BUG-554 | 设置弹窗随分区跳变，星盘资料铺开整张表单，账户与点数离开首页
+
+- 状态：resolved
+- 首次发现：2026-09-06
+- 最近更新：2026-09-06
+- 影响面：设置弹窗、`chart-library-panel`、`billing-panel`、首页 `page.tsx`、`/membership` 路由
+- 用户现象：三个设置分区弹窗尺寸不同；星盘资料列表下面无条件铺开添加表单；点「账户与点数」会离开首页打开整页会员。
+- 触发条件：登录后打开设置弹窗，切换个人资料 / 星盘资料 / 通用设置，或从余额、头像菜单、余额不足进入充值。
+- 根因：`accountDialogClasses` 给每个分区不同宽度，高度随内容撑开。星盘资料没有列表/详情视图，添加表单始终渲染。第四个导航项直接 `router.push` 到 `/membership`。
+- 修复：四个分区共用 `.settings-modal` 固定尺寸。星盘资料改为列表→详情。账户与点数成为弹窗第四分区；删除 `/membership` 与 `/membership/orders`，旧链接重定向到 `/?settings=billing`。七处入口改为 `openAccountDialog("billing")`。
+- 验证：`frontend/tests/account-dialog-overlay.test.ts`、`billing-panel.test.ts`、`membership-page.test.ts`、`membership-navigation-contract.test.ts`、`chart-library-other-profile.test.ts`、`settings-url.test.ts`、`beam-avatar.test.ts`、`class-name-definition-contract.test.ts`、`tests/test_api_server_security.py -k capability_audit`。`next build --webpack` 中 `/` 为 Static，无 `/membership` 页面。
+- 防复发：设置弹窗必须同时声明 width 与 height；星盘资料默认视图不得无条件渲染 `<form`；`/` 保持 Static，不得 `useSearchParams`；收银台仍 `window.open`；硬跳转清单不得因本单变长。
+- 相关记录：BUG-434、BUG-251、BUG-143
+- 复发自：无
+- 修复版本：待发布
+
 ## BUG-555 | 普通咨询历史只留每条开头 4000 字，下一轮看不到应期和审计表
 
 - 状态：resolved
diff --git a/docs/tasks/PROGRESS-settings-dialog-and-billing-pane-20260906.md b/docs/tasks/PROGRESS-settings-dialog-and-billing-pane-20260906.md
new file mode 100644
index 00000000..76350d1e
--- /dev/null
+++ b/docs/tasks/PROGRESS-settings-dialog-and-billing-pane-20260906.md
@@ -0,0 +1,74 @@
+# PROGRESS · 设置弹窗重排与账户与点数入弹窗（2026-09-06）
+
+工作树：`.worktrees/settings-dialog-and-billing-pane-20260906`
+分支：`codex/settings-dialog-and-billing-pane-20260906`
+基线：任务书写 `origin/staging` @ `985c3258`；开工时 `origin/staging` 已到 `9ce7a374`（含 composer 与会话列表），以当时远端为准。
+
+`page.tsx` 开工 **2035** 行，收尾 **1976** 行（净减 59，上限 1995）。未改迁移、未 bump Skill、未改支付 API。
+
+| 任务 | 状态 | BUG |
+| --- | --- | --- |
+| 5.1 弹窗壳固定尺寸 + 四分区 | 完成 | BUG-554 |
+| 5.2 个人资料搬出 `page.tsx` | 完成 | — |
+| 5.4 账户与点数入弹窗，删除 `/membership` | 完成 | BUG-554 |
+| 5.3 星盘资料列表→详情 | 完成 | BUG-554 |
+| 5.5 BUG_HISTORY / CHANGELOG / DESIGN / VOICE | 完成 | — |
+
+## 实现要点
+
+- `.settings-modal`：桌面 `width: min(100vw - 32px, 880px); height: min(84dvh, 640px)`；四分区共用；退出仍是 400px `logout-modal`。
+- `AccountDialog` 增加 `"billing"`。导航顺序：个人资料 → 星盘资料 → 账户与点数 → 通用设置。
+- `profile-panel.tsx`：48px 头像一行；删除「管理星盘资料」。
+- `chart-library-panel.tsx`：内部视图 `list | self | other | add`；列表条可点 + chevron；合盘操作只在其他人详情。
+- `billing-panel.tsx` + `use-billing-panel.ts`：`next/dynamic` `{ ssr: false }`。页签含订单；兑换码行内表单。无 spinner / 「正在加载」。
+- 删除 `frontend/src/app/membership/page.tsx` 与 `orders/page.tsx`。`next.config.ts` 临时重定向到 `/?settings=billing`。
+- `settings-url.ts` 在 hydrate / popstate 解析后 `history.replaceState` 抹掉参数；`/` 不用 `useSearchParams`。
+- 七处入口改为 `openAccountDialog("billing", { source, plan, tab })`。生时校正 402 不再 `window.location.assign`。
+
+## 既有断言改动
+
+| 文件 | 原值 | 新值 | 原因 |
+| --- | --- | --- | --- |
+| `account-dialog-overlay` | `openRedeem`；`profile-modal` / `chart-library-modal` | `renderBilling`；四导航；`.settings-modal` 同时有 width 与 height | 5.1 固定尺寸四分区 |
+| `page.tsx` `renderProfile` | 约 50 行 JSX + 「管理星盘资料」 | `<ProfilePanel />`，头像 48px | 5.2 净减行；去掉重复入口 |
+| `chart-library-panel` | 无条件 `<form`；`setEditingSelfChart(true)` | 列表默认；`setView({ kind: "add" })` 后才出表单 | 决策 4 |
+| 本人详情标题 | 编辑本人资料 | 编辑本人星盘 | 详情视图文案 |
+| 合盘 pending 文案 | `synastryPendingId === record.id` | `selectedOther.id` | 操作只在详情 |
+| `membership-page` 26 条支付/兑换/订单 | 读 `app/membership/page.tsx` | 读 `billing-panel.tsx` + `use-billing-panel.ts` | 页面删除 |
+| 会员页存在 / Suspense / loading | 页面必须存在 | 页面不存在；无 spinner | 决策 6、8 |
+| 兑换码 | `redeemOpen` 子弹窗 | `value="redeem"` 页签 | 决策 5 |
+| `goBack` / `history.back` | 整页返回 | 无；`stripSettingsQuery` | 账单在首页 |
+| 订单 | 独立页 + 「正在加载订单…」 | 页签 idle/ready/unavailable，无加载句 | AGENTS §6 |
+| 页签「点数充值」 | 点数充值 | 点数包 | VOICE |
+| 主标题「套餐与会员」 | `<h1 className="membership-title">` | 弹窗标题「账户与点数」+ `billing-summary` | 不再是整页 |
+| `.membership-page` / `.membership-shell` / `.membership-hero` | 整页壳 CSS | 删除；卡片/页签 CSS 保留 | 只删整页 chrome |
+| `membershipHref` | `/membership?source=` | `/?settings=billing&source=` | 深链接 |
+| `chat-navigation` 4 条软跳 | `router.push(membershipHref(...))` | `openAccountDialog("billing", { source })` | 决策 7 |
+| 校正 402 | `window.location.assign(membershipHref("rectification"))` | `onOpenBilling({ source: "rectification" })` | 硬跳转清单缩小 1 |
+| 会员 401 | membership 页 3 次 + 订单页 1 次 | billing hook 4 次 `assign("/login")` | 认证仍硬跳 |
+| `test_api_server_security` `app_routes` | 含 `membership`、`membership/orders` | 去掉这两条 | BUG-143 路由集合 |
+| 付费墙 | `<Link href={membershipHref("onboarding-paywall")}>` | `onOpenBilling` 按钮 | 关掉墙后打开 billing |
+| `beam-avatar` | 头像编辑 JSX 在 `page.tsx` | 读 `profile-panel.tsx`；`page.tsx` 只挂 `ProfilePanel` | 5.2 搬出 |
+| `knownUnstyled` | 允许 `membership-orders` / `membership-segment` | 从白名单删除 | 整页删除后不再渲染 |
+
+`git grep -n "/membership" frontend/src` 还会命中 `@/lib/membership` 模块 import，不是路由。路由字符串只出现在 `next.config.ts` 重定向。
+
+## 测试
+
+| 命令 | 结果 |
+| --- | --- |
+| 任务书收尾 tsx 合同（overlay / chart-library / membership / billing / settings-url / profile-panel / chat-navigation / epay / redeem-orders / starter / settings-mvp / consultation / rectification-surface） | **168 pass / 0 fail** |
+| `beam-avatar` + `class-name-definition-contract` + `profile-panel` | **10 pass / 0 fail** |
+| `./node_modules/.bin/tsc --noEmit` | 0 错 |
+| 改动文件 `eslint --quiet`；`npm run lint` | **0 error**（全仓 79 条既有 warning） |
+| `page.tsx` | 1976 行（开工 2035，净减 59） |
+| `/opt/anaconda3/bin/python3.12 -m pytest tests/test_api_server_security.py -k capability_audit` | 2 passed |
+| `npm run build -- --webpack` | `/` 为 `○` Static；产物无 `/membership` 页面；`routes-manifest` 有两条 307 重定向。首页 `page-*.js` gzip **181103** 字节；账单文案在按需 chunk `773.*.js`（gzip **4994**），未打进首屏合同路径。 |
+| 默认 `npm run build`（Turbopack） | 本工作树 `frontend/node_modules` 是指向主仓的 symlink，Turbopack 报 `points out of the filesystem root`。验收用 webpack 构建。 |
+| `npm test` 全量 | 产品合同已绿。其余失败均走 `startPostgresFixture` / `docker compose up postgres`，本机 compose 起不来，与本单无关。 |
+
+Next.js 16 typed routes 不允许 `route.ts` 额外 export。`dossierResponse` 去掉 `export`（仍只给同文件 GET 用），否则 `next build --webpack` 的生成类型检查失败。不是产品改动。
+
+分支相对当前 `origin/staging` 落后 2 个提交（BUG-555/556）。未在脏树上合并，避免和本单的 `CHANGELOG` / `BUG_HISTORY` 撞车。
+
+浏览器走查见 `docs/testing/settings-dialog-and-billing-pane-20260906.md`。本机未起登录会话，真实四分区切换留给 staging 验收。
diff --git a/docs/tasks/README.md b/docs/tasks/README.md
index ba6c500b..3ad12aae 100644
--- a/docs/tasks/README.md
+++ b/docs/tasks/README.md
@@ -57,7 +57,7 @@
 | `TASK-rectification-probe-answer-covers-domain-20260905.md` | `PROGRESS-rectification-probe-answer-covers-domain-20260905.md` | 区分卡答 A/B 后紧接着又问同领域"哪年…"采集题：点选答案只进推断层不写账本，计划层领域覆盖只看账本；改为 yes/weak_yes 视为该领域采集已覆盖（不写账本、不动门） | 待验收 | `988d97ae`（BUG-549） |
 | `TASK-composer-live-input-and-stop-20260906.md` | `PROGRESS-composer-live-input-and-stop-20260906.md` | 生成中输入框整个禁用致焦点丢失、回车丢消息（改为永不禁用 + 排队发送）；生时校正停止呈现为红色告警且选择题等待中停止无效（改为中性停止态、所有 fetch 挂 abort） | 待执行 | `codex/composer-live-input-and-stop-20260906`（BUG-551、552） |
 | `TASK-session-list-title-and-order-20260906.md` | `PROGRESS-session-list-title-and-order-20260906.md` | 历史对话标题改为首轮模型总结（一次、不扣点数、校正/今日运势保持日期标题）、侧栏去资料前缀；排序只按置顶排且元数据 PATCH 推进 `updated_at`（改为置顶 + 活动时间，改名/收藏/换模型不动顺序）；历史区加 今天/昨天/7天/30天/更早 分组；列表按游标分页（每页 40、置顶首页全量、滚到底静默续取） | 待执行（串行：在 composer 单之后） | `codex/session-list-title-and-order-20260906`（BUG-553） |
-| `TASK-settings-dialog-and-billing-pane-20260906.md` | `PROGRESS-settings-dialog-and-billing-pane-20260906.md` | 设置弹窗尺寸随分区跳变、星盘资料格无条件铺开整张添加表单（改为固定尺寸四分区、列表→详情）；「账户与点数」成为弹窗分区，删除 `/membership` 与 `/membership/orders` 页面并重定向，七处入口改回调 | 待执行（串行：在会话列表单之后） | `codex/settings-dialog-and-billing-pane-20260906`（BUG-554） |
+| `TASK-settings-dialog-and-billing-pane-20260906.md` | `PROGRESS-settings-dialog-and-billing-pane-20260906.md` | 设置弹窗尺寸随分区跳变、星盘资料格无条件铺开整张添加表单（改为固定尺寸四分区、列表→详情）；「账户与点数」成为弹窗分区，删除 `/membership` 与 `/membership/orders` 页面并重定向，七处入口改回调 | 待验收 | `codex/settings-dialog-and-billing-pane-20260906`（BUG-554） |
 | `TASK-consultation-context-and-cache-20260906.md` | `PROGRESS-consultation-context-and-cache-20260906.md` | 普通对话历史只取每条前 4,000 字（报告结论被砍、无标记）、历史窗口不看模型 `context_window`、无溢出识别；改为检查点式会话摘要 + append-only 尾巴 + 按模型预算 + 一次降级重试；Anthropic 历史断点；共享方法段进系统块；后台用量页显示缓存命中率 | 待执行（串行：在会话列表单之后；动表需迁移） | `codex/consultation-context-and-cache-20260906`（BUG-555/556） |
 | `TASK-rectification-collect-vs-offer-consistency-20260905.md` | `PROGRESS-rectification-collect-vs-offer-consistency-20260905.md` | 带年份采集没问完就出采用卡 + 报告，同一轮又被搬家采集题把卡挤掉：决策层判 `adopt_representative` 而计划层仍有 dated 采集（BUG-546 只修了一半）；改为剩余采集未完保持 `collect_evidence`，出牌轮才出卡写报告 | 已验收通过 `ca4e2408`（2026-09-05；staging 部署仍停在 `afd14948`，`deploy-staging` 自 `c295b853` 起连续失败，先解决 `bab07187` 的待迁移） | `codex/rectification-collect-vs-offer-consistency-20260905`（BUG-550） |
 | `TASK-api-not-configured-mislabel-20260904.md` | `PROGRESS-api-not-configured-mislabel-20260904.md` | 16 处路由把数据库瞬断（部署切换窗口）兜底翻译成 503「服务尚未配置」；改为仅配置错误用该文案，其余 `service_unavailable`，收敛为共享 helper | 待验收 | `codex/api-not-configured-mislabel-20260904`（BUG-542） |
diff --git a/docs/testing/settings-dialog-and-billing-pane-20260906.md b/docs/testing/settings-dialog-and-billing-pane-20260906.md
new file mode 100644
index 00000000..9e6bc8d8
--- /dev/null
+++ b/docs/testing/settings-dialog-and-billing-pane-20260906.md
@@ -0,0 +1,68 @@
+# Staging 人肉复核 · 设置弹窗与账户与点数（2026-09-06）
+
+给产品负责人。不要把真实出生资料、真实用户问题或对话正文写进任何记录。试用问题时用虚构句，例如「半年内换工作时机」。
+
+对应 BUG-554。测之前先做第 0 条。
+
+## 0. 确认测的是新版本
+
+浏览器打开 `https://staging.jyotisha.chat/api/health`，看 `deployment.gitCommit` 前 8 位是否等于本单合入 staging 后的提交。不一致 = 先别测。
+
+## 1. 四个分区外框不动（P0）
+
+1. 登录后点头像，打开「个人资料」。
+2. 依次点左侧 星盘资料、账户与点数、通用设置，再点回个人资料。
+
+- ✅ 预期：弹窗外框宽高不变；只有右侧内容换。退出登录仍是小确认窗。
+- ❌ 失败：换分区时窗口变大变小，或主题格缩成小盒子。
+
+## 2. 星盘资料默认只有列表（P0）
+
+1. 打开「星盘资料」。
+
+- ✅ 预期：先看到「我的星盘」一条和「其他人」列表（可空），底部「添加其他人」。看不到关系下拉、出生表单铺在列表下面。
+- ❌ 失败：一打开就出现整张「添加其他人的星盘」表单。
+
+## 3. 添加 → 保存 → 回列表（P0）
+
+1. 点「添加其他人」，用虚构资料保存。
+2. 看是否回到列表，新的一行出现。
+3. 点那一行进入详情：有 设为默认 / 删除 / 用于合盘；点「← 星盘资料」返回。
+4. 点本人那一行：有编辑表单，没有删除。
+
+- ✅ 预期：表单只在详情/添加视图；保存后回列表。
+- ❌ 失败：保存后仍停在铺开的表单，或本人详情能删除。
+
+## 4. 余额 / 头像菜单 / 402 / 付费墙都在当前页打开账单（P0）
+
+1. 点顶栏余额。
+2. 点头像菜单「账户与点数」。
+3. 用一个余额不足的账户发一条虚构问题（或看 402）。
+4. 若出现入门付费墙，点「查看套餐与会员」。
+
+- ✅ 预期：都打开同一设置弹窗的「账户与点数」，对话还在，不跳到 `/membership`。
+- ❌ 失败：整页刷新或地址变成 `/membership`。
+
+## 5. 下单打开新标签，回来余额刷新（P0）
+
+1. 在会员套餐或点数包点购买。
+2. 看是否新标签打开收银台，按钮短暂显示「跳转收银台…」，区内显示「等待支付结果」。
+3. 支付完成后回到原标签（可用测试单）。
+
+- ✅ 预期：当前页还在；余额更新。不要出现 spinner 或「正在加载」。
+- ❌ 失败：当前页被收银台顶掉，或一直转圈。
+
+## 6. 旧链接落到首页并打开分区（P1）
+
+1. 浏览器打开 `https://staging.jyotisha.chat/membership`。
+2. 再打开 `https://staging.jyotisha.chat/membership/orders`。
+
+- ✅ 预期：落在首页，设置弹窗打开账户与点数；订单链接打开订单记录页签。地址栏随后不再带 `settings=`。
+- ❌ 失败：404，或停在旧会员整页。
+
+## 7. 手机端全屏四页签可滚（P1）
+
+1. 把窗口缩到手机宽度，打开设置。
+
+- ✅ 预期：全屏；顶部四格页签；内容区自己滚，外框不动。
+- ❌ 失败：页签把内容顶没，或整页跟着内容一起撑高。
diff --git a/frontend/DESIGN.md b/frontend/DESIGN.md
index bfd920fd..2abb2560 100644
--- a/frontend/DESIGN.md
+++ b/frontend/DESIGN.md
@@ -169,7 +169,7 @@ Radii have two visual steps. Controls use 8px (`--radius-md`; `--radius-xs` and
 - Admin content width: 1200px, centered.
 - Desktop shell: 288px sidebar plus flexible reading panel.
 - Layout breakpoints: mobile below 768px, tablet 768–1023px, desktop 1024px and above. These three decide the shell — sidebar mode, grid columns, drawer versus rail.
-- Component breakpoints are separate and narrower, each owned by one surface rather than the shell: 900px and 480px (redemption and profile forms), 760px and 720px (personal report and report centre), 640px (rectification candidates), 639px (membership header), 620px (onboarding cards), 430px (toasts and the conversational rectification panel). Do not repurpose one for another surface, and do not assume testing the three layout tiers covers them.
+- Component breakpoints are separate and narrower, each owned by one surface rather than the shell: 900px and 480px (redemption and profile forms), 760px and 720px (personal report and report centre), 640px (rectification candidates), 767px (settings dialog mobile full-screen), 620px (onboarding cards), 430px (toasts and the conversational rectification panel). Do not repurpose one for another surface, and do not assume testing the three layout tiers covers them.
 - All full-height surfaces use `100dvh`. Touch targets are at least 44px. Where adjacent controls sit closer than 44px, the hit expands to the largest size that does not overlap; those exceptions are locked by `frontend/tests/touch-target-contract.test.ts`.
 
 ## 5. Components
@@ -183,7 +183,7 @@ Radii have two visual steps. Controls use 8px (`--radius-md`; `--radius-xs` and
 
 ### Button
 
-- **Implementation:** report surfaces and membership use `@/components/ui/button`. Login, onboarding, and birth-time dialogs still use `.button-primary` / `.button-secondary`, which share the same 44px height, 8px radius, and action tokens. Those CSS classes stay until those surfaces can move without growing `page.tsx`.
+- **Implementation:** report surfaces and the billing pane use `@/components/ui/button`. Login, onboarding, and birth-time dialogs still use `.button-primary` / `.button-secondary`, which share the same 44px height, 8px radius, and action tokens. Those CSS classes stay until those surfaces can move without growing `page.tsx`.
 - **Variants:** ink primary, cream secondary, text, circular icon, deep-brown emphasis.
 - **Spacing:** 44px minimum height; radii 8px for standard and full radius for icon-only.
 - **States:** default, hover, active, focus-visible, disabled, loading.
@@ -379,27 +379,26 @@ Text release is paced, not animated: the frame buffer commits at most once per a
 
 ### Account popover
 
-- **Structure:** identity header, profile action, redeem action with balance, administrator-only code-management link, divider, and logout action.
+- **Structure:** identity header, then 个人资料 / 星盘资料 / 通用设置 / 账户与点数 (with the current balance), theme preference, divider, and logout.
 - **Surface:** 280px elevated canvas popover anchored above the sidebar account trigger; warm hairline, existing elevated shadow, no nested cards.
-- **States:** closed, open, hover, focus-visible, administrator, and logout routing.
+- **States:** closed, open, hover, focus-visible, and logout confirmation.
 - **Accessibility:** `aria-expanded`, `aria-controls`, menu semantics, 44px rows, outside-click and Escape dismissal, and focus return.
+- **Billing:** the 账户与点数 row opens the settings dialog on the billing pane. It does not leave the homepage.
 
-### Profile dialog
+### Settings dialog
 
-- **Structure:** profile title, existing profile fields, inline result, and save action.
-- **Width:** 560px desktop maximum with viewport-safe spacing and internal scrolling.
-- **States:** open, invalid, saving, success, and error.
+- **Structure:** one fixed chrome for four panes — 个人资料, 星盘资料, 账户与点数, 通用设置. Left nav is 176px and does not scroll; the title bar stays put; only the right-hand content pane scrolls. Logout stays a separate 400px confirmation.
+- **Width / height:** desktop `width: min(100vw - 32px, 880px); height: min(84dvh, 640px)`. Switching panes does not change the frame. At ≤767px the dialog is full-screen with four equal tabs along the top.
+- **Personal profile:** one row of avatar editing (48px preview, eight palettes, 换一个形象) plus nickname and login email. No duplicate 管理星盘资料 button.
+- **Chart library:** list first (self row, other rows, 添加其他人). A row opens a detail with ← 星盘资料. Other details own 设为默认 / 删除 / 用于合盘 and that person's synastry history. The add form is a view, not an always-on stack.
+- **States:** open, pane switch, list / self / other / add, saving, success, and error.
 
-### Redeem dialog
+### Billing pane
 
-- **Structure:** current balance, redemption-code form, and inline result.
-- **Width:** 420px desktop maximum.
-- **States:** open, submitting, success, and error.
-
-### Membership
-
-- **Structure:** full-page archive on the page floor. Header chrome is back, orders, and redeem; the hero names the current plan; tabs switch membership vs credits; each plan/credit card carries one purchase action.
-- **Actions:** header chrome stays hairline `--color-ink-secondary`. The one filled terracotta control is the recommended-plan purchase (`Button` default). Other plan and credit buys use `Button` outline. Redeem opens a dialog; it is not a second filled button on the same screen.
+- **Structure:** summary line (balance · membership / expiry), then tabs 会员套餐 / 点数包 / 兑换码 / 订单记录.
+- **Actions:** recommended-plan purchase is `Button` default. Other plan and credit buys use `Button` outline. Cashier still opens with `window.open` in a new tab. Paying copy is 跳转收银台…; pending copy is 等待支付结果. Redeem is an inline form on its tab, not a nested dialog.
+- **Deep links:** `/?settings=billing&source=…[&plan=…][&tab=…]` open this pane on `/` and are then stripped. `/membership` and `/membership/orders` redirect here.
+- **Waiting:** the summary renders from the in-memory account. Package cards stay empty until `/api/payment/packages` arrives. No spinner, skeleton, or 「正在加载」.
 
 ### Logout dialog
 
diff --git a/frontend/docs/VOICE.md b/frontend/docs/VOICE.md
index f5a07dff..2529c151 100644
--- a/frontend/docs/VOICE.md
+++ b/frontend/docs/VOICE.md
@@ -58,6 +58,16 @@ Jyotisha 的可见文案是产品的一部分。正确性红线（真实性、
 
 会话标题是主题总结，不是资料名，也不是第一句话的截断。起名提示词只输出标题本身：6 到 12 个字，不要引号、书名号、句号或解释；不要复述出生日期、时间或地点，也不要写资料姓名。
 
+## 设置弹窗
+
+分区名只用：个人资料 / 星盘资料 / 账户与点数 / 通用设置。不要写成「会员页」「充值页」。
+
+账户与点数的页签只用：会员套餐 / 点数包 / 兑换码 / 订单记录。购买中按钮写「跳转收银台…」，轮询中写「等待支付结果」，不要写「正在加载」。
+
+星盘资料列表条只写人名、关系、出生摘要。详情返回用「← 星盘资料」。添加入口写「添加其他人」。
+
+余额不足时输入框占位写「余额不足，可在账户与点数中补充」，不要叫用户去会员页。
+
 - 不得虚构星盘事实或唯一出生分钟。
 - 问哪道题、年份、选项语义仍由服务端 focus 唯一所有；Agent 用 `spokenPrompt` 写题干，不得改年份、不得改选项含义。正文不得出题、复述或改写题干——题干作为同一条消息里正文之后的独立段落出现。
 - 正文不得断言界面当前状态（「界面上有/出现了下一问」）；过渡用「接下来我们继续」这类中性句。
diff --git a/frontend/next.config.ts b/frontend/next.config.ts
index 869f9f57..7b9fc756 100644
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -40,6 +40,12 @@ const nextConfig: NextConfig = {
       "../assets/**/*",
     ],
   },
+  async redirects() {
+    return [
+      { source: "/membership", destination: "/?settings=billing&source=legacy", permanent: false },
+      { source: "/membership/orders", destination: "/?settings=billing&tab=orders", permanent: false },
+    ];
+  },
 };
 
 export default nextConfig;
diff --git a/frontend/src/app/api/rectification/cases/[caseId]/route.ts b/frontend/src/app/api/rectification/cases/[caseId]/route.ts
index a553e6fc..18e04322 100644
--- a/frontend/src/app/api/rectification/cases/[caseId]/route.ts
+++ b/frontend/src/app/api/rectification/cases/[caseId]/route.ts
@@ -91,7 +91,7 @@ export async function GET(request: Request, context: RouteContext) {
   }
 }
 
-export function dossierResponse(
+function dossierResponse(
   dossier: V9CaseDossier,
   receipts: Array<Awaited<ReturnType<typeof loadV9TurnReceipt>>>,
   skillIdentity: Awaited<ReturnType<typeof loadV9CaseSkillIdentityStatus>>,
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 3f3557dd..70865e22 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1645,22 +1645,18 @@ button:disabled { cursor: default; opacity: .45; }
 
 .account-modal-overlay { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: var(--color-scrim); animation: account-overlay-enter 180ms ease-out both; }
 .account-modal { width: min(100%, 560px); max-height: min(84dvh, 760px); overflow-y: auto; padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-canvas); box-shadow: var(--shadow-elevated); animation: account-dialog-enter 180ms var(--ease-out) both; }
-.profile-modal { width: min(100%, 680px); scroll-padding-block-start: calc(var(--space-8) + 72px); }
-.chart-library-modal { width: min(100%, 760px); scroll-padding-block-start: calc(var(--space-8) + 72px); }
-.account-settings-shell { display: grid; grid-template-columns: 176px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
-.settings-dialog-nav { display: grid; gap: var(--space-1); position: sticky; top: 0; }
+.settings-modal { width: min(100vw - 32px, 880px); height: min(84dvh, 640px); max-height: min(84dvh, 640px); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
+.account-settings-shell { display: grid; grid-template-columns: 176px minmax(0, 1fr); min-height: 0; overflow: hidden; align-items: stretch; }
+.settings-dialog-nav { display: grid; align-content: start; gap: var(--space-1); overflow: hidden; }
 .settings-dialog-nav-item { min-height: 44px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 16px; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-ink-secondary); cursor: pointer; text-align: left; }
 .settings-dialog-nav-item:hover, .settings-dialog-nav-item[aria-current="page"] { background: var(--color-canvas-muted); color: var(--color-ink); }
 .settings-dialog-nav-item[aria-current="page"] { box-shadow: inset 2px 0 0 var(--color-action); }
 .settings-dialog-nav-item > svg { width: 18px; height: 18px; color: var(--color-ink-tertiary); }
 .settings-dialog-nav-item > svg:last-child { width: 15px; height: 15px; margin-left: auto; }
-.settings-dialog-content { min-width: 0; }
-.chart-library-modal .account-modal-header { position: sticky; z-index: 1; top: 0; margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-3); padding: var(--space-8) var(--space-8) var(--space-5); border-bottom: 1px solid var(--color-border); background: var(--color-canvas); }
+.settings-dialog-content { min-width: 0; min-height: 0; overflow-y: auto; }
 .settings-dialog-copy { margin: 0 0 var(--space-5); color: var(--color-ink-secondary); font-size: var(--type-body-sm); line-height: 1.6; }
-.profile-modal .account-modal-header { position: sticky; z-index: 1; top: 0; margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-5); padding: var(--space-8) var(--space-8) var(--space-5); border-bottom: 1px solid var(--color-border); background: var(--color-canvas); }
-.profile-modal .birth-section { padding-top: var(--space-5); }
 .avatar-section { padding-top: 0; }
-.avatar-editor { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--space-5); margin-top: var(--space-5); }
+.avatar-editor { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: var(--space-5); margin-top: var(--space-5); }
 .avatar-editor-controls { min-width: 0; display: grid; gap: var(--space-4); }
 .avatar-palette-list { display: grid; grid-template-columns: repeat(4, minmax(48px, 1fr)); gap: var(--space-2); }
 .avatar-palette { min-width: 0; height: 34px; overflow: hidden; display: flex; padding: 3px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-canvas); cursor: pointer; transition: border-color 120ms ease-out, box-shadow 120ms ease-out, transform 120ms ease-out; }
@@ -1707,7 +1703,11 @@ button:disabled { cursor: default; opacity: .45; }
 .chart-library-group-heading b { color: var(--color-ink); font-size: var(--type-caption); font-weight: 600; }
 .chart-library-group-heading small { margin-top: 3px; color: var(--color-ink-secondary); font-size: var(--type-caption); font-weight: 400; }
 .chart-library-count { display: grid; min-width: 24px; height: 24px; place-items: center; border-radius: 999px; background: var(--color-canvas-muted); color: var(--color-ink-secondary); font-size: var(--type-overline); }
-.chart-library-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-canvas); }
+.chart-library-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; min-height: 44px; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-canvas); }
+button.chart-library-item { cursor: pointer; text-align: left; }
+.chart-library-item-chevron { width: 16px; height: 16px; flex: 0 0 auto; color: var(--color-ink-tertiary); }
+.chart-library-back { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; border: 0; background: transparent; color: var(--color-ink-secondary); cursor: pointer; font-size: var(--type-body-sm); }
+.chart-library-add { margin-top: var(--space-4); }
 .chart-library-item-main { min-width: 0; }
 .chart-library-item strong, .chart-library-item small { display: block; }
 .chart-library-item strong { color: var(--color-ink); font-size: var(--type-body-md); font-weight: 500; }
@@ -1836,15 +1836,15 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
   .select-list { max-height: min(288px, 48dvh) !important; }
   .account-modal-overlay { padding: 0; }
   .account-modal { width: 100%; max-height: 100dvh; min-height: 100dvh; border-radius: 0; padding: var(--space-6); }
-  .account-settings-shell { grid-template-columns: 1fr; gap: var(--space-4); }
+  .settings-modal { width: 100%; height: 100dvh; max-height: 100dvh; }
+  .account-settings-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: var(--space-4); }
   .settings-dialog-nav { position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
   .settings-dialog-nav-item { min-height: 40px; grid-template-columns: 1fr; justify-items: center; gap: 2px; padding: var(--space-2); text-align: center; font-size: var(--type-caption); }
   .settings-dialog-nav-item > svg:last-child { display: none; }
   .settings-dialog-nav-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-action); }
-  .profile-modal .account-modal-header { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-4); padding: var(--space-6) var(--space-6) var(--space-4); }
-  .chart-library-modal .account-modal-header { margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-4); padding: var(--space-6) var(--space-6) var(--space-4); }
-  .avatar-editor { grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-4); }
-  .avatar-editor > .user-avatar { width: 72px !important; height: 72px !important; }
+  .settings-dialog-content { min-height: 0; overflow-y: auto; }
+  .avatar-editor { grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-4); }
+  .avatar-editor > .user-avatar { width: 48px !important; height: 48px !important; }
   .avatar-palette-list { grid-template-columns: repeat(2, minmax(64px, 1fr)); }
   .auth-page { height: 100dvh; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; }
   .auth-shell { min-height: 100%; overflow: visible; align-content: start; grid-template-columns: 1fr; grid-template-rows: auto auto; border-radius: 0; box-shadow: none; }
@@ -4011,27 +4011,8 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
 
 /* ---- Membership page ---- */
 
-.membership-page { height: 100dvh; min-height: 100dvh; overflow-y: auto; background: var(--color-canvas); }
-.membership-shell { width: min(1160px, 100%); display: grid; gap: var(--space-6); margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-16); }
-.membership-loading { padding: var(--space-16) var(--space-5); color: var(--color-ink-secondary); text-align: center; }
-.membership-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
-.membership-header-left, .membership-header-actions { min-width: 0; display: flex; align-items: center; gap: var(--space-3); }
-.membership-header-actions { gap: var(--space-2); }
-.membership-back, .membership-orders-entry, .membership-redeem-entry { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-canvas); color: var(--color-ink-secondary); cursor: pointer; font-size: var(--type-body-sm); text-decoration: none; }
-.membership-back:hover, .membership-orders-entry:hover, .membership-redeem-entry:hover { border-color: var(--color-border-strong); color: var(--color-ink); }
-.membership-back svg, .membership-redeem-entry svg { width: 16px; height: 16px; }
-.membership-title { margin: 0; color: var(--color-ink); font-family: var(--font-body); font-size: var(--type-title-lg); font-weight: 600; letter-spacing: -.02em; }
-
-.membership-hero { min-height: 0; display: block; padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-canvas-soft); }
-.membership-hero-copy { max-width: 760px; }
-.membership-greeting { margin: 0 0 var(--space-3); color: var(--color-ink-secondary); font-size: var(--type-body-sm); }
-.membership-hero h2 { max-width: 680px; margin: 0; color: var(--color-ink); font-family: var(--font-body); font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
-.membership-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: var(--space-6); border-top: 1px solid var(--color-border); }
-.membership-summary-card { min-width: 0; display: grid; gap: var(--space-1); padding: var(--space-4) 0 0; border: 0; border-radius: 0; background: transparent; }
-.membership-summary-card + .membership-summary-card { padding-left: var(--space-5); border-left: 1px solid var(--color-border); }
-.membership-summary-card span { color: var(--color-ink-secondary); font-size: var(--type-caption); }
-.membership-summary-card strong { color: var(--color-ink); font-family: var(--font-body); font-size: var(--type-title-md); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
-.membership-summary-card small { color: var(--color-ink-tertiary); font-size: var(--type-caption); line-height: 1.5; }
+.billing-panel { display: grid; gap: var(--space-5); }
+.billing-summary { margin: 0; color: var(--color-ink); font-size: var(--type-body-md); font-weight: 500; font-variant-numeric: tabular-nums; }
 
 .membership-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
 .membership-section-heading > div { display: grid; gap: var(--space-1); }
@@ -4091,23 +4072,12 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
 .membership-payment-error p { margin: 0; color: var(--color-danger); font-size: var(--type-body-sm); line-height: 1.55; }
 
 @media (max-width: 767px) {
-  .membership-shell { padding-inline: var(--space-4); }
-  .membership-header { align-items: flex-start; }
-  .membership-header-left { align-items: flex-start; }
-  .membership-title { padding-top: 9px; font-size: var(--type-title-md); }
-  .membership-header-actions { flex-wrap: wrap; justify-content: flex-end; }
-  .membership-hero { padding: var(--space-6); }
-  .membership-summary { grid-template-columns: 1fr; }
-  .membership-summary-card + .membership-summary-card { margin-top: var(--space-4); padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border); border-left: 0; }
-  .membership-order-row { grid-template-columns: minmax(0, 1fr) auto; }
   .membership-order-row b { display: none; }
   .membership-payment-panel { grid-template-columns: auto minmax(0, 1fr); }
   .membership-payment-panel .dialog-actions { grid-column: 1 / -1; }
 }
 
 @media (max-width: 639px) {
-  .membership-header { display: grid; }
-  .membership-header-actions { justify-content: flex-start; }
   .membership-plan-card--recommended { order: -1; }
   .membership-payment-error { align-items: flex-start; flex-direction: column; }
 }
diff --git a/frontend/src/app/membership/orders/page.tsx b/frontend/src/app/membership/orders/page.tsx
deleted file mode 100644
index 8488d12a..00000000
--- a/frontend/src/app/membership/orders/page.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-"use client";
-
-import "@/app/site-styles";
-import { useCallback, useEffect, useState } from "react";
-import Link from "next/link";
-import { ArrowLeft } from "lucide-react";
-import { formatPrice, orderStatusLabel } from "@/lib/membership";
-
-type PaymentOrder = {
-  orderNo: string;
-  status: string;
-  credits: number;
-  moneyCents: number;
-  currency: string;
-  productName: string;
-  paidAt: string | null;
-  createdAt: string;
-};
-
-function normalizeOrders(list: readonly unknown[]): PaymentOrder[] {
-  return list.map((raw) => {
-    const item = (raw ?? {}) as Record<string, unknown>;
-    const snapshot = (item.product_snapshot ?? item.product ?? {}) as Record<string, unknown>;
-    const price =
-      typeof item.price === "number"
-        ? item.price
-        : typeof item.money_cents === "number"
-          ? item.money_cents
-          : typeof item.moneyCents === "number"
-            ? item.moneyCents
-            : 0;
-    return {
-      orderNo: String(item.order_no ?? item.orderNo ?? ""),
-      status: String(item.status ?? "unknown"),
-      credits: typeof item.credits === "number" ? item.credits : 0,
-      moneyCents: price,
-      currency: String(item.currency ?? "CNY"),
-      productName:
-        typeof snapshot.name === "string"
-          ? snapshot.name
-          : typeof item.name === "string"
-            ? item.name
-            : String(item.product_code ?? item.productCode ?? ""),
-      paidAt: item.paid_at ? String(item.paid_at) : item.paidAt ? String(item.paidAt) : null,
-      createdAt: String(item.created_at ?? item.createdAt ?? ""),
-    };
-  });
-}
-
-export default function MembershipOrdersPage() {
-  const [orders, setOrders] = useState<PaymentOrder[]>([]);
-  const [ordersState, setOrdersState] = useState<"loading" | "ready" | "unavailable">("loading");
-
-  const fetchOrders = useCallback(async () => {
-    setOrdersState("loading");
-    try {
-      const response = await fetch("/api/payment/orders", { cache: "no-store" });
-      if (response.status === 401) {
-        window.location.assign("/login");
-        return;
-      }
-      if (!response.ok) throw new Error("订单记录暂时不可用");
-      const payload = await response.json().catch(() => null);
-      const list = Array.isArray(payload)
-        ? payload
-        : payload && typeof payload === "object" && Array.isArray(payload.orders)
-          ? payload.orders
-          : [];
-      setOrders(normalizeOrders(list));
-      setOrdersState("ready");
-    } catch {
-      setOrders([]);
-      setOrdersState("unavailable");
-    }
-  }, []);
-
-  useEffect(() => {
-    void (async () => {
-      await fetchOrders();
-    })();
-  }, [fetchOrders]);
-
-  return (
-    <main className="membership-page">
-      <div className="membership-shell">
-        <header className="membership-header">
-          <div className="membership-header-left">
-            <Link className="membership-back" href="/membership" replace aria-label="返回套餐与会员">
-              <ArrowLeft aria-hidden="true" />
-              <span>返回</span>
-            </Link>
-            <h1 className="membership-title">订单记录</h1>
-          </div>
-        </header>
-
-        <section className="membership-orders" aria-labelledby="membership-orders-title">
-          <div className="membership-section-heading">
-            <div>
-              <h2 id="membership-orders-title">全部订单</h2>
-              <p>查看套餐与点数充值的支付和到账状态。</p>
-            </div>
-            <button className="membership-orders-refresh" type="button" onClick={() => void fetchOrders()}>刷新</button>
-          </div>
-          {ordersState === "loading" && <p className="membership-empty">正在加载订单…</p>}
-          {ordersState === "unavailable" && <p className="membership-empty">订单记录暂时不可用，请稍后刷新。</p>}
-          {ordersState === "ready" && orders.length === 0 && <p className="membership-empty">暂无订单。</p>}
-          {orders.length > 0 && (
-            <ul className="membership-order-list">
-              {orders.map((order) => (
-                <li className="membership-order-row" key={order.orderNo}>
-                  <div>
-                    <strong>{order.productName || "订单"}</strong>
-                    <small>{order.orderNo}</small>
-                  </div>
-                  <span className={`membership-order-status status-${order.status}`}>
-                    {orderStatusLabel(order.status)}
-                  </span>
-                  <b>{formatPrice(order.moneyCents, order.currency)}</b>
-                </li>
-              ))}
-            </ul>
-          )}
-        </section>
-      </div>
-    </main>
-  );
-}
diff --git a/frontend/src/app/membership/page.tsx b/frontend/src/app/membership/page.tsx
deleted file mode 100644
index cbda3608..00000000
--- a/frontend/src/app/membership/page.tsx
+++ /dev/null
@@ -1,583 +0,0 @@
-"use client";
-
-import "@/app/site-styles";
-import { Suspense, useCallback, useEffect, useRef, useState } from "react";
-import type { FormEvent } from "react";
-import Link from "next/link";
-import { useSearchParams } from "next/navigation";
-import { ArrowLeft, CheckCircle2, Gift, Sparkles, X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { keepFocusWithin } from "@/lib/focus-trap";
-import {
-  entitlementLabel,
-  formatMembershipDate,
-  formatPrice,
-  formatProductDuration,
-  notifyBalanceChanged,
-  planAlias,
-  planDisplayLabel,
-  productAudience,
-  redeemErrorMessage,
-  selectMembershipPlans,
-  type MembershipPlanAlias,
-  type MembershipProduct,
-} from "@/lib/membership";
-
-type MembershipAccount = {
-  user: { id: string; email: string | null };
-  credits: number;
-  activeSubscription: {
-    id: string;
-    status: string;
-    startsAt: string;
-    endsAt: string;
-    productCode: string;
-    productVersion: number;
-    product: { name?: string; productType?: string } | null;
-    entitlements: unknown;
-  } | null;
-};
-
-type PaymentOrderState = {
-  orderNo: string;
-  payUrl: string | null;
-  qrCode: string | null;
-  status: string;
-  productId: string;
-};
-
-function goBack() {
-  if (window.history.length > 1) window.history.back();
-  else window.location.assign("/");
-}
-
-function MembershipContent() {
-  const searchParams = useSearchParams();
-  const planHint = searchParams.get("plan");
-  const highlightedPlan: MembershipPlanAlias | null =
-    planHint === "trial" || planHint === "monthly" || planHint === "yearly" ? planHint : null;
-
-  const [account, setAccount] = useState<MembershipAccount | null>(null);
-  const [accountError, setAccountError] = useState("");
-  const [paymentPackages, setPaymentPackages] = useState<MembershipProduct[]>([]);
-  const [paymentEnabled, setPaymentEnabled] = useState(false);
-  const [packagesError, setPackagesError] = useState("");
-  const [redeemOpen, setRedeemOpen] = useState(false);
-  const [redeemCode, setRedeemCode] = useState("");
-  const [redeemError, setRedeemError] = useState("");
-  const [redeemMessage, setRedeemMessage] = useState("");
-  const [redeeming, setRedeeming] = useState(false);
-  const [paymentOrder, setPaymentOrder] = useState<PaymentOrderState | null>(null);
-  const [paymentError, setPaymentError] = useState("");
-  const [payingProductId, setPayingProductId] = useState<string | null>(null);
-  const [selectedProductId, setSelectedProductId] = useState<string | null>(null);
-  const [redeemDone, setRedeemDone] = useState(false);
-  const redeemDialogRef = useRef<HTMLElement>(null);
-  const redeemInputRef = useRef<HTMLInputElement>(null);
-  const highlightedCardRef = useRef<HTMLElement | null>(null);
-  const planHighlightScrolled = useRef(false);
-
-  const activeSubscription = account?.activeSubscription ?? null;
-  const currentProductCode = activeSubscription?.status === "active"
-    ? activeSubscription.productCode
-    : null;
-
-  const fetchAccountData = useCallback(async (): Promise<MembershipAccount | null> => {
-    try {
-      const response = await fetch("/api/account", { cache: "no-store" });
-      if (response.status === 401) {
-        window.location.assign("/login");
-        return null;
-      }
-      const payload = await response.json().catch(() => null);
-      if (!response.ok) throw new Error(payload?.error || "暂时无法读取账户信息");
-      setAccount(payload);
-      setAccountError("");
-      return payload as MembershipAccount;
-    } catch (caught) {
-      setAccountError(caught instanceof Error ? caught.message : "暂时无法读取账户信息");
-      return null;
-    }
-  }, []);
-
-  const resetPaymentState = useCallback(() => {
-    setPaymentEnabled(false);
-    setPaymentPackages([]);
-    setPaymentOrder(null);
-    setPaymentError("");
-    setPayingProductId(null);
-    setSelectedProductId(null);
-  }, []);
-
-  const fetchPackages = useCallback(async () => {
-    try {
-      const response = await fetch("/api/payment/packages", { cache: "no-store" });
-      const payload = await response.json().catch(() => null);
-      if (response.ok && payload?.enabled === true) {
-        setPaymentEnabled(true);
-        setPaymentPackages(payload.packages || []);
-        setPackagesError("");
-        return;
-      }
-      if (!response.ok) {
-        setPackagesError("套餐支付暂时不可用，请稍后重试");
-        resetPaymentState();
-      }
-    } catch {
-      setPackagesError("套餐支付暂时不可用，请稍后重试");
-      resetPaymentState();
-    }
-  }, [resetPaymentState]);
-
-  useEffect(() => {
-    void (async () => {
-      await Promise.allSettled([fetchAccountData(), fetchPackages()]);
-    })();
-  }, [fetchAccountData, fetchPackages]);
-
-  useEffect(() => {
-    if (!redeemOpen) return;
-    window.requestAnimationFrame(() => redeemInputRef.current?.focus());
-    const onKeyDown = (event: globalThis.KeyboardEvent) => {
-      if (event.key === "Escape") closeRedeem();
-      else if (redeemDialogRef.current) keepFocusWithin(event, redeemDialogRef.current);
-    };
-    window.addEventListener("keydown", onKeyDown);
-    return () => window.removeEventListener("keydown", onKeyDown);
-  }, [redeemOpen]);
-
-  useEffect(() => {
-    if (!account) return;
-    const onBalanceStorage = (event: StorageEvent) => {
-      if (event.key === "jyotisha:balance:updated") void fetchAccountData();
-    };
-    const onBalanceChanged = () => void fetchAccountData();
-    window.addEventListener("storage", onBalanceStorage);
-    window.addEventListener("jyotisha:balance:changed", onBalanceChanged);
-    return () => {
-      window.removeEventListener("storage", onBalanceStorage);
-      window.removeEventListener("jyotisha:balance:changed", onBalanceChanged);
-    };
-  }, [account, fetchAccountData]);
-
-  useEffect(() => {
-    if (!highlightedPlan || planHighlightScrolled.current || paymentPackages.length === 0) return;
-    planHighlightScrolled.current = true;
-    const card = highlightedCardRef.current;
-    if (!card) return;
-    window.requestAnimationFrame(() => {
-      card.scrollIntoView({ behavior: "smooth", block: "center" });
-      card.focus({ preventScroll: true });
-    });
-  }, [highlightedPlan, paymentPackages.length]);
-
-  function closeRedeem() {
-    setRedeemOpen(false);
-    setRedeemError("");
-  }
-
-  async function redeem(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    const code = redeemCode.trim();
-    if (!code || redeeming) return;
-    setRedeeming(true);
-    setRedeemError("");
-    setRedeemMessage("");
-    try {
-      const response = await fetch("/api/redeem", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ code }),
-      });
-      const payload = await response.json().catch(() => null);
-      if (response.status === 401) {
-        window.location.assign("/login");
-        return;
-      }
-      if (!response.ok) throw new Error(redeemErrorMessage(response.status, payload));
-      const result = payload as { awardedCredits?: number; credits: number; message?: string };
-      const awarded = typeof result.awardedCredits === "number" ? result.awardedCredits : result.credits;
-      setRedeemCode("");
-      setRedeemDone(true);
-      setRedeemMessage(result.message || `本次到账 ${awarded} 点，最新余额 ${result.credits} 点。`);
-      const refreshed = await fetchAccountData();
-      notifyBalanceChanged(refreshed?.credits ?? result.credits);
-    } catch (caught) {
-      setRedeemError(caught instanceof Error ? caught.message : "兑换失败，请稍后重试");
-    } finally {
-      setRedeeming(false);
-    }
-  }
-
-  async function createPayment(productId: string) {
-    if (payingProductId) return;
-    setSelectedProductId(productId);
-    setPayingProductId(productId);
-    setPaymentError("");
-    try {
-      const response = await fetch("/api/payment/epay/create", {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        body: JSON.stringify({ productId }),
-      });
-      const payload = await response.json().catch(() => null);
-      if (response.status === 401) {
-        window.location.assign("/login");
-        return;
-      }
-      if (!response.ok) throw new Error(payload?.error || "创建支付失败");
-      if (typeof payload?.orderNo !== "string" || typeof payload?.payUrl !== "string") {
-        throw new Error("创建支付失败");
-      }
-      setPaymentOrder({
-        orderNo: payload.orderNo,
-        payUrl: payload.payUrl,
-        qrCode: payload.qrCode ?? null,
-        status: "pending",
-        productId,
-      });
-      window.open(payload.payUrl, "_blank", "noopener,noreferrer");
-    } catch (caught) {
-      setPaymentError(caught instanceof Error ? caught.message : "创建支付失败");
-    } finally {
-      setPayingProductId(null);
-    }
-  }
-
-  useEffect(() => {
-    if (!paymentOrder || paymentOrder.status !== "pending") return;
-    const checkPaymentStatus = async () => {
-      const response = await fetch(`/api/payment/epay/status?orderNo=${encodeURIComponent(paymentOrder.orderNo)}`, { cache: "no-store" });
-      const payload = await response.json().catch(() => null);
-      if (!response.ok) return;
-      const failed = (typeof payload.status === "string"
-        && ["failed", "closed", "cancelled"].includes(payload.status))
-        || payload.grantStatus === "failed";
-      const paid = payload.status === "paid" && !failed;
-      setPaymentOrder((current) => current ? {
-        ...current,
-        status: paid ? "paid" : failed ? "failed" : "pending",
-      } : current);
-      if (paid) {
-        const refreshed = await fetchAccountData();
-        notifyBalanceChanged(refreshed?.credits ?? 0);
-      }
-    };
-    let timer = 0;
-    const stopPolling = () => {
-      if (timer) window.clearInterval(timer);
-      timer = 0;
-    };
-    const startPolling = () => {
-      stopPolling();
-      timer = window.setInterval(() => void checkPaymentStatus(), 3000);
-    };
-    const onVisibilityChange = () => {
-      if (document.hidden) {
-        stopPolling();
-        return;
-      }
-      void checkPaymentStatus();
-      startPolling();
-    };
-    if (!document.hidden) startPolling();
-    document.addEventListener("visibilitychange", onVisibilityChange);
-    return () => {
-      stopPolling();
-      document.removeEventListener("visibilitychange", onVisibilityChange);
-    };
-  }, [fetchAccountData, paymentOrder]);
-
-  const plans = selectMembershipPlans(paymentPackages);
-  const creditPacks = paymentPackages.filter((product) => product.productType === "credit_pack");
-
-  return (
-    <main className="membership-page">
-      <div className="membership-shell">
-        <header className="membership-header">
-          <div className="membership-header-left">
-            <button className="membership-back" type="button" onClick={goBack} aria-label="返回">
-              <ArrowLeft aria-hidden="true" />
-              <span>返回</span>
-            </button>
-            <h1 className="membership-title">套餐与会员</h1>
-          </div>
-          <div className="membership-header-actions">
-            <Link className="membership-orders-entry" href="/membership/orders">订单记录</Link>
-            <button className="membership-redeem-entry" type="button" onClick={() => setRedeemOpen(true)}>
-              <Gift aria-hidden="true" />
-              <span>兑换码</span>
-            </button>
-          </div>
-        </header>
-
-        <section className="membership-hero" aria-labelledby="membership-hero-title">
-          <div className="membership-hero-copy">
-            <p className="membership-greeting">{account?.user.email ? `账户：${account.user.email}` : "欢迎回来"}</p>
-            <h2 id="membership-hero-title">
-              {activeSubscription ? "查看当前会员权益" : "选择会员套餐"}
-            </h2>
-            <div className="membership-summary">
-              <article className="membership-summary-card">
-                <span>会员状态</span>
-                <strong>{activeSubscription ? activeSubscription.product?.name || activeSubscription.productCode : "未开通会员"}</strong>
-                {activeSubscription && (
-                  <small>{formatMembershipDate(activeSubscription.startsAt)} 至 {formatMembershipDate(activeSubscription.endsAt)}</small>
-                )}
-              </article>
-              <article className="membership-summary-card">
-                <span>当前余额</span>
-                <strong>{account ? `${account.credits} 点` : accountError || "正在读取…"}</strong>
-              </article>
-            </div>
-          </div>
-        </section>
-
-        <section className="membership-segment" aria-label="套餐与点数">
-          <Tabs defaultValue="membership">
-            <TabsList className="membership-tabs" aria-label="套餐分类">
-              <TabsTrigger className="membership-tab" id="membership-plans-tab" value="membership">
-                会员套餐
-              </TabsTrigger>
-              <TabsTrigger className="membership-tab" id="membership-credits-tab" value="credits">
-                点数充值
-              </TabsTrigger>
-            </TabsList>
-
-            {paymentError && (
-            <div className="membership-payment-error" role="alert">
-              <p>{paymentError}</p>
-              {selectedProductId && (
-                <Button
-                  variant="outline"
-                  type="button"
-                  disabled={Boolean(payingProductId)}
-                  onClick={() => void createPayment(selectedProductId)}
-                >
-                  {payingProductId === selectedProductId ? "创建中…" : "重新支付"}
-                </Button>
-              )}
-            </div>
-            )}
-            {packagesError && <p className="form-error" role="alert">{packagesError}</p>}
-
-            <TabsContent className="membership-panel" value="membership">
-              {!packagesError && !paymentEnabled && <p className="membership-empty">在线支付暂未开放。</p>}
-              {plans.length > 0 && (
-                <div className="membership-plan-grid">
-                  {plans.map((product) => {
-                    const alias = planAlias(product);
-                    const recommended = alias === "monthly";
-                    const isCurrent = currentProductCode === product.code;
-                    const highlighted = alias === highlightedPlan;
-                    return (
-                      <article
-                        key={product.id}
-                        ref={highlighted ? highlightedCardRef : undefined}
-                        tabIndex={highlighted ? -1 : undefined}
-                        aria-current={highlighted ? "true" : undefined}
-                        className={`membership-plan-card${recommended ? " membership-plan-card--recommended" : ""}${isCurrent ? " membership-plan-card--current" : ""}${highlighted ? " membership-plan-card--highlighted" : ""}`}
-                      >
-                        <header className="membership-card-header">
-                          <div>
-                            <h3>{product.name}</h3>
-                            <p className="membership-card-meta">{planDisplayLabel(alias ?? "monthly")}</p>
-                          </div>
-                          {(isCurrent || recommended) && <span className={`membership-status${isCurrent ? " is-current" : ""}`}>{isCurrent ? "当前套餐" : "推荐"}</span>}
-                        </header>
-                        <p className="membership-card-price">
-                          {formatPrice(product.priceCents, product.currency)}
-                          <small>/{formatProductDuration(product)}</small>
-                        </p>
-                        <p className="membership-card-audience">{productAudience(product)}</p>
-                        <ul className="membership-card-entitlements">
-                          {product.entitlements.map((entitlement, index) => (
-                            <li key={index}>{entitlementLabel(entitlement)}</li>
-                          ))}
-                          {product.entitlements.length === 0 && <li>购买后按页面说明到账</li>}
-                        </ul>
-                        <details className="membership-rules">
-                          <summary>详细规则</summary>
-                          <ul>
-                            <li>{isCurrent
-                              ? `当前有效期至 ${formatMembershipDate(activeSubscription?.endsAt)}，续费从到期后顺延，不会覆盖未到期权益。`
-                              : "支付成功后权益立即生效。"}</li>
-                            <li>订单与到账状态可在「订单记录」页面查看。</li>
-                            <li>支付由合作渠道处理；如长时间未到账，请联系支持并出示订单号。</li>
-                          </ul>
-                        </details>
-                        <Button
-                          className="membership-buy"
-                          variant={recommended ? "default" : "outline"}
-                          type="button"
-                          disabled={!paymentEnabled || Boolean(payingProductId)}
-                          onClick={() => void createPayment(product.id)}
-                        >
-                          {payingProductId === product.id ? "创建中…" : isCurrent ? "续费" : product.productType === "trial" ? "立即开通" : "立即购买"}
-                        </Button>
-                      </article>
-                    );
-                  })}
-                </div>
-              )}
-              {!packagesError && paymentEnabled && plans.length === 0 && <p className="membership-empty">会员套餐正在上架中。</p>}
-            </TabsContent>
-
-            <TabsContent className="membership-panel" value="credits">
-              {creditPacks.length > 0 && (
-                <div className="membership-credit-grid">
-                  {creditPacks.map((product) => (
-                    <article className="membership-credit-card" key={product.id}>
-                      <div className="membership-credit-copy">
-                        <h3>{product.name}</h3>
-                        <p className="membership-card-meta">{product.credits > 0 ? `${product.credits} 点` : "点数包"}</p>
-                        <p>{product.description || "按需补充咨询点数"}</p>
-                      </div>
-                      <p className="membership-card-price">{formatPrice(product.priceCents, product.currency)}</p>
-                      <ul className="membership-card-entitlements">
-                        {product.entitlements.map((entitlement, index) => (
-                          <li key={index}>{entitlementLabel(entitlement)}</li>
-                        ))}
-                      </ul>
-                      <details className="membership-rules">
-                        <summary>详细规则</summary>
-                        <ul>
-                          <li>点数充值支付成功后立即到账。</li>
-                        </ul>
-                      </details>
-                      <Button
-                        className="membership-buy"
-                        variant="outline"
-                        type="button"
-                        disabled={!paymentEnabled || Boolean(payingProductId)}
-                        onClick={() => void createPayment(product.id)}
-                      >
-                        {payingProductId === product.id ? "创建中…" : "立即购买"}
-                      </Button>
-                    </article>
-                  ))}
-                </div>
-              )}
-              {!packagesError && paymentEnabled && creditPacks.length === 0 && <p className="membership-empty">点数包正在上架中。</p>}
-            </TabsContent>
-          </Tabs>
-        </section>
-
-        {paymentOrder && (
-          <section className="membership-payment-panel" role="status" aria-live="polite">
-            <span className="membership-payment-icon" aria-hidden="true">
-              {paymentOrder.status === "paid" ? <CheckCircle2 /> : paymentOrder.status === "failed" ? <X /> : <Sparkles />}
-            </span>
-            <div className="membership-payment-copy">
-              {paymentOrder.status === "paid" && (
-                <>
-                  <h3>支付成功，权益已到账</h3>
-                  <p>订单号：{paymentOrder.orderNo}</p>
-                  <p>余额与会员状态已刷新，可以返回继续使用。</p>
-                </>
-              )}
-              {paymentOrder.status === "failed" && (
-                <>
-                  <h3>支付失败</h3>
-                  <p>订单号：{paymentOrder.orderNo}</p>
-                  <p>订单未完成支付，可重新支付或稍后再试。</p>
-                </>
-              )}
-              {paymentOrder.status === "pending" && (
-                <>
-                  <h3>等待完成支付</h3>
-                  <p>订单号：{paymentOrder.orderNo}</p>
-                  <p>请在已打开的收银台页面完成支付；本页会自动检查支付状态并刷新余额。</p>
-                </>
-              )}
-            </div>
-            <div className="dialog-actions">
-              {paymentOrder.status === "failed" && (
-                <Button
-                  variant="outline"
-                  type="button"
-                  disabled={Boolean(payingProductId)}
-                  onClick={() => void createPayment(paymentOrder.productId)}
-                >
-                  {payingProductId === paymentOrder.productId ? "创建中…" : "重新支付"}
-                </Button>
-              )}
-              <Button type="button" onClick={goBack}>返回</Button>
-            </div>
-          </section>
-        )}
-      </div>
-
-      {redeemOpen && (
-        <div className="account-modal-overlay" onMouseDown={closeRedeem}>
-          <section
-            className="account-modal membership-redeem"
-            ref={redeemDialogRef}
-            role="dialog"
-            aria-modal="true"
-            aria-labelledby="membership-redeem-title"
-            onMouseDown={(event) => event.stopPropagation()}
-          >
-            <header className="account-modal-header">
-              <h2 id="membership-redeem-title">兑换点数</h2>
-              <button className="dialog-close" aria-label="关闭" type="button" onClick={closeRedeem}>
-                <X aria-hidden="true" />
-              </button>
-            </header>
-            <div className="redeem-balance">
-              <span>{activeSubscription ? "当前会员" : "当前余额"}</span>
-              <strong>{activeSubscription
-                ? `${activeSubscription.product?.name || activeSubscription.productCode} · ${formatMembershipDate(activeSubscription.endsAt)} 到期`
-                : `${account?.credits ?? 0} 点`}</strong>
-            </div>
-            <form className="redeem-form" onSubmit={redeem}>
-              <label htmlFor="membership-redeem-code">兑换码</label>
-              <div>
-                <input
-                  id="membership-redeem-code"
-                  ref={redeemInputRef}
-                  autoComplete="off"
-                  value={redeemCode}
-                  onChange={(event) => {
-                    setRedeemCode(event.target.value);
-                    setRedeemError("");
-                    setRedeemMessage("");
-                    setRedeemDone(false);
-                  }}
-                  placeholder="输入完整兑换码"
-                />
-                <Button type="submit" disabled={!redeemCode.trim() || redeeming || redeemDone}>
-                  {redeeming ? "兑换中" : "立即兑换"}
-                </Button>
-              </div>
-              {redeemError && <p className="form-error" role="alert">{redeemError}</p>}
-              {redeemMessage && <p className="form-success" role="status">{redeemMessage}</p>}
-              {redeemDone && (
-                <div className="dialog-actions">
-                  <Button type="button" onClick={closeRedeem}>完成</Button>
-                </div>
-              )}
-            </form>
-            <details className="membership-rules">
-              <summary>兑换规则</summary>
-              <ul>
-                <li>请完整输入兑换码，系统会按 JYOTISH-XXXX-XXXX 格式校验。</li>
-                <li>兑换成功后点数立即到账，余额实时更新。</li>
-                <li>每个兑换码仅可使用一次，无法转让或退换。</li>
-              </ul>
-            </details>
-          </section>
-        </div>
-      )}
-    </main>
-  );
-}
-
-export default function MembershipPage() {
-  return (
-    <Suspense fallback={<main className="membership-page"><div className="membership-loading">正在加载会员信息…</div></main>}>
-      <MembershipContent />
-    </Suspense>
-  );
-}
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index f64c39ed..491119e9 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -8,9 +8,9 @@ import { Sparkles } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import type { FormEvent, KeyboardEvent } from "react";
 import { AccountDialogOverlay, type AccountOverlayModel } from "@/components/account-dialog-overlay";
+import { ProfilePanel } from "@/components/profile-panel";
 import { ThemePreferencePanel } from "@/components/theme-preference-menu";
 import { AppSidebar } from "@/components/app-sidebar";
-import { UserAvatar } from "@/components/user-avatar";
 import {
   BirthTimeAssessmentOverlay,
   type BirthTimeAssessmentPhase,
@@ -46,9 +46,6 @@ import { BirthLocationFields } from "@/components/birth-location-fields";
 import { OnboardingChatMessage } from "@/components/onboarding-chat-message";
 import { ChartLibraryPanel } from "@/components/chart-library-panel";
 import { StarterHome } from "@/components/starter-home";
-import {
-  beamAvatarPalettes,
-} from "@/lib/beam-avatar";
 import {
   GENERAL_NO_MINUTE_DAILY_FORTUNE_QUESTION,
   isGeneralDailyFortuneQuestion,
@@ -93,8 +90,8 @@ import { keepFocusWithin } from "@/lib/focus-trap";
 import {
   BALANCE_SYNC_KEY,
   BALANCE_CHANGED_EVENT,
-  membershipHref,
 } from "@/lib/membership";
+import { parseSettingsQuery, stripSettingsQuery } from "@/lib/settings-url";
 import { nextActivityView, activityCompletedTrail, type AgentActivityView } from "@/lib/chat-message-view";
 import {
   chartLibraryFromCloudOthers,
@@ -169,12 +166,12 @@ import {
   type Account,
   type AccountDialog,
   type ChartLibraryRecord,
-  type ChartRelationship,
   type ChatSession,
   type ConsultationStatus,
   type DailyStarlanguageState,
   type Message,
   type OnboardingStep,
+  type OpenAccountDialogOptions,
   type PendingConsultation,
   type Profile,
   type ReplyOutcome,
@@ -245,6 +242,10 @@ const BirthTimeRectification = dynamic(
     loading: () => <p className="birth-time-assistant-intent" role="status">正在加载出生时间评估...</p>,
   },
 );
+const BillingPanel = dynamic(
+  () => import("@/components/billing-panel").then((module) => module.BillingPanel),
+  { ssr: false },
+);
 
 export default function Home() {
   const router = useRouter();
@@ -256,12 +257,9 @@ export default function Home() {
   const [activeChartId, setActiveChartId] = useState("self");
   const [synastryRelationshipType, setSynastryRelationshipType] = useState<SynastryRelationshipType>("romance");
   const [synastryPendingId, setSynastryPendingId] = useState<string | null>(null);
-  const [otherProfileDraft, setOtherProfileDraft] = useState<Profile>(emptyProfile);
-  const [otherChartRelationship, setOtherChartRelationship] = useState<Exclude<ChartRelationship, "self">>("other");
-  const [editingChartId, setEditingChartId] = useState<string | null>(null);
-  const [editingSelfChart, setEditingSelfChart] = useState(false);
   const [synastryReportCard, setSynastryReportCard] = useState<SynastryReportCard | null>(null);
   const [synastryHistory, setSynastryHistory] = useState<SynastryReportCard[]>([]);
+  const [billingPane, setBillingPane] = useState<OpenAccountDialogOptions>({});
   const [dailyStarlanguage, setDailyStarlanguage] = useState<DailyStarlanguageState>({ kind: "pending" });
   const [profileNotice, setProfileNotice] = useState("");
   const [avatarNotice, setAvatarNotice] = useState("");
@@ -469,8 +467,8 @@ export default function Home() {
     birthTimeRevisionPending, chartLibrary, dialogReturnTarget, profile, profileDraft,
     profileSaving, setAccount, setAccountError, setAccountMenuOpen, setActiveAccountDialog,
     setActiveChartId, setAvatarNotice, setAvatarSaving, setBirthTimeAssessmentPhase,
-    setBirthTimeConsultationConsent, setBirthTimeError, setBirthTimeJourney, setDraft,
-    setEditingSelfChart, setOnboardingJustCompleted, setOnboardingStep, setPresetMessageLength,
+    setBirthTimeConsultationConsent, setBirthTimeError, setBirthTimeJourney, setBillingPane, setDraft,
+    setOnboardingJustCompleted, setOnboardingStep, setPresetMessageLength,
     setProfile, setProfileDraft, setProfileNotice, setProfileSaving, setRectificationError,
     setSigningOut, setStartGreeting, signingOut, uiPreview,
     guidedBirthTimeReadyRef, editDeclaredBirthTimeDetailsRef,
@@ -506,7 +504,18 @@ export default function Home() {
 
   useEffect(() => {
     if (!hydrated || uiPreview.current) return;
-    const onPopState = () => applySessionPopStateRef.current(window.location.search);
+    const applySettingsFromSearch = (search: string) => {
+      const query = parseSettingsQuery(search);
+      if (!query) return;
+      openAccountDialog("billing", { source: query.source ?? undefined, plan: query.plan ?? undefined, tab: query.tab ?? undefined });
+      const next = stripSettingsQuery(search, window.location.pathname);
+      if (`${window.location.pathname}${window.location.search}` !== next) window.history.replaceState(null, "", next);
+    };
+    applySettingsFromSearch(window.location.search);
+    const onPopState = () => {
+      applySettingsFromSearch(window.location.search);
+      applySessionPopStateRef.current(window.location.search);
+    };
     window.addEventListener("popstate", onPopState);
     return () => window.removeEventListener("popstate", onPopState);
   }, [hydrated]);
@@ -1448,6 +1457,7 @@ export default function Home() {
         const reportCard: SynastryReportCard = {
           id: `${record.id}-${timestamp()}`,
           partnerName: record.profile.name || "对方",
+          partnerChartId: record.id,
           score,
           maxScore: max,
           assessment,
@@ -1611,104 +1621,30 @@ export default function Home() {
     signingOut,
     close: closeAccountDialog,
     navigate: (dialog) => openAccountDialog(dialog, dialogReturnTarget.current),
-    openRedeem: () => router.push(membershipHref("account-menu")),
     overlayRef: accountDialog,
     closeButtonRef: closeButton,
-    renderProfile() {
-      return (
-        <>
-          {accountError && <p className="form-error" role="alert">{accountError}</p>}
-          {account.avatar && (
-            <section className="sheet-section avatar-section" aria-labelledby="avatar-section-title">
-              <div className="section-heading">
-                <b id="avatar-section-title">头像</b>
-                <small>Beam 形象由随机种子生成，刷新和换设备后保持一致</small>
-              </div>
-              <div className="avatar-editor">
-                <UserAvatar avatar={account.avatar} size={96} label="当前头像预览" />
-                <div className="avatar-editor-controls">
-                  <div className="avatar-palette-list" role="radiogroup" aria-label="头像配色">
-                    {beamAvatarPalettes.map((palette, index) => (
-                      <button
-                        key={palette.name}
-                        className="avatar-palette"
-                        type="button"
-                        role="radio"
-                        aria-checked={account.avatar?.palette === index}
-                        aria-label={palette.name}
-                        title={palette.name}
-                        disabled={avatarSaving}
-                        onClick={() => void persistAvatar({ action: "set_palette", palette: index })}
-                      >
-                        {palette.colors.map((color) => <span key={color} style={{ backgroundColor: color }} />)}
-                      </button>
-                    ))}
-                  </div>
-                  <button
-                    className="button-secondary avatar-randomize"
-                    type="button"
-                    disabled={avatarSaving}
-                    onClick={() => void persistAvatar({ action: "randomize" })}
-                  >
-                    {avatarSaving ? "保存中" : "换一个形象"}
-                  </button>
-                </div>
-              </div>
-              {avatarNotice && <p className="form-success avatar-notice" role="status">{avatarNotice}</p>}
-            </section>
-          )}
-          <section className="sheet-section" aria-labelledby="account-info-title">
-            <div className="section-heading"><b id="account-info-title">账户信息</b><small>登录与账户识别信息</small></div>
-            <dl className="account-info-list">
-              <div><dt>昵称</dt><dd>{profile.name.trim() || "尚未设置"}<small>与“我的星盘”名称同步</small></dd></div>
-              <div><dt>登录邮箱</dt><dd>{account.user.email || "尚未读取邮箱"}</dd></div>
-            </dl>
-          </section>
-          <div className="dialog-actions">
-            <button className="button-secondary" type="button" onClick={() => openAccountDialog("chart-library")}>管理星盘资料</button>
-          </div>
-        </>
-      );
-    },
+    renderProfile: () => (
+      <ProfilePanel account={account} profile={profile} avatarSaving={avatarSaving} avatarNotice={avatarNotice} accountError={accountError} persistAvatar={persistAvatar} />
+    ),
     renderChartLibrary() {
       return (
         <>
           <p className="settings-dialog-copy">管理本人和其他人的出生资料。本人资料用于默认解盘，其他人资料可用于合盘或单独查看。</p>
           <ChartLibraryPanel
-            account={account}
-            accountId={accountId}
-            chartLibrary={chartLibrary}
-            setChartLibrary={setChartLibrary}
-            profile={profile}
-            profileDraft={profileDraft}
-            setProfileDraft={setProfileDraft}
-            setProfile={setProfile}
-            profileSaving={profileSaving}
-            profileNotice={profileNotice}
-            setProfileNotice={setProfileNotice}
-            setAccountError={setAccountError}
-            editingSelfChart={editingSelfChart}
-            setEditingSelfChart={setEditingSelfChart}
-            otherProfileDraft={otherProfileDraft}
-            setOtherProfileDraft={setOtherProfileDraft}
-            otherChartRelationship={otherChartRelationship}
-            setOtherChartRelationship={setOtherChartRelationship}
-            editingChartId={editingChartId}
-            setEditingChartId={setEditingChartId}
-            synastryRelationshipType={synastryRelationshipType}
-            setSynastryRelationshipType={setSynastryRelationshipType}
-            synastryPendingId={synastryPendingId}
-            synastryReportCard={synastryReportCard}
-            setSynastryReportCard={setSynastryReportCard}
-            synastryHistory={synastryHistory}
-            activeChartId={activeChartId}
-            setActiveChartId={setActiveChartId}
-            saveProfile={saveProfile}
-            draftSynastryQuestionFromChart={draftSynastryQuestionFromChart}
+            account={account} accountId={accountId} chartLibrary={chartLibrary} setChartLibrary={setChartLibrary}
+            profile={profile} profileDraft={profileDraft} setProfileDraft={setProfileDraft} setProfile={setProfile}
+            profileSaving={profileSaving} profileNotice={profileNotice} setProfileNotice={setProfileNotice} setAccountError={setAccountError}
+            synastryRelationshipType={synastryRelationshipType} setSynastryRelationshipType={setSynastryRelationshipType}
+            synastryPendingId={synastryPendingId} synastryReportCard={synastryReportCard} setSynastryReportCard={setSynastryReportCard}
+            synastryHistory={synastryHistory} activeChartId={activeChartId} setActiveChartId={setActiveChartId}
+            saveProfile={saveProfile} draftSynastryQuestionFromChart={draftSynastryQuestionFromChart}
           />
         </>
       );
     },
+    renderBilling: () => (
+      <BillingPanel account={account} highlightedPlan={billingPane.plan ?? null} initialTab={billingPane.tab ?? "membership"} />
+    ),
 
     renderGeneral() {
       return <ThemePreferencePanel />;
@@ -1772,7 +1708,7 @@ export default function Home() {
           onOpenProfile={() => openAccountDialog("profile")}
           onOpenChartLibrary={() => openAccountDialog("chart-library")}
           onOpenGeneral={() => openAccountDialog("general")}
-          onOpenRedeem={() => router.push(membershipHref("account-menu"))}
+          onOpenBilling={() => openAccountDialog("billing", { source: "account-menu" })}
           onOpenLogout={() => openAccountDialog("logout")}
         />
         {pendingSessionDeletion ? (
@@ -1800,7 +1736,7 @@ export default function Home() {
           </div>
           <div className="chat-header-actions">
             <div className="chat-header-rectification" data-rectification-header-slot="" ref={setRectificationHeaderSlot} />
-            <button className="credit-button" type="button" onClick={() => router.push(membershipHref("credits"))} aria-label={account ? `余额 ${account.credits} 点，会员与充值` : accountError || "读取余额中"}>
+            <button className="credit-button" type="button" onClick={(event) => openAccountDialog("billing", { returnTarget: event.currentTarget, source: "credits" })} aria-label={account ? `余额 ${account.credits} 点，会员与充值` : accountError || "读取余额中"}>
               <Sparkles className="credit-icon" aria-hidden="true" />
               <span>{account ? account.credits : "—"}</span>
             </button>
@@ -1964,6 +1900,7 @@ export default function Home() {
             }}
             onPendingChange={setRectificationMutationPending}
             onProfileIncomplete={handleRectificationProfileIncomplete}
+            onOpenBilling={(options) => openAccountDialog("billing", { source: options?.source ?? "rectification" })}
             onSaved={() => void refreshAccount()}
             pendingConsultationQuestion={rectificationPendingQuestion}
             onRestart={() => void startNewRectification()}
@@ -1985,7 +1922,7 @@ export default function Home() {
                   ? presetMessageFinished ? "输入你的称呼" : "Jyotisha 正在输入…"
                   : "请先完成上方资料"
                 : account.credits === 0 && !account.activeSubscription
-                  ? "余额不足，可前往会员页充值点数或开通会员"
+                  ? "余额不足，可在账户与点数中补充"
                   : "例如：未来半年是否适合换工作？"}
             maxLength={!profileComplete && onboardingStep === "name" ? 80 : 500}
             inputDisabled={sessionMessagesLoading || rectificationSurfaceOpen || (!profileComplete && (onboardingStep !== "name" || !presetMessageFinished || profileSaving))}
@@ -2027,6 +1964,10 @@ export default function Home() {
           credits={account.credits}
           onClose={() => setOnboardingPaywallOpen(false)}
           onCreditsChanged={(credits) => setAccount((current) => current ? { ...current, credits } : current)}
+          onOpenBilling={() => {
+            setOnboardingPaywallOpen(false);
+            openAccountDialog("billing", { source: "onboarding-paywall" });
+          }}
         />
       )}
       </main>
diff --git a/frontend/src/components/account-dialog-overlay.tsx b/frontend/src/components/account-dialog-overlay.tsx
index a291d72f..4ab1a878 100644
--- a/frontend/src/components/account-dialog-overlay.tsx
+++ b/frontend/src/components/account-dialog-overlay.tsx
@@ -3,7 +3,7 @@
 import { ChevronRight, Settings, UserRound, Users, WalletCards, X } from "lucide-react";
 import { memo, type MutableRefObject, type ReactNode } from "react";
 
-export type AccountSettingsDialog = "profile" | "chart-library" | "general";
+export type AccountSettingsDialog = "profile" | "chart-library" | "billing" | "general";
 
 export type AccountOverlayModel = Readonly<{
   title: string;
@@ -11,11 +11,11 @@ export type AccountOverlayModel = Readonly<{
   signingOut: boolean;
   close: () => void;
   navigate: (dialog: AccountSettingsDialog) => void;
-  openRedeem: () => void;
   overlayRef: MutableRefObject<HTMLElement | null>;
   closeButtonRef: MutableRefObject<HTMLButtonElement | null>;
   renderProfile: () => ReactNode;
   renderChartLibrary: () => ReactNode;
+  renderBilling: () => ReactNode;
   renderGeneral: () => ReactNode;
   renderLogout: () => ReactNode;
 }>;
@@ -27,6 +27,7 @@ const settingsItems: ReadonlyArray<{
 }> = [
   { dialog: "profile", label: "个人资料", icon: UserRound },
   { dialog: "chart-library", label: "星盘资料", icon: Users },
+  { dialog: "billing", label: "账户与点数", icon: WalletCards },
   { dialog: "general", label: "通用设置", icon: Settings },
 ];
 
@@ -36,7 +37,7 @@ export const AccountDialogOverlay = memo(function AccountDialogOverlay({
   model,
 }: Readonly<{
   open: boolean;
-  dialog: "profile" | "chart-library" | "general" | "logout" | null;
+  dialog: "profile" | "chart-library" | "billing" | "general" | "logout" | null;
   model: AccountOverlayModel | null;
 }>) {
   if (!open || dialog === null || model === null) return null;
@@ -45,6 +46,7 @@ export const AccountDialogOverlay = memo(function AccountDialogOverlay({
   const renderSettingsContent = () => {
     if (dialog === "profile") return model.renderProfile();
     if (dialog === "chart-library") return model.renderChartLibrary();
+    if (dialog === "billing") return model.renderBilling();
     return model.renderGeneral();
   };
 
@@ -87,11 +89,6 @@ export const AccountDialogOverlay = memo(function AccountDialogOverlay({
                   <ChevronRight aria-hidden="true" />
                 </button>
               ))}
-              <button className="settings-dialog-nav-item" type="button" onClick={model.openRedeem}>
-                <WalletCards aria-hidden="true" />
-                <span>账户与点数</span>
-                <ChevronRight aria-hidden="true" />
-              </button>
             </nav>
             <div className="settings-dialog-content">{renderSettingsContent()}</div>
           </div>
diff --git a/frontend/src/components/app-sidebar.tsx b/frontend/src/components/app-sidebar.tsx
index 0fc7598e..a622ab8e 100644
--- a/frontend/src/components/app-sidebar.tsx
+++ b/frontend/src/components/app-sidebar.tsx
@@ -77,7 +77,7 @@ export type AppSidebarProps = {
   onOpenProfile: () => void;
   onOpenChartLibrary: () => void;
   onOpenGeneral: () => void;
-  onOpenRedeem: () => void;
+  onOpenBilling: () => void;
   onOpenLogout: () => void;
 };
 
@@ -101,7 +101,7 @@ export function AppSidebar({
   onOpenProfile,
   onOpenChartLibrary,
   onOpenGeneral,
-  onOpenRedeem,
+  onOpenBilling,
   onOpenLogout,
 }: AppSidebarProps) {
   const { isMobile, setOpen, setOpenMobile, state, viewport } = useSidebar();
@@ -341,7 +341,7 @@ export function AppSidebar({
                 <Menu.Item className="account-menu-item" onClick={onOpenGeneral}>
                   <Settings aria-hidden="true" /><span>通用设置</span><ChevronRight aria-hidden="true" />
                 </Menu.Item>
-                <Menu.Item className="account-menu-item" onClick={onOpenRedeem}>
+                <Menu.Item className="account-menu-item" onClick={onOpenBilling}>
                   <WalletCards aria-hidden="true" /><span>账户与点数</span><small>{account.credits} 点</small>
                 </Menu.Item>
                 <Menu.Separator className="account-menu-separator" />
diff --git a/frontend/src/components/billing-panel.tsx b/frontend/src/components/billing-panel.tsx
new file mode 100644
index 00000000..a0d2ede0
--- /dev/null
+++ b/frontend/src/components/billing-panel.tsx
@@ -0,0 +1,338 @@
+"use client";
+
+import { useEffect } from "react";
+import { CheckCircle2, Sparkles, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useBillingPanel } from "@/hooks/use-billing-panel";
+import type { Account } from "@/lib/home-types";
+import {
+  entitlementLabel,
+  formatMembershipDate,
+  formatPrice,
+  formatProductDuration,
+  orderStatusLabel,
+  planAlias,
+  planDisplayLabel,
+  productAudience,
+  selectMembershipPlans,
+  type BillingPaneTab,
+  type MembershipPlanAlias,
+} from "@/lib/membership";
+
+export type BillingPanelProps = {
+  readonly account: Account;
+  readonly highlightedPlan: MembershipPlanAlias | null;
+  readonly initialTab: BillingPaneTab;
+};
+
+function payingLabel(paying: boolean, idle: string) {
+  return paying ? "跳转收银台…" : idle;
+}
+
+export function BillingPanel({ account: seedAccount, highlightedPlan, initialTab }: BillingPanelProps) {
+  const billing = useBillingPanel({ account: seedAccount, highlightedPlan, initialTab });
+  const {
+    account,
+    activeSubscription,
+    closeRedeem,
+    createPayment,
+    currentProductCode,
+    fetchOrders,
+    highlightedCardRef,
+    orders,
+    ordersState,
+    packagesError,
+    packagesSettled,
+    payingProductId,
+    paymentEnabled,
+    paymentError,
+    paymentOrder,
+    paymentPackages,
+    redeem,
+    redeemCode,
+    redeemDone,
+    redeemError,
+    redeeming,
+    redeemMessage,
+    selectedProductId,
+    setRedeemCode,
+    setRedeemDone,
+    setRedeemError,
+    setRedeemMessage,
+  } = billing;
+  const plans = selectMembershipPlans(paymentPackages);
+  const creditPacks = paymentPackages.filter((product) => product.productType === "credit_pack");
+  const credits = account?.credits ?? seedAccount.credits;
+
+  useEffect(() => {
+    if (billing.initialTab === "orders") void fetchOrders();
+  }, [billing.initialTab, fetchOrders]);
+
+  return (
+    <div className="billing-panel">
+      <p className="billing-summary">
+        余额 {credits} 点
+        {" · "}
+        {activeSubscription
+          ? `${activeSubscription.product?.name || activeSubscription.productCode}，${formatMembershipDate(activeSubscription.endsAt)} 到期`
+          : "未开通会员"}
+      </p>
+
+      <Tabs
+        defaultValue={billing.initialTab}
+        onValueChange={(value) => {
+          if (value === "orders") void fetchOrders();
+        }}
+      >
+        <TabsList className="membership-tabs" aria-label="账户与点数">
+          <TabsTrigger className="membership-tab" id="membership-plans-tab" value="membership">
+            会员套餐
+          </TabsTrigger>
+          <TabsTrigger className="membership-tab" id="membership-credits-tab" value="credits">
+            点数包
+          </TabsTrigger>
+          <TabsTrigger className="membership-tab" id="membership-redeem-tab" value="redeem">
+            兑换码
+          </TabsTrigger>
+          <TabsTrigger className="membership-tab" id="membership-orders-tab" value="orders">
+            订单记录
+          </TabsTrigger>
+        </TabsList>
+
+        {paymentError && (
+        <div className="membership-payment-error" role="alert">
+          <p>{paymentError}</p>
+          {selectedProductId && (
+            <Button
+              variant="outline"
+              type="button"
+              disabled={Boolean(payingProductId)}
+              onClick={() => void createPayment(selectedProductId)}
+            >
+              {payingLabel(payingProductId === selectedProductId, "重新支付")}
+            </Button>
+          )}
+        </div>
+        )}
+        {packagesError && <p className="form-error" role="alert">{packagesError}</p>}
+
+        <TabsContent className="membership-panel" value="membership">
+          {packagesSettled && !packagesError && !paymentEnabled && <p className="membership-empty">在线支付暂未开放。</p>}
+          {plans.length > 0 && (
+            <div className="membership-plan-grid">
+              {plans.map((product) => {
+                const alias = planAlias(product);
+                const recommended = alias === "monthly";
+                const isCurrent = currentProductCode === product.code;
+                const highlighted = alias === highlightedPlan;
+                return (
+                  <article
+                    key={product.id}
+                    ref={highlighted ? highlightedCardRef : undefined}
+                    tabIndex={highlighted ? -1 : undefined}
+                    aria-current={highlighted ? "true" : undefined}
+                    className={`membership-plan-card${recommended ? " membership-plan-card--recommended" : ""}${isCurrent ? " membership-plan-card--current" : ""}${highlighted ? " membership-plan-card--highlighted" : ""}`}
+                  >
+                    <header className="membership-card-header">
+                      <div>
+                        <h3>{product.name}</h3>
+                        <p className="membership-card-meta">{planDisplayLabel(alias ?? "monthly")}</p>
+                      </div>
+                      {(isCurrent || recommended) && <span className={`membership-status${isCurrent ? " is-current" : ""}`}>{isCurrent ? "当前套餐" : "推荐"}</span>}
+                    </header>
+                    <p className="membership-card-price">
+                      {formatPrice(product.priceCents, product.currency)}
+                      <small>/{formatProductDuration(product)}</small>
+                    </p>
+                    <p className="membership-card-audience">{productAudience(product)}</p>
+                    <ul className="membership-card-entitlements">
+                      {product.entitlements.map((entitlement, index) => (
+                        <li key={index}>{entitlementLabel(entitlement)}</li>
+                      ))}
+                      {product.entitlements.length === 0 && <li>购买后按页面说明到账</li>}
+                    </ul>
+                    <details className="membership-rules">
+                      <summary>详细规则</summary>
+                      <ul>
+                        <li>{isCurrent
+                          ? `当前有效期至 ${formatMembershipDate(activeSubscription?.endsAt)}，续费从到期后顺延，不会覆盖未到期权益。`
+                          : "支付成功后权益立即生效。"}</li>
+                        <li>订单与到账状态可在「订单记录」页签查看。</li>
+                        <li>支付由合作渠道处理；如长时间未到账，请联系支持并出示订单号。</li>
+                      </ul>
+                    </details>
+                    <Button
+                      className="membership-buy"
+                      variant={recommended ? "default" : "outline"}
+                      type="button"
+                      disabled={!paymentEnabled || Boolean(payingProductId)}
+                      onClick={() => void createPayment(product.id)}
+                    >
+                      {payingLabel(payingProductId === product.id, isCurrent ? "续费" : product.productType === "trial" ? "立即开通" : "立即购买")}
+                    </Button>
+                  </article>
+                );
+              })}
+            </div>
+          )}
+          {packagesSettled && !packagesError && paymentEnabled && plans.length === 0 && <p className="membership-empty">会员套餐正在上架中。</p>}
+        </TabsContent>
+
+        <TabsContent className="membership-panel" value="credits">
+          {creditPacks.length > 0 && (
+            <div className="membership-credit-grid">
+              {creditPacks.map((product) => (
+                <article className="membership-credit-card" key={product.id}>
+                  <div className="membership-credit-copy">
+                    <h3>{product.name}</h3>
+                    <p className="membership-card-meta">{product.credits > 0 ? `${product.credits} 点` : "点数包"}</p>
+                    <p>{product.description || "按需补充咨询点数"}</p>
+                  </div>
+                  <p className="membership-card-price">{formatPrice(product.priceCents, product.currency)}</p>
+                  <ul className="membership-card-entitlements">
+                    {product.entitlements.map((entitlement, index) => (
+                      <li key={index}>{entitlementLabel(entitlement)}</li>
+                    ))}
+                  </ul>
+                  <details className="membership-rules">
+                    <summary>详细规则</summary>
+                    <ul>
+                      <li>点数充值支付成功后立即到账。</li>
+                    </ul>
+                  </details>
+                  <Button
+                    className="membership-buy"
+                    variant="outline"
+                    type="button"
+                    disabled={!paymentEnabled || Boolean(payingProductId)}
+                    onClick={() => void createPayment(product.id)}
+                  >
+                    {payingLabel(payingProductId === product.id, "立即购买")}
+                  </Button>
+                </article>
+              ))}
+            </div>
+          )}
+          {packagesSettled && !packagesError && paymentEnabled && creditPacks.length === 0 && <p className="membership-empty">点数包正在上架中。</p>}
+        </TabsContent>
+
+        <TabsContent className="membership-panel" value="redeem">
+          <h2 id="membership-redeem-title">兑换点数</h2>
+          <div className="redeem-balance">
+            <span>{activeSubscription ? "当前会员" : "当前余额"}</span>
+            <strong>{activeSubscription
+              ? `${activeSubscription.product?.name || activeSubscription.productCode} · ${formatMembershipDate(activeSubscription.endsAt)} 到期`
+              : `${credits} 点`}</strong>
+          </div>
+          <form className="redeem-form" onSubmit={redeem}>
+            <label htmlFor="membership-redeem-code">兑换码</label>
+            <div>
+              <input
+                id="membership-redeem-code"
+                autoComplete="off"
+                value={redeemCode}
+                onChange={(event) => {
+                  setRedeemCode(event.target.value);
+                  setRedeemError("");
+                  setRedeemMessage("");
+                  setRedeemDone(false);
+                }}
+                placeholder="输入完整兑换码"
+              />
+              <Button type="submit" disabled={!redeemCode.trim() || redeeming || redeemDone}>
+                {redeeming ? "兑换中" : "立即兑换"}
+              </Button>
+            </div>
+            {redeemError && <p className="form-error" role="alert">{redeemError}</p>}
+            {redeemMessage && <p className="form-success" role="status">{redeemMessage}</p>}
+            {redeemDone && (
+              <div className="dialog-actions">
+                <Button type="button" onClick={closeRedeem}>完成</Button>
+              </div>
+            )}
+          </form>
+          <details className="membership-rules">
+            <summary>兑换规则</summary>
+            <ul>
+              <li>请完整输入兑换码，系统会按 JYOTISH-XXXX-XXXX 格式校验。</li>
+              <li>兑换成功后点数立即到账，余额实时更新。</li>
+              <li>每个兑换码仅可使用一次，无法转让或退换。</li>
+            </ul>
+          </details>
+        </TabsContent>
+
+        <TabsContent className="membership-panel" value="orders">
+          <div className="membership-section-heading">
+            <div>
+              <h2 id="membership-orders-title">全部订单</h2>
+              <p>查看套餐与点数包的支付和到账状态。</p>
+            </div>
+            <button className="membership-orders-refresh" type="button" onClick={() => void fetchOrders()}>刷新</button>
+          </div>
+          {ordersState === "unavailable" && <p className="membership-empty">订单记录暂时不可用，请稍后刷新。</p>}
+          {ordersState === "ready" && orders.length === 0 && <p className="membership-empty">暂无订单。</p>}
+          {orders.length > 0 && (
+            <ul className="membership-order-list">
+              {orders.map((order) => (
+                <li className="membership-order-row" key={order.orderNo}>
+                  <div>
+                    <strong>{order.productName || "订单"}</strong>
+                    <small>{order.orderNo}</small>
+                  </div>
+                  <span className={`membership-order-status status-${order.status}`}>
+                    {orderStatusLabel(order.status)}
+                  </span>
+                  <b>{formatPrice(order.moneyCents, order.currency)}</b>
+                </li>
+              ))}
+            </ul>
+          )}
+        </TabsContent>
+      </Tabs>
+
+      {paymentOrder && (
+        <section className="membership-payment-panel" role="status" aria-live="polite">
+          <span className="membership-payment-icon" aria-hidden="true">
+            {paymentOrder.status === "paid" ? <CheckCircle2 /> : paymentOrder.status === "failed" ? <X /> : <Sparkles />}
+          </span>
+          <div className="membership-payment-copy">
+            {paymentOrder.status === "paid" && (
+              <>
+                <h3>支付成功，权益已到账</h3>
+                <p>订单号：{paymentOrder.orderNo}</p>
+                <p>余额与会员状态已刷新。</p>
+              </>
+            )}
+            {paymentOrder.status === "failed" && (
+              <>
+                <h3>支付失败</h3>
+                <p>订单号：{paymentOrder.orderNo}</p>
+                <p>订单未完成支付，可重新支付或稍后再试。</p>
+              </>
+            )}
+            {paymentOrder.status === "pending" && (
+              <>
+                <h3>等待支付结果</h3>
+                <p>订单号：{paymentOrder.orderNo}</p>
+                <p>请在已打开的收银台页面完成支付；打开后会自动检查支付状态并刷新余额。</p>
+              </>
+            )}
+          </div>
+          <div className="dialog-actions">
+            {paymentOrder.status === "failed" && (
+              <Button
+                variant="outline"
+                type="button"
+                disabled={Boolean(payingProductId)}
+                onClick={() => void createPayment(paymentOrder.productId)}
+              >
+                {payingLabel(payingProductId === paymentOrder.productId, "重新支付")}
+              </Button>
+            )}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/chart-library-panel.tsx b/frontend/src/components/chart-library-panel.tsx
index c1ca5d74..33ffb299 100644
--- a/frontend/src/components/chart-library-panel.tsx
+++ b/frontend/src/components/chart-library-panel.tsx
@@ -1,7 +1,8 @@
 "use client";
 
-import type { Dispatch, FormEvent, SetStateAction } from "react";
-import { ProfileFields } from "@/components/profile-fields";
+import { ChevronRight } from "lucide-react";
+import { useState, type Dispatch, FormEvent, SetStateAction } from "react";
+import { ChartProfileForm } from "@/components/chart-profile-form";
 import { activeChartStorageKey, deleteCloudChartProfile, saveCloudChartProfile, updateCloudChartProfile } from "@/lib/home-cloud-sync";
 import {
   chartRelationshipLabel,
@@ -23,8 +24,11 @@ import {
   type SynastryRelationshipType,
   type SynastryReportCard,
 } from "@/lib/home-types";
-import { AyanamsaPreferenceField } from "@/components/ayanamsa-preference-field";
-import { resolveAyanamsa } from "@/lib/ayanamsa";
+import {
+  CHART_LIBRARY_LIST_VIEW,
+  synastryHistoryForPartner,
+  type ChartLibraryView,
+} from "@/lib/chart-library-view";
 
 export type ChartLibraryPanelProps = {
   readonly account: Account | null;
@@ -39,14 +43,6 @@ export type ChartLibraryPanelProps = {
   readonly profileNotice: string;
   readonly setProfileNotice: Dispatch<SetStateAction<string>>;
   readonly setAccountError: Dispatch<SetStateAction<string>>;
-  readonly editingSelfChart: boolean;
-  readonly setEditingSelfChart: Dispatch<SetStateAction<boolean>>;
-  readonly otherProfileDraft: Profile;
-  readonly setOtherProfileDraft: Dispatch<SetStateAction<Profile>>;
-  readonly otherChartRelationship: Exclude<ChartRelationship, "self">;
-  readonly setOtherChartRelationship: Dispatch<SetStateAction<Exclude<ChartRelationship, "self">>>;
-  readonly editingChartId: string | null;
-  readonly setEditingChartId: Dispatch<SetStateAction<string | null>>;
   readonly synastryRelationshipType: SynastryRelationshipType;
   readonly setSynastryRelationshipType: Dispatch<SetStateAction<SynastryRelationshipType>>;
   readonly synastryPendingId: string | null;
@@ -72,14 +68,6 @@ export function ChartLibraryPanel({
   profileNotice,
   setProfileNotice,
   setAccountError,
-  editingSelfChart,
-  setEditingSelfChart,
-  otherProfileDraft,
-  setOtherProfileDraft,
-  otherChartRelationship,
-  setOtherChartRelationship,
-  editingChartId,
-  setEditingChartId,
   synastryRelationshipType,
   setSynastryRelationshipType,
   synastryPendingId,
@@ -91,6 +79,31 @@ export function ChartLibraryPanel({
   saveProfile,
   draftSynastryQuestionFromChart,
 }: ChartLibraryPanelProps) {
+  const [view, setView] = useState<ChartLibraryView>(CHART_LIBRARY_LIST_VIEW);
+  const [otherProfileDraft, setOtherProfileDraft] = useState<Profile>(emptyProfile);
+  const [otherChartRelationship, setOtherChartRelationship] = useState<Exclude<ChartRelationship, "self">>("other");
+  const [editingChartId, setEditingChartId] = useState<string | null>(null);
+
+  const selfCharts = chartLibrary.filter((record) => record.role === "self");
+  const otherCharts = chartLibrary.filter((record) => record.role === "other");
+  const selectedOther = view.kind === "other"
+    ? otherCharts.find((record) => record.id === view.id) ?? null
+    : null;
+  const partnerHistory = selectedOther
+    ? synastryHistoryForPartner(synastryHistory, {
+      id: selectedOther.id,
+      name: selectedOther.profile.name || "对方",
+    })
+    : [];
+
+  function goList() {
+    setView(CHART_LIBRARY_LIST_VIEW);
+    setEditingChartId(null);
+    setOtherProfileDraft(emptyProfile);
+    setOtherChartRelationship("other");
+    setProfileDraft(profile);
+  }
+
   async function saveOtherChart(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const nextProfile = { ...otherProfileDraft, name: otherProfileDraft.name.trim(), chartRelationship: otherChartRelationship };
@@ -123,6 +136,7 @@ export function ChartLibraryPanel({
       setEditingChartId(null);
       setAccountError("");
       setProfileNotice(editingChartId ? "已更新其他人的星盘资料。" : "已保存到云端星盘库。请选择关系类型后点击“用于合盘”。");
+      setView(CHART_LIBRARY_LIST_VIEW);
     } catch {
       setProfileNotice("保存失败，请重试");
       setAccountError("");
@@ -136,6 +150,7 @@ export function ChartLibraryPanel({
     setEditingChartId(record.id);
     setAccountError("");
     setProfileNotice("");
+    setView({ kind: "other", id: record.id });
   }
 
   async function deleteOtherChart(recordId: string) {
@@ -157,6 +172,7 @@ export function ChartLibraryPanel({
     });
     setAccountError("");
     setProfileNotice("已从云端星盘库删除。");
+    goList();
   }
 
   function makeDefaultChart(record: ChartLibraryRecord) {
@@ -167,118 +183,165 @@ export function ChartLibraryPanel({
     setProfileNotice("已设为当前使用资料，账户本人的出生资料未被覆盖。");
   }
 
-  return (
-          <div className="chart-library-panel" aria-label="星盘资料管理">
-            <div className="chart-library-group">
-              <div className="chart-library-group-heading">
-                <div><b>我的星盘</b><small>当前账号的默认资料</small></div>
-                <span className="chart-library-count">{chartLibrary.filter((record) => record.role === "self").length}</span>
-              </div>
-              {chartLibrary.filter((record) => record.role === "self").map((record) => (
-                <article className="chart-library-item" key={record.id}>
-                  <div className="chart-library-item-main">
-                    <div className="chart-library-item-title"><strong>{record.profile.name || "未命名"}</strong><span className="chart-role-badge is-self">本人</span><span className="chart-default-badge">当前默认</span></div>
-                    <small>{record.profile.date || "出生日期待补全"} · {profileBirthTimeLabel(record.profile)} · {profilePlaceLabel(record.profile)}</small>
-                    <small>{profileBirthTimeStatusLabel(record.profile)} · {formatChartUpdatedAt(record.updatedAt)}</small>
-                  </div>
-                  <div className="chart-library-actions">
-                    <button className="button-secondary" type="button" onClick={() => { setProfileDraft(record.profile); setEditingSelfChart(true); }} disabled={profileSaving || editingChartId !== null}>编辑本人资料</button>
-                  </div>
-                </article>
-              ))}
-              {editingSelfChart && (
-                <form className="profile-form chart-library-form" onSubmit={saveProfile}>
-                  <div className="section-heading"><b>编辑本人星盘</b><small>这份资料会用于默认解盘与新对话。</small></div>
-                  <ProfileFields value={profileDraft} onChange={setProfileDraft} nameInputId="self-profile-name" />
-                  <AyanamsaPreferenceField
-                    value={resolveAyanamsa(profileDraft)}
-                    onChange={(ayanamsa) => setProfileDraft({ ...profileDraft, ayanamsa })}
-                  />
-                  {profileNotice && <p className="form-success" role="status">{profileNotice}</p>}
-                  <div className="dialog-actions">
-                    <button className="button-secondary" type="button" onClick={() => { setEditingSelfChart(false); setProfileDraft(profile); }}>取消编辑</button>
-                    <button className="button-primary save-profile" type="submit" disabled={!account || profileSaving}>{profileSaving ? "保存中" : "保存本人资料"}</button>
-                  </div>
-                </form>
-              )}
-              {chartLibrary.filter((record) => record.role === "self").length === 0 && <p className="empty-library-copy">请先在个人资料中补全你的出生资料。</p>}
-            </div>
-            <div className="chart-library-group">
-              <div className="chart-library-group-heading">
-                <div><b>其他人的星盘</b><small>亲友、伴侣或客户资料</small></div>
-                <span className="chart-library-count">{chartLibrary.filter((record) => record.role === "other").length}</span>
-              </div>
-              {chartLibrary.filter((record) => record.role === "other").length === 0 && <p className="empty-library-copy">还没有其他星盘，先添加一份资料。</p>}
-              {chartLibrary.filter((record) => record.role === "other").map((record) => (
-                <article className="chart-library-item" key={record.id}>
-                  <div className="chart-library-item-main">
-                    <div className="chart-library-item-title"><strong>{record.profile.name || "未命名"}</strong><span className="chart-role-badge">{chartRelationshipLabel(record.relationship)}</span></div>
-                    <small>{record.profile.date || "出生日期待补全"} · {profileBirthTimeLabel(record.profile)} · {profilePlaceLabel(record.profile)}</small>
-                    <small>{profileBirthTimeStatusLabel(record.profile)} · {formatChartUpdatedAt(record.updatedAt)}</small>
-                  </div>
-                  <div className="chart-library-actions">
-                    <select aria-label={`${record.profile.name || "其他人"}的关系类型`} value={synastryRelationshipType} onChange={(event) => setSynastryRelationshipType(event.target.value as SynastryRelationshipType)} disabled={synastryPendingId !== null}>
-                      <option value="romance">婚恋</option>
-                      <option value="business">商业合作</option>
-                      <option value="family">亲友/家庭</option>
-                      <option value="general">其他关系</option>
-                    </select>
-                    <button className="button-secondary" type="button" onClick={() => void draftSynastryQuestionFromChart(record, synastryRelationshipType)} disabled={synastryPendingId !== null}>{synastryPendingId === record.id ? "正在计算合盘..." : "用于合盘"}</button>
-                    <button className="button-secondary" type="button" onClick={() => editOtherChart(record)} disabled={profileSaving || editingChartId !== null}>编辑</button>
-                    <button className="button-secondary" type="button" onClick={() => makeDefaultChart(record)} disabled={profileSaving}>设为默认</button>
-                    <button className="button-secondary" type="button" onClick={() => void deleteOtherChart(record.id)}>删除</button>
-                  </div>
-                </article>
-              ))}
-            </div>
-                {synastryReportCard && (
-                  <article className="synastry-report-card" aria-label="合盘结果摘要">
-                    <div>
-                      <span>合盘结果摘要</span>
-                      <strong>{synastryReportCard.partnerName}</strong>
-                      <small>Ashtakoot {synastryReportCard.score ?? "?"}/{synastryReportCard.maxScore ?? "?"} · {synastryReportCard.assessment || synastryReportCard.scoreBand || "待解释"}</small>
-                    </div>
-                    {synastryReportCard.headline && <p>{synastryReportCard.headline}</p>}
-                    <details>
-                      <summary>查看证据</summary>
-                      <ul>
-                        {(synastryReportCard.strengths || []).map((item) => <li key={item}>{item}</li>)}
-                        {(synastryReportCard.risks || []).map((item) => <li key={item}>{item}</li>)}
-                      </ul>
-                      <small>下一步证据：{(synastryReportCard.nextEvidence || []).join(" / ") || "双方 Dasha / UL-DK / D9 7宫"}</small>
-                    </details>
-                  </article>
-                )}
-                {synastryHistory.length > 0 && (
-                  <div className="synastry-history-list" aria-label="合盘历史">
-                    <b>合盘历史</b>
-                    {synastryHistory.slice(0, 5).map((item) => (
-                      <button key={item.id} type="button" className="synastry-history-item" onClick={() => setSynastryReportCard(item)}>
-                        <span>{item.partnerName}</span>
-                        <small>Ashtakoot {item.score ?? "?"}/{item.maxScore ?? "?"} · {item.assessment || item.scoreBand || "待解释"}</small>
-                      </button>
-                    ))}
-                  </div>
-                )}
-                <form className="profile-form chart-library-form" onSubmit={saveOtherChart}>
-                  <div className="section-heading"><b>{editingChartId ? "编辑其他人的星盘" : "添加其他人的星盘"}</b><small>用于合盘、亲友盘或客户盘。</small></div>
-                  <label>
-                    <span>关系</span>
-                    <select value={otherChartRelationship} onChange={(event) => setOtherChartRelationship(event.target.value as Exclude<ChartRelationship, "self">)}>
-                      <option value="partner">伴侣</option>
-                      <option value="family">家人</option>
-                      <option value="friend">朋友</option>
-                      <option value="client">客户</option>
-                      <option value="other">其他</option>
-                    </select>
-                  </label>
-                  <ProfileFields value={otherProfileDraft} onChange={setOtherProfileDraft} nameInputId="other-profile-name" />
-                  <div className="dialog-actions">
-                    {editingChartId && <button className="button-secondary" type="button" onClick={() => { setEditingChartId(null); setOtherProfileDraft(emptyProfile); setOtherChartRelationship("other"); }}>取消编辑</button>}
-                    <button className="button-primary save-profile" type="submit" disabled={!account || profileSaving}>{profileSaving ? "保存中" : editingChartId ? "保存修改" : "添加到星盘库"}</button>
-                  </div>
-                </form>
-              </div>
+  function listRow(record: ChartLibraryRecord) {
+    const isSelf = record.role === "self";
+    return (
+      <button
+        className="chart-library-item"
+        key={record.id}
+        type="button"
+        onClick={() => {
+          if (isSelf) {
+            setProfileDraft(record.profile);
+            setView({ kind: "self" });
+            return;
+          }
+          editOtherChart(record);
+        }}
+      >
+        <div className="chart-library-item-main">
+          <div className="chart-library-item-title">
+            <strong>{record.profile.name || "未命名"}</strong>
+            <span className={`chart-role-badge${isSelf ? " is-self" : ""}`}>{isSelf ? "本人" : chartRelationshipLabel(record.relationship)}</span>
+            {isSelf ? <span className="chart-default-badge">当前默认</span> : null}
+          </div>
+          <small>{record.profile.date || "出生日期待补全"} · {profileBirthTimeLabel(record.profile)} · {profilePlaceLabel(record.profile)}</small>
+          <small>{profileBirthTimeStatusLabel(record.profile)} · {formatChartUpdatedAt(record.updatedAt)}</small>
+        </div>
+        <ChevronRight className="chart-library-item-chevron" aria-hidden="true" />
+      </button>
+    );
+  }
 
+  if (view.kind === "self") {
+    return (
+      <div className="chart-library-panel" aria-label="星盘资料管理">
+        <button className="chart-library-back" type="button" onClick={goList}>← 星盘资料</button>
+        <ChartProfileForm
+          title="编辑本人星盘"
+          description="这份资料会用于默认解盘与新对话。"
+          value={profileDraft}
+          onChange={setProfileDraft}
+          nameInputId="self-profile-name"
+          showAyanamsa
+          onSubmit={saveProfile}
+          onCancel={goList}
+          cancelLabel="返回列表"
+          submitLabel={profileSaving ? "保存中" : "保存本人资料"}
+          submitDisabled={!account || profileSaving}
+          notice={profileNotice}
+        />
+      </div>
+    );
+  }
+
+  if (view.kind === "add" || (view.kind === "other" && selectedOther)) {
+    const isAdd = view.kind === "add";
+    return (
+      <div className="chart-library-panel" aria-label="星盘资料管理">
+        <button className="chart-library-back" type="button" onClick={goList}>← 星盘资料</button>
+        <ChartProfileForm
+          title={isAdd ? "添加其他人的星盘" : "编辑其他人的星盘"}
+          description="用于合盘、亲友盘或客户盘。"
+          value={otherProfileDraft}
+          onChange={setOtherProfileDraft}
+          nameInputId="other-profile-name"
+          relationship={otherChartRelationship}
+          onRelationshipChange={setOtherChartRelationship}
+          onSubmit={saveOtherChart}
+          onCancel={goList}
+          cancelLabel="返回列表"
+          submitLabel={profileSaving ? "保存中" : editingChartId ? "保存修改" : "添加到星盘库"}
+          submitDisabled={!account || profileSaving}
+          notice={profileNotice}
+        />
+        {!isAdd && selectedOther ? (
+          <>
+            <div className="chart-library-actions">
+              <button className="button-secondary" type="button" onClick={() => makeDefaultChart(selectedOther)} disabled={profileSaving}>设为默认</button>
+              <button className="button-secondary" type="button" onClick={() => void deleteOtherChart(selectedOther.id)}>删除</button>
+            </div>
+            <section className="chart-library-group" aria-label="合盘">
+              <div className="chart-library-group-heading">
+                <div><b>合盘</b><small>把这份资料用于合盘分析</small></div>
+              </div>
+              <div className="chart-library-actions">
+                <select aria-label={`${selectedOther.profile.name || "其他人"}的关系类型`} value={synastryRelationshipType} onChange={(event) => setSynastryRelationshipType(event.target.value as SynastryRelationshipType)} disabled={synastryPendingId !== null}>
+                  <option value="romance">婚恋</option>
+                  <option value="business">商业合作</option>
+                  <option value="family">亲友/家庭</option>
+                  <option value="general">其他关系</option>
+                </select>
+                <button className="button-secondary" type="button" onClick={() => void draftSynastryQuestionFromChart(selectedOther, synastryRelationshipType)} disabled={synastryPendingId !== null}>{synastryPendingId === selectedOther.id ? "正在计算合盘..." : "用于合盘"}</button>
+              </div>
+              {synastryReportCard && synastryHistoryForPartner([synastryReportCard], { id: selectedOther.id, name: selectedOther.profile.name || "对方" }).length > 0 && (
+                <article className="synastry-report-card" aria-label="合盘结果摘要">
+                  <div>
+                    <span>合盘结果摘要</span>
+                    <strong>{synastryReportCard.partnerName}</strong>
+                    <small>Ashtakoot {synastryReportCard.score ?? "?"}/{synastryReportCard.maxScore ?? "?"} · {synastryReportCard.assessment || synastryReportCard.scoreBand || "待解释"}</small>
+                  </div>
+                  {synastryReportCard.headline && <p>{synastryReportCard.headline}</p>}
+                  <details>
+                    <summary>查看证据</summary>
+                    <ul>
+                      {(synastryReportCard.strengths || []).map((item) => <li key={item}>{item}</li>)}
+                      {(synastryReportCard.risks || []).map((item) => <li key={item}>{item}</li>)}
+                    </ul>
+                    <small>下一步证据：{(synastryReportCard.nextEvidence || []).join(" / ") || "双方 Dasha / UL-DK / D9 7宫"}</small>
+                  </details>
+                </article>
+              )}
+              {partnerHistory.length > 0 && (
+                <div className="synastry-history-list" aria-label="合盘历史">
+                  <b>合盘历史</b>
+                  {partnerHistory.slice(0, 5).map((item) => (
+                    <button key={item.id} type="button" className="synastry-history-item" onClick={() => setSynastryReportCard(item)}>
+                      <span>{item.partnerName}</span>
+                      <small>Ashtakoot {item.score ?? "?"}/{item.maxScore ?? "?"} · {item.assessment || item.scoreBand || "待解释"}</small>
+                    </button>
+                  ))}
+                </div>
+              )}
+            </section>
+          </>
+        ) : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className="chart-library-panel" aria-label="星盘资料管理">
+      <div className="chart-library-group">
+        <div className="chart-library-group-heading">
+          <div><b>我的星盘</b><small>当前账号的默认资料</small></div>
+          <span className="chart-library-count">{selfCharts.length}</span>
+        </div>
+        {selfCharts.map(listRow)}
+        {selfCharts.length === 0 && <p className="empty-library-copy">请先在个人资料中补全你的出生资料。</p>}
+      </div>
+      <div className="chart-library-group">
+        <div className="chart-library-group-heading">
+          <div><b>其他人</b><small>亲友、伴侣或客户资料</small></div>
+          <span className="chart-library-count">{otherCharts.length}</span>
+        </div>
+        {otherCharts.length === 0 && <p className="empty-library-copy">还没有其他星盘，先添加一份资料。</p>}
+        {otherCharts.map(listRow)}
+        <button
+          className="button-secondary chart-library-add"
+          type="button"
+          onClick={() => {
+            setOtherProfileDraft(emptyProfile);
+            setOtherChartRelationship("other");
+            setEditingChartId(null);
+            setAccountError("");
+            setProfileNotice("");
+            setView({ kind: "add" });
+          }}
+        >
+          添加其他人
+        </button>
+      </div>
+    </div>
   );
 }
diff --git a/frontend/src/components/chart-profile-form.tsx b/frontend/src/components/chart-profile-form.tsx
new file mode 100644
index 00000000..b1ee6267
--- /dev/null
+++ b/frontend/src/components/chart-profile-form.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import type { Dispatch, FormEvent, SetStateAction } from "react";
+import { AyanamsaPreferenceField } from "@/components/ayanamsa-preference-field";
+import { ProfileFields } from "@/components/profile-fields";
+import { resolveAyanamsa } from "@/lib/ayanamsa";
+import type { ChartRelationship, Profile } from "@/lib/home-types";
+
+export type ChartProfileFormProps = {
+  readonly title: string;
+  readonly description: string;
+  readonly value: Profile;
+  readonly onChange: Dispatch<SetStateAction<Profile>>;
+  readonly nameInputId: string;
+  readonly showAyanamsa?: boolean;
+  readonly relationship?: Exclude<ChartRelationship, "self">;
+  readonly onRelationshipChange?: (value: Exclude<ChartRelationship, "self">) => void;
+  readonly onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  readonly onCancel?: () => void;
+  readonly cancelLabel?: string;
+  readonly submitLabel: string;
+  readonly submitDisabled: boolean;
+  readonly notice?: string;
+};
+
+export function ChartProfileForm({
+  title,
+  description,
+  value,
+  onChange,
+  nameInputId,
+  showAyanamsa = false,
+  relationship,
+  onRelationshipChange,
+  onSubmit,
+  onCancel,
+  cancelLabel = "取消",
+  submitLabel,
+  submitDisabled,
+  notice,
+}: ChartProfileFormProps) {
+  return (
+    <form className="profile-form chart-library-form" onSubmit={onSubmit}>
+      <div className="section-heading"><b>{title}</b><small>{description}</small></div>
+      {relationship !== undefined && onRelationshipChange ? (
+        <label>
+          <span>关系</span>
+          <select value={relationship} onChange={(event) => onRelationshipChange(event.target.value as Exclude<ChartRelationship, "self">)}>
+            <option value="partner">伴侣</option>
+            <option value="family">家人</option>
+            <option value="friend">朋友</option>
+            <option value="client">客户</option>
+            <option value="other">其他</option>
+          </select>
+        </label>
+      ) : null}
+      <ProfileFields value={value} onChange={onChange} nameInputId={nameInputId} />
+      {showAyanamsa ? (
+        <AyanamsaPreferenceField
+          value={resolveAyanamsa(value)}
+          onChange={(ayanamsa) => onChange((current) => ({ ...current, ayanamsa }))}
+        />
+      ) : null}
+      {notice ? <p className="form-success" role="status">{notice}</p> : null}
+      <div className="dialog-actions">
+        {onCancel ? <button className="button-secondary" type="button" onClick={onCancel}>{cancelLabel}</button> : null}
+        <button className="button-primary save-profile" type="submit" disabled={submitDisabled}>{submitLabel}</button>
+      </div>
+    </form>
+  );
+}
diff --git a/frontend/src/components/conversational-birth-time-rectification.tsx b/frontend/src/components/conversational-birth-time-rectification.tsx
index 26dbffb3..5178bf01 100644
--- a/frontend/src/components/conversational-birth-time-rectification.tsx
+++ b/frontend/src/components/conversational-birth-time-rectification.tsx
@@ -47,6 +47,7 @@ export type ConversationalBirthTimeRectificationProps = Readonly<{
   onCompleted?: () => void;
   onPendingChange?: (pending: boolean) => void;
   onProfileIncomplete?: () => void;
+  onOpenBilling?: (options?: { source?: string }) => void;
   onSaved?: (time: string, status: "accepted" | "confirmed") => void;
   onOpeningConsumed?: () => void;
   pendingConsultationQuestion?: string | null;
diff --git a/frontend/src/components/onboarding-redeem-paywall.tsx b/frontend/src/components/onboarding-redeem-paywall.tsx
index 2bf52634..f0a64a4a 100644
--- a/frontend/src/components/onboarding-redeem-paywall.tsx
+++ b/frontend/src/components/onboarding-redeem-paywall.tsx
@@ -1,22 +1,23 @@
 "use client";
 
-import Link from "next/link";
 import { Gift, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import type { FormEvent } from "react";
 import { keepFocusWithin } from "@/lib/focus-trap";
-import { membershipHref, notifyBalanceChanged, redeemErrorMessage } from "@/lib/membership";
+import { notifyBalanceChanged, redeemErrorMessage } from "@/lib/membership";
 
 type OnboardingRedeemPaywallProps = {
   credits: number;
   onClose: () => void;
   onCreditsChanged: (credits: number) => void;
+  onOpenBilling: () => void;
 };
 
 export function OnboardingRedeemPaywall({
   credits,
   onClose,
   onCreditsChanged,
+  onOpenBilling,
 }: OnboardingRedeemPaywallProps) {
   const [code, setCode] = useState("");
   const [error, setError] = useState("");
@@ -126,7 +127,7 @@ export function OnboardingRedeemPaywall({
           {unlocked ? (
             <button className="button-primary" type="button" onClick={close}>开始咨询</button>
           ) : (
-            <Link className="button-secondary" href={membershipHref("onboarding-paywall")}>查看套餐与会员</Link>
+            <button className="button-secondary" type="button" onClick={onOpenBilling}>查看套餐与会员</button>
           )}
         </div>
       </section>
diff --git a/frontend/src/components/profile-panel.tsx b/frontend/src/components/profile-panel.tsx
new file mode 100644
index 00000000..4f52d4a2
--- /dev/null
+++ b/frontend/src/components/profile-panel.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { UserAvatar } from "@/components/user-avatar";
+import { beamAvatarPalettes, type BeamAvatarPatch } from "@/lib/beam-avatar";
+import type { Account, Profile } from "@/lib/home-types";
+
+export type ProfilePanelProps = {
+  readonly account: Account;
+  readonly profile: Profile;
+  readonly avatarSaving: boolean;
+  readonly avatarNotice: string;
+  readonly accountError: string;
+  readonly persistAvatar: (patch: BeamAvatarPatch) => void;
+};
+
+export function ProfilePanel({
+  account,
+  profile,
+  avatarSaving,
+  avatarNotice,
+  accountError,
+  persistAvatar,
+}: ProfilePanelProps) {
+  return (
+    <>
+      {accountError && <p className="form-error" role="alert">{accountError}</p>}
+      {account.avatar && (
+        <section className="sheet-section avatar-section" aria-labelledby="avatar-section-title">
+          <div className="section-heading">
+            <b id="avatar-section-title">头像</b>
+            <small>Beam 形象由随机种子生成，刷新和换设备后保持一致</small>
+          </div>
+          <div className="avatar-editor">
+            <UserAvatar avatar={account.avatar} size={48} label="当前头像预览" />
+            <div className="avatar-editor-controls">
+              <div className="avatar-palette-list" role="radiogroup" aria-label="头像配色">
+                {beamAvatarPalettes.map((palette, index) => (
+                  <button
+                    key={palette.name}
+                    className="avatar-palette"
+                    type="button"
+                    role="radio"
+                    aria-checked={account.avatar?.palette === index}
+                    aria-label={palette.name}
+                    title={palette.name}
+                    disabled={avatarSaving}
+                    onClick={() => void persistAvatar({ action: "set_palette", palette: index })}
+                  >
+                    {palette.colors.map((color) => <span key={color} style={{ backgroundColor: color }} />)}
+                  </button>
+                ))}
+              </div>
+              <button
+                className="button-secondary avatar-randomize"
+                type="button"
+                disabled={avatarSaving}
+                onClick={() => void persistAvatar({ action: "randomize" })}
+              >
+                {avatarSaving ? "保存中" : "换一个形象"}
+              </button>
+            </div>
+          </div>
+          {avatarNotice && <p className="form-success avatar-notice" role="status">{avatarNotice}</p>}
+        </section>
+      )}
+      <section className="sheet-section" aria-labelledby="account-info-title">
+        <div className="section-heading"><b id="account-info-title">账户信息</b><small>登录与账户识别信息</small></div>
+        <dl className="account-info-list">
+          <div><dt>昵称</dt><dd>{profile.name.trim() || "尚未设置"}<small>与“我的星盘”名称同步</small></dd></div>
+          <div><dt>登录邮箱</dt><dd>{account.user.email || "尚未读取邮箱"}</dd></div>
+        </dl>
+      </section>
+    </>
+  );
+}
diff --git a/frontend/src/components/rectification-agentic-chat.tsx b/frontend/src/components/rectification-agentic-chat.tsx
index 3e12b347..8d987a31 100644
--- a/frontend/src/components/rectification-agentic-chat.tsx
+++ b/frontend/src/components/rectification-agentic-chat.tsx
@@ -44,14 +44,12 @@ import {
   diffRectificationBoard,
   RECTIFICATION_BOARD_SPLIT_MIN_PX,
 } from "@/lib/rectification-board-model";
-import { membershipHref } from "@/lib/membership";
 import { rectificationTimelineRows } from "@/lib/rectification-timeline-adapter";
 import {
   rectificationAdoptingLabel,
   RECTIFICATION_EMPTY_ACTION_LABEL,
   RECTIFICATION_EMPTY_COPY,
   RECTIFICATION_INSUFFICIENT_CREDITS_NOTICE,
-  RECTIFICATION_INSUFFICIENT_CREDITS_REDIRECT_MS,
   RECTIFICATION_QUESTION_PREPARING_LABEL,
   RECTIFICATION_QUESTION_RELOAD_LABEL,
   RECTIFICATION_QUESTION_RETRY_INTERVAL_MS,
@@ -240,6 +238,7 @@ type RectificationAgenticChatProps = Readonly<{
   onCompleted?: () => void;
   onPendingChange?: (pending: boolean) => void;
   onProfileIncomplete?: () => void;
+  onOpenBilling?: (options?: { source?: string }) => void;
   onSaved?: (time: string, status: "accepted" | "confirmed") => void;
   onOpeningConsumed?: () => void;
   pendingConsultationQuestion?: string | null;
@@ -476,6 +475,7 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
     onCompleted,
     onPendingChange,
     onProfileIncomplete,
+    onOpenBilling,
     onSaved,
     onOpeningConsumed,
     pendingConsultationQuestion,
@@ -824,11 +824,9 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
           return;
         }
         if (response.status === 402) {
-          // Say why before the page leaves, instead of vanishing mid-chat.
+          // Keep the conversation on this page; the settings pane covers billing.
           setError(RECTIFICATION_INSUFFICIENT_CREDITS_NOTICE);
-          window.setTimeout(() => {
-            window.location.assign(membershipHref("rectification"));
-          }, RECTIFICATION_INSUFFICIENT_CREDITS_REDIRECT_MS);
+          onOpenBilling?.({ source: "rectification" });
           return;
         }
         if (response.status === 401) setError("请先登录。");
@@ -1053,7 +1051,7 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
       lastRunOutcome.current = readonly ? "readonly" : runOutcome;
       setPending(false);
     }
-  }, [beginLiveRun, busy, caseId, loadCaseSnapshot, onCompleted, onMessagesChange, onProfileIncomplete, readonly, rememberLiveActivity, selectedModelId, sessionId, setPending]);
+  }, [beginLiveRun, busy, caseId, loadCaseSnapshot, onCompleted, onMessagesChange, onOpenBilling, onProfileIncomplete, readonly, rememberLiveActivity, selectedModelId, sessionId, setPending]);
 
   useEffect(() => {
     if (busy) return;
diff --git a/frontend/src/hooks/use-billing-panel.ts b/frontend/src/hooks/use-billing-panel.ts
new file mode 100644
index 00000000..58268d19
--- /dev/null
+++ b/frontend/src/hooks/use-billing-panel.ts
@@ -0,0 +1,353 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { FormEvent } from "react";
+import type { Account } from "@/lib/home-types";
+import {
+  notifyBalanceChanged,
+  redeemErrorMessage,
+  type BillingPaneTab,
+  type MembershipPlanAlias,
+  type MembershipProduct,
+} from "@/lib/membership";
+
+export type BillingAccount = {
+  user: { id: string; email: string | null };
+  credits: number;
+  activeSubscription: Account["activeSubscription"];
+};
+
+export type PaymentOrderState = {
+  orderNo: string;
+  payUrl: string | null;
+  qrCode: string | null;
+  status: string;
+  productId: string;
+};
+
+export type PaymentOrder = {
+  orderNo: string;
+  status: string;
+  credits: number;
+  moneyCents: number;
+  currency: string;
+  productName: string;
+  paidAt: string | null;
+  createdAt: string;
+};
+
+export type OrdersState = "idle" | "ready" | "unavailable";
+
+function toBillingAccount(account: Account | BillingAccount | null): BillingAccount | null {
+  if (!account) return null;
+  return {
+    user: account.user,
+    credits: account.credits,
+    activeSubscription: account.activeSubscription,
+  };
+}
+
+export function normalizeOrders(list: readonly unknown[]): PaymentOrder[] {
+  return list.map((raw) => {
+    const item = (raw ?? {}) as Record<string, unknown>;
+    const snapshot = (item.product_snapshot ?? item.product ?? {}) as Record<string, unknown>;
+    const price =
+      typeof item.price === "number"
+        ? item.price
+        : typeof item.money_cents === "number"
+          ? item.money_cents
+          : typeof item.moneyCents === "number"
+            ? item.moneyCents
+            : 0;
+    return {
+      orderNo: String(item.order_no ?? item.orderNo ?? ""),
+      status: String(item.status ?? "unknown"),
+      credits: typeof item.credits === "number" ? item.credits : 0,
+      moneyCents: price,
+      currency: String(item.currency ?? "CNY"),
+      productName:
+        typeof snapshot.name === "string"
+          ? snapshot.name
+          : typeof item.name === "string"
+            ? item.name
+            : String(item.product_code ?? item.productCode ?? ""),
+      paidAt: item.paid_at ? String(item.paid_at) : item.paidAt ? String(item.paidAt) : null,
+      createdAt: String(item.created_at ?? item.createdAt ?? ""),
+    };
+  });
+}
+
+export function useBillingPanel(input: {
+  readonly account: Account;
+  readonly highlightedPlan: MembershipPlanAlias | null;
+  readonly initialTab: BillingPaneTab;
+}) {
+  const seedAccount = input.account;
+  const [accountError, setAccountError] = useState("");
+  const [paymentPackages, setPaymentPackages] = useState<MembershipProduct[]>([]);
+  const [paymentEnabled, setPaymentEnabled] = useState(false);
+  const [packagesError, setPackagesError] = useState("");
+  const [redeemCode, setRedeemCode] = useState("");
+  const [redeemError, setRedeemError] = useState("");
+  const [redeemMessage, setRedeemMessage] = useState("");
+  const [redeeming, setRedeeming] = useState(false);
+  const [paymentOrder, setPaymentOrder] = useState<PaymentOrderState | null>(null);
+  const [paymentError, setPaymentError] = useState("");
+  const [payingProductId, setPayingProductId] = useState<string | null>(null);
+  const [selectedProductId, setSelectedProductId] = useState<string | null>(null);
+  const [redeemDone, setRedeemDone] = useState(false);
+  const [orders, setOrders] = useState<PaymentOrder[]>([]);
+  const [ordersState, setOrdersState] = useState<OrdersState>("idle");
+  const [packagesSettled, setPackagesSettled] = useState(false);
+  const highlightedCardRef = useRef<HTMLElement | null>(null);
+  const planHighlightScrolled = useRef(false);
+  const ordersRequested = useRef(input.initialTab === "orders");
+
+  const activeSubscription = seedAccount.activeSubscription ?? null;
+  const currentProductCode = activeSubscription?.status === "active"
+    ? activeSubscription.productCode
+    : null;
+
+  const fetchAccountData = useCallback(async (): Promise<BillingAccount | null> => {
+    try {
+      const response = await fetch("/api/account", { cache: "no-store" });
+      if (response.status === 401) {
+        window.location.assign("/login");
+        return null;
+      }
+      const payload = await response.json().catch(() => null);
+      if (!response.ok) throw new Error(payload?.error || "暂时无法读取账户信息");
+      const next = toBillingAccount(payload as Account);
+      setAccountError("");
+      return next;
+    } catch (caught) {
+      setAccountError(caught instanceof Error ? caught.message : "暂时无法读取账户信息");
+      return null;
+    }
+  }, []);
+
+  const resetPaymentState = useCallback(() => {
+    setPaymentEnabled(false);
+    setPaymentPackages([]);
+    setPaymentOrder(null);
+    setPaymentError("");
+    setPayingProductId(null);
+    setSelectedProductId(null);
+  }, []);
+
+  const fetchPackages = useCallback(async () => {
+    try {
+      const response = await fetch("/api/payment/packages", { cache: "no-store" });
+      const payload = await response.json().catch(() => null);
+      if (response.ok && payload?.enabled === true) {
+        setPaymentEnabled(true);
+        setPaymentPackages(payload.packages || []);
+        setPackagesError("");
+        return;
+      }
+      if (!response.ok) {
+        setPackagesError("套餐支付暂时不可用，请稍后重试");
+        resetPaymentState();
+      }
+    } catch {
+      setPackagesError("套餐支付暂时不可用，请稍后重试");
+      resetPaymentState();
+    } finally {
+      setPackagesSettled(true);
+    }
+  }, [resetPaymentState]);
+
+  const fetchOrders = useCallback(async () => {
+    ordersRequested.current = true;
+    try {
+      const response = await fetch("/api/payment/orders", { cache: "no-store" });
+      if (response.status === 401) {
+        window.location.assign("/login");
+        return;
+      }
+      if (!response.ok) throw new Error("订单记录暂时不可用");
+      const payload = await response.json().catch(() => null);
+      const list = Array.isArray(payload)
+        ? payload
+        : payload && typeof payload === "object" && Array.isArray(payload.orders)
+          ? payload.orders
+          : [];
+      setOrders(normalizeOrders(list));
+      setOrdersState("ready");
+    } catch {
+      setOrders([]);
+      setOrdersState("unavailable");
+    }
+  }, []);
+
+  useEffect(() => {
+    void (async () => {
+      await Promise.allSettled([fetchAccountData(), fetchPackages()]);
+    })();
+  }, [fetchAccountData, fetchPackages]);
+
+  useEffect(() => {
+    if (!input.highlightedPlan || planHighlightScrolled.current || paymentPackages.length === 0) return;
+    planHighlightScrolled.current = true;
+    const card = highlightedCardRef.current;
+    if (!card) return;
+    window.requestAnimationFrame(() => {
+      card.scrollIntoView({ behavior: "smooth", block: "center" });
+      card.focus({ preventScroll: true });
+    });
+  }, [input.highlightedPlan, paymentPackages.length]);
+
+  async function redeem(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const code = redeemCode.trim();
+    if (!code || redeeming) return;
+    setRedeeming(true);
+    setRedeemError("");
+    setRedeemMessage("");
+    try {
+      const response = await fetch("/api/redeem", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ code }),
+      });
+      const payload = await response.json().catch(() => null);
+      if (response.status === 401) {
+        window.location.assign("/login");
+        return;
+      }
+      if (!response.ok) throw new Error(redeemErrorMessage(response.status, payload));
+      const result = payload as { awardedCredits?: number; credits: number; message?: string };
+      const awarded = typeof result.awardedCredits === "number" ? result.awardedCredits : result.credits;
+      setRedeemCode("");
+      setRedeemDone(true);
+      setRedeemMessage(result.message || `本次到账 ${awarded} 点，最新余额 ${result.credits} 点。`);
+      const refreshed = await fetchAccountData();
+      notifyBalanceChanged(refreshed?.credits ?? result.credits);
+    } catch (caught) {
+      setRedeemError(caught instanceof Error ? caught.message : "兑换失败，请稍后重试");
+    } finally {
+      setRedeeming(false);
+    }
+  }
+
+  function closeRedeem() {
+    setRedeemDone(false);
+    setRedeemMessage("");
+    setRedeemError("");
+  }
+
+  async function createPayment(productId: string) {
+    if (payingProductId) return;
+    setSelectedProductId(productId);
+    setPayingProductId(productId);
+    setPaymentError("");
+    try {
+      const response = await fetch("/api/payment/epay/create", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ productId }),
+      });
+      const payload = await response.json().catch(() => null);
+      if (response.status === 401) {
+        window.location.assign("/login");
+        return;
+      }
+      if (!response.ok) throw new Error(payload?.error || "创建支付失败");
+      if (typeof payload?.orderNo !== "string" || typeof payload?.payUrl !== "string") {
+        throw new Error("创建支付失败");
+      }
+      setPaymentOrder({
+        orderNo: payload.orderNo,
+        payUrl: payload.payUrl,
+        qrCode: payload.qrCode ?? null,
+        status: "pending",
+        productId,
+      });
+      window.open(payload.payUrl, "_blank", "noopener,noreferrer");
+    } catch (caught) {
+      setPaymentError(caught instanceof Error ? caught.message : "创建支付失败");
+    } finally {
+      setPayingProductId(null);
+    }
+  }
+
+  useEffect(() => {
+    if (!paymentOrder || paymentOrder.status !== "pending") return;
+    const checkPaymentStatus = async () => {
+      const response = await fetch(`/api/payment/epay/status?orderNo=${encodeURIComponent(paymentOrder.orderNo)}`, { cache: "no-store" });
+      const payload = await response.json().catch(() => null);
+      if (!response.ok) return;
+      const failed = (typeof payload.status === "string"
+        && ["failed", "closed", "cancelled"].includes(payload.status))
+        || payload.grantStatus === "failed";
+      const paid = payload.status === "paid" && !failed;
+      setPaymentOrder((current) => current ? {
+        ...current,
+        status: paid ? "paid" : failed ? "failed" : "pending",
+      } : current);
+      if (paid) {
+        const refreshed = await fetchAccountData();
+        notifyBalanceChanged(refreshed?.credits ?? 0);
+      }
+    };
+    let timer = 0;
+    const stopPolling = () => {
+      if (timer) window.clearInterval(timer);
+      timer = 0;
+    };
+    const startPolling = () => {
+      stopPolling();
+      timer = window.setInterval(() => void checkPaymentStatus(), 3000);
+    };
+    const onVisibilityChange = () => {
+      if (document.hidden) {
+        stopPolling();
+        return;
+      }
+      void checkPaymentStatus();
+      startPolling();
+    };
+    if (!document.hidden) startPolling();
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    return () => {
+      stopPolling();
+      document.removeEventListener("visibilitychange", onVisibilityChange);
+    };
+  }, [fetchAccountData, paymentOrder]);
+
+  return {
+    account: toBillingAccount(seedAccount),
+    accountError,
+    activeSubscription,
+    createPayment,
+    currentProductCode,
+    fetchOrders,
+    closeRedeem,
+    highlightedCardRef,
+    highlightedPlan: input.highlightedPlan,
+    initialTab: input.highlightedPlan ? "membership" : input.initialTab,
+    orders,
+    ordersState,
+    packagesError,
+    packagesSettled,
+    payingProductId,
+    paymentEnabled,
+    paymentError,
+    paymentOrder,
+    paymentPackages,
+    redeem,
+    redeemCode,
+    redeemDone,
+    redeemError,
+    redeeming,
+    redeemMessage,
+    requestOrders: () => {
+      if (!ordersRequested.current) void fetchOrders();
+    },
+    selectedProductId,
+    setRedeemCode,
+    setRedeemDone,
+    setRedeemError,
+    setRedeemMessage,
+  };
+}
diff --git a/frontend/src/hooks/use-consultation-run.ts b/frontend/src/hooks/use-consultation-run.ts
index f28fa26b..39970123 100644
--- a/frontend/src/hooks/use-consultation-run.ts
+++ b/frontend/src/hooks/use-consultation-run.ts
@@ -45,7 +45,6 @@ import {
 import {
   BALANCE_CHANGED_EVENT,
   BALANCE_SYNC_KEY,
-  membershipHref,
 } from "@/lib/membership";
 import {
   CancellationResponseError,
@@ -69,6 +68,7 @@ import type {
   ChatSession,
   ConsultationStatus,
   Message,
+  OpenAccountDialogOptions,
   PendingConsultation,
   Profile,
   ReplyOutcome,
@@ -138,7 +138,7 @@ export type ConsultationRunParams = {
   startNewChat: () => Promise<ChatSession | null>;
   continueInNewChat: (prompt: { question: string; theme: Theme }) => Promise<void>;
   refreshAccount: () => Promise<void>;
-  openAccountDialog: (dialog: AccountDialog, returnTarget?: HTMLButtonElement | null) => void;
+  openAccountDialog: (dialog: AccountDialog, options?: HTMLButtonElement | null | OpenAccountDialogOptions) => void;
   openRectificationFromHomepage: (pendingConsultationQuestion?: string | null) => Promise<void>;
 };
 
@@ -166,7 +166,7 @@ export function useConsultationRun(params: ConsultationRunParams) {
     pendingConsultation,
     pendingSessionId,
     profile,
-    router,
+    router: _router,
     sessions,
     setAccount,
     setActiveSessionId,
@@ -555,7 +555,7 @@ export function useConsultationRun(params: ConsultationRunParams) {
       : initialConsultationRoute;
 
     if (account.credits <= 0 && !account.activeSubscription) {
-      router.push(membershipHref("insufficient-credits"));
+      openAccountDialog("billing", { source: "insufficient-credits" });
       return false;
     }
 
@@ -750,7 +750,7 @@ export function useConsultationRun(params: ConsultationRunParams) {
         const contentType = response.headers.get("content-type") ?? "";
         const errorPayload = contentType.includes("application/json") ? await response.json() : { message: await response.text() };
         if (response.status === 401) window.location.assign("/login");
-        if (response.status === 402) router.push(membershipHref("insufficient-credits"));
+        if (response.status === 402) openAccountDialog("billing", { source: "insufficient-credits" });
         throw new ConsultationResponseError(
           response.status,
           payloadMessage(errorPayload, "服务暂时不可用"),
diff --git a/frontend/src/hooks/use-profile-onboarding.ts b/frontend/src/hooks/use-profile-onboarding.ts
index d27750e6..1cb4d806 100644
--- a/frontend/src/hooks/use-profile-onboarding.ts
+++ b/frontend/src/hooks/use-profile-onboarding.ts
@@ -1,6 +1,6 @@
 "use client";
 
-import type { Dispatch, FormEvent, MutableRefObject, SetStateAction } from "react";
+import { type Dispatch, FormEvent, MutableRefObject, SetStateAction } from "react";
 
 import {
   beamAvatarSchema,
@@ -40,7 +40,9 @@ import {
   type AccountDialog,
   type ChartLibraryRecord,
   type OnboardingStep,
+  type OpenAccountDialogOptions,
   type Profile,
+  accountDialogOptions,
 } from "@/lib/home-types";
 import { preserveShallowEqual } from "@/lib/preserve-shallow-equal";
 import {
@@ -74,8 +76,8 @@ export type ProfileOnboardingParams = {
   setBirthTimeConsultationConsent: Dispatch<SetStateAction<BirthTimeConsultationConsentState>>;
   setBirthTimeError: Dispatch<SetStateAction<string>>;
   setBirthTimeJourney: Dispatch<SetStateAction<JourneyClientResponse | null>>;
+  setBillingPane: Dispatch<SetStateAction<OpenAccountDialogOptions>>;
   setDraft: (value: string) => void;
-  setEditingSelfChart: Dispatch<SetStateAction<boolean>>;
   setOnboardingJustCompleted: Dispatch<SetStateAction<boolean>>;
   setOnboardingStep: Dispatch<SetStateAction<OnboardingStep>>;
   setPresetMessageLength: Dispatch<SetStateAction<number>>;
@@ -116,8 +118,8 @@ export function useProfileOnboarding(params: ProfileOnboardingParams) {
     setBirthTimeConsultationConsent,
     setBirthTimeError,
     setBirthTimeJourney,
+    setBillingPane,
     setDraft,
-    setEditingSelfChart,
     setOnboardingJustCompleted,
     setOnboardingStep,
     setPresetMessageLength,
@@ -155,8 +157,12 @@ export function useProfileOnboarding(params: ProfileOnboardingParams) {
   }
 
 
-  function openAccountDialog(dialog: AccountDialog, returnTarget: HTMLButtonElement | null = accountTrigger.current) {
-    dialogReturnTarget.current = returnTarget ?? accountTrigger.current;
+  function openAccountDialog(
+    dialog: AccountDialog,
+    returnTargetOrOptions?: HTMLButtonElement | null | OpenAccountDialogOptions,
+  ) {
+    const options = accountDialogOptions(returnTargetOrOptions);
+    dialogReturnTarget.current = options.returnTarget ?? accountTrigger.current;
     setAccountMenuOpen(false);
     setAccountError("");
     if (dialog === "profile") {
@@ -166,7 +172,13 @@ export function useProfileOnboarding(params: ProfileOnboardingParams) {
     if (dialog === "chart-library") {
       setProfileDraft(profile);
       setProfileNotice("");
-      setEditingSelfChart(false);
+    }
+    if (dialog === "billing") {
+      setBillingPane({
+        source: options.source,
+        plan: options.plan,
+        tab: options.tab,
+      });
     }
     setActiveAccountDialog(dialog);
   }
diff --git a/frontend/src/hooks/use-rectification-surface.ts b/frontend/src/hooks/use-rectification-surface.ts
index 3ea02015..7343795e 100644
--- a/frontend/src/hooks/use-rectification-surface.ts
+++ b/frontend/src/hooks/use-rectification-surface.ts
@@ -15,6 +15,7 @@ import {
   type ChatSession,
   type Message,
   type OnboardingStep,
+  type OpenAccountDialogOptions,
   type Profile,
   type Theme,
 } from "@/lib/home-types";
@@ -72,7 +73,7 @@ export type RectificationSurfaceParams = {
   setSessions: Dispatch<SetStateAction<ChatSession[]>>;
   uiPreview: MutableRefObject<boolean>;
   updateSession: (sessionId: string, change: (session: ChatSession) => ChatSession) => void;
-  openAccountDialog: (dialog: AccountDialog, returnTarget?: HTMLButtonElement | null) => void;
+  openAccountDialog: (dialog: AccountDialog, options?: HTMLButtonElement | null | OpenAccountDialogOptions) => void;
   refreshAccount: () => Promise<void>;
   rectificationSessionOpenerRef: MutableRefObject<(exactSessionId: string) => Promise<void>>;
 };
diff --git a/frontend/src/lib/chart-library-view.ts b/frontend/src/lib/chart-library-view.ts
new file mode 100644
index 00000000..6b1eba19
--- /dev/null
+++ b/frontend/src/lib/chart-library-view.ts
@@ -0,0 +1,18 @@
+export type ChartLibraryView =
+  | { readonly kind: "list" }
+  | { readonly kind: "self" }
+  | { readonly kind: "other"; readonly id: string }
+  | { readonly kind: "add" };
+
+export const CHART_LIBRARY_LIST_VIEW: ChartLibraryView = { kind: "list" };
+
+export function synastryHistoryForPartner<T extends {
+  readonly partnerName: string;
+  readonly partnerChartId?: string;
+}>(history: readonly T[], partner: { readonly id: string; readonly name: string }) {
+  return history.filter((item) => (
+    item.partnerChartId
+      ? item.partnerChartId === partner.id
+      : item.partnerName === partner.name
+  ));
+}
diff --git a/frontend/src/lib/home-types.ts b/frontend/src/lib/home-types.ts
index f3e6736e..60f46b37 100644
--- a/frontend/src/lib/home-types.ts
+++ b/frontend/src/lib/home-types.ts
@@ -50,6 +50,7 @@ export type ChartLibraryApiRecord = {
 export type SynastryReportCard = {
   id: string;
   partnerName: string;
+  partnerChartId?: string;
   score?: number;
   maxScore?: number;
   assessment?: string;
@@ -132,7 +133,24 @@ export type Account = {
   profile: unknown;
 };
 export type OnboardingStep = "name" | "birth" | "place" | "rectification";
-export type AccountDialog = "profile" | "chart-library" | "general" | "logout";
+export type AccountDialog = "profile" | "chart-library" | "billing" | "general" | "logout";
+export type BillingPaneTab = "membership" | "credits" | "redeem" | "orders";
+export type OpenAccountDialogOptions = {
+  returnTarget?: HTMLButtonElement | null;
+  source?: string;
+  plan?: "trial" | "monthly" | "yearly";
+  tab?: BillingPaneTab;
+};
+
+export function accountDialogOptions(
+  value?: HTMLButtonElement | null | OpenAccountDialogOptions,
+): OpenAccountDialogOptions {
+  if (value == null) return {};
+  if (typeof value === "object" && "nodeType" in value) {
+    return { returnTarget: value };
+  }
+  return value;
+}
 export type DailyStarlanguageCard = { trend: string; action: string; caution: string };
 export type DailyStarlanguageApiResponse = {
   status?: "ok" | "unavailable" | "unauthenticated";
@@ -185,14 +203,16 @@ export const themes = defaultGuidedJyotishTopics;
 export const accountDialogTitles = {
   profile: "个人资料",
   "chart-library": "星盘资料",
+  billing: "账户与点数",
   general: "通用设置",
   logout: "退出登录？",
 } as const satisfies Record<AccountDialog, string>;
 
 export const accountDialogClasses = {
-  profile: "profile-modal",
-  "chart-library": "chart-library-modal",
-  general: "general-modal",
+  profile: "settings-modal",
+  "chart-library": "settings-modal",
+  billing: "settings-modal",
+  general: "settings-modal",
   logout: "logout-modal",
 } as const satisfies Record<AccountDialog, string>;
 
diff --git a/frontend/src/lib/membership.ts b/frontend/src/lib/membership.ts
index 7351e94f..7a763412 100644
--- a/frontend/src/lib/membership.ts
+++ b/frontend/src/lib/membership.ts
@@ -27,11 +27,16 @@ export type MembershipProduct = {
 };
 
 export type MembershipPlanAlias = "trial" | "monthly" | "yearly";
+export type BillingPaneTab = "membership" | "credits" | "redeem" | "orders";
 
-export function membershipHref(source: string, options: { plan?: MembershipPlanAlias } = {}) {
-  const params = new URLSearchParams({ source });
+export function membershipHref(
+  source: string,
+  options: { plan?: MembershipPlanAlias; tab?: BillingPaneTab } = {},
+) {
+  const params = new URLSearchParams({ settings: "billing", source });
   if (options.plan) params.set("plan", options.plan);
-  return `/membership?${params.toString()}`;
+  if (options.tab) params.set("tab", options.tab);
+  return `/?${params.toString()}`;
 }
 
 export function planDisplayLabel(alias: MembershipPlanAlias) {
diff --git a/frontend/src/lib/settings-url.ts b/frontend/src/lib/settings-url.ts
new file mode 100644
index 00000000..bf9f57b5
--- /dev/null
+++ b/frontend/src/lib/settings-url.ts
@@ -0,0 +1,40 @@
+import type { BillingPaneTab, MembershipPlanAlias } from "@/lib/membership";
+
+export const SETTINGS_QUERY_KEY = "settings";
+
+export type SettingsQuery = {
+  readonly pane: "billing";
+  readonly source: string | null;
+  readonly plan: MembershipPlanAlias | null;
+  readonly tab: BillingPaneTab | null;
+};
+
+const PLAN_ALIASES: ReadonlySet<string> = new Set(["trial", "monthly", "yearly"]);
+const BILLING_TABS: ReadonlySet<string> = new Set(["membership", "credits", "redeem", "orders"]);
+
+function searchParams(search: string) {
+  return new URLSearchParams(search.startsWith("?") ? search.slice(1) : search);
+}
+
+export function parseSettingsQuery(search: string): SettingsQuery | null {
+  const params = searchParams(search);
+  if (params.get(SETTINGS_QUERY_KEY) !== "billing") return null;
+  const planRaw = params.get("plan");
+  const tabRaw = params.get("tab");
+  return {
+    pane: "billing",
+    source: params.get("source"),
+    plan: planRaw && PLAN_ALIASES.has(planRaw) ? planRaw as MembershipPlanAlias : null,
+    tab: tabRaw && BILLING_TABS.has(tabRaw) ? tabRaw as BillingPaneTab : null,
+  };
+}
+
+export function stripSettingsQuery(search: string, pathname = "/") {
+  const params = searchParams(search);
+  params.delete(SETTINGS_QUERY_KEY);
+  params.delete("source");
+  params.delete("plan");
+  params.delete("tab");
+  const query = params.toString();
+  return query ? `${pathname}?${query}` : pathname || "/";
+}
diff --git a/frontend/tests/account-dialog-overlay.test.ts b/frontend/tests/account-dialog-overlay.test.ts
index 27919f71..7327e56a 100644
--- a/frontend/tests/account-dialog-overlay.test.ts
+++ b/frontend/tests/account-dialog-overlay.test.ts
@@ -9,35 +9,39 @@ import {
   type AccountOverlayModel,
 } from "../src/components/account-dialog-overlay.tsx";
 
-test("a closed account overlay does not render profile or logout content", () => {
+function overlayModel(overrides: Partial<AccountOverlayModel> = {}): AccountOverlayModel {
   const overlayRef = createRef<HTMLElement | null>() as AccountOverlayModel["overlayRef"];
   const closeButtonRef = createRef<HTMLButtonElement | null>() as AccountOverlayModel["closeButtonRef"];
-  let profileRenders = 0;
-  let logoutRenders = 0;
-  const model: AccountOverlayModel = {
+  return {
     title: "个人资料",
-    dialogClass: "profile-modal",
+    dialogClass: "settings-modal",
     signingOut: false,
     close() {},
     navigate() {},
-    openRedeem() {},
     overlayRef,
     closeButtonRef,
+    renderProfile() { return null; },
+    renderChartLibrary() { return null; },
+    renderBilling() { return null; },
+    renderGeneral() { return null; },
+    renderLogout() { return null; },
+    ...overrides,
+  };
+}
+
+test("a closed account overlay does not render profile or logout content", () => {
+  let profileRenders = 0;
+  let logoutRenders = 0;
+  const model = overlayModel({
     renderProfile() {
       profileRenders += 1;
       return null;
     },
-    renderChartLibrary() {
-      return null;
-    },
-    renderGeneral() {
-      return null;
-    },
     renderLogout() {
       logoutRenders += 1;
       return null;
     },
-  };
+  });
 
   const html = renderToString(createElement(AccountDialogOverlay, {
     open: false,
@@ -61,3 +65,26 @@ test("home does not write overlay epoch or chat actions during render", () => {
   assert.match(page, /queueMicrotask\(\(\) => setActiveChartId\(storedChartId\)\)/);
   assert.match(page, /useEffect\(\(\) => \{\s*chatActionsRef\.current = \{/);
 });
+
+test("settings navigation lists four panes and billing can be current", () => {
+  const overlay = readFileSync(new URL("../src/components/account-dialog-overlay.tsx", import.meta.url), "utf8");
+  const styles = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");
+  const html = renderToString(createElement(AccountDialogOverlay, {
+    open: true,
+    dialog: "billing",
+    model: overlayModel({ title: "账户与点数" }),
+  }));
+
+  assert.match(overlay, /dialog: "profile"/);
+  assert.match(overlay, /dialog: "chart-library"/);
+  assert.match(overlay, /dialog: "billing"/);
+  assert.match(overlay, /dialog: "general"/);
+  assert.doesNotMatch(overlay, /openRedeem/);
+  assert.match(html, /个人资料/);
+  assert.match(html, /星盘资料/);
+  assert.match(html, /账户与点数/);
+  assert.match(html, /通用设置/);
+  assert.match(html, /aria-current="page"/);
+  assert.match(styles, /\.settings-modal \{[^}]*width:[^}]*height:/);
+  assert.doesNotMatch(styles, /chart-library-modal|profile-modal/);
+});
diff --git a/frontend/tests/beam-avatar.test.ts b/frontend/tests/beam-avatar.test.ts
index fdab40f8..3e7c4f83 100644
--- a/frontend/tests/beam-avatar.test.ts
+++ b/frontend/tests/beam-avatar.test.ts
@@ -18,6 +18,7 @@ const avatarRoute = readProjectFile("src/app/api/account/avatar/route.ts");
 const avatarComponent = readProjectFile("src/components/user-avatar.tsx");
 const sidebar = readProjectFile("src/components/app-sidebar.tsx");
 const page = readProjectFile("src/app/page.tsx");
+const profilePanel = readProjectFile("src/components/profile-panel.tsx");
 const migration = readProjectFile("db/migrations/20260807010000_profile_beam_avatars.sql");
 
 const seed = "11111111-1111-4111-8111-111111111111";
@@ -92,9 +93,10 @@ test("renders the persisted Beam avatar in the sidebar, account menu, and profil
   assert.match(avatarComponent, /name=\{avatar\.seed\}/);
   assert.match(sidebar, /<UserAvatar avatar=\{account\.avatar\} size=\{32\}/);
   assert.match(sidebar, /<UserAvatar avatar=\{account\.avatar\} size=\{40\}/);
-  assert.match(page, /Beam 形象由随机种子生成/);
-  assert.match(page, /role="radiogroup" aria-label="头像配色"/);
-  assert.match(page, /persistAvatar\(\{ action: "set_palette", palette: index \}\)/);
-  assert.match(page, /persistAvatar\(\{ action: "randomize" \}\)/);
-  assert.doesNotMatch(page, /avatar[^\n]{0,80}(?:file|upload|上传图片)/i);
+  assert.match(page, /<ProfilePanel[\s\S]*persistAvatar=\{persistAvatar\}/);
+  assert.match(profilePanel, /Beam 形象由随机种子生成/);
+  assert.match(profilePanel, /role="radiogroup" aria-label="头像配色"/);
+  assert.match(profilePanel, /persistAvatar\(\{ action: "set_palette", palette: index \}\)/);
+  assert.match(profilePanel, /persistAvatar\(\{ action: "randomize" \}\)/);
+  assert.doesNotMatch(`${page}\n${profilePanel}`, /avatar[^\n]{0,80}(?:file|upload|上传图片)/i);
 });
diff --git a/frontend/tests/billing-panel.test.ts b/frontend/tests/billing-panel.test.ts
new file mode 100644
index 00000000..3663563a
--- /dev/null
+++ b/frontend/tests/billing-panel.test.ts
@@ -0,0 +1,292 @@
+import assert from "node:assert/strict";
+import { existsSync, readFileSync } from "node:fs";
+import test from "node:test";
+
+const projectFile = (path: string) => new URL(`../${path}`, import.meta.url);
+const readProjectFile = (path: string) => readFileSync(projectFile(path), "utf8");
+const hookSource = readProjectFile("src/hooks/use-billing-panel.ts");
+const panelSource = readProjectFile("src/components/billing-panel.tsx");
+const billingSource = `${hookSource}\n${panelSource}`;
+const membershipLib = readProjectFile("src/lib/membership.ts");
+const nextConfig = readProjectFile("next.config.ts");
+const pageSource = readProjectFile("src/app/page.tsx");
+const tabsSource = readProjectFile("src/components/ui/tabs.tsx");
+
+function countMatches(source: string, pattern: RegExp) {
+  return source.match(pattern)?.length ?? 0;
+}
+
+test("membership routes are gone and billing loads without a spinner", () => {
+  // 原值: src/app/membership/page.tsx 存在且含 Suspense / membership-loading
+  // 新值: 页面删除；billing-panel 是 client 组件，无 spinner / 骨架 / 「正在加载」
+  // 原因: 账户与点数进入设置弹窗，等待态遵守 AGENTS §6
+  assert.equal(existsSync(projectFile("src/app/membership/page.tsx")), false);
+  assert.equal(existsSync(projectFile("src/app/membership/orders/page.tsx")), false);
+  assert.match(panelSource, /"use client"/);
+  assert.doesNotMatch(billingSource, /membership-loading|正在加载|Suspense/);
+  assert.doesNotMatch(panelSource, /正在加载订单/);
+  assert.match(nextConfig, /source: "\/membership"/);
+  assert.match(nextConfig, /destination: "\/\?settings=billing&source=legacy"/);
+  assert.match(nextConfig, /source: "\/membership\/orders"/);
+  assert.match(nextConfig, /destination: "\/\?settings=billing&tab=orders"/);
+});
+
+test("membership page loads account, packages and redeem endpoints without fetching orders", () => {
+  // 原值: 会员页不请求 /api/payment/orders
+  // 新值: 挂载只并发账户与套餐；订单仅在 orders 页签拉取
+  // 原因: 订单记录改成分区内页签，不能一打开就打列表接口
+  assert.match(hookSource, /fetch\("\/api\/account"/);
+  assert.match(hookSource, /fetch\("\/api\/payment\/packages"/);
+  assert.match(hookSource, /fetch\("\/api\/payment\/epay\/create"/);
+  assert.match(hookSource, /fetch\(`\/api\/payment\/epay\/status\?orderNo=/);
+  assert.match(hookSource, /fetch\("\/api\/redeem"/);
+  assert.match(hookSource, /await Promise\.allSettled\(\[fetchAccountData\(\), fetchPackages\(\)\]\)/);
+  const mountStart = hookSource.indexOf("await Promise.allSettled");
+  const mountEnd = hookSource.indexOf("}, [fetchAccountData, fetchPackages]);");
+  const mountEffect = hookSource.slice(mountStart, mountEnd);
+  assert.doesNotMatch(mountEffect, /fetchOrders|\/api\/payment\/orders/);
+  assert.match(panelSource, /if \(value === "orders"\) void fetchOrders\(\)/);
+});
+
+test("creates orders with productId and opens the signed cashier URL safely", () => {
+  assert.match(hookSource, /JSON\.stringify\(\{ productId \}\)/);
+  assert.match(hookSource, /window\.open\(payload\.payUrl, "_blank", "noopener,noreferrer"\)/);
+  assert.doesNotMatch(billingSource, /document\.createElement\("form"\)|payload\.submitUrl|payload\.fields/);
+  assert.match(hookSource, /if \(!paymentOrder \|\| paymentOrder\.status !== "pending"\) return;/);
+});
+
+test("terminal payment failures stop polling and offer re-pay with the same product", () => {
+  assert.match(hookSource, /\["failed", "closed", "cancelled"\]\.includes\(payload\.status\)/);
+  assert.match(hookSource, /payload\.grantStatus === "failed"/);
+  assert.match(hookSource, /status !== "pending"\) return;/);
+  assert.match(hookSource, /status: paid \? "paid" : failed \? "failed" : "pending"/);
+  assert.match(panelSource, /paymentOrder\.status === "failed"/);
+  assert.match(panelSource, /支付失败/);
+  assert.match(panelSource, /createPayment\(paymentOrder\.productId\)/);
+  assert.match(panelSource, /重新支付/);
+});
+
+test("failed status beats paid and non-terminal statuses keep polling", () => {
+  assert.match(hookSource, /const paid = payload\.status === "paid" && !failed;/);
+  assert.match(hookSource, /status: paid \? "paid" : failed \? "failed" : "pending"/);
+  assert.match(hookSource, /if \(paid\) \{/);
+  assert.doesNotMatch(hookSource, /status: paid \? "paid" : failed \? "failed" : payload\.status/);
+  assert.doesNotMatch(hookSource, /payload\.status === "paid" \? "paid"/);
+});
+
+test("polls order status and refreshes only the balance on paid", () => {
+  const poll = hookSource.slice(
+    hookSource.indexOf("const checkPaymentStatus"),
+    hookSource.indexOf("let timer = 0"),
+  );
+  assert.match(poll, /const paid = payload\.status === "paid" && !failed;/);
+  assert.match(poll, /if \(paid\) \{/);
+  assert.match(poll, /status: paid \? "paid" : failed \? "failed" : "pending"/);
+  assert.match(poll, /fetchAccountData\(\)/);
+  assert.match(poll, /notifyBalanceChanged\(refreshed\?\.credits/);
+  assert.doesNotMatch(poll, /fetchOrders/);
+});
+
+test("keeps the selected product and allows retry on payment failure", () => {
+  assert.match(hookSource, /setSelectedProductId\(productId\)/);
+  assert.match(hookSource, /setPaymentError\(caught instanceof Error \? caught\.message : "创建支付失败"\)/);
+  assert.match(hookSource, /finally \{\s*setPayingProductId\(null\);/);
+  assert.match(hookSource, /if \(payingProductId\) return;/);
+  assert.match(panelSource, /createPayment\(selectedProductId\)/);
+  assert.match(panelSource, /membership-payment-error/);
+  assert.doesNotMatch(hookSource, /setPayingProductId\(null\)[\s\S]{0,40}setPaymentOrder\(null\)/);
+});
+
+test("membership never opens the redeem dialog from the URL", () => {
+  // 原值: redeemOpen 状态，URL 不得带 redeem=
+  // 新值: 兑换码是页签；settings-url 的 tab=redeem 打开页签，不再套子弹窗
+  // 原因: 决策 5，兑换码不再是子弹窗
+  assert.doesNotMatch(billingSource, /redeemOpen|setRedeemOpen/);
+  assert.doesNotMatch(billingSource, /searchParams\.get\("redeem"\)|searchParams\.delete\("redeem"\)|redeem:\s*true/);
+  assert.match(panelSource, /value="redeem"/);
+  assert.doesNotMatch(panelSource, /className="account-modal membership-redeem"/);
+});
+
+test("returning prefers history.back and keeps browser back semantics", () => {
+  // 原值: goBack → history.back 或 assign("/")
+  // 新值: 账单在首页弹窗内，无 goBack；深链接用 stripSettingsQuery 抹参数
+  // 原因: 删除整页后返回就是关掉弹窗，浏览器后退仍是原生行为
+  assert.doesNotMatch(billingSource, /goBack|history\.back\(/);
+  assert.doesNotMatch(panelSource, /window\.location\.assign\("\/"\)/);
+  assert.match(pageSource, /stripSettingsQuery\(/);
+});
+
+test("trims the redeem code without changing its case", () => {
+  assert.match(hookSource, /const code = redeemCode\.trim\(\);/);
+  assert.doesNotMatch(hookSource, /redeemCode\.(?:toUpperCase|toLowerCase)\(\)/);
+  assert.doesNotMatch(hookSource, /normalizeRedeemCode/);
+  assert.match(hookSource, /JSON\.stringify\(\{ code \}\)/);
+});
+
+test("redeem success reports awarded credits, latest balance and completes", () => {
+  assert.match(hookSource, /awardedCredits/);
+  assert.match(hookSource, /本次到账/);
+  assert.match(hookSource, /最新余额/);
+  assert.match(hookSource, /setRedeemDone\(true\)/);
+  assert.match(hookSource, /setRedeemCode\(""\)/);
+  assert.match(hookSource, /const refreshed = await fetchAccountData\(\);/);
+  assert.match(hookSource, /notifyBalanceChanged\(refreshed\?\.credits \?\? result\.credits\)/);
+  assert.match(panelSource, /完成/);
+  assert.match(panelSource, /onClick=\{closeRedeem\}/);
+});
+
+test("supports plan hints without rendering source notices", () => {
+  assert.match(panelSource, /const highlighted = alias === highlightedPlan;/);
+  assert.doesNotMatch(billingSource, /searchParams\.get\("source"\)|membershipSourceNotice|sourceNotice/);
+  assert.doesNotMatch(billingSource, /membership-notice|已为你定位到/);
+  assert.doesNotMatch(billingSource, /体验 \/ 月卡 \/ 年卡见下方套餐|用于咨询与生时校正等服务/);
+});
+
+test("membership section shows fixed trial/monthly/yearly plans with monthly recommended", () => {
+  assert.match(panelSource, /selectMembershipPlans\(paymentPackages\)/);
+  assert.match(panelSource, /planAlias\(product\)/);
+  assert.match(panelSource, /alias === "monthly"/);
+  assert.match(panelSource, /membership-plan-card--recommended/);
+  assert.match(membershipLib, /trial: "体验"/);
+  assert.match(membershipLib, /monthly: "月卡"/);
+  assert.match(membershipLib, /yearly: "年卡"/);
+  assert.match(panelSource, /会员套餐/);
+  // 原值: 点数充值
+  // 新值: 点数包
+  // 原因: VOICE 页签名「会员套餐 / 点数包 / 兑换码 / 订单记录」
+  assert.match(panelSource, /点数包/);
+  assert.match(panelSource, /id="membership-plans-tab"/);
+  assert.match(panelSource, /id="membership-credits-tab"/);
+  assert.match(panelSource, /<Tabs[\s\S]*defaultValue=\{billing\.initialTab\}/);
+  assert.match(panelSource, /<TabsTrigger[^>]*value="membership"/);
+  assert.match(panelSource, /<TabsTrigger[^>]*value="credits"/);
+  assert.match(panelSource, /<TabsContent[^>]*value="membership"/);
+  assert.match(panelSource, /<TabsContent[^>]*value="credits"/);
+});
+
+test("plan cards carry price, duration, audience, entitlements, purchase and rules", () => {
+  assert.match(panelSource, /formatPrice\(product\.priceCents, product\.currency\)/);
+  assert.match(panelSource, /formatProductDuration\(product\)/);
+  assert.match(panelSource, /productAudience\(product\)/);
+  assert.match(panelSource, /entitlementLabel\(entitlement\)/);
+  assert.match(panelSource, /<details className="membership-rules">/);
+  assert.match(panelSource, /<summary>详细规则<\/summary>/);
+  assert.match(panelSource, /import \{ Button \} from "@\/components\/ui\/button"/);
+  assert.match(panelSource, /className="membership-buy"/);
+  assert.match(panelSource, /variant=\{recommended \? "default" : "outline"\}/);
+});
+
+test("renewal semantics map the active subscription to the matching plan", () => {
+  assert.match(hookSource, /const currentProductCode = activeSubscription\?\.status === "active"/);
+  assert.match(panelSource, /currentProductCode === product\.code/);
+  assert.match(panelSource, /isCurrent \? "续费" : product\.productType === "trial" \? "立即开通" : "立即购买"/);
+  assert.match(panelSource, /当前套餐/);
+});
+
+test("membership and credits use the local Base UI tabs wrapper without manual segment state", () => {
+  assert.match(panelSource, /import \{ Tabs, TabsContent, TabsList, TabsTrigger \} from "@\/components\/ui\/tabs"/);
+  assert.doesNotMatch(billingSource, /activeSegment|setActiveSegment/);
+  assert.match(tabsSource, /import \{ Tabs as TabsPrimitive \} from "@base-ui\/react\/tabs"/);
+  assert.match(tabsSource, /TabsPrimitive\.Root/);
+  assert.match(tabsSource, /TabsPrimitive\.List/);
+  assert.match(tabsSource, /TabsPrimitive\.Tab/);
+  assert.match(tabsSource, /TabsPrimitive\.Panel/);
+  assert.match(panelSource, /const plans = selectMembershipPlans\(paymentPackages\);/);
+  assert.match(panelSource, /const creditPacks = paymentPackages\.filter\(\(product\) => product\.productType === "credit_pack"\);/);
+  assert.match(panelSource, /className="membership-plan-grid"/);
+  assert.match(panelSource, /className="membership-credit-grid"/);
+  assert.doesNotMatch(panelSource, /creditPacks\.map[\.\s\S]{0,120}membership-plan-card/);
+});
+
+test("plan param forces the membership segment and highlights the matching card", () => {
+  assert.match(panelSource, /const highlighted = alias === highlightedPlan;/);
+  assert.match(panelSource, /membership-plan-card--highlighted/);
+  assert.match(panelSource, /aria-current=\{highlighted \? "true" : undefined\}/);
+  assert.match(panelSource, /highlightedCardRef/);
+  assert.match(hookSource, /scrollIntoView\(\{ behavior: "smooth", block: "center" \}\)/);
+  assert.match(hookSource, /card\.focus\(\{ preventScroll: true \}\)/);
+  assert.match(hookSource, /initialTab: input\.highlightedPlan \? "membership" : input\.initialTab/);
+  assert.doesNotMatch(billingSource, /setActiveSegment\("credits"\)[\s\S]{0,80}highlightedPlan/);
+});
+
+test("page main title is 套餐与会员", () => {
+  // 原值: <h1 className="membership-title">套餐与会员</h1>
+  // 新值: 分区标题由弹窗壳提供「账户与点数」，摘要行写余额与会员状态
+  // 原因: 不再是独立页面
+  assert.doesNotMatch(panelSource, /<h1 className="membership-title">/);
+  assert.match(panelSource, /className="billing-summary"/);
+  assert.match(panelSource, /aria-label="账户与点数"/);
+});
+
+test("payment errors sit in a common position above the visible segment", () => {
+  const errorAt = panelSource.indexOf("membership-payment-error");
+  const plansPanelAt = panelSource.indexOf('<TabsContent className="membership-panel" value="membership">');
+  assert.notEqual(errorAt, -1, "missing common payment error surface");
+  assert.notEqual(plansPanelAt, -1, "missing plans panel");
+  assert.ok(errorAt < plansPanelAt, "payment error must render before the segment panels");
+  assert.doesNotMatch(panelSource, /<p className="form-error" role="alert">\{paymentError\}<\/p>/);
+});
+
+test("summary stays on the membership page and links to the independent orders page", () => {
+  // 原值: membership-summary-card + Link 到 /membership/orders
+  // 新值: billing-summary + 订单记录页签，行内列出订单
+  // 原因: 删除独立订单页
+  assert.match(panelSource, /className="billing-summary"/);
+  assert.match(panelSource, /value="orders"/);
+  assert.match(panelSource, /membership-order-row/);
+  assert.match(panelSource, /orderStatusLabel/);
+  assert.doesNotMatch(panelSource, /href="\/membership\/orders"/);
+});
+
+test("independent orders page preserves loading, empty, error, refresh and list states", () => {
+  // 原值: 独立订单页含「正在加载订单…」
+  // 新值: 页签内 idle/ready/unavailable；空与失败有文案，没有加载句
+  // 原因: AGENTS §6 禁止「正在加载」
+  assert.match(hookSource, /fetch\("\/api\/payment\/orders"/);
+  assert.match(hookSource, /response\.status === 401[\s\S]*window\.location\.assign\("\/login"\)/);
+  assert.doesNotMatch(billingSource, /正在加载订单/);
+  assert.match(panelSource, /订单记录暂时不可用，请稍后刷新。/);
+  assert.match(panelSource, /暂无订单。/);
+  assert.match(panelSource, /onClick=\{\(\) => void fetchOrders\(\)\}>刷新/);
+  assert.match(panelSource, /membership-order-row/);
+  assert.match(panelSource, /orderStatusLabel\(order\.status\)/);
+  assert.match(panelSource, /formatPrice\(order\.moneyCents, order\.currency\)/);
+  assert.match(membershipLib, /paid: "已支付"/);
+});
+
+test("orders return replaces its history entry so membership back cannot reopen orders", () => {
+  // 原值: Link replace 回 /membership
+  // 新值: 页签切换不写历史；无 membership-back
+  // 原因: 不再有两页互相推历史
+  assert.doesNotMatch(billingSource, /membership-back|href="\/membership"/);
+});
+
+test("payment and plan copy points users to the separate orders page", () => {
+  // 原值: 本页会自动检查支付状态并刷新余额 / 「订单记录」页面
+  // 新值: 收银台打开后自动检查；订单在页签查看
+  // 原因: 订单不再是另一页
+  assert.match(panelSource, /请在已打开的收银台页面完成支付；打开后会自动检查支付状态并刷新余额。/);
+  assert.match(panelSource, /「订单记录」页签/);
+  assert.doesNotMatch(panelSource, /本页会自动刷新余额与订单记录|本页「订单记录」|用于咨询、报告与生时校正等服务/);
+});
+
+test("redeem modal surface contains title, balance, input, redeem, rules and close", () => {
+  // 原值: 兑换子弹窗含 aria-label=关闭
+  // 新值: 兑换码页签含标题、余额、输入、兑换、规则；关闭属于设置弹窗外框
+  // 原因: 决策 5
+  assert.match(panelSource, /id="membership-redeem-title"/);
+  assert.match(panelSource, /<h2 id="membership-redeem-title">兑换点数<\/h2>/);
+  assert.match(panelSource, /className="redeem-balance"/);
+  assert.match(panelSource, /id="membership-redeem-code"/);
+  assert.match(panelSource, /立即兑换/);
+  assert.match(panelSource, /<summary>兑换规则<\/summary>/);
+  assert.match(panelSource, /className="redeem-form"/);
+  assert.match(panelSource, /<Button type="submit"/);
+  assert.doesNotMatch(panelSource, /className="account-modal-overlay"/);
+});
+
+test("401 redirects stay hard navigations so no client state survives the sign-out", () => {
+  assert.match(hookSource, /if \(response\.status === 401\) \{\s*window\.location\.assign\("\/login"\);/);
+  assert.equal(countMatches(hookSource, /window\.location\.assign\("\/login"\)/g), 4);
+  assert.doesNotMatch(billingSource, /router\.(push|replace)\("\/login"\)/);
+});
diff --git a/frontend/tests/chart-library-other-profile.test.ts b/frontend/tests/chart-library-other-profile.test.ts
index 69e6dc9d..a674ce42 100644
--- a/frontend/tests/chart-library-other-profile.test.ts
+++ b/frontend/tests/chart-library-other-profile.test.ts
@@ -57,7 +57,7 @@ test("synastry selection exposes a pending state while the evidence packet is co
   assert.match(source, /setSynastryPendingId\(record\.id\);/);
   assert.match(source, /finally \{\s*setSynastryPendingId\(null\);\s*\}/);
   assert.match(source, /disabled=\{synastryPendingId !== null\}/);
-  assert.match(source, /synastryPendingId === record\.id \? "正在计算合盘\.\.\." : "用于合盘"/);
+  assert.match(source, /synastryPendingId === selectedOther\.id \? "正在计算合盘\.\.\." : "用于合盘"/);
 });
 
 test("relationship intent selects domain-specific evidence instead of treating every pairing as romance", () => {
@@ -102,3 +102,25 @@ test("current chart selection is local and does not overwrite the owner's profil
   assert.doesNotMatch(source, /function makeDefaultChart[\s\S]{0,500}persistProfile\(/);
   assert.match(readFileSync(new URL("../src/app/api/chart-profiles/[id]/route.ts", import.meta.url), "utf8"), /星盘不存在或无权更新/);
 });
+
+test("the chart library starts as a list and only renders a form after a view change", () => {
+  const charts = readFileSync(new URL("../src/components/chart-library-panel.tsx", import.meta.url), "utf8");
+  const lastReturn = charts.lastIndexOf("return (");
+  const list = charts.slice(lastReturn);
+  assert.match(charts, /useState<ChartLibraryView>\(CHART_LIBRARY_LIST_VIEW\)/);
+  assert.doesNotMatch(list, /ChartProfileForm|<form/);
+  assert.match(list, /添加其他人/);
+  assert.match(charts, /setView\(\{ kind: "add" \}\)/);
+  assert.match(charts, /setView\(CHART_LIBRARY_LIST_VIEW\)/);
+});
+
+test("other chart details own actions and self details cannot delete", () => {
+  const charts = readFileSync(new URL("../src/components/chart-library-panel.tsx", import.meta.url), "utf8");
+  const selfView = charts.slice(charts.indexOf('if (view.kind === "self")'), charts.indexOf('if (view.kind === "add"'));
+  assert.doesNotMatch(selfView, /删除/);
+  assert.match(charts, /设为默认/);
+  assert.match(charts, /用于合盘/);
+  assert.match(charts, /synastryHistoryForPartner/);
+  assert.match(charts, /partnerHistory\.length > 0 &&/);
+  assert.match(source, /partnerChartId: record\.id/);
+});
diff --git a/frontend/tests/chat-navigation-a11y-contract.test.ts b/frontend/tests/chat-navigation-a11y-contract.test.ts
index 9c8787f6..0f7d4a6e 100644
--- a/frontend/tests/chat-navigation-a11y-contract.test.ts
+++ b/frontend/tests/chat-navigation-a11y-contract.test.ts
@@ -9,7 +9,7 @@ import {
 } from "../src/lib/chat-reply-announcement.ts";
 
 import { homeSurface as pageSource } from "./home-surface.ts";
-const membershipSource = readFileSync(new URL("../src/app/membership/page.tsx", import.meta.url), "utf8");
+const billingHookSource = readFileSync(new URL("../src/hooks/use-billing-panel.ts", import.meta.url), "utf8");
 const noticeSource = readFileSync(new URL("../src/lib/chat-notice.ts", import.meta.url), "utf8");
 const announcementSource = readFileSync(new URL("../src/lib/chat-reply-announcement.ts", import.meta.url), "utf8");
 
@@ -26,12 +26,14 @@ test("in-app destinations navigate client-side so the chat survives the round tr
   assert.match(pageSource, /import \{ useRouter \} from "next\/navigation"/);
   assert.match(pageSource, /const router = useRouter\(\)/);
 
-  // Then: every same-app destination the user comes back from is a soft push.
+  // 原值: 4 条 membershipHref 软跳 /membership
+  // 新值: 账单入口改 openAccountDialog("billing")；报告仍 router.push
+  // 原因: 删除 /membership 整页，对话状态不丢
   assert.match(pageSource, /onOpenReports=\{\(\) => router\.push\("\/reports"\)\}/);
-  assert.match(pageSource, /onOpenRedeem=\{\(\) => router\.push\(membershipHref\("account-menu"\)\)\}/);
-  assert.match(pageSource, /onClick=\{\(\) => router\.push\(membershipHref\("credits"\)\)\}/);
-  assert.match(pageSource, /router\.push\(membershipHref\("insufficient-credits"\)\)/);
-  assert.match(pageSource, /if \(response\.status === 402\) router\.push\(membershipHref\("insufficient-credits"\)\)/);
+  assert.match(pageSource, /onOpenBilling=\{\(\) => openAccountDialog\("billing", \{ source: "account-menu" \}\)\}/);
+  assert.match(pageSource, /openAccountDialog\("billing", \{ returnTarget: event\.currentTarget, source: "credits" \}\)/);
+  assert.match(pageSource, /openAccountDialog\("billing", \{ source: "insufficient-credits" \}\)/);
+  assert.match(pageSource, /if \(response\.status === 402\) openAccountDialog\("billing", \{ source: "insufficient-credits" \}\)/);
 
   // And: none of them fall back to a document load.
   assert.doesNotMatch(pageSource, /window\.location\.assign\("\/reports"\)/);
@@ -47,12 +49,12 @@ test("both insufficient-credit paths are soft so the typed question is not throw
   const sendSource = pageSource.slice(pageSource.indexOf("  async function send("));
 
   // Given: the pre-flight guard runs before send() clears the composer draft.
-  assert.match(creditGuard, /router\.push\(membershipHref\("insufficient-credits"\)\)/);
+  assert.match(creditGuard, /openAccountDialog\("billing", \{ source: "insufficient-credits" \}\)/);
   assert.doesNotMatch(creditGuard, /window\.location/);
-  const creditPush = sendSource.indexOf('router.push(membershipHref("insufficient-credits"))');
+  const creditPush = sendSource.indexOf('openAccountDialog("billing", { source: "insufficient-credits" })');
   const sendClearsComposer = sendSource.indexOf("conversationAnchor.anchorToLatest();\n      setDraft(\"\");");
   assert.ok(creditPush >= 0 && sendClearsComposer > creditPush);
-  assert.equal(pageSource.match(/router\.push\(membershipHref\("insufficient-credits"\)\)/g)?.length, 2);
+  assert.equal(pageSource.match(/openAccountDialog\("billing", \{ source: "insufficient-credits" \}\)/g)?.length, 2);
 });
 
 test("auth redirects stay hard document loads so stale session state cannot survive", () => {
@@ -72,10 +74,10 @@ test("auth redirects stay hard document loads so stale session state cannot surv
   const signOut = sourceBetween(pageSource, "async function signOut()", "return {\n    refreshAccount,");
   assert.match(signOut, /await selfHostedOtpActions\.signOut\(\);\n\s*window\.location\.assign\("\/login"\)/);
 
-  // And: the sibling membership surface keeps the same precedent.
-  assert.match(membershipSource, /import \{ useSearchParams \} from "next\/navigation"/);
-  assert.equal(membershipSource.match(/window\.location\.assign\("\/login"\)/g)?.length, 3);
-  assert.doesNotMatch(membershipSource, /router\.(push|replace)\("\/login"\)/);
+  // And: the billing pane keeps the same 401 precedent without a dedicated membership page.
+  assert.doesNotMatch(billingHookSource, /import \{ useSearchParams \} from "next\/navigation"/);
+  assert.equal(billingHookSource.match(/window\.location\.assign\("\/login"\)/g)?.length, 4);
+  assert.doesNotMatch(billingHookSource, /router\.(push|replace)\("\/login"\)/);
 });
 
 test("bootstrap failure retries with a hard reload because refresh cannot rerun client bootstrap", () => {
diff --git a/frontend/tests/class-name-definition-contract.test.ts b/frontend/tests/class-name-definition-contract.test.ts
index ef948b47..f93465e4 100644
--- a/frontend/tests/class-name-definition-contract.test.ts
+++ b/frontend/tests/class-name-definition-contract.test.ts
@@ -58,8 +58,6 @@ const knownUnstyled = new Set([
   "is-done",
   "is-live",
   "is-working",
-  "membership-orders",
-  "membership-segment",
   "onboarding-step-card",
   "personal-report-additional-charts",
   "rectification-pending-note",
diff --git a/frontend/tests/consultation-entrypoint.test.ts b/frontend/tests/consultation-entrypoint.test.ts
index f8fcce1a..e43336d1 100644
--- a/frontend/tests/consultation-entrypoint.test.ts
+++ b/frontend/tests/consultation-entrypoint.test.ts
@@ -417,10 +417,12 @@ test("rectification 402 navigates to the membership page with the rectification
   const chat = readFileSync(new URL("../src/components/rectification-agentic-chat.tsx", import.meta.url), "utf8");
   const membershipLib = readFileSync(new URL("../src/lib/membership.ts", import.meta.url), "utf8");
 
-  // Then: a 402 (insufficient credits) hands off to /membership with the
-  // rectification source instead of leaving a dead-end error.
-  assert.match(chat, /membershipHref\("rectification"\)/);
-  assert.match(chat, /if \(response\.status === 402\) \{[\s\S]*window\.location\.assign\(membershipHref\("rectification"\)\)/);
+  // 原值: 402 后 window.location.assign(membershipHref("rectification"))
+  // 新值: 留下说明并 onOpenBilling({ source: "rectification" })，不离开当前页
+  // 原因: 硬跳转清单只能缩小；对话状态不丢
+  assert.match(chat, /onOpenBilling\?\.\(\{ source: "rectification" \}\)/);
+  assert.match(chat, /if \(response\.status === 402\) \{[\s\S]*onOpenBilling\?\.\(\{ source: "rectification" \}\)/);
+  assert.doesNotMatch(chat, /window\.location\.assign\(membershipHref\(/);
   assert.doesNotMatch(chat, /咨询点数不足/);
   assert.doesNotMatch(chat, /setError\(`咨询点数不足/);
   assert.match(membershipLib, /rectification: "生时校正需要点数或会员权益"/);
diff --git a/frontend/tests/epay-settings.test.ts b/frontend/tests/epay-settings.test.ts
index a07830d7..0e571c6f 100644
--- a/frontend/tests/epay-settings.test.ts
+++ b/frontend/tests/epay-settings.test.ts
@@ -18,7 +18,9 @@ const packagesRoute = readFileSync(new URL("src/app/api/payment/packages/route.t
 const testRoute = readFileSync(new URL("src/app/api/admin/epay-settings/test/route.ts", root), "utf8");
 const gatewayPolicy = readFileSync(new URL("src/lib/epay/gateway-policy.ts", root), "utf8");
 const page = readFileSync(new URL("src/app/page.tsx", root), "utf8");
-const membershipPage = readFileSync(new URL("src/app/membership/page.tsx", root), "utf8");
+const billingHook = readFileSync(new URL("src/hooks/use-billing-panel.ts", root), "utf8");
+const billingPanel = readFileSync(new URL("src/components/billing-panel.tsx", root), "utf8");
+const billingSource = `${billingHook}\n${billingPanel}`;
 const migration = readFileSync(new URL("supabase/migrations/20260805020000_reconcile_payment_admin_schema.sql", root), "utf8");
 
 const key = crypto.randomBytes(32).toString("base64");
@@ -182,10 +184,10 @@ test("支付开关贯通迁移、公共套餐 API、创建订单和会员页", (
   assert.ok(createRoute.indexOf("availability.enabled") < createRoute.indexOf("await readEpayConfig()"));
   assert.ok(createRoute.indexOf("availability.enabled") < createRoute.indexOf("billing_products"));
   assert.match(management, /在对话页开放支付/);
-  assert.match(membershipPage, /fetch\("\/api\/payment\/packages"/);
-  assert.match(membershipPage, /payload\?\..*enabled === true/);
-  assert.match(membershipPage, /setPaymentEnabled\(true\)/);
-  assert.match(membershipPage, /setPaymentEnabled\(false\)[\s\S]*setPaymentPackages\(\[\]\)[\s\S]*setPaymentOrder\(null\)[\s\S]*setPaymentError\(""\)/);
+  assert.match(billingSource, /fetch\("\/api\/payment\/packages"/);
+  assert.match(billingSource, /payload\?\..*enabled === true/);
+  assert.match(billingSource, /setPaymentEnabled\(true\)/);
+  assert.match(billingSource, /setPaymentEnabled\(false\)[\s\S]*setPaymentPackages\(\[\]\)[\s\S]*setPaymentOrder\(null\)[\s\S]*setPaymentError\(""\)/);
   assert.doesNotMatch(page, /paymentEnabled|paymentPackages|paymentOrder|payingPackageId/);
 });
 
@@ -199,12 +201,12 @@ test("创建订单返回已签名收银台 URL 且不服务端请求网关", ()
   assert.doesNotMatch(createRoute, /fetch\(submitUrl|document\.createElement\("form"\)|submitUrl:|fields[, }]/);
   assert.doesNotMatch(createRoute, /NextResponse\.json\([^\n]*config\.key|searchParams\.set\([^\n]*config\.key/);
 
-  assert.match(membershipPage, /window\.open\(payload\.payUrl, "_blank", "noopener,noreferrer"\)/);
-  assert.match(membershipPage, /id="membership-plans-tab"/);
-  assert.match(membershipPage, /id="membership-credits-tab"/);
-  assert.match(membershipPage, /立即购买/);
-  assert.match(membershipPage, /套餐支付暂时不可用，请稍后重试/);
-  assert.doesNotMatch(membershipPage, /document\.createElement\("form"\)|payload\.submitUrl|payload\.fields/);
+  assert.match(billingSource, /window\.open\(payload\.payUrl, "_blank", "noopener,noreferrer"\)/);
+  assert.match(billingSource, /id="membership-plans-tab"/);
+  assert.match(billingSource, /id="membership-credits-tab"/);
+  assert.match(billingSource, /立即购买/);
+  assert.match(billingSource, /套餐支付暂时不可用，请稍后重试/);
+  assert.doesNotMatch(billingSource, /document\.createElement\("form"\)|payload\.submitUrl|payload\.fields/);
 });
 
 test("网关探测固定已验证公网 IP、保留 TLS hostname 且限制重定向与响应", () => {
diff --git a/frontend/tests/home-surface.ts b/frontend/tests/home-surface.ts
index 35f7dca6..3f1c5bc8 100644
--- a/frontend/tests/home-surface.ts
+++ b/frontend/tests/home-surface.ts
@@ -9,6 +9,8 @@ const homeSurfaceFiles = [
   "../src/components/birth-location-fields.tsx",
   "../src/components/profile-fields.tsx",
   "../src/components/chart-library-panel.tsx",
+  "../src/components/chart-profile-form.tsx",
+  "../src/components/profile-panel.tsx",
   "../src/components/starter-home.tsx",
 ] as const;
 
diff --git a/frontend/tests/membership-navigation-contract.test.ts b/frontend/tests/membership-navigation-contract.test.ts
index 6d06368d..e4fe6c52 100644
--- a/frontend/tests/membership-navigation-contract.test.ts
+++ b/frontend/tests/membership-navigation-contract.test.ts
@@ -2,62 +2,73 @@ import assert from "node:assert/strict";
 import { readFileSync } from "node:fs";
 import test from "node:test";
 
-const membershipPage = readFileSync(new URL("../src/app/membership/page.tsx", import.meta.url), "utf8");
-const ordersPage = readFileSync(new URL("../src/app/membership/orders/page.tsx", import.meta.url), "utf8");
+const hookSource = readFileSync(new URL("../src/hooks/use-billing-panel.ts", import.meta.url), "utf8");
+const panelSource = readFileSync(new URL("../src/components/billing-panel.tsx", import.meta.url), "utf8");
+const billingSource = `${hookSource}\n${panelSource}`;
+const nextConfig = readFileSync(new URL("../next.config.ts", import.meta.url), "utf8");
 
 function countMatches(source: string, pattern: RegExp) {
   return source.match(pattern)?.length ?? 0;
 }
 
 test("account and packages are requested concurrently on mount", () => {
-  assert.match(membershipPage, /await Promise\.allSettled\(\[fetchAccountData\(\), fetchPackages\(\)\]\);/);
-  assert.doesNotMatch(membershipPage, /await fetchAccountData\(\);\s*await fetchPackages\(\)/);
-  assert.doesNotMatch(membershipPage, /Promise\.all\(\[/);
+  assert.match(hookSource, /await Promise\.allSettled\(\[fetchAccountData\(\), fetchPackages\(\)\]\);/);
+  assert.doesNotMatch(hookSource, /await fetchAccountData\(\);\s*await fetchPackages\(\)/);
+  assert.doesNotMatch(hookSource, /Promise\.all\(\[/);
 });
 
 test("a failing bootstrap request cannot hide the other section", () => {
-  assert.match(membershipPage, /setAccountError\(caught instanceof Error/);
-  assert.match(membershipPage, /setPackagesError\("套餐支付暂时不可用，请稍后重试"\)/);
-  assert.match(membershipPage, /\{account \? `\$\{account\.credits\} 点` : accountError \|\| "正在读取…"\}/);
-  assert.match(membershipPage, /\{packagesError && <p className="form-error" role="alert">\{packagesError\}<\/p>\}/);
+  assert.match(hookSource, /setAccountError\(caught instanceof Error/);
+  assert.match(hookSource, /setPackagesError\("套餐支付暂时不可用，请稍后重试"\)/);
+  // 原值: 摘要在整页 hero，失败时显示「正在读取…」
+  // 新值: 弹窗打开时账户已在内存，摘要直接渲染；套餐区失败只出 packagesError
+  // 原因: 决策 8，不得出现「正在加载」
+  assert.match(panelSource, /余额 \{credits\} 点/);
+  assert.match(panelSource, /\{packagesError && <p className="form-error" role="alert">\{packagesError\}<\/p>\}/);
+  assert.doesNotMatch(panelSource, /正在读取/);
 });
 
 test("membership and orders navigate through next/link instead of a document reload", () => {
-  assert.match(membershipPage, /import Link from "next\/link"/);
-  assert.match(membershipPage, /<Link className="membership-orders-entry" href="\/membership\/orders">/);
-  assert.match(ordersPage, /import Link from "next\/link"/);
-  assert.match(ordersPage, /<Link className="membership-back" href="\/membership" replace/);
-  assert.doesNotMatch(membershipPage, /window\.location\.assign\("\/membership/);
-  assert.doesNotMatch(ordersPage, /window\.location\.assign\("\/membership/);
+  // 原值: Link 在 /membership 与 /membership/orders 之间
+  // 新值: 页签切换；旧路径由 next.config redirects 接到 ?settings=billing
+  // 原因: 删除整页
+  assert.doesNotMatch(billingSource, /import Link from "next\/link"/);
+  assert.doesNotMatch(billingSource, /href="\/membership/);
+  assert.doesNotMatch(billingSource, /window\.location\.assign\("\/membership/);
+  assert.match(nextConfig, /source: "\/membership"/);
+  assert.match(panelSource, /value="orders"/);
 });
 
 test("401 redirects stay hard navigations so no client state survives the sign-out", () => {
-  assert.match(membershipPage, /if \(response\.status === 401\) \{\s*window\.location\.assign\("\/login"\);/);
-  assert.match(ordersPage, /if \(response\.status === 401\) \{\s*window\.location\.assign\("\/login"\);/);
-  assert.equal(countMatches(membershipPage, /window\.location\.assign\("\/login"\)/g), 3);
-  assert.equal(countMatches(ordersPage, /window\.location\.assign\("\/login"\)/g), 1);
+  assert.match(hookSource, /if \(response\.status === 401\) \{\s*window\.location\.assign\("\/login"\);/);
+  assert.equal(countMatches(hookSource, /window\.location\.assign\("\/login"\)/g), 4);
 });
 
 test("browser back and the external cashier keep their native behaviour", () => {
-  assert.match(membershipPage, /if \(window\.history\.length > 1\) window\.history\.back\(\);/);
-  assert.match(membershipPage, /else window\.location\.assign\("\/"\);/);
-  assert.match(membershipPage, /window\.open\(payload\.payUrl, "_blank", "noopener,noreferrer"\)/);
+  // 原值: goBack 的 history.back / assign("/")
+  // 新值: 无 goBack；收银台仍 window.open
+  // 原因: 账单在当前页，后退是浏览器原生；BUG-251 要求收银台新标签
+  assert.doesNotMatch(billingSource, /window\.history\.back\(\)/);
+  assert.match(hookSource, /window\.open\(payload\.payUrl, "_blank", "noopener,noreferrer"\)/);
 });
 
 test("the hard navigation inventory does not grow", () => {
-  assert.equal(countMatches(membershipPage, /window\.location\./g), 4);
-  assert.equal(countMatches(ordersPage, /window\.location\./g), 1);
+  // 原值: 会员页 4 次 window.location. + 订单页 1 次
+  // 新值: hook 仅 4 次 assign("/login")，面板 0 次
+  // 原因: 去掉 goBack 的 assign("/") 后硬跳转只剩认证
+  assert.equal(countMatches(hookSource, /window\.location\./g), 4);
+  assert.equal(countMatches(panelSource, /window\.location\./g), 0);
 });
 
 test("payment polling pauses on a hidden tab and refreshes when it returns", () => {
-  assert.match(membershipPage, /if \(!document\.hidden\) startPolling\(\);/);
-  assert.match(membershipPage, /document\.addEventListener\("visibilitychange", onVisibilityChange\);/);
-  assert.match(membershipPage, /if \(document\.hidden\) \{\s*stopPolling\(\);\s*return;\s*\}/);
-  assert.match(membershipPage, /void checkPaymentStatus\(\);\s*startPolling\(\);/);
-  assert.match(membershipPage, /window\.setInterval\(\(\) => void checkPaymentStatus\(\), 3000\);/);
+  assert.match(hookSource, /if \(!document\.hidden\) startPolling\(\);/);
+  assert.match(hookSource, /document\.addEventListener\("visibilitychange", onVisibilityChange\);/);
+  assert.match(hookSource, /if \(document\.hidden\) \{\s*stopPolling\(\);\s*return;\s*\}/);
+  assert.match(hookSource, /void checkPaymentStatus\(\);\s*startPolling\(\);/);
+  assert.match(hookSource, /window\.setInterval\(\(\) => void checkPaymentStatus\(\), 3000\);/);
 });
 
 test("polling cleanup releases both the timer and the visibility listener", () => {
-  assert.match(membershipPage, /if \(timer\) window\.clearInterval\(timer\);/);
-  assert.match(membershipPage, /stopPolling\(\);\s*document\.removeEventListener\("visibilitychange", onVisibilityChange\);/);
+  assert.match(hookSource, /if \(timer\) window\.clearInterval\(timer\);/);
+  assert.match(hookSource, /stopPolling\(\);\s*document\.removeEventListener\("visibilitychange", onVisibilityChange\);/);
 });
diff --git a/frontend/tests/membership-page.test.ts b/frontend/tests/membership-page.test.ts
index 81d83431..d1c8c8d5 100644
--- a/frontend/tests/membership-page.test.ts
+++ b/frontend/tests/membership-page.test.ts
@@ -1,5 +1,5 @@
 import assert from "node:assert/strict";
-import { existsSync, readFileSync } from "node:fs";
+import { readFileSync } from "node:fs";
 import test from "node:test";
 
 import { cssDeclarations } from "./css-contract-test-support.ts";
@@ -9,86 +9,10 @@ const projectFile = (path: string) => new URL(`../${path}`, import.meta.url);
 const readProjectFile = (path: string) => readFileSync(projectFile(path), "utf8");
 const globalStyles = readProjectFile("src/app/globals.css");
 const onboardingPaywallSource = readProjectFile("src/components/onboarding-redeem-paywall.tsx");
-const pageSource = readProjectFile("src/app/membership/page.tsx");
-const ordersPageSource = readProjectFile("src/app/membership/orders/page.tsx");
-const tabsSource = readProjectFile("src/components/ui/tabs.tsx");
 const membershipLib = readProjectFile("src/lib/membership.ts");
 
 const cssBlock = (selector: string) => cssDeclarations(selector, globalStyles);
 
-test("membership page exists as a client component with a loading boundary", () => {
-  assert.equal(existsSync(projectFile("src/app/membership/page.tsx")), true);
-  assert.match(pageSource, /"use client"/);
-  assert.match(pageSource, /<Suspense/);
-  assert.match(pageSource, /membership-loading/);
-});
-
-test("membership page loads account, packages and redeem endpoints without fetching orders", () => {
-  assert.match(pageSource, /fetch\("\/api\/account"/);
-  assert.match(pageSource, /fetch\("\/api\/payment\/packages"/);
-  assert.doesNotMatch(pageSource, /\/api\/payment\/orders|fetchOrders/);
-  assert.match(pageSource, /fetch\("\/api\/payment\/epay\/create"/);
-  assert.match(pageSource, /fetch\(`\/api\/payment\/epay\/status\?orderNo=/);
-  assert.match(pageSource, /fetch\("\/api\/redeem"/);
-});
-
-test("creates orders with productId and opens the signed cashier URL safely", () => {
-  assert.match(pageSource, /JSON\.stringify\(\{ productId \}\)/);
-  assert.match(pageSource, /window\.open\(payload\.payUrl, "_blank", "noopener,noreferrer"\)/);
-  assert.doesNotMatch(pageSource, /document\.createElement\("form"\)|payload\.submitUrl|payload\.fields/);
-  assert.match(pageSource, /if \(!paymentOrder \|\| paymentOrder\.status !== "pending"\) return;/);
-});
-
-test("terminal payment failures stop polling and offer re-pay with the same product", () => {
-  assert.match(pageSource, /\["failed", "closed", "cancelled"\]\.includes\(payload\.status\)/);
-  assert.match(pageSource, /payload\.grantStatus === "failed"/);
-  assert.match(pageSource, /status !== "pending"\) return;/);
-  assert.match(pageSource, /status: paid \? "paid" : failed \? "failed" : "pending"/);
-  assert.match(pageSource, /paymentOrder\.status === "failed"/);
-  assert.match(pageSource, /支付失败/);
-  assert.match(pageSource, /createPayment\(paymentOrder\.productId\)/);
-  assert.match(pageSource, /重新支付/);
-});
-
-test("failed status beats paid and non-terminal statuses keep polling", () => {
-  assert.match(pageSource, /const paid = payload\.status === "paid" && !failed;/);
-  assert.match(pageSource, /status: paid \? "paid" : failed \? "failed" : "pending"/);
-  assert.match(pageSource, /if \(paid\) \{/);
-  assert.doesNotMatch(pageSource, /status: paid \? "paid" : failed \? "failed" : payload\.status/);
-  assert.doesNotMatch(pageSource, /payload\.status === "paid" \? "paid"/);
-});
-
-test("polls order status and refreshes only the balance on paid", () => {
-  assert.match(pageSource, /const paid = payload\.status === "paid" && !failed;/);
-  assert.match(pageSource, /if \(paid\) \{/);
-  assert.match(pageSource, /status: paid \? "paid" : failed \? "failed" : "pending"/);
-  assert.match(pageSource, /fetchAccountData\(\)/);
-  assert.match(pageSource, /notifyBalanceChanged\(refreshed\?\.credits/);
-  assert.doesNotMatch(pageSource, /fetchOrders/);
-});
-
-test("keeps the selected product and allows retry on payment failure", () => {
-  assert.match(pageSource, /setSelectedProductId\(productId\)/);
-  assert.match(pageSource, /setPaymentError\(caught instanceof Error \? caught\.message : "创建支付失败"\)/);
-  assert.match(pageSource, /finally \{\s*setPayingProductId\(null\);/);
-  assert.match(pageSource, /if \(payingProductId\) return;/);
-  assert.match(pageSource, /createPayment\(selectedProductId\)/);
-  assert.match(pageSource, /membership-payment-error/);
-  assert.doesNotMatch(pageSource, /setPayingProductId\(null\)[\s\S]{0,40}setPaymentOrder\(null\)/);
-});
-
-test("membership never opens the redeem dialog from the URL", () => {
-  assert.match(pageSource, /const \[redeemOpen, setRedeemOpen\] = useState\(false\)/);
-  assert.doesNotMatch(pageSource, /searchParams\.get\("redeem"\)|searchParams\.delete\("redeem"\)|redeem:\s*true/);
-  assert.match(pageSource, /onClick=\{\(\) => setRedeemOpen\(true\)\}/);
-});
-
-test("returning prefers history.back and keeps browser back semantics", () => {
-  assert.match(pageSource, /window\.history\.back\(\)/);
-  assert.match(pageSource, /window\.location\.assign\("\/"\)/);
-  assert.match(pageSource, /onClick=\{goBack\}/);
-});
-
 test("home refreshes the account whenever it is shown again", () => {
   const pageShow = homePageSource.slice(
     homePageSource.indexOf("const onPageShow"),
@@ -109,139 +33,6 @@ test("homepage composer does not render notice copy", () => {
   assert.doesNotMatch(homePageSource, /composer-notice/);
 });
 
-test("trims the redeem code without changing its case", () => {
-  assert.match(pageSource, /const code = redeemCode\.trim\(\);/);
-  assert.doesNotMatch(pageSource, /redeemCode\.(?:toUpperCase|toLowerCase)\(\)/);
-  assert.doesNotMatch(pageSource, /normalizeRedeemCode/);
-  assert.match(pageSource, /JSON\.stringify\(\{ code \}\)/);
-});
-
-test("redeem success reports awarded credits, latest balance and completes", () => {
-  assert.match(pageSource, /awardedCredits/);
-  assert.match(pageSource, /本次到账/);
-  assert.match(pageSource, /最新余额/);
-  assert.match(pageSource, /setRedeemDone\(true\)/);
-  assert.match(pageSource, /setRedeemCode\(""\)/);
-  assert.match(pageSource, /const refreshed = await fetchAccountData\(\);/);
-  assert.match(pageSource, /notifyBalanceChanged\(refreshed\?\.credits \?\? result\.credits\)/);
-  assert.match(pageSource, /完成/);
-  assert.match(pageSource, /onClick=\{closeRedeem\}/);
-});
-
-test("supports plan hints without rendering source notices", () => {
-  assert.match(pageSource, /searchParams\.get\("plan"\)/);
-  assert.doesNotMatch(pageSource, /searchParams\.get\("source"\)|membershipSourceNotice|sourceNotice/);
-  assert.doesNotMatch(pageSource, /membership-notice|已为你定位到/);
-  assert.doesNotMatch(globalStyles, /\.membership-notice/);
-  assert.doesNotMatch(pageSource, /体验 \/ 月卡 \/ 年卡见下方套餐|用于咨询与生时校正等服务/);
-});
-
-test("membership section shows fixed trial/monthly/yearly plans with monthly recommended", () => {
-  assert.match(pageSource, /selectMembershipPlans\(paymentPackages\)/);
-  assert.match(pageSource, /planAlias\(product\)/);
-  assert.match(pageSource, /alias === "monthly"/);
-  assert.match(pageSource, /membership-plan-card--recommended/);
-  assert.match(membershipLib, /trial: "体验"/);
-  assert.match(membershipLib, /monthly: "月卡"/);
-  assert.match(membershipLib, /yearly: "年卡"/);
-  assert.match(pageSource, /会员套餐/);
-  assert.match(pageSource, /点数充值/);
-  assert.match(pageSource, /id="membership-plans-tab"/);
-  assert.match(pageSource, /id="membership-credits-tab"/);
-  assert.match(pageSource, /<Tabs defaultValue="membership">/);
-  assert.match(pageSource, /<TabsTrigger[^>]*value="membership"/);
-  assert.match(pageSource, /<TabsTrigger[^>]*value="credits"/);
-  assert.match(pageSource, /<TabsContent[^>]*value="membership"/);
-  assert.match(pageSource, /<TabsContent[^>]*value="credits"/);
-});
-
-test("plan cards carry price, duration, audience, entitlements, purchase and rules", () => {
-  assert.match(pageSource, /formatPrice\(product\.priceCents, product\.currency\)/);
-  assert.match(pageSource, /formatProductDuration\(product\)/);
-  assert.match(pageSource, /productAudience\(product\)/);
-  assert.match(pageSource, /entitlementLabel\(entitlement\)/);
-  assert.match(pageSource, /<details className="membership-rules">/);
-  assert.match(pageSource, /<summary>详细规则<\/summary>/);
-  // 原值: className={recommended ? "button-primary membership-buy" : "button-secondary membership-buy"}
-  // 新值: Button className="membership-buy" + variant default|outline
-  // 原因: 会员购买走共用 Button；登录/引导仍用 .button-primary 类（page.tsx 冻结与破坏确认合同）
-  assert.match(pageSource, /import \{ Button \} from "@\/components\/ui\/button"/);
-  assert.match(pageSource, /className="membership-buy"/);
-  assert.match(pageSource, /variant=\{recommended \? "default" : "outline"\}/);
-});
-
-test("renewal semantics map the active subscription to the matching plan", () => {
-  assert.match(pageSource, /const currentProductCode = activeSubscription\?\.status === "active"/);
-  assert.match(pageSource, /currentProductCode === product\.code/);
-  assert.match(pageSource, /isCurrent \? "续费" : product\.productType === "trial" \? "立即开通" : "立即购买"/);
-  assert.match(pageSource, /当前套餐/);
-});
-
-test("membership and credits use the local Base UI tabs wrapper without manual segment state", () => {
-  assert.match(pageSource, /import \{ Tabs, TabsContent, TabsList, TabsTrigger \} from "@\/components\/ui\/tabs"/);
-  assert.doesNotMatch(pageSource, /activeSegment|setActiveSegment/);
-  assert.match(tabsSource, /import \{ Tabs as TabsPrimitive \} from "@base-ui\/react\/tabs"/);
-  assert.match(tabsSource, /TabsPrimitive\.Root/);
-  assert.match(tabsSource, /TabsPrimitive\.List/);
-  assert.match(tabsSource, /TabsPrimitive\.Tab/);
-  assert.match(tabsSource, /TabsPrimitive\.Panel/);
-  assert.match(pageSource, /const plans = selectMembershipPlans\(paymentPackages\);/);
-  assert.match(pageSource, /const creditPacks = paymentPackages\.filter\(\(product\) => product\.productType === "credit_pack"\);/);
-  assert.match(pageSource, /className="membership-plan-grid"/);
-  assert.match(pageSource, /className="membership-credit-grid"/);
-  assert.doesNotMatch(pageSource, /creditPacks\.map[\.\s\S]{0,120}membership-plan-card/);
-});
-
-test("plan param forces the membership segment and highlights the matching card", () => {
-  assert.match(pageSource, /const highlighted = alias === highlightedPlan;/);
-  assert.match(pageSource, /membership-plan-card--highlighted/);
-  assert.match(pageSource, /aria-current=\{highlighted \? "true" : undefined\}/);
-  assert.match(pageSource, /highlightedCardRef/);
-  assert.match(pageSource, /scrollIntoView\(\{ behavior: "smooth", block: "center" \}\)/);
-  assert.match(pageSource, /card\.focus\(\{ preventScroll: true \}\)/);
-  assert.doesNotMatch(pageSource, /setActiveSegment\(\"credits\"\)[\s\S]{0,80}highlightedPlan/);
-});
-
-test("page main title is 套餐与会员", () => {
-  assert.match(pageSource, /<h1 className="membership-title">套餐与会员<\/h1>/);
-  assert.doesNotMatch(pageSource, /<h1 className="membership-title">会员与点数<\/h1>/);
-});
-
-test("payment errors sit in a common position above the visible segment", () => {
-  const errorAt = pageSource.indexOf("membership-payment-error");
-  const plansPanelAt = pageSource.indexOf('<TabsContent className="membership-panel" value="membership">');
-  assert.notEqual(errorAt, -1, "missing common payment error surface");
-  assert.notEqual(plansPanelAt, -1, "missing plans panel");
-  assert.ok(errorAt < plansPanelAt, "payment error must render before the segment panels");
-  assert.doesNotMatch(pageSource, /<p className="form-error" role="alert">\{paymentError\}<\/p>/);
-});
-
-test("summary stays on the membership page and links to the independent orders page", () => {
-  assert.match(pageSource, /会员状态/);
-  assert.match(pageSource, /当前余额/);
-  assert.match(pageSource, /membership-summary-card/);
-  assert.match(pageSource, /href="\/membership\/orders"[^>]*>订单记录<\/Link>/);
-  assert.doesNotMatch(pageSource, /membership-order-row|orderStatusLabel/);
-});
-
-test("independent orders page preserves loading, empty, error, refresh and list states", () => {
-  assert.equal(existsSync(projectFile("src/app/membership/orders/page.tsx")), true);
-  assert.match(ordersPageSource, /fetch\("\/api\/payment\/orders"/);
-  assert.match(ordersPageSource, /response\.status === 401[\s\S]*window\.location\.assign\("\/login"\)/);
-  assert.match(ordersPageSource, /正在加载订单…/);
-  assert.match(ordersPageSource, /订单记录暂时不可用，请稍后刷新。/);
-  assert.match(ordersPageSource, /暂无订单。/);
-  assert.match(ordersPageSource, /onClick=\{\(\) => void fetchOrders\(\)\}>刷新/);
-  assert.match(ordersPageSource, /membership-order-row/);
-  assert.match(ordersPageSource, /orderStatusLabel\(order\.status\)/);
-  assert.match(ordersPageSource, /formatPrice\(order\.moneyCents, order\.currency\)/);
-  assert.match(membershipLib, /paid: "已支付"/);
-});
-
-test("orders return replaces its history entry so membership back cannot reopen orders", () => {
-  assert.match(ordersPageSource, /<Link className="membership-back" href="\/membership" replace/);
-});
-
 test("finished starter questions open the redeem paywall only for accounts without access", () => {
   assert.match(homePageSource, /!starterHomeVisible/);
   assert.match(homePageSource, /account\.credits > 0/);
@@ -251,12 +42,16 @@ test("finished starter questions open the redeem paywall only for accounts witho
   assert.match(onboardingPaywallSource, /入门问题已经准备好/);
   assert.match(onboardingPaywallSource, /fetch\("\/api\/redeem"/);
   assert.match(onboardingPaywallSource, /兑换并继续/);
-  assert.match(onboardingPaywallSource, /membershipHref\("onboarding-paywall"\)/);
+  // 原值: membershipHref("onboarding-paywall") 的 Link
+  // 新值: onOpenBilling 按钮，关掉付费墙后打开设置弹窗 billing 格
+  // 原因: 七处入口改回调，对话状态不丢
+  assert.match(onboardingPaywallSource, /onOpenBilling/);
+  assert.match(onboardingPaywallSource, /查看套餐与会员/);
+  assert.doesNotMatch(onboardingPaywallSource, /membershipHref\("onboarding-paywall"\)/);
+  assert.match(homePageSource, /openAccountDialog\("billing", \{ source: "onboarding-paywall" \}\)/);
 });
 
 test("the onboarding paywall reuses the shared account dialog header", () => {
-  // The close button only sits beside the title when the header carries the shared
-  // flex class. A bespoke wrapper leaves it stacked under the heading on mobile.
   assert.match(onboardingPaywallSource, /<header className="account-modal-header">/);
   assert.match(onboardingPaywallSource, /<\/header>/);
   assert.doesNotMatch(onboardingPaywallSource, /className="dialog-header"/);
@@ -266,8 +61,6 @@ test("the onboarding paywall reuses the shared account dialog header", () => {
 });
 
 test("every static class the onboarding paywall renders has a rule in globals.css", () => {
-  // Guards the whole defect class: a class name with no matching selector renders
-  // as an unstyled block and silently breaks the layout.
   const used = new Set(
     [...onboardingPaywallSource.matchAll(/className="([^"{}]+)"/g)]
       .flatMap((hit) => hit[1].split(/\s+/))
@@ -280,40 +73,9 @@ test("every static class the onboarding paywall renders has a rule in globals.cs
   assert.deepEqual(undefinedClasses, []);
 });
 
-test("payment and plan copy points users to the separate orders page", () => {
-  assert.match(pageSource, /本页会自动检查支付状态并刷新余额。/);
-  assert.match(pageSource, /「订单记录」页面/);
-  assert.doesNotMatch(pageSource, /本页会自动刷新余额与订单记录|本页「订单记录」|用于咨询、报告与生时校正等服务/);
-});
-
 test("membership hero stays content-led without decorative orbit artwork", () => {
-  assert.doesNotMatch(pageSource, /membership-celestial-visual|membership-orbit|membership-celestial-mark/);
   assert.doesNotMatch(globalStyles, /membership-celestial-visual|membership-orbit|membership-celestial-mark/);
-  assert.match(cssBlock(".membership-hero"), /background:\s*var\(--color-canvas-soft\)/);
-});
-
-test("redeem modal surface contains title, balance, input, redeem, rules and close", () => {
-  assert.match(pageSource, /id="membership-redeem-title"/);
-  assert.match(pageSource, /<h2 id="membership-redeem-title">兑换点数<\/h2>/);
-  assert.match(pageSource, /className="redeem-balance"/);
-  assert.match(pageSource, /id="membership-redeem-code"/);
-  assert.match(pageSource, /立即兑换/);
-  assert.match(pageSource, /<summary>兑换规则<\/summary>/);
-  assert.match(pageSource, /aria-label="关闭"/);
-});
-
-test("redeem modal reuses the existing account dialog classes", () => {
-  assert.match(pageSource, /className="account-modal-overlay"/);
-  assert.match(pageSource, /className="account-modal membership-redeem"/);
-  assert.match(pageSource, /className="account-modal-header"/);
-  assert.match(pageSource, /className="dialog-close"/);
-  assert.match(pageSource, /className="redeem-form"/);
-  assert.match(pageSource, /className="form-error" role="alert"/);
-  assert.match(pageSource, /className="form-success" role="status"/);
-  // 原值: className="button-primary"
-  // 新值: <Button type="submit">
-  // 原因: 兑换提交改走共用 Button，不再复用登录页的 .button-primary 类名
-  assert.match(pageSource, /<Button type="submit"/);
+  assert.doesNotMatch(globalStyles, /\.membership-hero|\.membership-page|\.membership-shell/);
 });
 
 test("desktop uses three columns, tablet two and mobile one with monthly first", () => {
@@ -335,23 +97,27 @@ test("segment tabs use a quiet underline treatment", () => {
 });
 
 test("membership shell is capped within the 1120-1200 range", () => {
-  assert.match(cssBlock(".membership-shell"), /width:\s*min\(1160px, 100%\)/);
-  assert.match(cssBlock(".membership-shell"), /margin:\s*0 auto/);
+  // 原值: .membership-shell width min(1160px, 100%)
+  // 新值: 页面壳删除；账单装进 .settings-modal 固定尺寸
+  // 原因: 删除 /membership 整页
+  assert.doesNotMatch(globalStyles, /\.membership-shell/);
+  assert.match(cssBlock(".settings-modal"), /width:\s*min\(100vw - 32px, 880px\)/);
+  assert.match(cssBlock(".settings-modal"), /height:\s*min\(84dvh, 640px\)/);
 });
 
 test("membership page reuses the warm parchment / terracotta tokens", () => {
-  assert.match(cssBlock(".membership-hero"), /background:\s*var\(--color-canvas-soft\)/);
-  assert.doesNotMatch(cssBlock(".membership-hero"), /linear-gradient/);
-  assert.doesNotMatch(cssBlock(".membership-hero"), /#fbfaf7|#f5f1eb/);
   assert.match(cssBlock(".membership-plan-card--current"), /border-color:\s*var\(--color-action\)/);
-  assert.match(cssBlock(".membership-title"), /var\(--color-ink\)/);
   assert.match(cssBlock(".membership-status"), /color:\s*var\(--color-action\)/);
   assert.doesNotMatch(globalStyles, /membership-badge--recommended/);
+  assert.doesNotMatch(globalStyles, /\.membership-title|\.membership-hero/);
 });
 
 test("membership page scrolls within a fixed viewport and cards stay flat", () => {
-  assert.match(cssBlock(".membership-page"), /height:\s*100dvh/);
-  assert.match(cssBlock(".membership-page"), /overflow-y:\s*auto/);
+  // 原值: .membership-page height 100dvh overflow-y auto
+  // 新值: 内容区 .settings-dialog-content 独立滚动；卡片仍无阴影
+  // 原因: 固定尺寸设置弹窗
+  assert.doesNotMatch(globalStyles, /\.membership-page/);
+  assert.match(cssBlock(".settings-dialog-content"), /overflow-y:\s*auto/);
   assert.match(cssBlock(".membership-plan-card, .membership-credit-card"), /box-shadow:\s*none/);
   assert.match(cssBlock(".membership-plan-card--recommended"), /background:\s*var\(--color-canvas\)/);
   assert.doesNotMatch(globalStyles, /membership-plan-card--recommended::before/);
@@ -366,6 +132,11 @@ test("membership lib keeps helpers and the balance sync contract", () => {
   assert.match(membershipLib, /export function formatPrice\(priceCents: number, currency = "CNY"\)/);
   assert.match(membershipLib, /export function orderStatusLabel/);
   assert.match(membershipLib, /export function planDisplayLabel/);
-  assert.match(membershipLib, /export function membershipHref\(source: string, options: \{ plan\?: MembershipPlanAlias \} = \{\}\)/);
+  // 原值: options: { plan?: MembershipPlanAlias } = {}，href /membership
+  // 新值: 可带 tab；生成 /?settings=billing&source=…
+  // 原因: 深链接与重定向，不再指向已删页面
+  assert.match(membershipLib, /export function membershipHref\(/);
+  assert.match(membershipLib, /settings: "billing"/);
   assert.doesNotMatch(membershipLib, /params\.set\("redeem"/);
+  assert.doesNotMatch(membershipLib, /"\/membership/);
 });
diff --git a/frontend/tests/profile-panel.test.ts b/frontend/tests/profile-panel.test.ts
new file mode 100644
index 00000000..7aa6f4cf
--- /dev/null
+++ b/frontend/tests/profile-panel.test.ts
@@ -0,0 +1,14 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import test from "node:test";
+
+const panel = readFileSync(new URL("../src/components/profile-panel.tsx", import.meta.url), "utf8");
+
+test("the profile pane keeps avatar palettes and drops the duplicate chart-library button", () => {
+  assert.doesNotMatch(panel, /管理星盘资料/);
+  assert.match(panel, /role="radiogroup"/);
+  assert.match(panel, /换一个形象/);
+  assert.match(panel, /size=\{48\}/);
+  assert.match(panel, /账户信息/);
+  assert.match(panel, /登录邮箱/);
+});
diff --git a/frontend/tests/rectification-surface-contract.test.ts b/frontend/tests/rectification-surface-contract.test.ts
index b6e7d27e..3bd88e90 100644
--- a/frontend/tests/rectification-surface-contract.test.ts
+++ b/frontend/tests/rectification-surface-contract.test.ts
@@ -124,7 +124,8 @@ test("stopping keeps what streamed and says so; a 402 explains itself before lea
   assert.match(chat, /stoppedNotice=\{message\.stopped \? RECTIFICATION_STOPPED_NOTICE : undefined\}/);
   assert.doesNotMatch(chat, /if \(raw\.trim\(\)\) setError\(RECTIFICATION_STOPPED_NOTICE\)/);
   assert.match(chat, /inputDisabled=\{readonly\}/);
-  assert.match(chat, /setError\(RECTIFICATION_INSUFFICIENT_CREDITS_NOTICE\);[\s\S]*window\.setTimeout\(\(\) => \{\s*window\.location\.assign\(membershipHref\("rectification"\)\);\s*\}, RECTIFICATION_INSUFFICIENT_CREDITS_REDIRECT_MS\);/);
+  assert.match(chat, /setError\(RECTIFICATION_INSUFFICIENT_CREDITS_NOTICE\);[\s\S]*onOpenBilling\?\.\(\{ source: "rectification" \}\);/);
+  assert.doesNotMatch(chat, /window\.location\.assign\(membershipHref\("rectification"\)\)/);
 });
 
 test("the choice card confirms the tap and the board's first state shows the declared minute", () => {
diff --git a/frontend/tests/settings-mvp-contract.test.ts b/frontend/tests/settings-mvp-contract.test.ts
index ced29f46..ebd2e564 100644
--- a/frontend/tests/settings-mvp-contract.test.ts
+++ b/frontend/tests/settings-mvp-contract.test.ts
@@ -6,14 +6,6 @@ import { homeSurface as page } from "./home-surface.ts";
 const sidebar = readFileSync(new URL("../src/components/app-sidebar.tsx", import.meta.url), "utf8");
 const overlay = readFileSync(new URL("../src/components/account-dialog-overlay.tsx", import.meta.url), "utf8");
 
-function between(source: string, start: string, end: string) {
-  const startIndex = source.indexOf(start);
-  const endIndex = source.indexOf(end, startIndex + start.length);
-  assert.notEqual(startIndex, -1, `missing start marker: ${start}`);
-  assert.notEqual(endIndex, -1, `missing end marker: ${end}`);
-  return source.slice(startIndex, endIndex);
-}
-
 test("account menu exposes the four MVP settings sections", () => {
   assert.match(sidebar, /<span>个人资料<\/span>/);
   assert.match(sidebar, /<span>星盘资料<\/span>/);
@@ -23,27 +15,31 @@ test("account menu exposes the four MVP settings sections", () => {
 });
 
 test("personal profile is limited to account basics and links to chart settings", () => {
-  const profile = between(page, "    renderProfile() {", "    renderChartLibrary() {");
+  const profile = readFileSync(new URL("../src/components/profile-panel.tsx", import.meta.url), "utf8");
   assert.match(profile, /账户信息/);
   assert.match(profile, /登录邮箱/);
-  assert.match(profile, /管理星盘资料/);
+  assert.doesNotMatch(profile, /管理星盘资料/);
   assert.doesNotMatch(profile, /<ProfileFields/);
   assert.doesNotMatch(profile, /出生资料/);
 });
 
 test("the chart library owns self-profile editing and keeps other-chart save separate", () => {
   const charts = readFileSync(new URL("../src/components/chart-library-panel.tsx", import.meta.url), "utf8");
-  const personalProfile = between(page, "    renderProfile() {", "    renderChartLibrary() {");
-  assert.match(charts, /编辑本人资料/);
+  const form = readFileSync(new URL("../src/components/chart-profile-form.tsx", import.meta.url), "utf8");
+  const personalProfile = readFileSync(new URL("../src/components/profile-panel.tsx", import.meta.url), "utf8");
+  // 原值: 编辑本人资料 + setEditingSelfChart(true) + 无条件表单
+  // 新值: 列表→详情；本人详情标题「编辑本人星盘」；视图状态在面板内
+  // 原因: 决策 4，列表是列表
+  assert.match(charts, /编辑本人星盘/);
   assert.match(charts, /onSubmit=\{saveProfile\}/);
   assert.match(charts, /onSubmit=\{saveOtherChart\}/);
-  assert.match(charts, /setEditingSelfChart\(true\)/);
-  assert.match(charts, /AyanamsaPreferenceField/);
+  assert.doesNotMatch(charts, /setEditingSelfChart/);
+  assert.match(form, /AyanamsaPreferenceField/);
   assert.doesNotMatch(personalProfile, /AyanamsaPreferenceField/);
 });
 
 test("the general dialog renders the shared theme preference panel", () => {
-  assert.match(overlay, /dialog: "profile" \| "chart-library" \| "general" \| "logout"/);
+  assert.match(overlay, /dialog: "profile" \| "chart-library" \| "billing" \| "general"/);
   assert.match(overlay, /renderGeneral: \(\) => ReactNode/);
   assert.match(overlay, /return model\.renderGeneral\(\)/);
   assert.match(page, /renderGeneral\(\) \{\s*return <ThemePreferencePanel \/>;/);
diff --git a/frontend/tests/settings-url.test.ts b/frontend/tests/settings-url.test.ts
new file mode 100644
index 00000000..b2ba01c1
--- /dev/null
+++ b/frontend/tests/settings-url.test.ts
@@ -0,0 +1,38 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { parseSettingsQuery, stripSettingsQuery } from "../src/lib/settings-url.ts";
+
+test("parses a billing settings query with source, plan and tab", () => {
+  const query = parseSettingsQuery("?settings=billing&source=legacy&plan=monthly&tab=orders");
+  assert.deepEqual(query, {
+    pane: "billing",
+    source: "legacy",
+    plan: "monthly",
+    tab: "orders",
+  });
+});
+
+test("returns null when the settings pane is absent or not billing", () => {
+  assert.equal(parseSettingsQuery(""), null);
+  assert.equal(parseSettingsQuery("?c=11111111-1111-4111-8111-111111111111"), null);
+  assert.equal(parseSettingsQuery("?settings=profile"), null);
+});
+
+test("ignores unknown plan and tab aliases", () => {
+  const query = parseSettingsQuery("?settings=billing&plan=weekly&tab=invoices&source=credits");
+  assert.deepEqual(query, {
+    pane: "billing",
+    source: "credits",
+    plan: null,
+    tab: null,
+  });
+});
+
+test("strips settings fields and keeps the session query", () => {
+  assert.equal(
+    stripSettingsQuery("?settings=billing&source=legacy&c=11111111-1111-4111-8111-111111111111"),
+    "/?c=11111111-1111-4111-8111-111111111111",
+  );
+  assert.equal(stripSettingsQuery("?settings=billing&source=legacy&plan=yearly&tab=redeem"), "/");
+});
diff --git a/frontend/tests/sidebar-contract.test.ts b/frontend/tests/sidebar-contract.test.ts
index 33292cd4..261de1da 100644
--- a/frontend/tests/sidebar-contract.test.ts
+++ b/frontend/tests/sidebar-contract.test.ts
@@ -242,7 +242,7 @@ test("removes the user-facing admin entry and routes credit control to membershi
   assert.doesNotMatch(page, /account\.isAdmin && account\.adminUrl/);
   assert.match(page, /className="chat-header-actions"/);
   assert.match(page, /className="credit-button"/);
-  assert.match(page, /membershipHref\("credits"\)/);
+  assert.match(page, /openAccountDialog\("billing", \{ returnTarget: event\.currentTarget, source: "credits" \}\)/);
 });
 
 test("composes the chat page with the app sidebar shell", () => {
diff --git a/frontend/tests/starter-questions.test.ts b/frontend/tests/starter-questions.test.ts
index e348b08f..ede23dbf 100644
--- a/frontend/tests/starter-questions.test.ts
+++ b/frontend/tests/starter-questions.test.ts
@@ -168,7 +168,7 @@ test("centers the credit value with its icon", () => {
 test("routes account actions through a menu and focused dialogs", () => {
   // Given: the account surface state and entry-point handlers.
   // When: the page source is inspected for independent menu and dialog routes.
-  // Then: profile and logout stay focused dialogs; redeem leaves for /membership.
+  // Then: profile and logout stay focused dialogs; billing opens in the settings pane.
   assert.match(pageSource, /const \[accountMenuOpen, setAccountMenuOpen\] = useState\(false\)/);
   assert.match(pageSource, /const \[activeAccountDialog, setActiveAccountDialog\] = useState<AccountDialog \| null>\(null\)/);
   assert.match(pageSource, /openAccountDialog\("profile"/);
@@ -182,10 +182,12 @@ test("routes account actions through a menu and focused dialogs", () => {
 
 test("membership entries navigate without auto-opening redeem", () => {
   // Given: the account menu, credit control and insufficient-balance paths.
-  // Then: every redeem/purchase path lands on /membership with a source hint, without opening a dialog.
-  assert.match(pageSource, /membershipHref\("account-menu"\)/);
-  assert.match(pageSource, /membershipHref\("credits"\)/);
-  assert.match(pageSource, /membershipHref\("insufficient-credits"\)/);
+  // 原值: membershipHref 跳 /membership，不打开 redeem 弹窗
+  // 新值: 三处都打开 billing 分区，仍不打开独立兑换弹窗
+  // 原因: 兑换码是 billing 页签，不是独立 dialog
+  assert.match(pageSource, /openAccountDialog\("billing", \{ source: "account-menu" \}\)/);
+  assert.match(pageSource, /openAccountDialog\("billing", \{ returnTarget: event\.currentTarget, source: "credits" \}\)/);
+  assert.match(pageSource, /openAccountDialog\("billing", \{ source: "insufficient-credits" \}\)/);
   assert.doesNotMatch(pageSource, /activeAccountDialog === "redeem"/);
   assert.doesNotMatch(pageSource, /paymentEnabled|paymentPackages|paymentOrder|payingPackageId/);
   assert.doesNotMatch(pageSource, /redeemCode|redeeming|redeemError|redeemMessage/);
diff --git a/tests/test_api_server_security.py b/tests/test_api_server_security.py
index f86a962e..87038a8a 100644
--- a/tests/test_api_server_security.py
+++ b/tests/test_api_server_security.py
@@ -1591,8 +1591,6 @@ def test_capability_audit_scans_registry_and_local_sources() -> None:
         'admin/users',
         'home',
         'login',
-        'membership',
-        'membership/orders',
         'reports',
         'reports/[reportId]',
     ]